ES6

ES5

ES5在2009年发布

严格模式

ES5严格模式: js文件第一行放入 use strict

• 必须使用var声明变量. 在正常模式中，如果一个变量没有声明就直接赋值，默认为全局变量. 严格模式禁止这种做法

• 禁止自定义的函数中的this指向全局对象. 下面的代码，普通模式会打印 window 对象（浏览器环境中），严格模式会打印undefined

  var foo = function() {console.log(this);}
  foo();

• 构造函数必须通过new实例化对象。否则因为this为undefined会报错. 例如下面的代码在严格模式下会报错.

  var Person = function(name) {
  	this.name = name;
  }
  Person('foo');

• 对象不能有重名属性. 普通模式下，如果对象有重名属性，最后赋值的属性会覆盖前面的值。严格模式下，会错误.

  var obj = {
  	'username': 'trump',
  	'username': 'biden'
  }

ES6

2015年6月发布ECMAScript 6 (ES6)，即ECMAScript 2015. 伺候的ES版本按照年份来命名，例如 ES2016, ES2017, …, ES2021.

ES6泛指ES2015及后续的版本

使用 let 和 const 定义变量

• ES5语法中，使用var定义的变量容易造成全局污染，不具备块级作用域特性.

  var a = 1;
  {
  	var a = 2;
  }
  console.log(a); // 2

• （浏览器环境中）使用 var 声明的变量会挂载在 window 对象上，而let和const不会. 因此说var会造成 window 全局变量的污染.

  var a = "hello world";
  console.log(a);  // 'hello world'
  console.log(window.a);  // 'hello world'

• var 声明的变量存在变量提升，即如果先使用再声明，其值为 undefined. 而 let 和 const 定义的变量如果先使用再声明会报错

  console.log(a);  // undefined
  a = 1;
  
  console.log(b);  // Uncaught ReferenceError: Cannot access 'b'
  let b = 1;

解构赋值

• 数组的解构赋值

  • 根据位置一一对应，如果左边的数量大于右边的数量, 则多余的变量会变为 undefined

  • let [a, b, c] = [1, 2, 3];
    <!--code6-->
    
    

• 对象的解构赋值

  • 对象的解构赋值根据键来取值。如果没找到，则为 undefined

    const person = { name: 'x', age: 28 };
    let { name, age } = person;

  • 可以自定义命名, 不需要属性名一致

    const person = { name: 'x', age: 28 };
    let { name: myName, age: myAge } = person;

• 圆括号的使用

  • 如果变量在解构赋值之前就已经被定义了，再去解构，就会出现报错

    let name = 'biden';
    { name } = { name: 'trump' };  // error

    解决方法是在解构的语句外加上圆括号

    let name = 'biden';
    ({ name } = { name: 'trump' });  // correct

箭头函数

箭头函数的语法: (arg1, arg2) => { function body }

• 如果只有一个参数，则 () 可以省略
• 如果函数体内只有一条语句，并且是return语句，那么 {} 和 return 都可省略. 例如 (x, y) => x+y;

箭头函数的 this 指向

• 普通函数, this 指向的是函数被调用的对象。也就是说，谁调用了函数，this就指向谁
• 箭头函数不绑定this, this指向箭头函数定义位置的this, 也就是说，箭头函数是在哪个位置定义的, this就跟这个位置的this指向相同

剩余参数

如果函数传入的参数格式不确定，可以这样写. 如果读取的参数多于传入的参数数量, 该参数为undefined

const fn = (first, ...args) => {
    console.log(first);
    console.log(args[0]);
    console.log(args[1]);
    console.log(args[2]);
    console.log(args[3]);
};

fn(1, 2, 3);  // prints: 1, 2, 3, undefined, undefined

浅拷贝和深拷贝

ES6推荐使用 Object.assign() 实现浅拷贝

// usage1
obj2 = Object.assign(obj2, obj1);

// usage2
Object.assign(targetObject, sourceObject1, sourceObject2, ...);

作用是将多个源对象的属性追加到目标对象中。如果属性名相同，会被覆盖.

判断对象相等

• Object.is() 判断两个数据是否完全相等。底层是通过比较字符串是否相等来判断的

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

  NaN 和任何值都不相等