ES6基础新特性

190 阅读4分钟

1. var let const的区别

   - let和const是ES6中定义变量的新语法,var是ES5中定义变量的关键字。

   - var 
     - var 支持变量声明提升,
     - 函数外部声明定义的变量是全局变量,可以重复声明定义,
     - var定义的变量可以修改,如果不初始化会输出undefined,不会报错。
        代码显示如下
        ```js
            bla = 2
            var bla;
            // ...
            // 可以理解为:   
            var bla;  
            bla = 2; 由于这个原因,我们建议总是在作用域的最开始(函数或者全局代码的开头)声明变 量。这样可以使变量的作用域变得清晰。
        ```

   - let 
      - let作用域:只在let命令所在的代码块内({})有效
      - 无变量声明提升,不可以重复声明变量
      - 可以解决for循环i全局变量污染的问题
      代码展示:
        ```js
            //let声明 的变量只在它所在的代码块有效。
            {let a=3;} 
            console.log(a);//VM11918:1 Uncaught ReferenceError: a is not defined

            //计数器i只在for循环体内有效,在循环体外引用就会报错
            for (let i = 0; i < 3; i++) {}
            console.log(i);//VM13498:1 Uncaught ReferenceError: i is not defined

            //for循环还有一个特别之处,就是循环语句部分是一个父作用域,而循环体内部 是一个单独的子作用域。
            for (let i = 0; i < 3; i++) {
            let i = 'abc';
            console.log(i);
            }
        ```

    - const 
        - 块级作用域,
        - const声明一个只读的常量。一旦声明,常量的值就不能改变。所以相对来说解析会快一点
        - 也无法变量提升,重复声明

         ```js
            const PI = 3.1415;
            PI=3;//VM33690:1 Uncaught TypeError: Assignment to constant variable.
         ```

    所以总的来说:
    - var可以先使用,后声明;let必须先声明后使用。
    - 暂时性死区:只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域, 不再受外部的影响。
    - var是允许在相同作用域内重复声明同一个变量的,而let与const不允许这一现象。

2.ES6数组新增的方法以及使用

1.Array.from 伪数组转换为真正的数组

    - 将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象,参数是一个真正的数组,Array.from会返回一个一模一样的新数组
        ```js
            let arrayLike = {  
            &emsp;&emsp;'0': 'a',  
            &emsp;&emsp;'1': 'b',  
            &emsp;&emsp;'2': 'c',  
            &emsp;&emsp;length: 3  
            };  
            // ES5 的写法  
            var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']  
            // ES6 的写法  
            let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']  

            // NodeList 对象  
            let ps = document.querySelectorAll('p');  
            Array.from(ps).forEach(function (p) {  
            &emsp;&emsp;console.log(p);  
            });  
          ```

2.Array.of()

    - Array.of方法用于将一组值,转换为数组。Array.of总是返回参数值组成的数组。如果没有参数,就返回一个空数组。
    - Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。
    - 这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异

        ```js
            Array.of() // []  
            Array.of(3) // [3]  
            Array.of(3, 11, 8) // [3,11,8]  
            
            Array.of(3).length // 1   
            Array.of(undefined) // [undefined]  
            Array.of(1) // [1]  
            Array.of(1, 2) // [1, 2]  
        ```

3.find和findIndex()

    - 数组实例的find方法,用于找出第一个符合条件的数组成员,参数是一个回调函数,所有数
    组成员依次执行该回调函数,找出第一个返回true的成员,没有符合条件成员,返回undefined
    
    - findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,
    如果所有成员都不符合条件,则返回-1
        ```js
            [1, 4, -5, 10].find((n) => n < 0)  
            // -5  
            [1, 5, 10, 15].find(function(value, index, arr) {  
                return value > 9;  
            }) // 10  
            [1, 5, 10, 15].findIndex(function(value, index, arr) {  
                return value > 9;  
            }) // 2  

        ```

- fill()
    - fill()方法使用给定值,填充一个数组。
        ```js
            ['a', 'b', 'c'].fill(7)  
            // [7, 7, 7]  
            new Array(3).fill(7)  
            // [7, 7, 7]  
            ['a', 'b', 'c'].fill(7, 1, 2)  
            // ['a', 7, 'c']  
        ```
        fill()方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置

4.includes()

    - 表示某个数组是否包含给定的值,Array.prototype.includes方法返回一个布尔值,该方法的
    第二个参数表示搜索的起始位置,默认为 0 。如果第二个参数为负数,则表示倒数的位置
        
        ```js
            [1, 2, 3].includes(2); // true  
            [1, 2, 3].includes(4); // false  
            [1, 2, 3].includes(3, 3); // false  

5.entries() keys() values()

        - 用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的
        区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
        
    ```js
            for (let index of ['a', 'b'].keys()) {  
                console.log(index);  
            }  
            // 0  
            // 1  
            for (let elem of ['a', 'b'].values()) {  
                console.log(elem);  
            }  
            // 'a'  
            // 'b'  
            for (let [index, elem] of ['a', 'b'].entries()) {  
                console.log(index, elem);  
            }  
            // 0 "a"  
            // 1 "b" 
    ```

3.ES6模版字符串

- 传统的JavaScript语言,输出模板通常是这样写的。繁琐,特别容易拼接错
        ```js
            $('#result').append(
                'There are <b>' + name + '</b> ' +
                'items in your basket, ' +
                '<em>' + price +
                '</em> are on sale!'
            );
        ```

    - ES6引入了模板字符串解决这个问题,模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

        ```js
            var name = "Bob", time = "today";
            `Hello ${name}, how are you ${time}?`   
        ```

    - 大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。

        ```js
            var x = 1;
            var y = 2;

            `${x} + ${y} = ${x + y}`
            // "1 + 2 = 3"

            `${x} + ${y * 2} = ${x + y * 2}`
            // "1 + 4 = 5"

            var obj = {x: 1, y: 2};
            `${obj.x + obj.y}`
            // 3
        ```
    - 模板字符串之中还能调用函数。
        ```js
            function fn() {
              return "Hello World";
            }

            `foo ${fn()} bar`
        ```