首页 > 网页制作  > 前端开发

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

admin 前端开发 2021-05-25 09:28:51 es6 let const 解构表达式 解构赋值 
后台-系统设置-扩展变量-手机广告位-内容正文底部

之前我们已经将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

文章来源:https://blog.csdn.net/u013517797/article/details/117200803

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://www.jcdi.cn/qianduankaifa/30874.html

留言与评论(共有 0 条评论)
   
验证码:
后台-系统设置-扩展变量-手机广告位-评论底部广告位

教程弟

https://www.jcdi.cn/

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

使用手机软件扫描微信二维码