<ES6>总结：知识点

2018-06-06 本文已影响9人玉圣

一、ES6基础：

1、ES6的配置：

在WebStorm中，打开设置，按照如下，找到JavaScript：
Languages&Frameworks--->JavaScript
修改JavaScript language version

ES6配置

2、let 和 const 与 var 的使用和异同：

2.1、let和const的用途：

let 用于声明变量
const 用于声明常量

2.2、let的说明和使用：

let和const 的作用域只限于当前代码块
注：在ES5中，函数中才有作用域
let 和var的区别
var没有作用域的说
let（const）有作用域的局限

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let和const</title>
    <script>

        {
            var nameV = "张三";
            let nameL = "李四";
            console.log("作用域内：nameV=" + nameV);
            console.log("作用域内：nameL=" + nameL);
        }

        console.log("作用域外：nameV=" + nameV);
        console.log("作用域外：nameL=" + nameL);

    </script>
</head>
<body>

</body>
</html>

let和var的异同

使用let声明的变量作用域不会被提升
而使用var声明的变量，作用域会被提升
示例：

       {
           console.log(str);  //打印undefined
           var strV = "张三";
       }
     
     //等价于：
       {
           var strV;
           console.log(strV);  //未赋值，  打印undefined
           strV = "张三";
       }

let作用域不被提升

在相同的作用域下不能声明相同的变量

        {
            var strV = "张三a";
            var strV = "张三b";
            console.log(strV);  //输出张三b
        }

        {
            let strL = "李四a";
            let strL = "李四b";
            console.log(strL);  //输出张三b
        }

let声明相同变量

for循环体现let的父子作用域
而var无法体现出父子作用域

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>

    /*{
        var nameV = "张三";
        let nameL = "李四";
        console.log("作用域内：nameV=" + nameV);
        console.log("作用域内：nameL=" + nameL);
    }

    console.log("作用域外：nameV=" + nameV);
    console.log("作用域外：nameL=" + nameL);
*/
    /*        {
                console.log(str);
                var strV = "张三";
            }

            {
                var strV;
                console.log(strV);
                strV = "张三";
            }

            {
                console.log(strL);
                let strL = "李四";
            }*/

    /* {
         var strV = "张三a";
         var strV = "张三b";
         console.log(strV);  //输出张三b
     }

     {
         let strL = "李四a";
         let strL = "李四b";
         console.log(strL);  //输出张三b
     }*/

    var btns = document.querySelector("button");

    for (var i = 0; i <btns.length; i++) {
        btns[i].onclick = function () {
            alert("点击了第" + (i+1) + "按钮");   //结果都是弹出点击了第5按钮
        };
    }


    //闭包解决异步问题
    for (var j = 0; j < btns.length; j++) {
        (function (i) {
            btns[i].onclick = function () {
                alert("点击了第" + (i+1) + "按钮");   //结果是弹出对应点击的按钮
            };
        })(i);
    }

    for (let m = 0; m < btns.length; m++) {
        btns[m].onclick = function () {
            alert("点击了第" + (m+1) + "按钮");   //结果是弹出对应点击的按钮
        };
    }


</script>

    for (let i = 0; i < 5; i++) {
        console.log(i); //循环打印1 2 3 4 5
    }

    for (let i = 0; i < 5; i++) {
        let i = 20;
        console.log(i); //打印5次20
    }

const 声明的常量必须赋值：

    {
        const name;  //编译时就已报错
        name = "王五";
        console.log(name);
    }

    {
        const name = "王五";
        name = "赵六";
        console.log(name);  //报错
    }

重复赋值问题

注意：如果是定义对象常量，则对象中的属性值可以被修改（重新声明赋值）

    const obj = {name: "王五"};
    console.log(obj);
    obj.name = "赵六";
    console.log(obj);

对象常量重复赋值

3、let的解构赋值：

3.1、基本语法：

let [variable1, variable2, variable3] = [value1, value2, value3];

        <script>
            let name = "zs", age = 20, sex = "男";
            console.log("基本用法：" + name, age, sex);

            let [name1, age1, sex1] = ["zs", 20, "男"];
            console.log("基本用法：" + name1, age1, sex1);

            let {name2, age2, sex2, friends}
                = {name2:"zs", age2:20, sex2:"男", friends:["ls", "ww", "zl"]};
            console.log("对象类型：" + name2, age2, sex2, friends);

            let [arr1, [arr2, [arr3, arr4]]]
                = [1,
                   [2,
                      [3, 4]
                   ]
                  ];
            console.log("数组类型：" + arr1, arr2, arr3, arr4);

            let [a, b, c, d] = "ABCD";
            console.log("基本数据类型：" + a, b, c, d);
        </script>

打印结果

4、Symbol的使用

4.1、Symbol的作用：

解决对象中的命名冲突（覆盖）问题
即如果在一个对象中，使用了两个相同的属性名，后设置的值就会覆盖之前的值
如果需要同名属性，设置不同值，则可以使用Symbol

示例：

    <script>
        let obj = {};
        obj.name = "zs";
        obj.name = "ls";

        obj[Symbol("name")] = "zs";
        obj[Symbol("name")] = "ls";
        console.log(obj);  //{name: "ls", Symbol(name): "zs", Symbol(name): "ls"}
    </script>

5、延展操作符

5.1、用法：

使用 ...param 可以将任何数据的整体拆解（展开）成一个一个小部分

<script>
    let str = "hello world!";
    let strArr = [...str];
    console.log(strArr);  //["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
</script>

5.2、用途：

在上下级（或组件间）做数据的传递【属性的批量赋值】

<span style="font-family:Arial;">var props={};
    props.name='jack'
    props.age=34
    var component=<Component {...props}/>
</span>

<span style="font-family:'KaiTi_GB2312';">
    var props={name:'jack'};
    var component=<Component {...props} name={'rose'}/>
    console.log(component.foo.name);//rose
</span>

数组中的去重

<script>
    let arr1 = [1, 2, 5, "zs", 5, 2];
    let set1 = new Set(arr1);
    console.log(set1);  //Set(4) {1, 2, 5, "zs"}
    let arr2 = [...set1];
    console.log(arr2);  // [1, 2, 5, "zs"]
</script>

<ES6>总结：知识点

一、ES6基础：

1、ES6的配置：

2、let 和 const 与 var 的使用和异同：

2.1、let和const的用途：

2.2、let的说明和使用：

3、let的解构赋值：

3.1、基本语法：

4、Symbol的使用

4.1、Symbol的作用：

5、延展操作符

5.1、用法：

5.2、用途：

猜你喜欢

热点阅读