es6 中 对象和数组常用的方法和属性

对象的方法和属性

for…in

以任意顺序遍历一个对象的除Symbol以外的可枚举属性

for (variable in object)
  statement

• variable

  在每次迭代时，variable会被赋值为不同的属性名。

• object

  非Symbol类型的可枚举属性被迭代的对象。

let obj ={
  a:1,
  b:2,
  c:3
 }
//遍历出对象属性
// 1、
for(let prop in obj){
    console.log("obj."+prop+"="+obj[prop]);
}
// 2、
for(var prop in obj){
    if(obj.hasOwnProperty(prop)){
        console.log(`obj.${prop} = ${obj[prop]}`);
    }
}

for…of

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

const arr = [ 'a','b','c']
    for(const ele of arr){
      console.log(ele);//a,b,c
    }

语法：

for (variable of iterable) {
    //statements
}

• variable

  在每次迭代中，将不同属性的值分配给变量。

• iterable

  被迭代枚举其属性的对象。

for…in()和for…of()的区别：主要体现在Array

for...in 语句以任意顺序迭代对象的可枚举属性。

for...of 语句遍历可迭代对象定义要迭代的数据。

let iterable =[3,5,7,"foo"];

for(let i in iterable){
    console.log(i);//0,1,2,3
}

 for(let i of iterable){
    console.log(i);//3,5,7,'foo'
 }

Object.assign()

**Object.assign()** 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象

const target = { b: 4, c: 3 }
const source = { a: 1, b: 2 };
Object.assign(target, source);
console.log(target);//a:1,b:2,c:3
console.log(source);//a:1,b:2

语法：

Object.assign(target, ...sources)

• target

  目标对象。

• sources

  源对象。

如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

注意：Object.assign 不会在那些source对象值为 null 或 undefined 的时候抛出错误。

复制对象

let obj1 = {a:0,b:{c:1}}
let obj2 = Object.assign({},obj1);
console.log(obj2);//{a:0,b:{c:1}}

拷贝

Object.assign是浅拷贝，如果需要深拷贝则需要使用其它方法

let obj1 = {a:0,b:{c:1}}
let obj2 = Object.assign({},obj1);
console.log(obj2);//{a:0,b:{c:1}}
obj1.a=4;
console.log(obj1)//a: 4  b: {c: 1}
console.log(obj2)//a: 0  b: {c: 1}
obj1.b.c =2
console.log(obj1);//a: 4 b: {c: 2}
console.log(obj2);//a: 0 b: {c: 2}

//deep clone
//使用 JSON.parse(JSON.stringify())
obj3 = {a:0,b:{c:0}};
let obj4 = JSON.parse(JSON.stringify(obj3));
obj3.b.c=4
obj3.a=4
console.log(obj3);//a: 4 b: {c: 4}
console.log(obj4);//a: 0 b: {c: 0}

合并对象

const obj1 = {a:1}
const obj2 = {b:2}
const obj3 = {c:3}
const obj = Object.assign(obj1,obj2,obj3)
console.log(obj1);//{a: 1, b: 2, c: 3}  目标对象也会发生改变
console.log(obj);//{a: 1, b: 2, c: 3}

合并具有相同属性的对象

const obj1 = {a:1,b:2,c:3}
const obj2 = {b:4,c:5}
const obj3 = {c:6}
const obj = Object.assign({},obj1,obj2,obj3)
console.log(obj);//{a: 1, b: 4, c: 6} 后面的覆盖前面的
console.log(obj1);//{a:1,b:2,c:3} 目标对象不会发生改变

数组的方法和属性

Array.prototype.forEach()

Array.forEach() 对数组的每个元素执行一次给定的函数

arr.forEach(callback(currentValue,index,array),thisArg)

• callback

  为数组中每个元素执行的函数，该函数接收一至三个参数：

  currentValue数组中正在处理的当前元素。index 可选数组中正在处理的当前元素的索引。array 可选forEach() 方法正在操作的数组。

• thisArg 可选

  可选参数。当执行回调函数 callback 时，用作 this 的值。

const array = ['a','b','c']
array.forEach(ele => console.log(ele))

查找

find()

里面参数为回调函数 ⭐⭐⭐⭐

查找数组中符合条件的元素，若有多个符合条件的元素， 则返回第一个元素

let arr = Array.of(1,2,3,4)
console.log(arr.find(item => item === 2))//2
//数组空位处理为undefined
console.log([,3,4].find(item => true));//undefined

findIndex()

第一个参数：参数也为回调函数 ，第二个参数（可选）：指定回调函数中的this值 返回索引 ⭐⭐⭐⭐

查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引

let arr1 = Array.of(1,2,3,4,5)
console.log(arr1.findIndex(item => item == 2))

填充

fill()

将一定范围索引的数组元素内容填充为单个指定的值

有三个参数：

第一个参数：用来填充的值

第二个参数：被填充的起始索引

第三个参数（可选）：被填充的结束索引，默认为数组末尾

let arr2 = Array.of(1,2,3,4,5)
console.log(arr2.fill(0,1,2));//[1,0,3,4,5]

copyWithin()

将一定范围索引的数组元素修改为此数组另一指定范围索引的元素

有三个参数：

第一个参数：需要覆盖的起始位置

第二个参数：被用来覆盖数据的起始索引

第三个参数：被用来覆盖数据的结束索引，默认为数组末尾

let a = [1,2,3,4,5,6,7]
console.log(a.copyWithin(0,1,3))//[2, 3, 3, 4, 5, 6, 7]

嵌套数组转以为数组

flat()

去扁平化

let arr5 = [1,[3,5,[6,3,[7]]]]
//  如果没有指定，则只去掉一层
console.log(arr5.flat());
console.log(arr5.flat(2));
console.log(arr5.flat(3));
// 如果已经达到了扁平化，则数字不管再加多少都一样
console.log(arr5.flat(4));
// 简单的嵌套数组可以很快的就知道是几维数组
// 在复杂的嵌套数组中去数或者是数字一个一个去试就很麻烦
// 这时我们就引入了一个单词Infinity
// 不管有多少层，直接去扁平化
console.log(arr5.flat(Infinity));

flatMap()

先对数组中每个元素进行了的处理，再对数组执行flat()方法

console.log([1,2,3,4,5,6].flatMap(n =>  [n*2] ))//[2, 4, 6, 8, 10, 12]
// 有没有中括号都可以，但是最好有
console.log([1,2,3,4,5,6].flatMap(n =>  n*2 ))//[2, 4, 6, 8, 10, 12]
// 如果是多维数组，则需要先flat()，再使用flatMap()
console.log([1,2,[3,4,[5,6]]].flatMap(n =>  [n*2] ))//[2,4,NaN]