声明方式

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
}