ES6-即速应用

1. ES6

1.1 ES6 定义
ES的全程是ECMAScript，它是由ECMA国际标准化定制的一项脚本语言的标准化规范。
ES6是ES2016以后版本的统称；
为什么使用ES6?

1）变量提升特性增加了程序运行时的不可预测性；
2）语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

2. let关键字

ES6中新增的用于声明变量的关键字

1）let声明变量只在所处的块级有效
2) 不存在变量提升，所以要提前声明变量；
3）暂时性死区，意思：在局部使用let声明的变量在全局作用域上不起作用；

注意1：在一个大括号中，使用let关键字声明的变量具有块级作用域，var关键字是不具备这个特点的

  if (true) {            var num = 100;            let number = 30;        }        console.log(num);        console.log(number); //报错

注意2：防止循环变量变成全局变量

for(let i = 0; i  3; i++){      }      console.log(i);//会报错，因为let已将i绑定在for循环里

let面试题：
小程序

let、const、var的区别：
小程序
结果：0 1

结果：2 2

3. const关键字

作用：声明常量，常量就是值（内存地址），不能变化的量。
具有特点：
1）具有块级作用域
2）使用const关键字声明的常量必须赋初始值，不然就会报错
3）常量赋值后，值不能修改，实际上是值的内存地址不能更改

注意：复杂数据类型：数据内部的值可以更改，但是不可以修改内存地址，就是重新赋个新值
看下列例子：

小程序

4. 解构

4.1 解构赋值

解构：分解数据结构
**赋值：**为变量赋值
ES6中允许数组从中提取值，按照对应位置，对变量赋值，对象也可以实现解构。

4.1.1 数组解构
数组解构允许我们按照一一对应的关系从数组中提取值，然后将值赋给变量。

小程序
4.1.2 对象解构
实质：是属性的匹配
写法1：
let {变量名1，变量名2····} = 对象；

写法2：
let {属性：属性值, 属性：属性值····} = 对象

4.2 箭头函数
ES6中新增的定义函数的方式
语法：(放形参)={函数体}
为了调用，通常写成:fn = (放形参)={函数体}

4.2.1 在箭头函数中，如果函数体中只有一句代码，并且代码的执行结果就是函数的返回值，函数体的大括号可以省略

// const sum = (n1, n2) = {        //     return n1 + n2;        // }        // console.log(sum(2, 5));                // 上面代码可以写成：        const sum = (n1, n2) = n1 + n2;        console.log(sum(2, 4));

4.2.2 在箭头函数中，如果形参只有一个，形参外侧的小括号也是可以省略的

 const fn = v = {            alert(v);        }        fn('zyx');

4.2.3 箭头函数this指向
箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this(意思是：this关键字将指向箭头函数定义位置中的this)

小程序
箭头函数面试题

var obj = {            age: 20,            say: () = {                alert(this.age);            }        }        obj.say();//输出结果为undefined

理由：say为箭头函数，它的this指向箭头函数定义的位置，而它定义在windows下，所以this指向windows ,但windows没有age这个属性，所以它的值就为undefined

4.3 剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组
注意：箭头函数不能使用arguments

语法：function sum(...变量名){}

例子：

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

剩余参数和解构配合使用

小程序

4.3.1 Array 的扩展方法

1）扩展运算符（展开语法）
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

 let arr = ['zyx', 'love', 'music'];  console.log(...arr); //zyx love music； ...将arr分隔掉除了字符外的其他参数  console.log('zyx', 'love', 'music'); //zyx love music

2）扩展运算符应用与数组合并
方法1：
let 变量名 = […合并数组1, …合并数组2];

        let arr1 = ['zyx', 'love', 'music'];        let arr2 = ['so', 'much'];        let arr = [...arr1, ...arr2];        console.log(arr);结果：["zyx", "love", "music", "so", "much"]

方法2：
数组名.push(…追加的数组名);
小程序
3) 将数组或可遍历对象转换为真正的数组

方法一：
var 定义一个数组名 = […伪数组名]
小程序

方法二：

构造函数方法：Array.from()
Array.from() 作用一：将数组或可遍历对象转换为真正的数组
小程序

Array.from() 作用二： 还可以接收第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
小程序

var arrayLike = {            '0': '1',            '1': '2',            'length': 2        }        var ary = Array.from(arrayLike, item = item * 2);        console.log(ary);        //结果：[2, 4]

4) find()

用于找出第一个符合条件的数组成员，如果没有找到返回undefined
小程序

      let ary = [{            id: 1,            name: 'zyx'        }, {            id: 2,            name: 'music'        }];        let arr = ary.find(item = item.id == 2);        console.log(arr);//结果：{id: 2, name: "music"}

5) findIndex()
用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

        let ary = [10, 20, 50];        let index = ary.findIndex(item = item  15);        console.log(index); //返回结果1

6）includes()
表示某个数组是否包含给定的值，返回布尔值
小程序

        let arr = ['zyx', 'a', 'b'];        let result = arr.includes('zyx');        console.log(result);

4.3.2 String的扩展方法

(1). 模板字符串
ES6新增的创建字符串的方式，使用反引号定义，tab键上的键
let 变量名 = 模板字符串

1）模板字符串可以解析变量
$(变量名)：这样就可以把变量的值输出来

        let name = `zyx`;        let sayHello = `Hello, my name is ${name} `;        console.log(sayHello); //Hello, my name is zyx

2）模板字符串中可以换行

  let result = {            name: 'zyx',            age: 28        };        let html = `             div                 span${result.name}/span                 span${result.age}/span             /div        `;        console.log(html);

结果：
小程序
3）在模板函数中可以调用函数

小程序

const fn = () = {            return 'zyx';        };        let html = `我的名字是${fn()}`;//可以调用函数        console.log(html);//我的名字是zyx

(2) startsWith()和endsWith()

小程序

(3) repeat()
repeat( n )方法表示将原字符串重复n次，返回一个新字符串

 console.log('y'.repeat(5)); //yyyyy

Set数据解构
ES6提供了新的数据结构Set.它类似数组，但是成员的值都是唯一的，没有重复的值

Set本身是一个构造函数，用来生成Set数据结构

语法：const  变量名 = new Set();

Set函数可以接受一个数组作为参数，用来初始化

       const set = new Set([1, 2, 3, 4]);       const set = new Set([1, 2, 3, 4]);        console.log(set.size);//size相等于数组.length

1）利用set去重
使用Set()将数组去重，再将去重后的set转换为真正的数组

const s3 = new Set(['a', 'a', 'b', 'c']);const arr = [...s3];console.log(arr); //结果：["a", "b", "c"]

2）set对象实例方法：

小程序

       //添加        const s4 = new Set();        s4.add('a').add('b');        console.log(s4); //{"a", "b"}        //删除        const s2 = s4.delete('a');        console.log(s2); //true：表示删除成功，false：没有该元素        // 结果：true        //判断某一个值是否是set数据结构中的成员 使用 has        const r1 = s4.has('b');        console.log(r1); //是：true  不是：false        //清空set数据结构中值，使用clear()        s4.clear();        console.log(s4.size); //0:清除成功

4）遍历
Set结构的实例与数组一样，也拥有forEach()方法，用于对每个成员执行某种操作，没用返回值

      const s5 = new Set([
              
                点击这里免费试用，快速创建您的专属小程序
              
              
                标签：
                微信小程序
                小程序
                小程序是什么