【JavaScript的ES6语法】12、ES6总结复习

最新推荐文章于 2024-03-31 09:30:02 发布

光仔December

最新推荐文章于 2024-03-31 09:30:02 发布

阅读量3.2k

点赞数 28

分类专栏： JavaScript 文章标签： ES6 let const 解构表达式解构赋值

本文链接：https://blog.csdn.net/acmman/article/details/117200803

版权

JavaScript 专栏收录该内容

40 篇文章 9 订阅

订阅专栏

之前我们已经将ES6的大部分内容讲解完毕了，本篇就来回顾梳理一下前面学习过的知识。

1、变量：let、const

let、const是ES6新增的变量修饰符，我们回顾一下它们和之前的var的区别：
（1）var 可以重复声明、函数级
（2）let 局部变量，不能够重复声明、块级
（3）const 常量，不能够重复声明、块级

例如下面的函数：

<!DOCTYPE html>
<html>
<head>
    <title>TEST ES6</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
    <input type="button" value="1"/> 
    <input type="button" value="2"/> 
    <input type="button" value="3"/> 
    <script type="text/javascript">
       window.onload=function(){
           var aBtn=document.getElementsByTagName('input');
           for(var i=0;i<aBtn.length;i++){
                aBtn[i].onclick=function(){
                    alert(i);
                }
           }
       }
    </script>
</body>
</html>

点击按钮时，全是3：

因为i的作用域是函数级的，是共用的，alert的是最终的i值。
如果使用let就会避免该问题，因为它是块级的，只在当前代码块中生效：

<script type="text/javascript">
    window.onload=function(){
        var aBtn=document.getElementsByTagName('input');
        for(let i=0;i<aBtn.length;i++){
            aBtn[i].onclick=function(){
                alert(i);
            }
        }
    }
</script>

效果：

2、函数：箭头函数

箭头函数有以下优点：
（1）方便
如果只有一个参数，()可以省略；
如果只有一个return，{}也可以省略；
（2）修正this
this相对正常一点。

3、参数拓展

（1）新增一个“...”参数，它可以收集和扩展。
例如参数扩展：

<script type="text/javascript">
    function show(a,b,...arg){
        alert(a);
        alert(b);
        alert(arg);
    }
    show(1,2,3,4,5,6,7,8);
</script>

效果：

其中的“3,4,5,6,7,8”参数就被收集到arg里面去了，参数可以无限扩展。
同时它还可以收集参数，作为其它函数或数组的子元素：

<script type="text/javascript">
    let arr=[1,3,5];
    let arr2=[...arr,...arr]
    alert(arr2);
</script>

效果：

（2）参数默认值
可以在设置函数的参数时，为参数设置一个默认值，有值的时候赋值，没值的时候使用默认值，如：

function show(a,b=5){

}

4、数组新方法

数组新增了4个新的方法：
（1）map：映射，接收一个函数，将原数组中所有元素用这个函数处理后放入新数组返回。
（2）reduce：接受一个函数（必须）和一个初始值（可选），该函数接收两个参数：
● 第一个参数是上一次reduce处理的结果
● 第二个参数是数组中要处理的下一个元素
reduce()会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数。
（3）filter：过滤，只留下符合条件的，适用于做筛选。
（3）forEach：用于循环，循环内可以取出每个元素和其下标值。

5、字符串

（1）新增“startsWith”和“endsWith”方法，用于判断字符串是以什么开头和什么结尾；
（2）字符串模板：`${a}xxxx${b}`。在字符串模板中，使用花括号“${}”包裹需要拼接的变量，就可以直接实现字符串的拼接。同时字符串模板可以折行。

6、Promise

主要用来封装异步操作，其中最常用的是“Promise.all([])”方法，该方法可以放入N个Promise子程序，这些子程序都是异步的，当所有子程序都运行成功时，才调用成功方法，否则就调用失败方法：

7、generator

可以执行到一半能暂停的函数，格式：

function *show(){
    yield;
}

8、JSON

有两个新增的函数：
（1）JSON.stringify();//JSON对象转字符串
（2）JSON.prase();//字符串转JSON对象

9、解构赋值

可以一次性给多个参数赋值，例如：

let arr=[1,2,3];
let [x,y,z]=arr;//x,y,z将与arr中的每个位置对应来取值
console.log(x,y,z);//结果：1,2,3

要保证：
赋值的左右两边结构是一样的；
右边必须是一个合法的对象；
声明和赋值一次完成。

10、面向对象

（1）对象的新写法

class Test(){
    constructor(){
    
    }
    方法1(){
    
    }
    方法2(){
    
    }
    //...
}

（2）继承

class Cls2 extends Cls1{
    constructor(){
        super();
    }
}

以上就是之前讲过的所有的ES6知识点，后面我们就通过编写实例项目来运用上面学习的ES6知识。

参考：深入解读ES6系列视频教程（kaikeba.com提供，主讲老师石川（Blue））

转载请注明出处：https://blog.csdn.net/acmman/article/details/117200803

光仔December

关注

28
点赞
踩
92

收藏

觉得还不错? 一键收藏
打赏
30
评论
【JavaScript的ES6语法】12、ES6总结复习

之前我们已经将ES6的大部分内容讲解完毕了，本篇就来回顾梳理一下前面学习过的知识。1、变量：let、constlet、const是ES6新增的变量修饰符，我们回顾一下它们和之前的var的区别：（1）var 可以重复声明、函数级（2）let 局部变量，不能够重复声明、块级（3）const 常量，不能够重复声明、块级例如下面的函数：<!DOCTYPE html><html><head> <title>TEST ES6</titl..
复制链接

扫一扫