ES6 新特性 | 小吉崽汁の窝

ES6

ES6是 ECMAScript 2015 的简称，是 JavaScript 语言的一个重要版本，引入了许多新的语法和功能，使得 JavaScript 更加强大和灵活

let 和 const

let

变量不能重复声明

1 2	let star = '罗志祥'; let star = '小猪'; // error

let 有块级作用域

{
  let girl = '周扬青';
}
console.log(girl); // error

不仅仅针对花括号，例如 if() 里面

不存在变量提前

1 2	console.log(song); // error let song = '恋爱达人';

不影响作用域链

let school = 'abc';
function fn() {
  console.log(school); // abc
}

const

const 用来定义常量，一旦声明，不可修改

1	const A = 'abc';

一定要赋初始值
一般常量使用大写（潜规则）
也具有块级作用域

{
  const pyaler = 'uzi';
}
console.log(player); // error

对于数组和对象的元素修改，不算作对常量的修改

1 2	const team = ['uzi', 'MXLG', 'Ming', 'Letme']; team.push('Meiko'); // 不报错，常量地址没有发生变化

解构赋值

ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

数组的解构：

1
2
3

const F4 = ['小沈阳', '刘能', '赵四', '宋小宝'];
let [xiao, liu, zhao, song] = F4; 
console.log(xiao, liu, zhao, song);

对象的解构：

const zhao = {
  name : '赵本山',
  age: '不详',
  xiaopin: function(){
    console.log("我可以演小品AAA");
  }
}
let {name, age, xiaopin} = zhao;
console.log(name, age);
console.log(xiaopin);

模板字符串

模板字符串是一种使用反引号 `` 包裹字符串，并且支持插入变量或表达式的新语法。它可以避免使用 + 号连接字符串和变量，并且支持多行字符串和标签模板等特性

// 使用模板字符串插入变量或表达式，用 ${} 包裹即可（注意是反引号而不是单引号）
let name = "Bob";
let age = 19;
let message = `Hello ${name}, you are ${age} years old.`; 
console.log(message);

// 使用模板字符串可以直接换行，不需要使用 \n 或者 + 号连接多行字符串
let poem =
`Do not go gentle into that good night,
Old age should burn and rave at close of day;
Rage, rage against the dying of the light.`; 
console.log(poem);

对象的简化写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法，这样的书写更加简洁

let name = 'aaa';
let change = function() {
  console.log('aaa');
}

const school = {
  name,
  change,
  improve() {
    consolg.log('bbb');
  }
}

箭头函数

ES6 允许使用箭头（=>）定义函数

this 是静态的，this 始终指向函数声明时所在作用域下的 this 的值

function A(){
  console.log(this.name)
}

let B = () => {
  console.log(this.name);
}

window.name = '尚硅谷';
const school = {
  name: 'ATGUIGU'
}

// 直接调用
A()   // 尚硅谷
B()  // 尚硅谷

// call
A.call(school); // ATGUIGU
B.cal(school);  // 尚硅谷

不能作为构造实例化对象

let A(name,age) => {
    this.name=name;
    this.age=age;
}
let me = new A('xiao', 123);
console.me // error

不能使用 arguments 变量

let fn = () => {
  console.log(arguments);
}
fn(1, 2, 3)  // error

省略小括号，当形参有且只有一个的时候

1
2
3

let add = n => {
    return n + 1;
}

省略花括号，当代码体只有一条语句的时候，此时 return 也必须省略

1	let add = n => n+1;

默认参数

ES6 允许给函数参数赋值初始值

可以给形参赋初始值，一般位置要靠后（潜规则）

function add(a, b, c = 12){
  return a+b+c; 
}
let result = add (1, 2);
console.log(result) // 15

与解构赋值结合

function A({host = '127.0.0.1', username, password, port}){
  console.log(host + username + password + port)
}
A({
  username: 'ran',
  password: '123456',
  port: 3306
})

rest 参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments

function date(...args){
  console.log(args);
}
date('aaa', 'bbb', 'ccc');

扩展运算符

扩展运算符是能将数组转换为逗号分隔的参数序列

const tfboys=['AA', 'BB', 'CC'];
function chunwan(){
  console.log(arguments);
}
chunwan(...tfboys);  // 0: 'AA' 1: 'BB' 2: 'CC'

应用场景

数组的合并

const A = ['aa', 'bb'];
const B = ['cc', 'dd'];
const C = [...A, ...B];
console.log(C)   // [aa, bb, cc, dd]

数组的克隆

1
2
3

const A = ['a', 'b', 'c'];
const B = [...A];
console.log(B)   // [a, b, c]

将伪数组转换为真正的数组

1
2
3

const A = documents.querySelectorAll('div');
const B = [...A];
console.log(B) // [div, div, div]

Symbol

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。Symbol特点：

Symbol 的值是唯一的，用来解决命名冲突的问题
Symbol 值不能与其他数据进行运算
Symbol 定义的对象属性不能使用 for ... in 循环遍历，但是可以使用 Reflect.ownKeys 来获取对象的所有键名

let s = Symbol('aa');
let s2= Symbol('aa');
console.log(s === s2)   // false

let s3 = Symbol.for('bb');
let s4 = Symbol.for('bb');
comsole.log(s3 === s4) // true

注意，Symbol() 函数前不能使用 new 命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象，所以不能使用 new 命令来调用。另外，由于 Symbol 值不是对象，所以也不能添加属性。基本上，它是一种类似于字符串的数据类型

Symbol.prototype.description

前面说过，Symbol() 函数创建 Symbol 值时，可以用参数添加一个描述

1	const sym = Symbol('foo');

上面代码中，sym 这个值的描述就是字符串 foo。但是，读取这个描述需要将 Symbol 显式转为字符串，即下面的写法：

const sym = Symbol('foo');

String(sym) // "Symbol(foo)"
sym.toString() // "Symbol(foo)"

上面的用法不是很方便。ES2019 提供了一个 Symbol 值的实例属性 description，直接返回 Symbol 值的描述

1
2
3

const sym = Symbol('foo');

sym.description // "foo"

作为属性名的 Symbol

由于每一个 Symbol 值都是不相等的，这意味着只要 Symbol 值作为标识符，用于对象的属性名，就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用，能防止某一个键被不小心改写或覆盖

let mySymbol = Symbol();

// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';

// 第二种写法
let a = {
  [mySymbol]: 'Hello!'
};

// 第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

上面代码通过方括号结构和 Object.defineProperty() 方法，将对象的属性名指定为一个 Symbol 值。注意，Symbol 值作为对象属性名时，不能用点运算符

const mySymbol = Symbol();
const a = {};

a.mySymbol = 'Hello!';
a[mySymbol] // undefined
a['mySymbol'] // "Hello!"

上面代码中，因为点运算符后面总是字符串，所以不会读取 mySymbol 作为标识名所指代的那个值，导致 a 的属性名实际上是一个字符串，而不是一个 Symbol 值。同理，在对象的内部，使用 Symbol 值定义属性时，Symbol 值必须放在方括号之中

let s = Symbol();

let obj = {
  [s]: function (arg) { ... }
};

obj[s](123);

上面代码中，如果 s 不放在方括号中，该属性的键名就是字符串 s，而不是 s 所代表的那个 Symbol 值。Symbol 类型还可以用于定义一组常量，保证这组常量的值都是不相等的：

const log = {};

log.levels = {
  DEBUG: Symbol('debug'),
  INFO: Symbol('info'),
  WARN: Symbol('warn')
};
console.log(log.levels.DEBUG, 'debug message');
console.log(log.levels.INFO, 'info message');

还有一点需要注意，Symbol 值作为属性名时，该属性还是公开属性，不是私有属性

消除魔术字符串

魔术字符串指的是，在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码，应该尽量消除魔术字符串，改由含义清晰的变量代替

1
2
3

const shapeType = {
  triangle: Symbol()
};

上面代码中，除了将 shapeType.triangle 的值设为一个 Symbol，其他地方都不用修改

属性名的遍历

Symbol 值作为属性名，遍历对象的时候，该属性不会出现在 for ... in 、for ... of 循环中，也不会被 Object.keys()、Object.getOwnPropertyNames()、JSON.stringify() 返回

但是，它也不是私有属性，有一个 Object.getOwnPropertySymbols() 方法，可以获取指定对象的所有 Symbol 属性名。该方法返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值

const obj = {};
const foo = Symbol('foo');

obj[foo] = 'bar';

for (let i in obj) {
  console.log(i); // 无输出
}

Object.getOwnPropertyNames(obj) // []
Object.getOwnPropertySymbols(obj) // [Symbol(foo)]

上面代码中，使用 for ... in 循环和 Object.getOwnPropertyNames() 方法都得不到 Symbol 键名，需要使用 Object.getOwnPropertySymbols() 方法。另一个新的 API，Reflect.ownKeys() 方法可以返回所有类型的键名，包括常规键名和 Symbol 键名

let obj = {
  [Symbol('my_key')]: 1,
  enum: 2,
  nonEnum: 3
};

Reflect.ownKeys(obj) //  ["enum", "nonEnum", Symbol(my_key)]

由于以 Symbol 值作为键名，不会被常规方法遍历得到。我们可以利用这个特性，为对象定义一些非私有的、但又希望只用于内部的方法

let size = Symbol('size');

class Collection {
  constructor() {
    this[size] = 0;
  }

  add(item) {
    this[this[size]] = item;
    this[size]++;
  }

  static sizeOf(instance) {
    return instance[size];
  }
}

let x = new Collection();
Collection.sizeOf(x) // 0

x.add('foo');
Collection.sizeOf(x) // 1

Object.keys(x) // ['0']
Object.getOwnPropertyNames(x) // ['0']
Object.getOwnPropertySymbols(x) // [Symbol(size)]

上面代码中，对象 x 的 size 属性是一个 Symbol 值，所以 Object.keys(x)、Object.getOwnPropertyNames(x) 都无法获取它。这就造成了一种非私有的内部方法的效果

Symbol.for()

有时，我们希望重新使用同一个 Symbol 值，Symbol.for() 方法可以做到这一点。它接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 Symbol 值。如果有，就返回这个 Symbol 值，否则就新建一个以该字符串为名称的 Symbol 值，并将其注册到全局

let s1 = Symbol.for('foo');
let s2 = Symbol.for('foo');

s1 === s2 // true

上面代码中，s1 和 s2 都是 Symbol 值，但是它们都是由同样参数的 Symbol.for 方法生成的，所以实际上是同一个值

Symbol.for() 与 Symbol() 这两种写法，都会生成新的 Symbol。它们的区别是，前者会被登记在全局环境中供搜索，后者不会。Symbol.for() 不会每次调用就返回一个新的 Symbol 类型的值，而是会先检查给定的 key 是否已经存在，如果不存在才会新建一个值。比如，如果你调用 Symbol.for("cat") 30 次，每次都会返回同一个 Symbol 值，但是调用 Symbol("cat") 30 次，会返回 30 个不同的 Symbol 值

1 2	Symbol("bar") === Symbol("bar") // false Symbol.for("bar") === Symbol.for("bar") // true

Symbol.keyFor()

Symbol.keyFor() 方法返回一个已登记的 Symbol 类型值的 key

let s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"

let s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined

上面代码中，变量 s2 属于未登记的 Symbol 值，所以返回 undefined。注意，Symbol.for() 为 Symbol 值登记的名字，是全局环境的，不管有没有在全局环境运行

内置的 Symbol 值

除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法

Symbol.hasInstance

对象的 Symbol.hasInstance 属性，指向一个内部方法。当其他对象使用 instanceof 运算符，判断是否为该对象的实例时，会调用这个方法。比如，foo instanceof Foo 在语言内部，实际调用的是 Foo[Symbol.hasInstance](foo)

class MyClass {
  [Symbol.hasInstance](foo) {
    return foo instanceof Array;
  }
}

[1, 2, 3] instanceof new MyClass() // true

Symbol.isConcatSpreadable

对象的 Symbol.isConcatSpreadable 属性等于一个布尔值，表示该对象用于 Array.prototype.concat() 时，是否可以展开

let arr1 = ['c', 'd'];
['a', 'b'].concat(arr1, 'e') // ['a', 'b', 'c', 'd', 'e']
arr1[Symbol.isConcatSpreadable] // undefined

let arr2 = ['c', 'd'];
arr2[Symbol.isConcatSpreadable] = false;
['a', 'b'].concat(arr2, 'e') // ['a', 'b', ['c','d'], 'e']

Symbol.species

对象的 Symbol.species 属性，指向一个构造函数。创建衍生对象时，会使用该属性

class MyArray extends Array {
}

const a = new MyArray(1, 2, 3);
const b = a.map(x => x);
const c = a.filter(x => x > 1);

b instanceof MyArray // true
c instanceof MyArray // true

上面代码中，子类 MyArray 继承了父类 Array，a 是 MyArray 的实例，b 和 c 是 a 的衍生对象。你可能会认为，b 和 c 都是调用数组方法生成的，所以应该是数组（Array 的实例），但实际上它们也是 MyArray 的实例。Symbol.species 属性就是为了解决这个问题而提供的。现在，我们可以为 MyArray 设置 Symbol.species 属性

1
2
3

class MyArray extends Array {
  static get [Symbol.species]() { return Array; }
}

上面代码中，a.map(x => x) 生成的衍生对象，就不是 MyArray 的实例，而直接就是 Array 的实例

总之，Symbol.species 的作用在于，实例对象在运行过程中，需要再次调用自身的构造函数时，会调用该属性指定的构造函数。它主要的用途是，有些类库是在基类的基础上修改的，那么子类使用继承的方法时，作者可能希望返回基类的实例，而不是子类的实例

Symbol.match

对象的 Symbol.match 属性，指向一个函数。当执行 str.match(myObject) 时，如果该属性存在，会调用它，返回该方法的返回值

String.prototype.match(regexp)
// 等同于
regexp[Symbol.match](this)

class MyMatcher {
  [Symbol.match](string) {
    return 'hello world'.indexOf(string);
  }
}

'e'.match(new MyMatcher()) // 1

Symbol.replace

对象的 Symbol.replace 属性，指向一个方法，当该对象被 String.prototype.replace 方法调用时，会返回该方法的返回值

const x = {};
x[Symbol.replace] = (...s) => console.log(s);

'Hello'.replace(x, 'World') // ["Hello", "World"]

Symbol.replace 方法会收到两个参数，第一个参数是 replace 方法正在作用的对象，上面例子是 Hello，第二个参数是替换后的值，上面例子是 World

Symbol.search

对象的 Symbol.search 属性，指向一个方法，当该对象被 String.prototype.search 方法调用时，会返回该方法的返回值

String.prototype.search(regexp)
// 等同于
regexp[Symbol.search](this)

class MySearch {
  constructor(value) {
    this.value = value;
  }
  [Symbol.search](string) {
    return string.indexOf(this.value);
  }
}
'foobar'.search(new MySearch('foo')) // 0

Symbol.split

对象的 Symbol.split 属性，指向一个方法，当该对象被 String.prototype.split 方法调用时，会返回该方法的返回值

class MySplitter {
  constructor(value) {
    this.value = value;
  }
  [Symbol.split](string) {
    let index = string.indexOf(this.value);
    if (index === -1) {
      return string;
    }
    return [
      string.substr(0, index),
      string.substr(index + this.value.length)
    ];
  }
}

'foobar'.split(new MySplitter('foo')) // ['', 'bar']
'foobar'.split(new MySplitter('bar')) // ['foo', '']
'foobar'.split(new MySplitter('baz')) // 'foobar'

上面方法使用 Symbol.split 方法，重新定义了字符串对象的 split 方法的行为

Symbol.iterator

对象的 Symbol.iterator 属性，指向该对象的默认遍历器方法

const myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

[...myIterable] // [1, 2, 3]

Symbol.toPrimitive

对象的 Symbol.toPrimitive 属性，指向一个方法。该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。Symbol.toPrimitive 被调用时，会接受一个字符串参数，表示当前运算的模式，一共有三种模式：

Number：该场合需要转成数值
String：该场合需要转成字符串
Default：该场合可以转成数值，也可以转成字符串

let obj = {
  [Symbol.toPrimitive](hint) {
    switch (hint) {
      case 'number':
        return 123;
      case 'string':
        return 'str';
      case 'default':
        return 'default';
      default:
        throw new Error();
     }
   }
};

2 * obj // 246
3 + obj // '3default'
obj == 'default' // true
String(obj) // 'str'

Symbol.toStringTag

对象的 Symbol.toStringTag 属性，用来设定一个字符串（设为其他类型的值无效，但不报错）。在目标对象上面调用 Object.prototype.toString() 方法时，如果 Symbol.toStringTag 属性存在，该属性设定的字符串会出现在 toString() 方法返回的字符串之中，表示对象的类型。也就是说，这个属性可以用来定制 [object Object] 或 [object Array] 中 object 后面的那个大写字符串

// 例一
({[Symbol.toStringTag]: 'Foo'}.toString())
// "[object Foo]"

// 例二
class Collection {
  get [Symbol.toStringTag]() {
    return 'xxx';
  }
}
let x = new Collection();
Object.prototype.toString.call(x) // "[object xxx]"

Symbol.unscopables

对象的 Symbol.unscopables 属性，指向一个对象。该对象指定了使用 with 关键字时，哪些属性会被 with 环境排除

// 没有 unscopables 时
class MyClass {
  foo() { return 1; }
}

var foo = function () { return 2; };

with (MyClass.prototype) {
  foo(); // 1
}

// 有 unscopables 时
class MyClass {
  foo() { return 1; }
  get [Symbol.unscopables]() {
    return { foo: true };
  }
}

var foo = function () { return 2; };

with (MyClass.prototype) {
  foo(); // 2
}

上面代码通过指定 Symbol.unscopables 属性，使得 with 语法块不会在当前作用域寻找 foo 属性，即 foo 将指向外层作用域的变量

迭代器

迭代器是一种遵循迭代协议的对象，可以按照一定的顺序访问一个集合中的元素。迭代器有一个 next 方法，每次调用返回一个包含 value 和 done 属性的对象，value 表示当前元素的值，done 表示是否还有更多元素。ES6 提供了一种新的语法 for ... of循环，可以方便地遍历迭代器

const xiyou=['AA', 'BB', 'CC', 'DD'];
for(let v of xiyou){
  console.log(v)  // 'AA', 'BB', 'CC', 'DD' for in 保存的是键名，for of 保存的是键值
}
let iterator = xiyou[Symbol.iterator]();
console.log(iterator.next()); // {{value:'唐僧', done:false}}
console.log(iterator.next()); // {{value:'孙悟空', done:false}}

生成器

生成器是一种特殊的函数，可以返回一个迭代器对象，并且可以在函数体内使用 yield 关键字暂停和恢复执行。生成器使用 function* 关键字声明，并且可以接收参数

function * gen (){    // 函数名和 function 中间有一个 * 
  yield '耳朵';     // yield 是函数代码的分隔符
  yield '尾巴';
  yield '真奇怪';
}
let iterator = gen();
console.log(iteretor.next()); // {value:'耳朵', done:false} next() 执行第一段，并且返回 yield 后面的值
console.log(iteretor.next()); // {value:'尾巴', done:false}
console.log(iteretor.next()); // {value:'真奇怪', done:false}

用生成器函数的方式解决 回调地狱 问题：

function one(){
  setTimeout(() => {
    console.log('111')
    iterator.next()
  }, 1000)
}
function two(){
  setTimeout(() => {
    console.log('222')
    iterator.next();
  }, 2000)
}
function three(){
  setTimeout(() => {
    console.log('333')
    iterator.next();
  }, 3000)
}

function * gen(){
  yield one();
  yield two();
  yield three();
}

let iterator = gen();
iterator.next();

Promise

Promise 是一种用于处理异步操作的对象，它表示一个未来可能完成或失败的事件。Promise 有三种状态：pending（等待）、fulfilled（成功）、rejected（失败）。Promise 可以通过 then 方法添加成功或失败时执行的回调函数，也可以通过 catch 方法添加失败时执行的回调函数。Promise 还可以通过 all 和 race 方法组合多个 Promise 对象

const p =new Promise((resolve, reject) => {
  setTimeout(()=>{
    resolve('用户数据');
  })
});

let result = p.then(value => {
  console.log(value)
  // return 123;
  // return new Promise((resolve, reject) => {
  //   resolve('ok')
  // })
  throw 123
},reason => {
  console.log(reason)
})
console.log(result);

Promise.prototype.then()

Promise 实例具有 then 方法，也就是说，then 方法是定义在原型对象 Promise.prototype 上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过，then 方法的第一个参数是 resolved 状态的回调函数，第二个参数是 rejected 状态的回调函数，它们都是可选的

then 方法返回的是一个新的 Promise 实例（注意，不是原来那个 Promise 实例）。因此可以采用链式写法，即 then 方法后面再调用另一个 then 方法

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

Promise.prototype.catch()

Promise.prototype.catch() 方法是 .then(null, rejection) 或 .then(undefined, rejection) 的别名，用于指定发生错误时的回调函数

getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 处理 getJSON 和 前一个回调函数运行时发生的错误
  console.log('发生错误！', error);
});

Promise.prototype.finally()

finally() 方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的

promise
  .then(result => {···})
  .catch(error => {···})
  .finally(() => {···});

不管 promise 最后的状态，在执行完 then 或 catch 指定的回调函数以后，都会执行 finally 方法指定的回调函数

// resolve 的值是 undefined
Promise.resolve(2).then(() => {}, () => {})

// resolve 的值是 2
Promise.resolve(2).finally(() => {})

// reject 的值是 undefined
Promise.reject(3).then(() => {}, () => {})

// reject 的值是 3
Promise.reject(3).finally(() => {})

Promise.all()

Promise.all() 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例

1	const p = Promise.all([p1, p2, p3]);

上面代码中，Promise.all() 方法接受一个数组作为参数，p1、p2、p3 都是 Promise 实例，如果不是，就会先调用下面讲到的 Promise.resolve 方法，将参数转为 Promise 实例，再进一步处理。另外，Promise.all() 方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。p的状态由 p1、p2、p3 决定，分成两种情况：

只有 p1、p2、p3 的状态都变成 fulfilled，p 的状态才会变成 fulfilled，此时 p1、p2、p3 的返回值组成一个数组，传递给 p 的回调函数
只要 p1、p2、p3 之中有一个被 rejected，p 的状态就变成 rejected，此时第一个被 reject 的实例的返回值，会传递给 p 的回调函数

Promise.race()

Promise.race() 方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例

1	const p = Promise.race([p1, p2, p3]);

上面代码中，只要 p1、p2、p3 之中有一个实例率先改变状态，p 的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数

Promise.race() 方法的参数与 Promise.all() 方法一样，如果不是 Promise 实例，就会先调用下面讲到的 Promise.resolve() 方法，将参数转为 Promise 实例，再进一步处理

下面是一个例子，如果指定时间内没有获得结果，就将 Promise 的状态变为reject，否则变为resolve

const p = Promise.race([
  fetch('/resource-that-may-take-a-while'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
]);

p.then(console.log)
 .catch(console.error);

上面代码中，如果 5 秒之内 fetch 方法无法返回结果，变量 p 的状态就会变为 rejected，从而触发 catch 方法指定的回调函数

Promise.allSettled()

有时候，我们希望等到一组异步操作都结束了，不管每一个操作是成功还是失败，再进行下一步操作。但是，现有的 Promise 方法很难实现这个要求。Promise.all() 方法只适合所有异步操作都成功的情况，如果有一个操作失败，就无法满足要求。

为了解决这个问题，ES2020 引入了 Promise.allSettled() 方法，用来确定一组异步操作是否都结束了（不管成功或失败）。所以，它的名字叫做"Settled"，包含了 "fulfilled"和"rejected"两种情况

Promise.allSettled() 方法接受一个数组作为参数，数组的每个成员都是一个 Promise 对象，并返回一个新的 Promise 对象。只有等到参数数组的所有 Promise 对象都发生状态变更（不管是 fulfilled 还是 rejected），返回的 Promise 对象才会发生状态变更

const promises = [
  fetch('/api-1'),
  fetch('/api-2'),
  fetch('/api-3'),
];

await Promise.allSettled(promises);
removeLoadingIndicator();

Promise.any()

ES2021 引入了 Promise.any() 方法。该方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例返回

Promise.any([
  fetch('https://v8.dev/').then(() => 'home'),
  fetch('https://v8.dev/blog').then(() => 'blog'),
  fetch('https://v8.dev/docs').then(() => 'docs')
]).then((first) => {  // 只要有一个 fetch() 请求成功
  console.log(first);
}).catch((error) => { // 所有三个 fetch() 全部请求失败
  console.log(error);
});

只要参数实例有一个变成 fulfilled 状态，包装实例就会变成 fulfilled 状态；如果所有参数实例都变成 rejected 状态，包装实例就会变成 rejected 状态

Promise.resolve()

有时需要将现有对象转为 Promise 对象，Promise.resolve() 方法就起到这个作用

1	const jsPromise = Promise.resolve($.ajax('/whatever.json'));

上面代码将 jQuery 生成的deferred对象，转为一个新的 Promise 对象。Promise.resolve() 等价于下面的写法

1
2
3

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

Promise.reject()

Promise.reject(reason) 方法也会返回一个新的 Promise 实例，该实例的状态为 rejected

const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s) // 出错了
});

集合

Set

ES6 提供了新的数据结构 set，它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用扩展运算符和 for ... of 进行遍历，集合的属性和方法：

size 返回集合的元素个数
add 增加一个新元素，返回当前集合
delete 删除元素，返回 boolean 值 has 检测集合中是否包含某个元素，返回 boolean 值

let s = new Set();
let s2 = new Set(['A', 'B', 'C', 'D'])

// 元素个数
console.log(s2.size);

// 添加新的元素
s2.add('E');

// 删除元素
s2.delete('A')

// 检测
console.log(s2.has('C'));

// 清空
s2.clear()

console.log(s2);

Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是"键"的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了 iterator 接口，所以可以使用扩展运算符和 for ... of 进行遍历 Map 的属性和方法

let m = new Map();
m.set('name', 'ran');
m.set('change', () => {
  console.log('改变！')
})
let key={
  school: 'atguigu'
}
m.set(key, ['成都', '西安']);

// size
console.log(m.size);

// 删除
m.delete('name');

// 获取
console.log(m.get('change'));

// 清空
m.clear()

// 遍历
for(let v of m){
  console.log(v);
}

Class

ES6 提供了一种新的语法，可以让 JavaScript 支持类和继承这两个面向对象编程的重要概念。类是一种定义对象属性和方法的模板，可以通过 new 关键字创建类的实例。继承是一种让子类拥有父类属性和方法的机制，可以通过 extends 和 super 关键字实现

// 定义一个类：使用 class 关键字，并且提供一个 constructor 方法作为构造函数（初始化实例属性）
class Person {
  constructor(name,age) {
    this.name = name; // this 指向实例对象
    this.age = age;
  }

  // 定义类的方法：直接在类中写函数名和函数体（不需要使用 function 关键字）
  sayHi() {
    console.log(`Hello ${this.name}, you are ${this.age} years old.`);
  }
}

// 创建类的实例：使用 new 关键字，并且传入构造函数所需的参数
let alice = new Person("Alice", 18);
alice.sayHi(); // Hello Alice, you are 18 years old.

// 定义一个子类：使用 extends 关键字继承父类，并且可以重写或新增属性和方法
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // 使用 super 关键字调用父类的构造函数（必须在子类构造函数中第一行执行）
    this.grade = grade; // 子类可以新增自己的属性
  }

  // 子类可以重写或新增父类的方法
  sayHi() {
    console.log(`Hello ${this.name}, you are ${this.age} years old and in grade ${this.grade}.`);
  }

  study() {
    console.log(`${this.name} is studying hard.`);
  }
}

// 创建子类的实例：使用 new 关键字，并且传入构造函数所需的参数（包括父类和子类的参数）
let bob = new Student("Bob", 19, 12);
bob.sayHi(); // Hello Bob, you are 19 years old and in grade 12.
bob.study(); // Bob is studying hard.

数值扩展

// Number.EPSILON 是 JavaScript 的最小精度，属性的值接近于 2.22044...E-16
function equal(a, b){
  if(Math.abs(a - b) < Number.EPSILON) {
    return true;
  } else {
    return false;
  }
}

console.log(equal(0.1 + 0.2 === 0.3))  // false
console.log(equal(0.1 + 0.2, 0.3))  // true

// 二进制和八进制
let b = 0b1010; // 2进制
let o = 0o777;  // 8进制
let d = 100;    // 10进制
let x = 0xff;   // 16进制
console.log(x)  // 255

// 检测一个数是否为有限数
console.log(Number.isFinite(100));  // true
console.log(Number.isFinite(100 / 0));  // false
console.log(Number.isFinite(Infinity));  // false

// 检测一个数值是否为 NaN
console.log(Number.isNaN(123))  // false

// 字符串转整数
console.log(Number.parseInt('5213123love')); // 5213123
console.log(Number.parseFloat('5.123123神器')); // 5.123123

// 判断是否为整数
console.log(Number.isInteger(5));  // true
console.log(Number.isInteger(2.5)); // false

// 将小数部分抹除
console.log(Math.trunc(3.45345345345)) // 3

// 检测一个数到底是正数、负数、还是 0
console.log(Math.sign(100))  // 1
console.log(Math.sign(0))    // 0
console.log(Math.sign(-123)) // -1

对象方法扩展

// 1.Object.is 判断两个值是否完全相等
console.log(Object.is(120, 120))  // true
console.log(Object.is(NaN, NaN))  // false

// 2.Object.assign 对象的合并
const a = {
  name: 'ran',
  age: 12
}
const b = {
  pass: 'i love you'
}
console.log(Object.assign(a, b))   // {name: 'ran', age: '12', pass: 'i love you'}

// 3.Object.setPrototypeOf 设置原型对象 Object.getPrototypeof
const school = {
  name: '尚硅谷'
}
const cities = {
  xiaoqu: ['北京', '上海']
}
Object.setPrototypeOf(school, cities)
console.log(Object.getPrototypeOf(school))  // {xiaoqu: Array(2)}
console.log(school)  // {name: "尚硅谷"}

模块化

基本介绍

模块化是指将一个大的程序文件,拆分成许多小的文件，然后将小文件组合起来
模块化的好处：
1. 防止命名冲突
2. 代码复用
3. 高维护性
模块化规范产品
1. CommonJS ====> NodeJS、Browserify
2. AMD ====> requireJS
3. CMD ====> seaJS

模块功能主要有两个命令构成：export 和 import。export 命令用于规定模块的对外接口；import命令用于输入其他模块提供的功能

export let school = '尚硅谷'
export function teach() {
  console.log('教技能')
}

1 2	import * as m1 from "./src/js/m1.js"; console.log(m1);

暴露语法

统一暴露

// 统一暴露
let school = '尚硅谷';
function findjob(){
  console.log('找工作吧');
}
export {school, findjob}

默认暴露

//默认暴露
export default {
  school: 'ATGUIGU',
  change:function() {
    console.log('我们可以改变你')
  }
}

引入语法

通用导入方式

1
2
3

import * as m1 from "./src/js/m1.js"
import * as m2 from "./src/js/m2.js"
import * as m3 from "./src/js/m3.js"

解构赋值方式

import {school, teach} from "./src/js/m1.js"
import {school as guigu, findJob} from "./src/js/m2.js"
import {default as m3 } from "./src/js/m3.js"

简便形式（只针对默认暴露）

1	import m3 from "./src/js/m3.js"

模块化方式 2

1	<script src="./src//js/app.js" type=modeule></script>

ES7

Array.prototype.includes：用来检测数组中是否包含某个元素，返回布尔类型值
在 ES7 中引入指数操作符 **，用来实现幂运算，功能与 Math.pow 结果相同

// include
const mingzhu = ['西游记', '红楼梦', '水浒传', '三国演义']
console.log(mingzhu.includes('西游记'))  // true
console.log(mingzhu.includes('金瓶梅'))  // false

// **
console.log(2**10) // 1024

ES8

async

async 和 await 两种语法结合可以让异步代码像同步代码一样

async 函数的返回值为 promise 对象
async 返回的 promise 对象的结果值由 async 函数执行的返回值决定

async function fn(){
  // 1.如果返回的是一个非 Promise 的对象，则 fn() 返回的结果就是成功状态的 Promise 对象，值为返回值
  // 2.如果返回的是一个Promise对象，则 fn() 返回的结果与内部 Promise 对象的结果一致
  // 3.如果返回的是抛出错误，则 fn() 返回的就是失败状态的 Promise 对象
  return new Promise((resolve, reject) => {
    resolve('成功的数据');
  });
}
const result = fn();
result.then(value => {
  console.log(value)  // 成功的数据
},reason => {
  console.log(reason)
})

await

await 必须放在 async 函数中
await 右侧的表达式一般为 promise 对象
await 可以返回的是右侧 promise 成功的值
await 右侧的 promise 如果失败了，就会抛出异常，需要通过 try ... catch 捕获处理

// 创建 Promise 对象
const p = new Promise((resolve, reject) => {
  // resolve("成功的值")
  reject("失败了")
})

// await 必须放在 async 函数中
async function main() {
  try {
    let res = await p;
    console.log(res);
  } catch (e) {
    console.log(e);
  }
}

main()  // 失败了

对象方法扩展

const school = {
  name: '尚硅谷',
  cities: ['北京', '上海', '深圳'],
  xueke: ['前端', 'Java', '大数据', '运维']
};

// 获取对象所有的键
console.log(Object.keys(school));

// 获取对象所有的值
console.log(Object.values(school));

// entries，用来创建 map
console.log(Object.entries(school));
console.log(new Map(Object.entries(school)))

// 对象属性的描述对象
console.log(Object.getOwnPropertyDescriptor(school))

const obj = Object.create(null, {
  name:{
    value: '尚硅谷',
    // 属性特性
    writable:true,
    configurable:true,
    enumerable:true,
  }
})

ES9

运算扩展符与 rest 参数

function connect({host, port, ...user}){
  console.log(host);
  console.log(port);
  console.log(user)
}
connect({
  host: '127.0.0.1',
  port: 3306,
  username: 'root',
  password: 'root',
  type: 'master'
})  // 127.0.0.1  3306  {username: "root", password: "root", type: "master"}

const AA = {
  username: 'ran'
}
const BB = {
  password: 'lyyrhf'
}
const CC = {
  job: 'Java'
}
const D = {...AA, ...BB, ...CC};
console.log(D) // {username: "ran", password: "lyyrhf", job: "Java"}

ES10

对象扩展方法

// 二维数组
const res = Object.fromEntries([
  ['name', 'RHF'],
  ['cities', '成都', '武汉']
])
console.log(res) // {name: "RHF", cities: "成都"}

// Map
const m = new Map();
m.set('name', 'ranhaifeng')
const result = Object.fromEntries(m)
console.log(result); // {name: "ranhaifeng"}

flat 与 flatMap

const arr = [1, 2, 3, [4, 5, 6, [7, 8, 9]]]
// 参数为深度，是一个数字
console.log(arr.flat(2)) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

const arr2=[1, 2, 3, 4]
const result = arr2.flatmap(item => [item * 10]); // 如果 map 的结果是一个多维数组可以进行 flat 是两个操作的结合

私有属性

ES2022 正式为 class 添加了私有属性，方法是在属性名之前使用 # 表示

class IncreasingCounter {
  #count = 0;
  get value() {
    console.log('Getting the current value!');
    return this.#count;
  }
  increment() {
    this.#count++;
  }
}

上面代码中，#count 就是私有属性，只能在类的内部使用（this.#count）。如果在类的外部使用，就会报错

1
2
3

const counter = new IncreasingCounter();
counter.#count // 报错
counter.#count = 42 // 报错

注意，从 Chrome 111 开始，开发者工具里面可以读写私有属性，不会报错，原因是 Chrome 团队认为这样方便调试

另外，不管在类的内部或外部，读取一个不存在的私有属性，也都会报错。这跟公开属性的行为完全不同，如果读取一个不存在的公开属性，不会报错，只会返回 undefined

class IncreasingCounter {
  #count = 0;
  get value() {
    console.log('Getting the current value!');
    return this.#myCount; // 报错
  }
  increment() {
    this.#count++;
  }
}

const counter = new IncreasingCounter();
counter.#myCount // 报错

上面示例中，#myCount 是一个不存在的私有属性，不管在函数内部或外部，读取该属性都会导致报错

注意：私有属性的属性名必须包括 #，如果不带 #，会被当作另一个属性

可选链操作符

相当于一个判断符，如果前面的有，就进入下一层级

function main(config){
    const dbHost = config?.db?.host
    console.log(dbHost) // 192.168.1.100
}

main({
  db: {
    host:'192.168.1.100',
    username:'root'
  },
  cache: {
    host:'192.168.1.200',
    username:'admin'
  }
})

BigInt

JavaScript 所有数字都保存成 64 位浮点数，这给数值的表示带来了两大限制。一是数值的精度只能到 53 个二进制位（相当于 16 个十进制位），大于这个范围的整数，JavaScript 是无法精确表示，这使得 JavaScript 不适合进行科学和金融方面的精确计算。二是大于或等于 2 的 1024 次方的数值，JavaScript 无法表示，会返回Infinity

// 超过 53 个二进制位的数值，无法保持精度
Math.pow(2, 53) === Math.pow(2, 53) + 1 // true

// 超过 2 的 1024 次方的数值，无法表示
Math.pow(2, 1024) // Infinity

ES2020 引入了一种新的数据类型 BigInt（大整数），来解决这个问题，这是 ECMAScript 的第八种数据类型。BigInt 只用来表示整数，没有位数的限制，任何位数的整数都可以精确表示

const a = 2172141653n;
const b = 15346349309n;

// BigInt 可以保持精度
a * b // 33334444555566667777n

// 普通整数无法保持精度
Number(a) * Number(b) // 33334444555566670000

为了与 Number 类型区别，BigInt 类型的数据必须添加后缀n

1234 // 普通整数
1234n // BigInt

// BigInt 的运算
1n + 2n // 3n

import

ES2020 提案引入 import() 函数，支持动态加载模块

1	import(specifier)

上面代码中，import 函数的参数 specifier，指定所要加载的模块的位置。import 命令能够接受什么参数，import() 函数就能接受什么参数，两者区别主要是后者为动态加载。import() 返回一个 Promise 对象。下面是一个例子：

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

import() 函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import() 函数与所加载的模块没有静态连接关系，这点也是与 import 语句不相同。import() 类似于 Node.js 的 require() 方法，区别主要是前者是异步加载，后者是同步加载

由于 import() 返回 Promise 对象，所以需要使用 then() 方法指定处理函数。考虑到代码的清晰，更推荐使用 await 命令

async function renderWidget() {
  const container = document.getElementById('widget');
  if (container !== null) {
    // 等同于
    // import("./widget").then(widget => {
    //   widget.render(container);
    // });
    const widget = await import('./widget.js');
    widget.render(container);
  }
}

renderWidget();