脚本宝典收集整理的这篇文章主要介绍了ES6学习笔记（第一讲），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

    <script src="https://GOOGLE.github.io/traceur-compiler/bin/traceur.js"></script>
    <script src="https://google.github.io/traceur-compiler/bin/browserSystem.js"></script>
    <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
    <script type="module">  
        //es6 code
    </script>  

    <script>
        {
            let a = 10;
            console.log(a);
        }
        console.log(a);
    </script>

<script>
    const a = ['apple'];
    a.push('banana');
    const b = {name:'linqian'};
    b.name = 'qianqian';
    console.log(a);
    console.log(b);
</script>

    <script>
        let arr = ['apple','banana','pear'];
        let [a,b,c] = arr;
        console.log(a,b,c);
    </script>

<script>
    let json1 = {dessert:'cake',fruit:'apple'};
    let {dessert:num1,fruit:num2} = json1;
    let json2 = {a:12,b:5,c:100};
    let {b,a,c} = json2;
    console.log(num1,num2);
    console.log(a,b,c);
</script>

    <script>
        let dessert = 'cake';
        let fruit = 'apple';
        let result = `今天的早餐是${dessert}和${fruit}！`;
        console.log(result);
    </script>

1. A.startsWith(B) 可以用于判断字符串A是否以字符串B开始。
2. A.endsWith(B) 可以用于判断字符串A是否以字符串B结束。
3. A.includes(B) 可以用于判断字符串A是否包含字符串B。
@H_360_364@

这三种方法返回的均为布尔值。示例代码如下所示：

<script>
    let dessert = 'cake';
    let fruit = 'apple';
    let result = `今天的早餐是${dessert}和${fruit}！`;
    console.log(result.startsWith('今天'));
    console.log(result.endsWith('！'));
    console.log(result.includes('cake'));
</script>

输出均为'true'。

6、...操作符

...是ES6当中新增的一个操作符，可以叫做sPRead（展开）或者rest（剩余）操作符，具体这个操作符是什么意思，取决于怎么使用。

6.1、...作为spread展开操作符：

我们将...操作符放在一个数组名的前面，表示对这个数组进行展开，得到数组当中的值。如我们可以使用let arr2 = [...arr];来对数组arr来进行复制操作并赋值给变量arr2。示例代码如下所示：

<script>
    let arr = ['apple','banana'];
    let food = ['pear',...arr];
    console.log(...arr);
    console.log(food);
</script>

其输出结果为apple banana和["pear","apple","banana"]。

6.2、...作为rest剩余操作符

剩余操作符一般会用在函数的形参列表当中。如果声明一个函数时，想让该函数支持更多的参数，并且参数的数量不受限制，则可以使用剩余操作符。比如我们在一个函数声明的形参列表的最后加上...food，则代表传递给该函数的实参，除了按顺序赋值给对应的形参之外，剩余的参数都放在food这个数组当中。示例代码如下所示：

function breakfast(dessert,drink,...fruits){ console.log(dessert,drink,fruits); console.log(dessert,drink,...fruits); }; breakfast('cake','tea','apple','banana'); " title="" data-original-title="复制">

    <script>
        function breakfast(dessert,drink,...fruits){
            console.log(dessert,drink,fruits);
            console.log(dessert,drink,...fruits);
        };
        breakfast('cake','tea','apple','banana');
    </script>

其输出结果为cake tea ["apple","banana"]和cake tea apple banana。

7、tagged-templates（带标签的模板字符串）

我们可以在模板字符串的前面加上一个标签，使用这个标签可以去处理模板字符串里的字符和插入的一些值。标签函数当中默认接收两个参数strings和...values，其中strings和values均为数组，该模板字符串当中被${变量}所打断分割的字符串，按先后顺序出现在strings这个数组当中；该模板字符串当中被${}包裹的变量值，按先后顺序出现在values这个数组当中。示例代码如下所示：

function breakfast(strings,...values){ console.log(strings); console.log(values); }; // 声明定义该标签函数 breakfast`今天的早餐是${dessert}和${fruit}!`; // 执行调用标签函数 " title="" data-original-title="复制">

    <script>
        let dessert = 'cake';
        let fruit = 'apple';
        function breakfast(strings,...values){
            console.log(strings);
            console.log(values);
        };
        // 声明定义该标签函数
        breakfast`今天的早餐是${dessert}和${fruit}!`;
        // 执行调用标签函数
    </script>

输出结果为["今天的早餐是","和","!"]和["cake","apple"]。

8、default parameter values（函数参数的默认值）

在ES6当中我们可以给定义的函数所接收的参数设置默认的值。即我们在声明一个函数时，给其形参设置默认的值。我们在调用该函数时，如果没有传入实参，就会使用这些参数默认的值。示例代码如下所示：

function breakfast(dessert='cake',drink='tea'){ console.log(dessert,drink); }; breakfast(); " title="" data-original-title="复制">

    <script>
        function breakfast(dessert='cake',drink='tea'){
            console.log(dessert,drink);
        };
        breakfast();
    </script>

输出结果为cake tea。

9、arrow functions（箭头函数）

ES6当中箭头函数的语法形式为：let 自定义函数名 = (形参列表)=>{函数体};。使用箭头函数的两个注意点为：

1. 箭头函数体内部的this，不再指向事件对象，在浏览器环境下指向window对象。
2. 箭头函数体内部的arguments对象失效，不再代表函数的实参列表数组。

示例代码如下所示：

VAR a = 3; var json1 = { a:1, b:2, show:function(){ console.log(this.a); } }; var json2 = { a:1, b:2, show:()=>{ console.log(this.a); } }; json1.show(); json2.show(); " title="" data-original-title="复制">

    <script>
        var a = 3;
        var json1 = {
            a:1,
            b:2,
            show:function(){
                console.log(this.a);
            }
        };
        var json2 = {
            a:1,
            b:2,
            show:()=>{
                console.log(this.a);
            }
        };
        json1.show();
        json2.show();
    </script>

输出结果为1和3。

10、Map 对象

Map对象和json对象相似，都是一种key-value的形式，但使用方法上还是与json有区别，Map对象是为了配合for-of循环的使用而生的。

1. 声明一个Map对象。 let map = new Map();
2. 给Map对象设置对应的key-value值。语法格式为map.set('key','value');如map.set('a','apple');
3. 获取Map对象当中某个指定的属性值。语法格式为map.get('key');如map.get('a');。
4. 删除Map对象当中某一组key-value值。语法格式为map.delete('key');如map.delete('a');。
5. 查看Map对象当中键值对的个数。语法格式为map.size;。
6. 判断Map对象当中是否有某个属性。语法格式为map.has('key');如map.has('a');返回结果为布尔值。
7. 清空整个Map对象。语法格式为map.clear();。

11、Set 对象

Set对象意为一堆东西的集合，类似与数组，但是与数组不同之处在于Set当中不能有重复的内容。

1. 创建一个Set对象 let set = new Set();
2. 给Set对象增加项目（若增加的是set当中已有的项目，则无效果）。语法格式为set.add('value');。
3. 从Set对象当中删除某个项目。语法格式为set.delete('value');。
4. 查看Set对象当中项目的个数。语法格式为set.size;。
5. 判断Set对象当中是否包含某个项目。语法格式为set.has('value');。返回结果为布尔值。
6. 清空Set对象当中的项目。语法格式为set.clear();。

12、for...of 循环

ES6当中新增的for...of循环可以用于循环数组或Map对象，但不能用于循环json对象。
使用for...of循环数组的示例代码如下所示：

    <script>
        let arr = ['a','b','c'];
        //默认情况下只循环数组当中的值
        let arr1 = [];
        for(let value of arr){
            arr1.push(value);
        };
        //给数组arr加上方法.keys(),使之只循环数组当中的索引值
        let arr2 = [];
        for(let key of arr.keys()){
            arr2.push(key);
        };
        //给数组arr加上方法.entries(),使之同时循环数组当中的索引和值
        let arr3 = [];
        for(let some of arr.entries()){
            arr3.push(some);
        };
        //查看结果
        console.log(arr1);
        console.log(arr2);
        console.log(arr3);
    </script>

输出结果如下图所示：



使用for...of循环Map对象的示例代码如下所示：

    <script>
        let map = new Map();
        map.set('a','apple');
        map.set('b','banana');
        // 默认情况下循环Map对象当中的key-value值，每一项为数组，第一项为key，第二项为value值。
        let arr1 = [];
        for(let some of map){
            arr1.push(some);
        };
        console.log(arr1);
        //给Map对象加上方法.entries()，运行结果和默认情况的一样。
        let arr2 = [];
        for(let some of map.entries()){
            arr2.push(some);
        };
        console.log(arr2);
        //结合解构赋值的应用
        for(let [key,value] of map.entries()){
            console.log(key);
            console.log(value);
        };
        //给Map对象加上方法.keys(),使之只循环key。
        let arr3 = [];
        for(let key of map.keys()){
            arr3.push(key);
        };
        console.log(arr3);
        //给Map对象加上方法.values(),使之只循环value值。
        let arr4 = [];
        for(let value of map.values()){
            arr4.push(value);
        };
        console.log(arr4);
    </script>

输出结果如下图所示：



脚本宝典总结

以上是脚本宝典为你收集整理的ES6学习笔记（第一讲）全部内容，希望文章能够帮你解决ES6学习笔记（第一讲）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。