ES6语法2笔记

一、ES6与ES5，函数的不同

1、 函数默认参数

 // 1. 在 ES5 语法中，为函数形参指定默认值的写法：
  // 写法一：
        function foo (bar) {
            bar = bar || 'abc';
            console.log(bar)
        }
        foo('xyz')
 // 写法二：
        function foo (bar) {
            if (typeof bar === 'undefined') {
                bar = 'abc';
            }
            console.log(bar)
        }

        foo('xyz');

// 2. 使用 ES6 的语法为函数形参指定默认值
        function post (url, data = {}, timeout = 6 * 1000) {
            console.log(arguments)
            console.log(url, data, timeout)
        }
        post('xyz', null, 3000);

注意事项：
1.除了为形参直接指定默认值以外，形参的默认值还可以是表达式，例如，timeout = 5 * 1000
2.在预编译阶段，形参表达式不会执行，只有在调函函数，并且没有为形参传递实参的情况下才执行.

2、函数的不定参数与箭头函数

(…args) :: {不定参数:使用剩余操作符接收剩余的实参，这些实参会被保存到一个不定参数（args）中}

   // 1. 形式一：
        // var foo = function () {
        //     return 'Hello World!';
        // };

        // 如果形参数量为 0，则必须加上小括号。箭头后面的表达式的结果会被作为函数的返回值。
        // var foo = () => { 
        //     return 'Hello World!';
        // }

        // 2. 形式二：
        // var foo = function (greeting) {
        //     return greeting;
        // }

        // 如果形参的数量为 1，则可以省略小括号。
        // var foo = greeting => {
        //     return greeting;
        // }

        // 3. 形式三：
        // var foo = function (firstName, lastName) {
        //     return firstName + ' · ' + lastName;
        // }

        // 如果形参数量大于 1，则不能省略小括号。
        // var foo = (firstName, lastName) => {
        //     return firstName + ' · ' + lastName;
        // }

        // 4. 形式四：
        // var foo = function (a, b) {
        //     return a > b ? a : b;
        // }

        // 如果函数的执行体比较简单（直接量或表达式），可以省略大括号，箭头后面的直接量或表达式会被自动作为返回值。
        // var foo = (a, b) => a > b ? a : b;

        // 5. 形式五：
        // var foo = function (a, b) {
        //     let max = a;
        //     if (b > a) {
        //         max = b;
        //     } 
        //     return max;
        // }

        // 如果函数的执行体比较复杂，则不能省略大括号。
        // var foo = (a, b) => {
        //     let max = a;
        //     if (b > a) {
        //         max = b;
        //     } 
        //     return max;
        // }
        // console.log(foo('贾', '尼古拉斯'))

1.箭头函数function如果是匿名，可以省略
2.如果函数的执行体比较简单（直接量或表达式），可以省略大括号，箭头后面的直接量或表达式会被自动作为返回值。
3.如果形参数量为 0，则必须加上小括号。箭头后面的表达式的结果会被作为函数的返回值。

3.this指定有没有绑定

// 箭头函数中没有绑定 arguments 对象，因此下面的输入语句会报错：arguments is not defined
        var bar = (greeting) => { 
            console.log(arguments)
            return greeting;
        };
          console.log(bar('你好世界！'))

4.this能不能手动绑定

   // this 指向的对象
       var obj = {
           fullName: '谭文华'
       };
// 箭头函数，不能使用 call() 方法改变函数中 this 的绑定，箭头函数中不能绑定 this。
       var bar = (greeting) => { 
           return this.fullName + '说：' + greeting;
       };

       // 下面的代码不会报错，但是也不起作用
       console.log(bar.call(obj, '你好世界！'))

(this不能手动绑定)

二、对象

1.对象属性值的简写

1.当一个对象的属性与本地名相同时，不需要再写冒号和值，直接写属性名
   let obj = {
        fullName,
        age
    };

2.对象方法的简写

   // 在 ES 6 中，语法更简洁，取消了冒号和 function 关键字。如下所示：
   ```let obj = {
        fullName: '杨柯',
        sayName () {
            return this.fullName;
        }
    }; ```

3. 对象的可计算属性名

      let person = {
          ['first' + suffix]: '无',
          ['last' + suffix]: '泰坦尼'
      };

      console.log(person)

在对象的字面量中使用方括号表示该属性名是可计算的，方括号中的内容会被计算求值，最终转化成一个字符串，该字符串就是最终的属性名

4.新增方法

-1在一些情况下，既是全等运算符比较出来的结果也是不正确的。例如：以下两钟情况

 		console.log(+0 == -0);           // true
        console.log(+0 === -0);          // true
        console.log(Object.is(+0, -0));  // false

+0 和 -0 在 JS 解析引擎中被表示为两个完全不同的实体，而如果使用全等运算符对两者进行比较，得到的结果是两者相等。

		console.log(NaN == NaN);           // false
        console.log(NaN === NaN);          // false
        console.log(Object.is(NaN, NaN));  // true

NaN 和 NaN 在 JS 解析引擎中被表示为两个完全相同的实体，但是无论使用等于,还是全等，得到的结果都是 false。
在大多数情况下，Object.is() 方法的比较结果与全等运算符完全相同，唯一的区别在于 +0 和 -0 会被识别为不相等，NaN 和 NaN 会被识别为相等。
-2 ** Object.assign() 方法可以接收任意数量的源对象（obj2,obj3），并按照指定的顺序将属性复制到接收对象（obj1） 如果多个源对象具有同名属性，则排位靠后的源对象会覆盖排外靠前的对象.**
使用 ES6 新增 Object.assgin() 方法将多个对象的属性合并到第一个对象中
1. Object.assign(obj1, obj2, obj3);

3、自有属性的枚举顺序

1.ES 5 中并没有定义对象属性的枚举顺序，有 JavaScript 引擎厂商自行决定。##

2.ES 6 中明确规定了对象的自有属性被枚举时的返回顺序##

3./ 自有属性枚举顺序的基本规则：

    // 1. 所有数字按升序
    // 2. 所有字符串按照它们被加入对象时的顺序排序 
       let obj = {
        a: 1,
        0: 2,
        c: 3,
        2: 4,
        b: 5,
        1: 6
    };
    console.log(Object.getOwnPropertyNames(obj));  // ["0", "1", "2", "a", "c", "b"]

4、改变对象的原型

let person = {
            getGreeting () {
                return 'Hello';
            }
        };

        let dog = {
            getGreeting () {
                return 'woof';
            }
        };

        // 使用 create() 方法将 person 对象作为原型对象
        let friend = Object.create(person);  // {}
        console.log(friend.getGreeting());  // 'Hello'
        console.log(Object.getPrototypeOf(friend) === person);  // true

        // 使用 setPrototypeOf() 方法将 friend 对象的原型对象修改成 dog
        Object.setPrototypeOf(friend, dog);
        console.log(friend.getGreeting());  // 'Hello'
        console.log(Object.getPrototypeOf(friend) === dog);  // true

5、ES6引入了super关键字，super指向的那个前对象的原型对象，实际上也就是Object.getPrototypeOf(this)

 let friend = {
          getGreeting () {
              return super.getGreeting() + ', hi';
          }
      };

使用setPrototypeOf()方法将friend对象的原型对象修改成person对象

Object.setPrototypeOf(friend, person);
`
|  |  |
|--|--|
|  |  |
``