ES6 - let、const,解构赋值,箭头函数,剩余参数,数组、字符串扩展方法,Set数据结构

简介

  • ES6的全称是ECMAScript,是由ECMA国际标准化组织制定的一项脚本语言的标准化规范
  1. 2015年6月-发布ES2015
  2. 2016年6月-发布ES2016
  3. ...
  • ES6实际上是一个泛指,泛指ES2015年及后续的版本
  • 为什么使用ES6?

  1. 每一次标准的诞生都意味着语言的完善,功能的加强,JavaScript语言本身也有一些令人不满意的地方
  2. 变量提升特性增加了程序运行时的不可预测性
  3. 语法过于松散,实现相同的功能,不同的人可能会写出不同的代码

新增语法

let

  • ES6中新增的用于声明变量的关键字
  • let声明的变量只在所处于的块级(一对{ } )有效
        if (true) {
            let a = 10;
            console.log(a); // 10
        }
        console.log(a); //  Uncaught ReferenceError: a is not defined
  • 防止循环变量变成全局变量
  • 注意:使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特性。
        for (var j = 0; j < 2; j++) {}
            console.log(j) // 2
        for (let i = 0; i < 2; i++) {}
            console.log(i);//Uncaught ReferenceError: i is not defined
  • 不存在变量提升,只能先声明才能再使用
  • 暂时性死区(只要块级作用域内存在let命令,它所声明的变量就“绑定”这个区域,不再受外部的影响。
        var num = 10;
        if (true) {
            console.log(num);
            //Uncaught ReferenceError: Cannot access 'num' before initialization
            let num = 20;
        }
  • 经典面试题
        var arr = [];
        for (var i = 0; i < 2; i++) {
            arr[i] = function(){
                console.log(i);
            }
        }
        arr[0]();
        arr[1]();

解析:var声明变量为全局变量,循环结束时i = 2,所以两次打印都为2

        var arr = [];
        for (let i = 0; i < 2; i++) {
            arr[i] = function(){
                console.log(i);
            }
        }
        arr[0]();
        arr[1]();

解析:每次循环都会产生一个块级作用域,每个块级作用域中的变量都是不同的,函数执行时输出的是自己上一级(循环产生的块级作用域)作用域下的值。所以依次打印出 0 和 1。

const

  • 声明常量,常量就是值(内存地址)不能变化的量
  • 具有块级作用域
  • 声明常量时必须赋值
const PI; //Uncaught SyntaxError: Missing initializer in const declaration
  • 常量赋值后,值不能修改(基本数据类型不可更改,复杂数据类型可更改内部的值,数据值本身不可更改)
        const PI = 3.14;
        PI = 100; //Uncaught TypeError: Assignment to constant variable.

        const ary = ['100','200'];
        ary[0] = 101;
        ary[1] = 102;
        console.log(ary);// [101, 102]
        ary = ['101','102'];//Uncaught TypeError: Assignment to constant variable.

let const var 的区别

当声明不变化的(如函数)使用const,从而让JavaScript不必一直监测该值的变化,提升效率。

解构赋值

  • ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构

数组解构 允许我们按照一一对应的关系从数组中提取值,然后将值赋值给变量。如果解构不成功,变量的值为undefined

        let [a,b,c,d,e] = [1,2,3];
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
        console.log(d); // undefined
        console.log(e); // undefined

对象解构 允许我们使用变量的名字匹配对象的属性 匹配成功将对象属性的值赋值给变量,psex为别名使用

        let person = {name : 'zhangsan',age : 30,sex : 'nan'};
        let { name, page, sex : psex } = person;
        console.log(name); // zhangsan
        console.log(page); // undefined
        console.log(psex); // nan

箭头函数

ES6中新增的定义函数的方式,用来简化函数定义语法的

        const fn = () => {
            console.log(1);
         }
  • 函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号
        const sum = (num1,num2) => console.log(num1 + num2) ;
  • 如果形参只有一个,可以省略小括号
        const fn = v => console.log(v);
  • 箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this。下例子都指向fn,即obj
        function fn(){
            console.log(this);
            return () =>{
                console.log(this);
            }
        }
        const obj = {name: 'zhangsan '};
        fn.call(obj);
        //{name: "zhangsan "}
        const resFn = fn.call(obj);
        resFn();
        /*
        {name: "zhangsan "}
        {name: "zhangsan "}
        */
  • 箭头函数面试题 此时this指向window,因为对象不产生作用域,say方法被定义在全局。
        var obj = {
            age : 20,
            say : () =>{
                alert(this.age);
            }
        }
        obj.say(); //undefined

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

        const sum = (...args) => {
            let total = 0;
            args.forEach( item => total += item );
            return total;
        }
        console.log(sum(10,20,30));

剩余参数和解构配合使用

        let students = ['zhou','wu','sheng'];
        let [s1,...s2] = students;
        console.log(s1);//zhou
        console.log(s2);//["wu", "sheng"]

Array的扩展方法-扩展运算符

扩展运算符(展开语法)

  • 扩展运算符可以将数组或者对象转化为逗号分隔的参数序列
        let ary = [1,2,3];
        console.log(...ary);//1 2 3
  • 扩展运算符的应用 - 合并数组
        let ary1 = [1,2,3];
        let ary2 = [4,5];
        //方法一
        let ary3 = [...ary1,...ary2];
        //方法二
        ary1.push(...ary2);
  • 将类数组或可遍历对象转换为真正的数组 || 构造函数方法Array.from()也可以做到
        var oDivs = document.getElementsByTagName('div');

        var ary = [...oDivs];
        var ary2 = Array.from(oDivs);
  • 构造函数方法Array.from() 还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
        let arrayLike = {
            '0':1,
            '1':2,
            'length':2
        }
        let newAry = Array.from(arrayLike,item => item *2);
  • 实例方法 find()   用于找出第一个符合条件的数组成员,如果没有找到返回undefined
  • findIndex()   返回传入一个测试条件(函数)符合条件的数组第一个元素位置 , 如果没有符合条件的元素返回 -1
  • includes()    判断一个数组是否包含一个指定的值,如果是返回 true,否则false

String的扩展方法 - 模板字符串

  1. 模板字符串 ES6新增的创建字符串的方式,使用反引号定义
  2. 模板字符串中可以解析变量
  3. 模板字符串中可以换行
  4. 可以调用函数
        let name = `模板字符串`;
        let other = `nihao ${name}`;
        let html = `<div>
            <span>${name}</span>
            <span>${other}</span>
            </div>`;
        const fun = () => 'fanhuizhi';
        let greet = `${fun()}`;
  • startsWith() 和 endsWith() 

startsWith() 表示参数字符串是否在原字符串的头部,返回布尔值

endsWith() 表示参数字符串是否在原字符串的尾部,返回布尔值

        let str = 'hello world';
        str.startsWith('hell');
        console.log(str.startsWith('hell'));//true
        str.endsWith('d');
        console.log(str.endsWith('d'));//true
  • repeat() 表示将原字符串重复n次,返回一个新字符串
        'x'.repeat(2);
        console.log('x'.repeat(2));//xx

set数据结构

  1. ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值
  2. Set本身是一个构造函数,用来生成Set数据结构
  3. Set函数可以接受一个数组作为数组,用来初始化
  4. 利用set数据结构可以做数组去重
  5. add(value):添加某个值,返回Set结构本身
  6. delete(value):删除某个值,返回一个布尔值,表示删除是否成功
  7. has(value):返回一个布尔值,表示该值是否为Set的成员
  8. clear():清除所有成员,没有返回值
  9. 遍历 Set结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值
  10. 使用场景:电商网站搜索历史
        const s1 = new Set();
        console.log(s1.size);//0

        const s2 = new Set(['a','b']);
        console.log(s2.size);//2

        const s3 = new Set(['a','b','b','a']);
        console.log(s3.size);//2

        const ary = [...s3];
        console.log(ary);//["a", "b"]

        const s4 = new Set([1,2,3,4,5]);
        s4.forEach(val=>{
            console.log(val);
        })

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值