es6数组和对象扩展了什么?

es6数组和对象扩展了什么?

本文主要针对es6中数组、对象、的扩展做一些总结，不对的地方请大家伙指正！

数组的扩展

1、 spread语法：

扩展运算符（spread）是三个点（…）。

 当在数组中用到三个点的时候：效果是这样的

console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

当作为函数的参数时，效果是这样的：

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

合并一维数组时：可以这样

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);

实现一个简单的深拷贝：

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

2、Array.from()

from方法用来将一个类数组转化为数组：

 let set = new Set([1,2,3]);
 let arr = Array.from(set );
 Array.from('hello'); // 将字符串转换为数组结构, ['h', 'e', 'l', 'l', 'o']

甚至可以接受第二个参数，对转后的数组结构进行遍历：

Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]

3、Array.of()

用来将一组值转换为数组结构：

Array.of(1, 2, 3) // [1,2,3]
Array.of(1) // [1]

如果你想初始化一个含有数值的数组，of方法绝对是首选。

4、find()和findIndex()方法

find()方法，用于找出第一个符合条件的数组成员，如果找不到则返回undefined，findIndex()方法返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1;

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

有意思的是当你的数组中有多个对应条件时，只返回第一个。

5、fill方法

用来填充数组：

 new Array(3,2,1).fill(1)
// [1, 1, 1]

fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

6、entries()，keys()和values()

上面三个在数组遍历时有用，区别在于keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历：

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

7、includes()方法

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

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

8、flat()与flatMap()方法

以上两个方法是对嵌套数组进行拉平：

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

很明显的看出flat可以接受参数对于不同层级的数组进行拉平操作，当然可以直接传入Infinity，表示全部层级拉平

[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]]

flatMap()接受一个函数，来对数组进行操作，并将数组拉平，但是只能拉平一层嵌套层级的数组

对象的扩展

1、对象的遍历方法

常用的2种方法分别是：
for…in: 循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。
Object.keys(obj)：Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。

let obj = {
    a:1,
    b:2,
    c:3
}
Object.keys(obj)
// ['a', 'b', 'c']

2、super关键字

super，指向当前对象的原型对象

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

注意，super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。

const obj = {
  foo: super.foo
}
// Uncaught SyntaxError: 'super' keyword unexpected here

3、 扩展运算符

用在数组中的三个点，也可以在对象中使用：

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

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

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

let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);
``	

4、Object.is()

用来比较两个值是否严格相等

Object.is('foo', 'foo') // true
Object.is({}, {}) // false

做一下解释：为什么两个空对象不相等，因为对于复合型数据来说，他们是按值访问，虽然在形式上相同但却不是同一个地址，所以false

5、Object.assign()

Object.assign()方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

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

可以看出第一个参数是目标对象，后面的参数可以是多个源数据对象，Object.assign()方法实行的是浅拷贝，而不是深拷贝。

重点：
如何利用Object.assign()实现一个深拷贝：

function clone(origin) {
  let originProto = Object.getPrototypeOf(origin);
  return Object.assign(Object.create(originProto), origin);
}

6、Object.setPrototypeOf()与Object.getPrototypeOf()

Object.setPrototypeOf()用来设置一个对象的原型对象;Object.getPrototypeOf()获取一个对象的原型对象

let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);
proto.y = 20;
proto.z = 40;
obj.x // 10
obj.y // 20
obj.z // 40
Object.getPrototypeOf(obj); // {y:20 , z:40}

7、Object.keys()，Object.values()，Object.entries()

是的这个和数组中的三个方法是一致的：

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]
}

8、Object.fromEntries()

这个是Object.entries()的逆操作：

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