ES6新特性

1、初识ES6

ECMAScript 6.0(简称ES6)是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言；
 
ECMAScript是JavaScript的规范，而JavaScript是ECMAScript的实现；
 
ES6是一个历史名词，泛指 5.1 版本后的JavaScript 标准，而ECMAScript 2015则是正式名称。

2、let与const声明变量

2.1、let声明变量

ES6新增了let，用来声明变量，用法类似于var，但是let有块级作用域，且在相同作用域中，只能重复声明同一个变量，因此不能在函数内部重新声明参数。
 
在for循环中，设置循环变量的部分是一个父作用域，循环体内部是一个子作用域。
 
let不会发生变量提升，在使用let声明变量之前使用该变量会抛出错误。
 
let声明的变量会绑定当前的作用域，不受外部影响，所以使用let声明变量之前，该变量都是不能用的，这就称为 暂时性死区 （temporal dead zone，简称 TDZ）。
 
因为有了暂时性死区，所以typeof也不再是百分百安全的操作了，因为如果typeof在变量声明前的死区运行，就会报错 ReferenceError，如果一个变量根本没有声明，使用typeof反而不会报错。

比较隐蔽的死区：

function bar(x = y, y = 2) {
   
  return [x, y];
}
bar(); // 报错
//因为参数y还没有声明，属于“死区”。如果y的默认值是x，就不会报错，因为此时x已经声明了
function bar(x = 2, y = x) {
   
  return [x, y];
}
bar(); // [2, 2]

// 不报错
var x = x;
// 报错
let x = x; // ReferenceError: x is not defined
//在x的声明语句执行完成之前就去取x的值，所以才会报错

为什么需要块级作用域：

因为内层变量可能会覆盖外层变量；用来计数的循环变量会泄露为全局变量。
 
块级作用域的出现，实际上使得获得广泛应用的匿名立即执行函数表达式（匿名 IIFE）不再必要了。
 

// IIFE 写法
(function () {
    
	var tmp = ...;
	...
}());

// 块级作用域写法
{
    
	let tmp = ...;
	...
}

块级作用域与函数声明：

ES6引入了块级作用域，明确允许可以在块级作用域中声明函数，但是在块级作用域外不能引用域内的函数，这点与let类似。
 
ES6的块级作用域必须有大括号，这样JS引擎才会认为存在块级作用域：
 

// 第一种写法，报错
if (true) let x = 1;

// 第二种写法，不报错
if (true) {
    
	let x = 1;
}
//函数声明也是如此！

2.2、const声明常量

const 声明一个只读的常量。一旦声明，常量的值就不能改变，并必须立即初始化；只声明不赋值，就会报错，其作用域与let相同；声明的常量也不会提升，同样存在暂时性死区，且不可重复声明。
 
如果声明的是对象类型，那么该对象中的数据是可以改变的，因为它只保证该对象的地址不能变。
 
可以使用 Object.freeze() 方法冻结对象，这样就不能修改对象中的数据了(只能冻结一级属性与方法)，如下是一个实现彻底冻结的函数：
 

var constantize = (obj) => {
    
	Object.freeze(obj);
	Object.keys(obj).forEach( (key, i) => {
    
		if ( typeof obj[key] === 'object' ) {
    
  			constantize( obj[key] );
		}
	});
};

ES6声明变量的六种方法：

ES5：var和function、ES6：let和const，还有import和class。

3、变量的解构赋值

解构(Destructuring)赋值就是按照一定的模式从数组或对象中提取值，然后对变量进行赋值，这是ES6新增的。

3.1、数组解构赋值

如果解构不成功，变量的值就等于undefined；等号左边的模式可以只匹配一部分右边的数组，这叫做不完全解构。
 
只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。
 
解构赋值允许指定默认值，ES6内部会使用 === 来判断一个位置是否有值，只有数组成员为undefined时，默认值才会生效，为null不会生效；如果默认值是一个表达式，那么只有在用到时才会求值；默认值可以引用解构赋值的其它变量，但必须是已声明的。

<script>
    //同时将数组中多个值分别赋给a,b,c
    let arr = [1, 2, 3];
    let [a, b, c] = arr;

    //交换变量值
    let x = 1, y = 2;
    [y, x] = [x, y];
    console.log(x, y); //2,1

    //将第三个值赋给d
    let [, , d] = arr;
    console.log(d); //3

    //从嵌套数组中将1赋给e，3赋给f，5赋给g
    let arrs = [1, [2, 3, 4], 5, 6];
    let [e, [, f,], g] = arrs;
    console.log(e, f, g); //1,3,5

    //设置默认值，右边赋值对象为undefined，默认值生效，否则照常赋值
    let [h = 1] = []; //let [h=1]=[100] //h=100
    console.log(h); //1
</script>

3.2、对象解构赋值

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
 
对象的解构赋值可以取到继承的属性。

<script>
    let obj = {
     
        name: 'twj',
        age: 600,
        data: {
     
            list: ['aaa', 'bbb', 'ccc']
        }
    }
    //对象解构不需要按照顺序来，是先按照属性名找有没有，找到再赋值给相应的变量
    let {
      age, name } = obj;
    console.log(name, age); // twj 600
    let {
      data: {
      list }, name: n, age: a, err = '没有错误' } = obj;
    console.log(list, n, a, err); // [aaa,bbb,ccc] twj 600 没有错误

    function getData() {
     
        let obj = {
     
            name: 'twj',
            age: 600,
            data: {
     
                list: ['aaa', 'bbb', 'ccc']
            }
        }
        test(obj)
    }
    function test({
       name, data: {
       list } }) {
      //函数参数也能使用解构赋值
        console.log(name, list); //twj [aaa,bbb,ccc]
    }
    getData();
</script>

3.3、字符串解构赋值

<script>
    let myname = 'twj';
    let [x, y, z] = myname;
    console.log(x, y, z); // t w j
    let {
      length } = myname;
    console.log(length); //3
</script>

3.4、注意

如果要将一个已经声明的变量用于解构赋值，必须非常小心：
 

// 错误的写法
let x;
{
    x} = {
    x: 1}; // SyntaxError: syntax error
// 正确的写法
let x;
({
    x} = {
    x: 1});
//因为JS引擎会将{x}理解成一个代码块，只有不将大括号放在行首才能避免这个问题。

解构赋值允许等号左边的模式之中，不放置任何变量名：
 

({
    } = [true, false]);
({
    } = 'abc');
({
    } = []);

由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构：
 

let arr = [1, 2, 3];
let {
    0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。由于 undefined 和 null 无法转为对象，所以对它们进行解构赋值，都会报错。

3.5、圆括号的使用

因为对于编译器来说，一个式子是模式还是表达式，得解析到(或解析不到)等号才能知道，所以只要有导致解构的歧义，就得使用圆括号，但是并不是所有情况都能使用圆括号的。
 
不能使用圆括号的情况：
 

//1、变量声明语句
let [(a)] = [1];
let {
    x: (c)} = {
    };
//2、函数参数(也属于变量声明)
function f([(z)]) {
     return z; } // 报错
function f([z,(x)]) {
     return x; } // 报错
//3、赋值语句的模式
({
     p: a }) = {
     p: 42 }; // 报错
([a]) = [5]; // 报错

可以使用圆括号的情况：
 

//只有赋值语句的非模式部分，可以使用圆括号。
[(b)] = [3]; // 正确
({
     p: (d) } = {
    }); // 正确
[(parseInt.prop)] = [3]; // 正确

4、模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

 
在反引号中的 ${} 就是用来书写变量或表达式的位置。

<head>
    <meta charset="UTF-8">
    <style>
        .active {
     
            color: rgb(188, 7, 22);
        }
    </style>
</head>

<body>
    <h1>演示使用模板字符串</h1>
    <ul>

    </ul>
    <script>
        let name = 'twj'
        //拼接字符串，换行并插入单个值(原始方法)
        let oli = "<li>\
            <b>"+ name + "</b>\
            </li>";
        //使用模板字符串
        let oli2 = `<li>
            <b>${
       name}</b>
            </li>`;
        console.log(oli2);

        function test() {
     
            return "函数返回结果"
        }

        //插入多个值
        let arr = ['twj', 'wbd', 'xjp'];
        let newList = arr.map(function (item, index) {
     
            //模板字符串的中可以插入变量、表达式、函数等
            return `<li class="${
       index === 0 ? 'active' : ''}">
                <b>${
       item}</b>
                ${
       test()}
            </li>`
        })
        console.log(newList);

        //将li添加到ul里面
        let oul = document.querySelector("ul");
        oul.innerHTML = newList.join("");
    </script>
</body>

5、常用数据类型的扩展

5.1、字符串的扩展

include函数： 判断字符串中是否存在指定字符。

let text = "Hello world!";
console.log(text.includes("o")); //true ,是否包含该字符
console.log(text.startsWith("Hello")); //true ,是否以该字符开头
console.log(text.endsWith("!")); //true ,是否以该字符结尾
//这三个方法都支持第二个参数，表示开始搜索的位置。
console.log(text.includes("Hello", 6)); //false
console.log(text.startsWith("world", 6)); //true
console.log(text.endsWith("Hello", 5)); //true
//上面代码表示，使用第二个参数n时，endsWith针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

repeat函数： 将原字符串重复n次，并返回重复后的新字符串。

console.log(text.repeat(2)); //Hello world!Hello world!
console.log(text.repeat(0)); //空字符串
console.log(text.repeat(2.7)); //Hello world!Hello world!
console.log(text.repeat("3")); //Hello world!Hello world!Hello world!

5.2、数值的扩展

//1. 各进制的写法
let num1 = 100;
let num2 = 0x100;
let num3 = 0b100;
let num4 = 0o100;
console.log(num1, num2, num3, num4); //100 256 4 64

//2. Number.isFinite & Number.isNaN
let num5 = Number.isFinite(100)
let num6 = Number.isFinite(100 / 0)
let num7 = Number.isFinite(Infinity)
let num8 = Number.isFinite("100")
console.log(num5, num6, num7, num8) //true false false false
//Number.isFinite对于非数值一律返回false，Number.isNaN只有对于NaN才返回true
let num9 = Number.isNaN(100)
let num10 = Number.isNaN(NaN)
let num11 = Number.isNaN("twj")
let num12 = Number.isNaN("100")
console.log(num9, num10, num11, num12) //false true false false

//3. Number.isInteger：用来判断一个数组是否为整数
let num13 = Number.isInteger(100)
let num14 = Number.isInteger(100.0)
let num15 = Number.isInteger("kerwin")
let num16 = Number.isInteger("100")
console.log(num13, num14, num15, num16) //true true false false

//4. Number.EPILON：极小常量 
//它表示1与大于1的最小浮点数之间的差。2.220446049250313e-16
function isEqual(a, b) {
   
    return Math.abs(a - b) < Number.EPSILON
}
console.log(isEqua1(0.1 + 0.2, 0.3