JavaScript新版本《ES6》学习笔记（从10到）

十. ES6解构赋值——数组的解构赋值

example1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
<!--这个库是用于限定输入时的数据类型，-->
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

<script type="text/javascript">
    // 传统的方式
    // let ary = [12,23,34];
    // let a = ary[0],
    //     b = ary[1],
    //     c = ary[2];
    // console.log(a, b, c);

    // 新的方式：数组解构赋值
    //解构赋值本身是ES6的语法规范，使用什么关键字来声明这些变量，是无所谓的。

    //下面三种方式都是可以的，事实上，声明与否都是可以的。。
    //没声明的时候，相当于给window增加的全局属性
    //(1)
    let [a,b,c] = [12,23,34];
    console.log(a, b, c); //12 23 34

    //(2)
    var [d,e,f] = [1,2,3];
    console.log(d,e,f); //1 2 3

    //(3)
    //相当于给window增加的全局属性
    //但是这个操作在JS的严格模式下是不允许的，因为严格模式下，
    //不允许出现非使用var/let等声明的变量。这种方式不推荐
    [g,h,i] = [8,9,10];
    console.log(g,h,i); //8 9 10

</script>

</body>
</html>

example 2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
<!--这个库是用于限定输入时的数据类型，-->
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

<script type="text/javascript">
    // 需求：把多维数组中的34/56/78获取到，并且分别赋值给A,B,C
    // let ary = [12, [23,34],[45,56,[67,78]]]
    let [,[,A],[,B,[,C]]] = [12, [23,34],[45,56,[67,78]]]
    console.log(A, B, C); //34 56 78
    //总结：多维数组的解构赋值，可以让我们快速获取到需要的结果


    //example 2
    //如果只想获取数组中的前面某几项内容，后面的结构不需要补全
    let [D] = [1,2,3,4];
    console.log(D); //1

    let [,E] = [1,2,3,4];
    console.log(E); //2

    let [,,,F] = [1,2,3,4];
    console.log(F); //undefined

    //在解构赋值中，我们可以给某一项设置默认值
    let [,,,G=0] = [12,23,34];
    console.log(G);

    //拓展运算符
    let [H, ...I] = [12,23,34,45,56];
    console.log(H, I);

    let [...J] = [1,3,5,7,9,11];
    console.log(J);
</script>
</body>
</html>

十一.

JavaScript新版本《ES6》学习笔记（从10到）

猜你喜欢