涵盖至 EAMCScript 2024 (ES15)新特性 Array【数组】常用的属性方法全览

在这里插入图片描述

在这里插入图片描述

实例属性

方法描述
Array.length返回数组元素的个数量
Array.constructor返回创建数组实例的构造函数
Array.prototype数组的原型对象用于实现继承和共享方法等属性

实例方法

Array().at()

方法描述所属ECMAScript版本
Array.at()at() 方法接收一个整数值并返回该索引对应的元素,允许正数和负数。负整数则从数组中的最后一个元素开始倒数查找。ECMAScript 2022(ES13)

示例:

let arr = ["张飞", "刘备", "关羽", "孙悟空"];

console.log(arr);

console.log(arr.at());   // 如果不传值,则默认为下标 0 查找     :张飞

console.log(arr.at("2"));   //  如果参数为数字类型的字符串,则会进行 number类型转换  : 关羽

console.log(arr.at("非法字符串"));   //   如果参数类型转换前后,任然是一个非 Number 类型的 ,则会参数默认值为 下标 0  : 张飞

console.log(arr.at(1.8));         // 如果,参数是一个 非整数 NUmber ,则会进行向首位数取整    : 刘备

在这里插入图片描述


Array().concat()

方法描述所属 ECMAScript 版本
Array.concat()concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组ECMAScript 1.2
let arr = ["张飞", "刘备", "关羽", "孙悟空"];
let obj = ["迪迦", "赛罗", "梦比优斯"];
let data = ["vue", "react"];

console.log(arr);
console.log(obj);
console.log(data);
console.log(arr.concat(obj, data));  //['张飞', '刘备', '关羽', '孙悟空', '迪迦', '赛罗', '梦比优斯', 'vue', 'react']

在这里插入图片描述


Array().copyWithin()

方法描述所属 ECMAScript 版本
Array.copyWithin()copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。ECMAScript 6

语法:

copyWithin(target)
copyWithin(target, start)
copyWithin(target, start, end)

参数

  • target 【必填项】:

    • 表示拷贝的目标位置,即从这个位置开始替换数据。
  • start 【可选项】:

    • 表示拷贝数据的起始位置。如果省略,默认为 下标 0。
  • end【可选项】:

    • 表示拷贝数据的结束位置(但不包括该位置的元素)。如果省略,默认为数组的长度。
let arr = ["张飞", "刘备", "关羽", "孙悟空", "猪八戒"]; 
console.log(arr.copyWithin(2, 1, 3));   // ['张飞', '刘备', '刘备', '关羽', '猪八戒']

在这里插入图片描述


Array().entries()

方法描述所属 ECMAScript 版本
Array.entries()entries() 方法返回一个新的数组迭代器 对象,该对象包含数组中每个索引的键/值对。ECMAScript 2017(ES8)

参数:无

let arr = ["张飞", "刘备", "关羽", "孙悟空", "猪八戒"]; 
console.log(arr.entries());  

在这里插入图片描述

let arr = ["张飞", "刘备", "关羽", "孙悟空", "猪八戒"];
console.log(arr.entries());
let obj = arr.entries()
let data
for (let index = 0; index < arr.length + 1; index++) {
    let a = obj.next();   
    //调用 next(),就可得到当前迭代下索引的对象,其中的value 就是 键值对,并且可以依据 .done 来判断是否已经迭代结束。
    console.log(a);
    data = a.value;
    if (a.done == true) {
        console.log(a.done, "迭代结束");
        break;
    }
    console.log(data);
}

在这里插入图片描述


Array().every()

方法描述所属 ECMAScript 版本
Array.every()every() 方法用来检测一个数组内的所有元素是否都能满足指定的条件。它返回一个布尔值。只要有一个不满足条件就返回 false,全部通过条件 则返回trueECMAScript 1.6
let numberarr = [15, 50, 24, 76]
console.log(numberarr.every(item => item > 50));   //false

在这里插入图片描述


Array().fill()

方法描述所属 ECMAScript 版本
Array.fill()fill() 方法用指定的值填充数组的某个子区间,并返回原数组ECMAScript 6

语法:

array.fill(value, start, end)

参数:

  • value
    • 必填。需要填充的值。
  • start
    • 可选。开始填充的起始位置。(默认为 下标 0)
  • end
    • 可选。停止填充位置 (默认为 array.length)
let numberarr = [15, 50, 24, 76]
console.log(numberarr.fill("你好"));

在这里插入图片描述


Array().filter()

方法描述所属 ECMAScript 版本
Array.filter()filter() 方法返回一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素ECMAScript 1.6
let numberarr = [15, 50, 24, 76, 12]
console.log(numberarr.filter(item => item > 20));  //[50, 24, 76]  返回满足大于 20 的新数组数据

在这里插入图片描述


Array().find()

方法描述所属 ECMAScript 版本
Array.find()find() 方法为每一项数据执行一次回调,返回满足指定条件的第一个元素的值,如果没有找到满足条件的值,则返回 undefinedECMAScript 6
let data = [21, 35, 46, 52, 78];
const a = data.find((item) => {
  return item > 40;
});
console.log(a + " find");  //46

在这里插入图片描述


Array().findIndex()

方法描述所属 ECMAScript 版本
Array.findIndex()find 唯一区别的一点就是findIndex 返回的不再是具体的值,而是返回值所对引的下标索引,如果没有找到满足条件的值的索引,则返回 -1ECMAScript 6

Array().findLast()

方法描述所属 ECMAScript 版本
Array.findLast()findLast 唯一区别的一点就是findLast是通过反向迭代数组,返回得到满足相应条件的值,也就是数组中最后出现的值,如果没有找到满足条件的值,则返回 undefinedECMAScript 2023(ES14)

Array().findLastIndex()

方法描述所属 ECMAScript 版本
Array.findLastIndex()findIndex 唯一区别的一点就是findLastIndex也是通过反向迭代数组,返回得到满足相应条件的值的下标索引,如果没有找到满足条件的值的索引,则返回 -1ECMAScript 2023(ES14)

Array().flat()

方法描述所属 ECMAScript 版本
Array.flat()flat() 创建一个新的数组,并根据指定深度递归地将所有子数组元素拼接到新的数组中。常用于对数组做扁平化处理。可接受一个参数用来指定递归的层级,默认为1,也可以 参数指定为 Infinity,递归到最深层ECMAScript 2019(ES10)

在这里插入图片描述


Array().flatMap()

方法描述所属 ECMAScript 版本
Array.flatMap()flatMap() 方法对数组中的每个元素应用给定的回调函数,然后将结果展开一级,返回一个新数组。ECMAScript 2019(ES10)

在这里插入图片描述
在这里插入图片描述


Array().forEach()

方法描述所属 ECMAScript 版本
Array.forEach()forEach() 方法对数组的每个元素执行一次给定的函数,返回值为 undefinedECMAScript 3

Array().includes()

方法描述所属 ECMAScript 版本
Array.includes()includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 falseECMAScript 2016(ES7)

在这里插入图片描述


Array().indexOf()

方法描述所属 ECMAScript 版本
Array.indexOf()indexOf() 方法返回数组中第一次出现给定元素的下标索引,如果不存在则返回 -1ECMAScript 1.6

在这里插入图片描述

在这里插入图片描述


Array().join()

方法描述所属 ECMAScript 版本
Array.join()join() 将一个数组的所有元素连接成一个字符串并返回这个字符串,用逗号或指定的分隔符字符串分隔。如果数组只有一个元素,那么将返回该元素而不使用分隔符ECMAScript 1.1

在这里插入图片描述


Array().keys()

方法描述所属 ECMAScript 版本
Array.keys()keys() 方法返回一个新的数组迭代器对象,其中包含数组中每个索引的键ECMAScript 6

在这里插入图片描述


Array().lastIndexOf()

方法描述所属 ECMAScript 版本
Array.lastIndexOf()lastIndexOf() 方法返回数组中给定元素最后一次出现的索引,如果不存在则返回 -1。该方法从 fromIndex 开始向前搜索数组ECMAScript 1.6

在这里插入图片描述

在这里插入图片描述


Array().map()

方法描述所属 ECMAScript 版本
Array.map()map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成ECMAScript 1.6

在这里插入图片描述


Array().pop()

方法描述所属 ECMAScript 版本
Array.pop()pop() 方法从数组中删除最后一个元素,并返回被删除该元素的值。此方法会更改数组的长度,数组为空时返回 undefinedECMAScript 1.2

在这里插入图片描述


Array().push()

方法描述所属 ECMAScript 版本
Array.push()push() 方法将指定的元素添加到数组的末尾,并返回新的数组长度ECMAScript 1.2

Array().reduce()

方法描述所属 ECMAScript 版本
Array.reduce()reduce() 方法对数组中的每个元素按序执行一个提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值ECMAScript 3

在这里插入图片描述


Array().reduceRight()

方法描述所属 ECMAScript 版本
Array.reduceRight()reduceRight() 方法同上述reduce 区别于是 reduce的默认从左到右 reduceRight 则是按从右到左的顺序 执行ECMAScript 3

Array().reverse()

方法描述所属 ECMAScript 版本
Array.reverse()reverse() 方法用于颠倒,倒序数组中元素的顺序,会修改原数组ECMAScript 1.1

在这里插入图片描述


Array().shift()

方法描述所属 ECMAScript 版本
Array.shift()shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度ECMAScript 1.2

在这里插入图片描述


Array().slice()

方法描述所属 ECMAScript 版本
Array.slice()slice() 方法截取数组的一部分,并返回一个新数组ECMAScript 1.2

在这里插入图片描述


Array().some()

方法描述所属 ECMAScript 版本
Array.some()some() 方法检测数组中是否至少有一个元素满足指定的条件。如果至少有一个满足了指定条件就返回 true;否则返回 false。它不会修改源数组ECMAScript 1.6

在这里插入图片描述


Array().sort()

方法描述所属 ECMAScript 版本
Array.sort()sort() 方法就地对数组的元素进行排序,并返回对相同数组的引用。默认排序是将元素转换为字符串,然后按照它们的 UTF-16 码元值升序排序ECMAScript 2021(ES 12)

在这里插入图片描述

Array().splice()

方法描述所属 ECMAScript 版本
Array.splice()splice() 方法用于添加或删除数组中的元素ECMAScript 1.2

在这里插入图片描述


Array().toLocaleString()

方法描述所属 ECMAScript 版本
Array.toLocaleString()toLocaleString() 方法返回一个字符串,表示数组中的所有元素。每个元素通过调用它们自身的 toLocaleString 方法转换为字符串,并且使用特定于语言环境的字符串(例如逗号“,”)分隔开。ECMAScript 1.2

在这里插入图片描述


Array().toReversed()

方法描述所属 ECMAScript 版本
Array.toReversed()toReversed() 方法是 reverse() 方法对应的复制版本。它返回一个元素顺序相反的新数组,与 reverse() 的区别是不会修改源数组,而是返回一个新数组ECMAScript 2023(ES14)新特性

Array().toSorted()

方法描述所属 ECMAScript 版本
Array.toSorted()toSorted() 方法是 sort() 方法对应的复制版本。它返回一个新数组,与 sort() 的区别是不会修改源数组,其元素默认按升序排列,而是返回一个新数组ECMAScript 2023(ES14)新特性

Array().toSpliced()

方法描述所属 ECMAScript 版本
Array.toSpliced()toSpliced() 方法是 splice() 方法对应的复制版本。它返回一个新数组,与 splice() 的区别是不会修改源数组,,而是返回一个新数组并在给定的索引处删除和/或替换了一些元素ECMAScript 2023(ES14)新特性

Array().toString()

方法描述所属 ECMAScript 版本
Array.toString()toString() 方法返回一个字符串,将数组转字符串,表示指定的数组及其元素ECMAScript 2019(ES10)新特性

Array().unshift()

方法描述所属 ECMAScript 版本
Array.unshift()unshift() 方法将指定元素添加到数组的开头,并返回数组的新长度ECMAScript 1.2

Array().values()

方法描述所属 ECMAScript 版本
Array.values()values() 方法返回一个新的数组迭代器对象,该对象迭代数组中每个元素的值 查看详情ECMAScript 2017(ES8)

在这里插入图片描述


Array().with()

方法描述所属 ECMAScript 版本
Array.with()with() 方法它会返回一个新数组,其指定索引处的值会被新值替换ECMAScript 2023(ES14)新特性

在这里插入图片描述


静态方法

Array().from()

方法描述所属 ECMAScript 版本
Array.from()from() 静态方法从可迭代或类数组对象创建一个新的浅拷贝的数组实例ECMAScript 6

在这里插入图片描述
在这里插入图片描述


Array().fromAsync()

方法描述所属 ECMAScript 版本
Array.fromAsync()fromAsync() 静态方法从异步可迭代或类数组对象创建一个新的浅拷贝的数组实例,返回一个 PromiseECMAScript 2024(ES15)新特性

在这里插入图片描述


Array().isArray()

方法描述所属 ECMAScript 版本
Array.isArray()isArray() 静态方法用于判断传递值的数据类型是否为一个数组,如果值是数组返回 true,否则返回 falseECMAScript 5

在这里插入图片描述


Array().of()

方法描述所属 ECMAScript 版本
Array.of()of() 静态方法通过可变数量的参数创建一个新的 Array 实例,而不考虑参数的数量或类型ECMAScript 6

在这里插入图片描述


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————

  • 31
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

旧梦星轨

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

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

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

打赏作者

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

抵扣说明:

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

余额充值