es6常用语法简记

声明方式 let声明: 声明一个变量,有暂时性死区、无变量提升有块级作用域   // 声明的是一个变量,变量在声明且赋值后,能更改其赋的值  let a = 1;  a = 2;  console.log(a); // 2  // 暂时...

声明方式

let声明:

声明一个变量,有暂时性死区、无变量提升有块级作用域

  // 声明的是一个变量,变量在声明且赋值后,能更改其赋的值
  let a = 1;
  a = 2;
  console.log(a); // 2
  // 暂时性死区:只要代码块内有let它所声明的变量就“绑定”这个区域,不再受外部的影响。
  var a = 3;
  {
    a = 123; // Identifier 'a' has already been declared
    let a;
  }
  // 无变量提升
  console.log(a); // a is not defined
  let a = '张三';
  // 块级作用域
  {
    let n = '张三'
  }
  console.log(n); // n is not defined


const声明:

声明一个常量,有暂时性死区、无变量提升有块级作用域

  // 声明一个常量,一旦声明必须立即初始化,一旦初始化之后,它的值不能再进行任何修改!
  const a = 2;
  a = 4;// Assignment to constant variable.(赋值给常数变量。)
  // 初始值为对象时为特殊情况
  const obj = {};
  obj.name = "张三";
  obj.age = 24;
  console.log(obj); // {name: "张三", age: 24}
  // 初始值为数组时也是特殊情况
  const arr = [];
  arr[0] = 1;
  arr[1] = 2;
  console.log(arr); // [1, 2]
  // 其他的同let是一样的


var声明:

var声明一个变量,无暂时性死区,有变量提升无块级作用域,只有函数作用域和全局作用域

  // 声明一个变量
  var a = 1;
  a = 2;
  console.log(a); // 2
  // 无暂时性死区
  var a = 3;
  {
    a = 123;
    var a;
  }
  console.log(a); // 123
  // 变量提升
  console.log(a); // undefined
  var a = 3;
  // 全局作用域:
  var a = 3;
  function fun () {
    console.log(a);
  }
  fun(); // 3
  // 函数作用域
  function fun () {
    var a = 3;
    console.log(a);
  }
  fun(); // 3
  console.log(a); // a is not defined


补充:对象window中声明的变量,具有全局作用域,在函数中声明的变量具有函数作用域,在代码块中用let、const声明的变量具有块级作用域。


变量的解构赋值:

这个东西只说用法,没有太多概念性的东西

交换变量的值

  let x = 1;
  let y = 2;
  [x, y] = [y, x];
  console.log(x,y); // 2 1


从函数返回多个值

  // 返回一个数组
  function fun () {
    return [1, 2, 3];
  }
  let [x, y, z] = fun();
  console.log(x, y, z); // 1, 2, 3
  // 返回一个对象
  function fun () {
    return {
      name: '张三',
      age: 24,
      sex: '女'
    }
  }
  let {name, age, sex} = fun();
  console.log(name, age, sex); // 张三 24 女


函数参数的定义

   // 参数是一组有次序的值
   function f([x, y, z]) { ... }
   f([1, 2, 3]);
   // 参数是一组无次序的值
   function f({x, y, z}) { ... }
   f({z: 3, y: 2, x: 1});


提取 JSON 数据

 let data = {
   name: '张三',
   age: 24
 };
 let {name, age} = data;
 console.log(name, age); // 张三 24


函数参数的解构赋值

   function add([x, y]){
     return x + y;
   }
   add([1, 2]); // 3


遍历 Map 结构

   for (let [key, value] of map) {
     console.log(key + " is " + value);
   }


输入模块的指定方法

   const { SourceMapConsumer, SourceNode } = require("source-map");



字符串扩展

字符串的遍历器接口

   for (let codePoint of 'foo') {
     console.log(codePoint)
   }


模板字符串

  let name = '张三';
  let str = `${name}的女朋友`;
  console.log(str); // 张三的女朋友


includes() :

返回布尔值,表示是否找到了参数字符串。

  let str = "张三的女朋友";
  console.log(str.includes("张三")); // true

补充: indexOf如果查找到了就返回索引,未找到则返回-1


startsWith() :

返回布尔值,表示参数字符串是否在原字符串的头部。

   let str = "张三的女朋友";
   console.log(str.startsWith("张")); || console.log(str.indexOf("张") == 0); // true


endsWith():

返回布尔值,表示参数字符串是否在原字符串的尾部。

   let str = "张三的女朋友";
   console.log(str.endsWith("友")); || console.log(str.indexOf("友") == str.length - 1); // true


repeat():方法返回一个新字符串,表示将原字符串重复n次。

  let str = '6';
  console.log(str.repeat(3)); // 666


padStart()用于头部补全

    'x'.padStart(5, 'ab') // 'ababx'
    'x'.padStart(4, 'ab') // 'abax'



padEnd():用于尾部补全

    'x'.padEnd(5, 'ab') // 'xabab'
    'x'.padEnd(4, 'ab') // 'xaba'


关于去除空格

(1). trim():

方法会从一个字符串的两端删除空白字符。

  let str = ' 10 10 ';
  console.log(str); // ' 10 10 '
  console.log(str.trim()); // '10 10'
  // 如果要去除所有空格
  let str = ' 10 10 ';
  console.log(str.replace(/ /g, '')); // 1010


(2). trimStart():

消除字符串头部的空格

  let str = ' 10 10 ';
  console.log(str); // ' 10 10 '
  console.log(str.trimStart()); // '10 10 '


(3). trimEnd()

消除尾部的空格

  let str = ' 10 10 ';
  console.log(str); // ' 10 10 '
  console.log(str.trimEnd()); // ' 10 10'


replaceAll():

可以一次性替换所有匹配。

  'aabbcc'.replaceAll('b', '_') == 'aabbcc'.replace(/b/g, '_') // true


matchAll():返回一个正则表达式在当前字符串的所有匹配

  let str = 'aabb';
  console.log([...str.matchAll(/a/g)]);//[["a", index: 0, input: "aabb", groups: undefined] ["a",
  index: 1, input: "aabb", groups: undefined]]


正则表达式

y 修饰符

“粘连”(sticky)修饰符。后一次匹配都从上一次匹配成功的下一个位置开始,y修饰符确保匹配必须从剩余的第一个位置开始,这也就是“粘连”的涵义。

var s = 'aaa_aa_a';
var r1 = /a+/g;
var r2 = /a+/y;
r1.exec(s) // ["aaa"]
r2.exec(s) // ["aaa"]
r1.exec(s) // ["aa"]
r2.exec(s) // null


先行断言

x只有在y前面才匹配

let s = 'xyzx';
let RE = /x(?=y)/;
RE.exec(s); // ["x", index: 0, input: "xyzx", groups: undefined]

注:以上可以看出匹配到的结果索引在第一个的位置


先行否定断言

x只有不在y前面才匹配

let s = 'xyzx';
let RE = /x(?!y)/;
RE.exec(s); // ["x", index: 3, input: "xyzx", groups: undefined]

注:以上可以看出匹配到的结果索引在第四个的位置


后行断言

z只有在y后面才匹配

let s = 'xyzx';
let RE = /(?<=y)z/;
RE.exec(s); // ["z", index: 2, input: "xyzx", groups: undefined]

注:以上可以看出匹配到的结果索引在第3个的位置


后行否定断言

z只有不在y后面才匹配

let s = 'xyyiizx';
let RE = /(?<!y)z/;
RE.exec(s); // ["z", index: 5, input: "xyyiizx", groups: undefined]

注:以上可以看出匹配到的结果在第6个位置


JavaScript 语言的正则表达式,只支持先行断言(lookahead)和先行否定断言(negative lookahead),不支持后行断言(lookbehind)和后行否定断言(negative lookbehind)。ES2018 引入后行断言


flags返回正则表达式的修饰符。

/xyz/i.flags // "i"


sticky表示是否设置了y修饰符。

/xyz/y.sticky // true


数值的扩展

数值分隔符

ES2021,允许 JavaScript 的数值使用下划线(_)作为分隔符。

1_000_000_000_000 // 1000000000000


数值分隔符有几个使用注意点

-   不能放在数值的最前面(leading)或最后面(trailing)。

-   不能两个或两个以上的分隔符连在一起。

-   小数点的前后不能有分隔符。

-   科学计数法里面,表示指数的`e`或`E`前后不能有分隔符。



Number.isFinite()

用来检查一个数值是否为有限的(finite),即不是Infinity。

Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite(-Infinity); // false
Number.isFinite('foo'); // false
Number.isFinite('15'); // false
Number.isFinite(true); // false


Number.isNaN()

用来检查一个值是否为NaN。

Number.isNaN(NaN) // true
Number.isNaN(15) // false
Number.isNaN('15') // false
Number.isNaN(true) // false
Number.isNaN(9/NaN) // true
Number.isNaN('true' / 0) // true
Number.isNaN('true' / 'true') // true


Number.parseInt()

ES6 将全局方法parseInt(),移植到Number对象上面,行为完全保持不变。为了逐步减少全局性方法,使得语言逐步模块化。

Number.parseInt('12.34') // 12

注:用来获取一个浮点数的整数部分


Number.parseFloat()

ES6 将全局方法parseFloat(),移植到Number对象上面,行为完全保持不变。为了逐步减少全局性方法,使得语言逐步模块化。

Number.parseFloat('123a') // 123

注:用来截取数值部分


Number.isInteger()

用来判断一个数值是否为整数。

Number.isInteger(25) // true
Number.isInteger(25.1) // false


整数和浮点数采用的是同样的储存方法,所以 25 和 25.0 被视为同一个值。

Number.isInteger(25) // true
Number.isInteger(25.0) // true


由于 JavaScript 采用 IEEE 754 标准,数值存储为64位双精度格式,数值精度最多可以达到 53 个二进制位(1 个隐藏位与 52 个有效位)。如果数值的精度超过这个限度,第54位及后面的位就会被丢弃,这种情况下,Number.isInteger可能会误判。

Number.isInteger(3.0000000000000002) // true


安全整数## 和 Number.isSafeInteger()

JavaScript 能够准确表示的整数范围在-2^53到2^53之间(不含两个端点),超过这个范围,无法精确表示这个值ES6 引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量,用来表示这个范围的上下限。

Number.MAX_SAFE_INTEGER === 9007199254740991// true
Number.MIN_SAFE_INTEGER === -9007199254740991// true


Number.isSafeInteger()则是用来判断一个整数是否落在这个范围之内。

Number.isSafeInteger(Number.MIN_SAFE_INTEGER - 1) // false
Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1) // false


Math 对象的扩展

Math.trunc()

用于去除一个数的小数部分,返回整数部分。

Math.trunc(4.9) // 4
Math.trunc(-4.1) // -4
Math.trunc('123.456') // 123 // 内部使用`Number`方法将其先转为数值。


Math.sign()

用来判断一个数到底是正数、负数、还是零。对于非数值,会先将其转换为数值。

-   参数为正数,返回`+1`;

-   参数为负数,返回`-1`;

-   参数为 0,返回`0`;

-   参数为-0,返回`-0`;

-   其他值,返回`NaN`。

Math.sign(-5) // -1
Math.sign(5) // +1
Math.sign(0) // +0
Math.sign(-0) // -0
Math.sign(NaN) // NaN


Math.cbrt()

用于计算一个数的立方根。

Math.cbrt(-1) // -1
Math.cbrt(0)  // 0
Math.cbrt(1)  // 1


Math.imul()

返回两个数以 32 位带符号整数形式相乘的结果,返回的也是一个 32 位的带符号整数。

Math.imul(2, 4)   // 8
Math.imul(-1, 8)  // -8
Math.imul(-2, -2) // 4


Math.hypot

返回所有参数的平方和的平方根。

Math.hypot(3, 4);        // 5

注:勾三股四玄五


对数方法

1.`Math.expm1(x)`返回 ex - 1,即`Math.exp(x) - 1`。

2. `Math.log1p(x)`方法返回`1 + x`的自然对数,即`Math.log(1 + x)`。如果`x`小于-1,返回`NaN`。

3. `Math.log10(x)`返回以 10 为底的`x`的对数。如果`x`小于 0,则返回 NaN。

4. `Math.log2(x)`返回以 2 为底的`x`的对数。如果`x`小于 0,则返回 NaN。


双曲函数方法

-   `Math.sinh(x)` 返回`x`的双曲正弦(hyperbolic sine)

-   `Math.cosh(x)` 返回`x`的双曲余弦(hyperbolic cosine)

-   `Math.tanh(x)` 返回`x`的双曲正切(hyperbolic tangent)

-   `Math.asinh(x)` 返回`x`的反双曲正弦(inverse hyperbolic sine)

-   `Math.acosh(x)` 返回`x`的反双曲余弦(inverse hyperbolic cosine)

-   `Math.atanh(x)` 返回`x`的反双曲正切(inverse hyperbolic tangent)


BigInt 数据类型

JavaScript 所有数字都保存成 64 位浮点数,这给数值的表示带来了两大限制。一是数值的精度只能到 53 个二进制位(相当于 16 个十进制位),大于这个范围的整数,JavaScript 是无法精确表示,这使得 JavaScript 不适合进行科学和金融方面的精确计算。二是大于或等于2的1024次方的数值,JavaScript 无法表示,会返回Infinity。ES2020 引入了一种新的数据类型 BigInt(大整数),来解决这个问题,这是 ECMAScript 的第八种数据类型。BigInt 只用来表示整数,没有位数的限制,任何位数的整数都可以精确表示。


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

1234 // 普通整数
1234n // BigInt
// BigInt 的运算
1n + 2n // 3n


BigInt 同样可以使用各种进制表示,都要加上后缀n。

0b1101n // 二进制
0o777n // 八进制
0xFFn // 十六进制


BigInt 与普通整数是两种值,它们之间并不相等。

42n === 42 // false


typeof运算符对于 BigInt 类型的数据返回bigint。

typeof 123n // 'bigint'


BigInt 可以使用负号(-),但是不能使用正号(+),因为会与 asm.js 冲突。

-42n // 正确
+42n // 报错


JavaScript 以前不能计算70的阶乘(即70!),因为超出了可以表示的精度。

let p = 1;
for (let i = 1; i <= 70; i++) {
  p *= i;
}
console.log(p); // 1.197857166996989e+100


现在支持大整数了,就可以算了,浏览器的开发者工具运行下面代码,就OK。

let p = 1n;
for (let i = 1n; i <= 70n; i++) {
  p *= i;
}
console.log(p); // 11978571...00000000n


数学运算方面,BigInt 类型的+、-、*和**这四个二元运算符,与 Number 类型的行为一致。除法运算/会舍去小数部分,返回一个整数。

9n / 5n

// 1n

// 例外:

-   不带符号的右移位运算符`>>>`

-   一元的求正运算符`+`


BigInt 不能与普通数值进行混合运算。

1n + 1.3 // 报错


BigInt 与字符串混合运算时,会先转为字符串,再进行运算。

'' + 123n // "123"


函数扩展

函数参数的默认值

function fn(x, y = 1) {
  console.log(x + y);
}
fn(10); // 11
// 注:通常情况下,定义了默认值的参数,应该是函数的尾参数。因为这样比较容易看出来,到底省略了哪些参数。如果非尾部的参数设置默认值,实际上这个参数是没法省略的。


rest 参数

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();


3.严格模式

ES2016 做了一点修改,规定只要函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错。

// 报错
function doSomething(a, b = a) {
  'use strict';
  // code
}
// 报错
const doSomething = function ({a, b}) {
  'use strict';
  // code
};
// 报错
const doSomething = (...a) => {
  'use strict';
  // code
};
const obj = {
  // 报错
  doSomething({a, b}) {
    'use strict';
    // code
  }
};


name 属性

function foo() {}
foo.name // "foo"


箭头函数

const fn = x => x+1; // 最简写法
// 等价于:
const fn = (x) => {
    return x+1;
}

注:如果只有一个函数形参,()可省略;如果箭头函数只有一行语句{}和return可省略;


特殊情况

//由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
// 报错
let getTempItem = id => { id: id, name: "Temp" };
// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });



特别注意!!!(此处面试考了几百遍,敲黑板!!!)

(1)箭头函数没有自己的`this`对象,内部的`this`就是定义时上层作用域中的`this`。。

(2)不可以当作构造函数,也就是说,不可以对箭头函数使用`new`命令,否则会抛出一个错误。

(3)不可以使用`arguments`对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

(4)不可以使用`yield`命令,因此箭头函数不能用作 Generator 函数。


数组的扩展

扩展运算符

复制数组

const a1 = [1, 2];
const a2 = [...a1]; // [1, 2];

注:返回的是一个新数组


合并数组

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const newArr = [...arr1, ...arr2]; //['a', 'b', 'c'];
// `a3`和`a4`是用两种不同方法合并而成的新数组,但是它们的成员都是对原数组成员的引用,这就是浅拷贝。如果修改了引用指向的值,会同步反映到新数组。
const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];
const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];
a3[0] === a1[0] // true
a4[0] === a1[0] // true



将字符串转为真正的数组。

[...'hello'] 
// [ "h", "e", "l", "l", "o" ]


数组去重

[...new Set(arr)];

注:如果是数组对象,不能使用该方法去重


Array.from()

用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']


Array.of()

用于将一组值,转换为数组。

Array.of(3, 11, 8) // [3,11,8]


find()

用于找出第一个符合条件的数组成员。

[1, 4, -5, 10, -10].find(n => n < 0) // -5


findIndex()

返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

[1, 4, -5, 10, -10].findIndex(n => n == 1) // 0


fill()

使用给定值,填充一个数组。

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

注:第一个参数是用什么填充,第二个是填充起始位置的索引,第三个参数是结束位置的索引


includes()

方法返回一个布尔值,表示某个数组是否包含给定的值,返回布尔值。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false


keys()

是对键名的遍历,数组的键名为索引。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1


values()

是对键值的遍历

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'


entries()

是对键值对的遍历。

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"


flat()

用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]


flatMap()

flatMap()方法对原数组的每个成员执行一个函数

[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]


超级重点(最常用的数组方法)

forEach

方法对数组的每个元素执行一次给定的函数。(类似于for循环)

[1,2,3].forEach((item, index, arr) => console.log(item,index,arr))
// 1 0 (3) [1, 2, 3]
// 2 1 (3) [1, 2, 3]
// 3 2 (3) [1, 2, 3]

注:个人喜欢结合箭头函数使用,该方法可以传入三个参数,item数组中正在处理的当前元素,index数组中正在处理的当前元素的索引,arr源数组。



filter

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。(也就是过滤出满足当前条件的所有元素)

[{name: '张三',id: 1},{name: '李四',id: 2},{name: '张三',id: 3}].filter(item => item.name == "张三");
// [{name: '张三',id: 1},{name: '张三',id: 3}] 筛选出name == "张三"的数据.

也可以设置同forEach一样的参数。该方法可以传入三个参数,item数组中正在处理的当前元素,index数组中正在处理的当前元素的索引,arr源数组。


map

创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

// 第一种用法
[{name: '张三',id: 1},{name: '李四',id: 2},{name: '张三',id: 3}].map(item => item.name);
// ["张三", "李四", "张三"]
// 第二种用法
[1, 2, 3].map(item => item*10);
// [10, 20, 30]
// 第三种用法
[{name: '张三',id: 1},{name: '李四',id: 2},{name: '张三',id: 3}].map(item => {
    return {
        value: item.id,
        label: item.name
    }
});
// [{label: '张三',value: 1},{label: '李四',value: 2},{label: '张三',value: 3}]

该方法可以传入三个参数,item数组中正在处理的当前元素,index数组中正在处理的当前元素的索引,arr源数组。


some

方法测试数组中是不是至少有1个元素通过了被提供的函数测试。(只要有一个元素满足条件就返回true)

const roleList = [{roleId: 1, roleName: '超级管理员'},{roleId: 2, roleName: '审核员'},{roleId: 3, roleName: '学员'}]; // 当前用户的角色
// 判断他是不是超级管理员
const isAdmin = roleList.some(item => item.roleId == 1); // true
if (isAdmin) {
}

该方法可以传入三个参数,item数组中正在处理的当前元素,index数组中正在处理的当前元素的索引,arr源数组。


every

测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

const roleList = [{roleId: 1, roleName: '超级管理员'},{roleId: 2, roleName: '审核员'},{roleId: 3, roleName: '学员'}]; // 当前用户的角色
// 判断他不是超级管理员
const isAdmin = roleList.every(item => item.roleId != 1); // false
if (isAdmin) {
}

该方法可以传入三个参数,item数组中正在处理的当前元素,index数组中正在处理的当前元素的索引,arr源数组。


reduce()

累加

let reduce=(...arr)=>{ 
    return arr.reduce((num,sum)=>{ 
        return sum + num; 
    },0); 

console.log(reduce(...arr));//15



将二维数组转化为一维

const flattened = [[0, 1], [2, 3], [4, 5]].reduce((a, b) => a.concat(b),[]);
// [0, 1, 2, 3, 4, 5]


计算数组中每个元素出现的次数

const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
const countedNames = names.reduce((allNames, name) => {
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// {Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}


数组去重

let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current) => {
    if(init.length === 0 || init[init.length-1] !== current) {
        init.push(current);
    }
    return init;
}, []);
console.log(result); //[1,2,3,4,5]


按顺序运行Promise

function runPromiseInSequence(arr, input) {
  return arr.reduce(
    (promiseChain, currentFunction) => promiseChain.then(currentFunction),
    Promise.resolve(input)
  );
}
function p1(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 5);
  });
}
function p2(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 2);
  });
}
function f3(a) {
 return a * 3;
}
function p4(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 4);
  });
}
const promiseArr = [p1, p2, f3, p4];
runPromiseInSequence(promiseArr, 10)
  .then(console.log);   // 1200


使用 reduce实现map

if (!Array.prototype.mapUsingReduce) {
  Array.prototype.mapUsingReduce = function(callback, thisArg) {
    return this.reduce(function(mappedArray, currentValue, index, array) {
      mappedArray[index] = callback.call(thisArg, currentValue, index, array)
      return mappedArray
    }, [])
  }
}
[1, 2, , 3].mapUsingReduce(
  (currentValue, index, array) => currentValue + index + array.length
) // [5, 7, , 10]

该方法可以传入四个参数,acc累加器,cur当前值,idx当前索引,arr为源数组。以上操作还有其他方式,就不一一列举了。


对象的扩展

属性的简洁表示法

const name = "张三";
const id = 1;
const obj = {
  name: name,
  id: id
};
// 如果对象的属性名和变量名一致,可简写成:
const obj = {name,id};
obj // {name: "张三", id: 1}



属性名表达式

// 第一种
obj['a' + 'bc'] = 123;
// 第二种
let obj = {
  ['h' + 'ello']() {
    return 'hi';
  }
};
obj.hello() // hi


方法的 name 属性

const person = {
  sayName() {
    console.log('hello!');
  },
};
person.sayName.name   // "sayName"


属性的可枚举性和遍历

Object.getOwnPropertyDescriptor 方法可以获取该属性的描述对象。

let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
//  {
//    value: 123,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }


描述对象的enumerable属性,称为“可枚举性”,如果该属性为false,就表示某些操作会忽略当前属性。

目前,有四个操作会忽略`enumerable`为`false`的属性。

-   `for...in`循环:只遍历对象自身的和继承的可枚举的属性。

-   `Object.keys()`:返回对象自身的所有可枚举的属性的键名。

-   `JSON.stringify()`:只串行化对象自身的可枚举的属性。

-   `Object.assign()`: 忽略`enumerable`为`false`的属性,只拷贝对象自身的可枚举的属性。



属性的遍历

ES6 一共有 5 种方法可以遍历对象的属性。

(1)for...in


`for...in`循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

(2)Object.keys(obj)


`Object.keys`返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。

(3)Object.getOwnPropertyNames(obj)


`Object.getOwnPropertyNames`返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。

(4)Object.getOwnPropertySymbols(obj)


`Object.getOwnPropertySymbols`返回一个数组,包含对象自身的所有 Symbol 属性的键名。

(5)Reflect.ownKeys(obj)


`Reflect.ownKeys`返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。

以上的 5 种方法遍历对象的键名,都遵守同样的属性遍历的次序规则。

-   首先遍历所有数值键,按照数值升序排列。

-   其次遍历所有字符串键,按照加入时间升序排列。

-   最后遍历所有 Symbol 键,按照加入时间升序排列。

// 比较简单就不写了


对象的扩展运算符

解构赋值

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }



扩展运算符

(1). 取出参数对象的所有可遍历属性,拷贝到当前对象之中

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }


(2). 如果扩展运算符后面是字符串,它会自动转成一个类似数组的对象,因此返回的不是空对象。

{...'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}


(3). 合并两个对象(此处用的较多)

let params = {
    ...this.pageObj, // 分页对象
    ...this.searchForm  // 搜索框表单对象
}


(4). 如果用户自定义的属性,放在扩展运算符后面,则扩展运算符内部的同名属性会被覆盖掉

let obj = {name: '张三', id: 1}; // 可能里面还有几十条数据,但是我们只想改变用户名
let userObj = {...obj,name:'李四'}; // {name: "李四", id: 1}


扩展: 如果想完整克隆一个对象,还拷贝对象原型的属性,可采用以下方法。

// 写法一
const clone1 = {
  __proto__: Object.getPrototypeOf(obj),
  ...obj
};
// 写法二
const clone2 = Object.assign(
  Object.create(Object.getPrototypeOf(obj)),
  obj
);
// 写法三
const clone3 = Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
)


Object.is()

它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false
+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
Object.assign()


用于对象的合并

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}


如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。

const target = { a: 1, b: 1 };
const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}


浅拷贝

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2
// `Object.assign()`拷贝得到的是这个对象的引用。这个对象的任何变化,都会反映到目标对象上面。


数组的处理

Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]


取值函数的处理

const source = {
  get foo() { return 1 }
};
const target = {};
Object.assign(target, source)
// `Object.assign()`只能进行值的复制,如果要复制的值是一个取值函数,那么将求值后再复制。


为对象添加属性

class Point {
  constructor(x, y) {
    Object.assign(this, {x, y});
  }
}


为对象添加方法

Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    ···
  },
  anotherMethod() {
    ···
  }
});
// 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) {
  ···
};
SomeClass.prototype.anotherMethod = function () {
  ···
};


为属性指定默认值

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
};
function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  console.log(options);
  // ...
}


Object.getOwnPropertyDescriptors()

返回指定对象所有自身属性(非继承属性)的描述对象。

const obj = {
  foo: 123,
  get bar() { return 'abc' }
};
Object.getOwnPropertyDescriptors(obj)
// { foo:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: get bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }


__proto__属性,Object.setPrototypeOf(),Object.getPrototypeOf()

以上方法都是用来操作原型链的,比较简单省略不写


Object.keys(),Object.values(),Object.entries()

Object.keys()返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。Object.values()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。Object.entries()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };
for (let key of keys(obj)) {
  console.log(key); // 'a', 'b', 'c'
}
for (let value of values(obj)) {
  console.log(value); // 1, 2, 3
}
for (let [key, value] of entries(obj)) {
  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}


Object.fromEntries()

方法是Object.entries()的逆操作,用于将一个键值对数组转为对象。

Object.fromEntries([
  ['foo', 'bar'],
  ['baz', 42]
])
// { foo: "bar", baz: 42 }


运算符扩展

指数运算符(**)

2 ** 2 // 4
2 ** 3 // 8
let a = 1.5;
a **= 2;
// 等同于 a = a * a;
let b = 4;
b **= 3;
// 等同于 b = b * b * b;


链判断运算符

如果读取对象内部的某个属性,往往需要判断一下,属性的上层对象是否存在。比如,读取message.body.user.firstName这个属性,安全的写法是写成下面这样。

// 错误的写法
const  firstName = message.body.user.firstName || 'default';
// 正确的写法
const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';
// 链判断运算符简写
const firstName = message?.body?.user?.firstName || 'default';


(1)短路机制

本质上,?.运算符相当于一种短路机制,只要不满足条件,就不再往下执行。

a?.[++x]
// 等同于
a == null ? undefined : a[++x]


(2)括号的影响

如果属性链有圆括号,链判断运算符对圆括号外部没有影响,只对圆括号内部有影响。

(a?.b).c
// 等价于
(a == null ? undefined : a.b).c


(3)报错场合

以下写法是禁止的,会报错。

// 构造函数
new a?.()
new a?.b()
// 链判断运算符的右侧有模板字符串
a?.`{b}`
a?.b`{c}`
// 链判断运算符的左侧是 super
super?.()
super?.foo
// 链运算符用于赋值运算符左侧
a?.b = c


4)右侧不得为十进制数值

为了保证兼容以前的代码,允许foo?.3:0被解析成foo ? .3 : 0,因此规定如果?.后面紧跟一个十进制数字,那么?.不再被看成是一个完整的运算符,而会按照三元运算符进行处理,也就是说,那个小数点会归属于后面的十进制数字,形成一个小数。


Null 判断运算符

读取对象属性的时候,如果某个属性的值是null或undefined,有时候需要为它们指定默认值。

const headerText = response.settings.headerText || 'Hello, world!';
const animationDuration = response.settings.animationDuration || 300;
const showSplashScreen = response.settings.showSplashScreen || true;


开发者的原意是,只要属性的值为null或undefined,默认值就会生效,但是属性的值如果为空字符串或false或0,默认值也会生效。

为了避免这种情况,ES2020 引入了一个新的 Null 判断运算符??。它的行为类似||,但是只有运算符左侧的值为null或undefined时,才会返回右侧的值。

const headerText = response.settings.headerText ?? 'Hello, world!';
const animationDuration = response.settings.animationDuration ?? 300;
const showSplashScreen = response.settings.showSplashScreen ?? true;


逻辑赋值运算符

将逻辑运算符与赋值运算符进行结合。

// 或赋值运算符
x ||= y
// 等同于
x || (x = y)
// 与赋值运算符
x &&= y
// 等同于
x && (x = y)
// Null 赋值运算符
x ??= y
// 等同于
x ?? (x = y)


// 老的写法
user.id = user.id || 1;


// 新的写法
user.id ||= 1;


Symbol

ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。

const sym = Symbol('foo');
sym.description // "foo"

你只需要暂时知道有这么个数据类型,表示独一无二的值即可。因为项目上真的很少很少用到。如果想看详细介绍,请移步阮一峰的es6文档


Set 和 Map 数据结构

Set

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

  set

  1. add方法为其添加成员;

  2. has查看是否有该值;

  3. delete删除某个值,返回布尔值

  4. clear清除所有成员

  5. size返回Set实例的成员总数

  // 比较简单,省略代码


2.Map

它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。

 map

  1. has查看是否有该值

  2. get获取属性

  3. set设置属性

  4. delete删除属性

  5. size属性返回 Map 结构的成员总数。

  6. clear方法清除所有成员,没有返回值。

  // 比较简单,省略代码


Set和Map的遍历

//set
let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue
for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue
for (let item of set.entries()) {
  console.log(item);
}
//-------------------------------------------------------------------------
// map
const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);
for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"
for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"
// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"


4.WeakSet

1.WeakSet 的成员只能是对象,而不能是其他类型的值。2.WeakSet 中的对象都是弱引用,即垃圾回收机制不考虑 WeakSet 对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于 WeakSet 之中。

const a = [[1, 2], [3, 4]];
const ws = new WeakSet(a);
const ws = new WeakSet();
const obj = {};
const foo = {};
ws.add(window);
ws.add(obj);
ws.has(window); // true
ws.has(foo);    // false
ws.delete(window);
ws.has(window);    // false


WeakMap

1.只接受对象作为键名(null除外),不接受其他类型的值作为键名。2.WeakMap的键名所指向的对象,不计入垃圾回收机制。

const wm = new WeakMap();
const element = document.getElementById('example');
wm.set(element, 'some information');
wm.get(element) // "some information"


WeakMap 的用途

let myWeakmap = new WeakMap();
myWeakmap.set(
  document.getElementById('logo'),
  {timesClicked: 0})
;
document.getElementById('logo').addEventListener('click', function() {
  let logoData = myWeakmap.get(document.getElementById('logo'));
  logoData.timesClicked++;
}, false);

上面代码中,document.getElementById('logo')是一个 DOM 节点,每当发生click事件,就更新一下状态。我们将这个状态作为键值放在 WeakMap 里,对应的键名就是这个节点对象。一旦这个 DOM 节点删除,该状态就会自动消失,不存在内存泄漏风险。


WeakRef

用于直接创建对象的弱引用

let target = {};
let wr = new WeakRef(target);

target是原始对象,构造函数WeakRef()创建了一个基于target的新对象wr。这里,wr就是一个 WeakRef 的实例,属于对target的弱引用,垃圾回收机制不会计入这个引用,也就是说,wr的引用不会妨碍原始对象target被垃圾回收机制清除。


Proxy

用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。

var proxy = new Proxy({}, {
  get: function(target, propKey) {
    return 35;
  }
});
let obj = Object.create(proxy);
obj.time // 35

-   **get(target, propKey, receiver)** :拦截对象属性的读取,比如`proxy.foo`和`proxy['foo']`。

-   **set(target, propKey, value, receiver)** :拦截对象属性的设置,比如`proxy.foo = v`或`proxy['foo'] = v`,返回一个布尔值。

-   **has(target, propKey)** :拦截`propKey in proxy`的操作,返回一个布尔值。

-   **deleteProperty(target, propKey)** :拦截`delete proxy[propKey]`的操作,返回一个布尔值。

-   **ownKeys(target)** :拦截`Object.getOwnPropertyNames(proxy)`、`Object.getOwnPropertySymbols(proxy)`、`Object.keys(proxy)`、`for...in`循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而`Object.keys()`的返回结果仅包括目标对象自身的可遍历属性。

-   **getOwnPropertyDescriptor(target, propKey)** :拦截`Object.getOwnPropertyDescriptor(proxy, propKey)`,返回属性的描述对象。

-   **defineProperty(target, propKey, propDesc)** :拦截`Object.defineProperty(proxy, propKey, propDesc)`、`Object.defineProperties(proxy, propDescs)`,返回一个布尔值。

-   **preventExtensions(target)** :拦截`Object.preventExtensions(proxy)`,返回一个布尔值。

-   **getPrototypeOf(target)** :拦截`Object.getPrototypeOf(proxy)`,返回一个对象。

-   **isExtensible(target)** :拦截`Object.isExtensible(proxy)`,返回一个布尔值。

-   **setPrototypeOf(target, proto)** :拦截`Object.setPrototypeOf(proxy, proto)`,返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。

-   **apply(target, object, args)** :拦截 Proxy 实例作为函数调用的操作,比如`proxy(...args)`、`proxy.call(object, ...args)`、`proxy.apply(...)`。

-   **construct(target, args)** :拦截 Proxy 实例作为构造函数调用的操作,比如`new proxy(...args)`。


Reflect

也是 ES6 为了操作对象而提供的新 API,该方法用的比较少,所以暂不讨论,只需要暂时知道有这些东西即可。

(1) 将`Object`对象的一些明显属于语言内部的方法(比如`Object.defineProperty`),放到`Reflect`对象上。现阶段,某些方法同时在`Object`和`Reflect`对象上部署,未来的新方法将只部署在`Reflect`对象上。也就是说,从`Reflect`对象上可以拿到语言内部的方法。

(2) 修改某些`Object`方法的返回结果,让其变得更合理。比如,`Object.defineProperty(obj, name, desc)`在无法定义属性时,会抛出一个错误,而`Reflect.defineProperty(obj, name, desc)`则会返回`false`。

(3) 让`Object`操作都变成函数行为。某些`Object`操作是命令式,比如`name in obj`和`delete obj[name]`,而`Reflect.has(obj, name)`和`Reflect.deleteProperty(obj, name)`让它们变成了函数行为。

(4)`Reflect`对象的方法与`Proxy`对象的方法一一对应,只要是`Proxy`对象的方法,就能在`Reflect`对象上找到对应的方法。这就让`Proxy`对象可以方便地调用对应的`Reflect`方法,完成默认行为,作为修改行为的基础。也就是说,不管`Proxy`怎么修改默认行为,你总可以在`Reflect`上获取默认行为。


Promise

含义

是异步编程的一种解决方案


特点。

(1)对象的状态不受外界影响。`Promise`对象代表一个异步操作,有三种状态:`pending`(进行中)、`fulfilled`(已成功)和`rejected`(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是`Promise`这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。


(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。`Promise`对象的状态改变,只有两种可能:从`pending`变为`fulfilled`和从`pending`变为`rejected`。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对`Promise`对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。


2.基本用法

new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1


.then()

操作成功时的回调

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


.catch()

操作失败时的回调

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


.finally()

指定不管 Promise 对象最后状态如何,都会执行的操作。

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


.all()

用于将多个 Promise 实例,包装成一个新的 Promise 实例。(可用于同时进行多个请求)

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result)
.catch(e => e);
const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result)
.catch(e => e);
Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 报错了]


.race()

将多个 Promise 实例,包装成一个新的 Promise 实例。

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);



.allSettled()

等到一组异步操作都结束了,不管每一个操作是成功还是失败,再进行下一步操作。

const resolved = Promise.resolve(42);
const rejected = Promise.reject(-1);
const allSettledPromise = Promise.allSettled([resolved, rejected]);
allSettledPromise.then(function (results) {
  console.log(results);
});
// [
//    { status: 'fulfilled', value: 42 },
//    { status: 'rejected', reason: -1 }
// ]


.any()

该方法接受一组 Promise 实例作为参数,包装成一个新的 Promise 实例返回。就是Promise.any()不会因为某个 Promise 变成rejected状态而结束,必须等到所有参数 Promise 变成rejected状态才会结束。

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);
});


10..resolve()操作成功时传入

(1)参数是一个 Promise 实例

如果参数是 Promise 实例,那么`Promise.resolve`将不做任何修改、原封不动地返回这个实例。


(2) 参数是一个thenable对象

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};


(3).参数不是具有then()方法的对象,或根本就不是对象

const p = Promise.resolve('Hello');
p.then(function (s) {
  console.log(s)
});
// Hello


(4)不带有任何参数

const p = Promise.resolve();
p.then(function () {
  // ...
});


事件循环(考点)

setTimeout(function () {
  console.log('three');
}, 0);
Promise.resolve().then(function () {
  console.log('two');
});
console.log('one');
// one
// two
// three

上面代码中,setTimeout(fn, 0)在下一轮“事件循环”开始时执行,Promise.resolve()在本轮“事件循环”结束时执行,console.log('one')则是立即执行,因此最先输出。


reject()操作失败时传入

Promise.reject('出错了')
.catch(e => {
  console.log(e === '出错了')
})
// true


Iterator 和 for...of 循环

Iterator

Iterator 的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是 ES6 创造了一种新的遍历命令for...of循环,Iterator 接口主要供for...of消费。


Iterator 的遍历过程:

(1)创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。


(2)第一次调用指针对象的`next`方法,可以将指针指向数据结构的第一个成员。


(3)第二次调用指针对象的`next`方法,指针就指向数据结构的第二个成员。


(4)不断调用指针对象的`next`方法,直到它指向数据结构的结束位置。


let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();
iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }


原生具备 Iterator 接口的数据结构如下。

-   Array

-   Map

-   Set

-   String(字符串是一个类似数组的对象,也原生具有 Iterator 接口。)

-   TypedArray

-   函数的 arguments 对象

-   NodeList 对象(类似数组的对象)



只要数据结构具备Iterator(遍历器)接口便可以使用for...of遍历,对象(Object)没有默认部署 Iterator 接口,但是能通过特殊的方式进行for...of遍历

for...of 循环

数组

var arr = ['a', 'b', 'c', 'd'];
for (let a in arr) {
  console.log(a); // 0 1 2 3
}


你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

635 篇文章

作家榜 »

  1. admin 635 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. thc1214 0 文章