数组的ES6方法(回顾)

• from
  • 封装 from
• of
  • 封装 of
• fill *
• flat
  • 封装 flat
• find
  • find与indexOf 的区别
• includes
  • includes与indexOf 的区别
• copyWithin *
• entries()，keys()，values()

Array.from(arrayLike, callback, thisArg)

定义：转换一个类数组或可迭代对象(iterator 接口对象)，返回修改后数组

参数1：被转换的类数组或可迭代对象

参数2：回调函数，可选

参数3：回调的this指向，可选

var arrLike = { 0: 1, 1: 2, length: 2 };
var res = Array.from(
  arrLike,
  function (v, i, arr) {
    console.log(v, i, arr);// 0 1 undefined 
    console.log(this);//{a:1}
    return v + 1;
  },
  { a: 1 }
);
console.log(res);//[2,3]

封装 from

const myFrom = function (target, callback) {
    let arr = [].slice.call(target)
    for (var i = 0; i < arr.length; i++) {
        arr[i] = callback(arr[i])
    }
    return arr
};

Array.of(element1, …)

定义：创建一个数组
注意：解决了当参数只有一个时，new Array()会生成稀松数组

new Array(3);// [empty × 3]
Array.of(3);// [3]

封装 of

const myOf = function () {
   return arguments.leng === 1?[arguments[0]]:[].slice.call(arguments)
};

arr.fill(value, start, end)

定义：用一个固定值填充一个数组，返回新数组，回改变原数组

参数1：需要填充的数组

参数2：起始索引，可选，默认值为 0

参数3：终止索引，可选，默认值为 this.length

var arr = new Array(4);
console.log(arr.fill(undefined, 1, 4));//[empty,undefined,undefined,undefined]
console.log(arr);//[empty,undefined,undefined,undefined]

注意:填充的类型为对象，那么被赋值的是同一个内存地址的对象，是浅拷贝

let arr = new Array(3).fill({ name: "Mike" });
arr[0].name = "Ben";
console.log(arr); // [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

arr.flat(depth)

定义：展平数组到指定深度，返回新数组

参数1：展平的深度，可选

var arr = [1,2,[3,[4,5]]];
console.log(arr.flat());//[1,2,3,[4,5]]   展开一层
console.log(arr.flat(2));//[1,2,3,4,5]   展开两层

封装 flat

Array.prototype.myFlat = function (depth) {
    let res = []
    depth = depth ? Math.floor(depth) + 1 : Number.MAX_SAFE_INTEGER
    function test(arr) {
        arr.forEach((item) => {
            if (depth) {
                Array.isArray(item) ? test(item) : (res.push(item))
                depth--
            } else {
                res.push(item)
            }
        })

    }
    test(this)
    return res
}

arr.find(callback，thisArg)

定义：检测当前数组是否包含满足提供的测试函数的项，返回该项，没找到返回 undefined

var arr = [1,2,3]
arr.find((v,i) => i===2);//3

find与indexOf 的区别

find和findIndex方法可以借助Object.is方法识别NaN;

console.log([NaN].indexOf(NaN)); //-1   无法识别NaN
console.log([NaN].find((value) => Object.is(NaN, value))); //NaN
console.log([NaN].findIndex((value) => Object.is(NaN, value))); //0

arr.includes(x,start)

定义：检测当前数组是否包含某项，返回布尔值

第二个参数，表示从第几位开始找

第二个参数为负数，则表示倒数的位置
如果大于数组长度,则会重置为0

var arr = [1,2,3];
arr.includes(1);//true
arr.includes(1,1);//false

includes与indexOf 的区别

可以识别NaN

console.log([NaN].indexOf(NaN)); // -1
console.log([NaN].includes(NaN)); // true

arr.copyWithin(target, start end)

定义：复制数组的一部分到同一数组中的另一个位置，并返回新数组，会改变原数组

参数1：复制序列的位置

参数2：初始复制索引

参数3：终止赋值索引

var arr = [1, 2, 3, 4, 5];
console.log(arr.copyWithin(0, 3, 4));//[4,2,3,4,5]
console.log(arr);//[4,2,3,4,5]

entries(), keys(), values()

arr.entries()

定义：返回一个包含数组键值对的 Iterator 对象

var arr = [1,2,3];
var temp = arr.entries();
console.log(temp);//Array Iterator {}
for(var [i,v] of temp){
    console.log([i,v])//[0,1] [1,2] [2,3]
}

arr.keys()

定义：返回一个包含数组索引的 Iterator 对象

var arr = [1,2,3];
var temp = arr.keys();
console.log(temp);//Array Iterator {}
for(var i of temp){
    console.log(i)//0 1 2
}

arr.values()

定义：返回一个包含数组索引值的 Iterator 对象

var arr = [1,2,3];
var temp = arr.values();
console.log(temp);//Array Iterator {}
for(var v of temp){
    console.log(v)//1 2 3
}