数组的ES6方法(回顾)

文章详细介绍了JavaScript中数组的一些重要方法,如Array.from用于转换类数组或可迭代对象,Array.of解决单参数创建数组的问题,fill用于填充数组,find查找满足条件的元素,includes检查数组是否包含特定元素,以及copyWithin、flat等其他方法的使用和区别,并提供了相应的示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柳晓黑胡椒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值