js数组方法(大全)
迪丽瓦拉
2025-06-01 02:43:27
0次
  1. Array.at() 通过下标获取数值

Array.at(index) 获取对应下标的数值,index为下标值,正数时从左往右查询,负数时从右往左查询(默认值为0)。示例如下:

const array1 = [5, 12, 8, 130, 44];let index = 2;console.log(`Using an index of ${index} the item returned is ${array1.at(index)}`);
// Expected output: "Using an index of 2 the item returned is 8"index = -2;console.log(`Using an index of ${index} item returned is ${array1.at(index)}`);
// Expected output: "Using an index of -2 item returned is 130"

  1. Array.concat 数组拼接

拼接两个数组或者多个数组,返回的是新数组,不会改变原数组。示例如下:

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);console.log(array3);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]

  1. Array.entries() 数组迭代器对象

会一层一层迭代下下去,该对象包含数组中每个索引的键/值对。示例如下:

示例一:
const array1 = ['a', 'b', 'c'];const iterator1 = array1.entries();console.log(iterator1.next().value);
// Expected output: Array [0, "a"]console.log(iterator1.next().value);
// Expected output: Array [1, "b"]console.log(iterator1.next().value);
// Expected output: Array [2, "c"]示例二:
const a = ["a", "b", "c"];for (const [index, element] of a.entries()) {console.log(index, element);
}
// 0 'a'
// 1 'b'
// 2 'c'示例三:
const array = ["a", "b", "c"];
const arrayEntries = array.entries();for (const element of arrayEntries) {console.log(element);
}// [0, 'a']
// [1, 'b']
// [2, 'c']

  1. Array.every() 判断指定元素是否通过测试(返回值为布尔值)

Array.every (element, index. array) 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。有三个参数,对应如下:

element

index

array

数组中正在处理的当前元素

下标

调用 every 的当前数组

示例如下:

示例一:
const isBelowThreshold = (currentValue) => currentValue < 40;const array1 = [1, 30, 39, 29, 10, 13];console.log(array1.every(isBelowThreshold));
// Expected output: true示例二
function isBigEnough(element, index, array) {return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

  1. Array.fill() 填充修改数组

Array.fill(value, statr, end ) 方法用一个固定值填充一个数组中从起始索引(默认为 0)到终止索引(默认为 array.length)内的全部元素。它返回修改后的数组。

value

statr

end

改变的值

改变的下标

示例如下:

console.log([1, 2, 3].fill(4)); // [4, 4, 4]
console.log([1, 2, 3].fill(4, 1)); // [1, 4, 4]
console.log([1, 2, 3].fill(4, 1, 2)); // [1, 4, 3]
console.log([1, 2, 3].fill(4, 1, 1)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 3)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, -3, -2)); // [4, 2, 3]
console.log([1, 2, 3].fill(4, NaN, NaN)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 5)); // [1, 2, 3]
console.log(Array(3).fill(4)); // [4, 4, 4]

Array.filter() 数组过滤,筛选

Array.filter(element, index, array) 不会改变原数组,创建一个新的数组

element

index

array

数组中当前正在处理的元素。

正在处理的元素在数组中的索引。

调用了 filter() 的数组本身。

示例如下

示例一:
筛选排除对比小的值
function isBigEnough(value) {return value >= 10;
}const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]示例二:
找出下列输入所有质数
const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];function isPrime(num) {for (let i = 2; num > i; i++) {if (num % i === 0) {return false;}}return num > 1;
}console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]示例三:
在数组中搜索
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];/*** 根据搜索条件(查询)筛选数组项*/
function filterItems(arr, query) {return arr.filter((el) => el.toLowerCase().includes(query.toLowerCase()));
}console.log(filterItems(fruits, 'ap')); // ['apple', 'grapes']
console.log(filterItems(fruits, 'an')); // ['banana', 'mango', 'orange']

  1. Array.find() 返回测试中第一个满足的元素的值

Array.find(element, index, array) 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

element

index

array

当前遍历到的元素。

当前遍历到的索引。

数组本身。

示例如下:

示例一:
const inventory = [{name: 'apples', quantity: 2},{name: 'bananas', quantity: 0},{name: 'cherries', quantity: 5},{name: 'cherries', quantity: 6}
];function isCherries(fruit) {return fruit.name === 'cherries';
}console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
// 只会返回满足条件的第一个数据示例二:
使用箭头函数和解构赋值
const inventory = [{name: 'apples', quantity: 2},{name: 'bananas', quantity: 0},{name: 'cherries', quantity: 5}
];const result = inventory.find(({ name }) => name === 'cherries');console.log(result) // { name: 'cherries', quantity: 5 }

  1. Array.findIndex() 查询到满足的条件,返回对应下标,否则返回-1

Array.findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1(下标从0开始)。

const array1 = [5, 12, 8, 130, 44];const isLargeNumber = (element) => element > 46;console.log(array1.findIndex(isLargeNumber));
// Expected output: 3const isLargeNumber = (element) => element > 144;console.log(array1.findIndex(isLargeNumber));
// Expected output: -1

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast

相关内容

热门资讯

AI做攻略、“双向奔赴”……国... 本文转自:人民网人民网记者 许维娜今年国庆假期,AI(人工智能)成了不少年轻人的“旅行搭子”。行前做...
合肥的这个“梗”, 翻篇了 社交平台的评论区,曾长期流传一句专属于合肥的黑色幽默。有人问合肥哪里好玩,本地网友半开玩笑地回复:合...
7万+旅游中高层都在的群,今天... 做旅游这行,资源卡位、渠道互通、项目落地——往往就差一个“对的机会”。我们的行业社群已聚集70,00...
一场帐篷音乐节,如何让井研从“... 帐篷音乐节现场封面新闻记者 周洪攀10月的研溪湿地,晚风里裹着柑橘的清甜与民谣的回响。夜幕降临,10...
白鹤翩翩落星愿,上海迪士尼度假... 10月9日,世界候鸟日前夕,上海迪士尼度假区星愿公园的湖风里多了一分白鹤的灵动。三座白鹤雕塑正式揭幕...
成都锦江边赏初秋枫叶飘飘 目前,成都锦江边国华街枫叶树红了。近年来,国华街附近的几条街都栽种了红枫树,是城区较集中看枫叶的点位...
GBTA:商务旅行正在复苏,但... 亚太正在成为全球商务旅行增长的重要引擎。在经历疫情后的快速反弹之后,全球商务旅行正在进入一个新的增长...
从景区焕新到节赛引流 邹城双节... 齐鲁网·闪电新闻10月9日讯 中秋、国庆“双节”假期,邹城市文化和旅游局提前谋划、周密部署,立足自身...
江山如此多娇 且看石楼今朝 金秋十月,黄河岸畔秋意盎然,丰收盛会喜迎国庆。本次石楼国庆文旅活动以“江山如此多娇,且看石楼今朝”为...
海南国庆假期接待游客475.4... 2026年国庆假期,海南接待游客475.40万人次,较2025年增长13.1%,较2024年增长15...