js数组操作方法
Array.at() 返回该索引对应的元素
接收一个整数值并返回该索引对应的元素,允许正数和负数。负整数从数组中的最后一个元素开始倒数。
// 数组及数组元素
const cart = ["apple", "banana", "pear"];
// 一个函数,用于返回给定数组的最后一个元素
function returnLast(arr) {
return arr.at(-1);
}
// 获取 'cart' 数组的最后一个元素
const item1 = returnLast(cart);
console.log(item1); // 输出:'pear'
Array.entries() 方法返回一个新的数组迭代器 (en-US)对象
该对象包含数组中每个索引的键/值对
const array = ["a", "b", "c"];
const arrayEntries = array.entries();
for (const element of arrayEntries) {
console.log(element);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']
Array.every() 检测数值元素的每个元素是否都符合条件
返回一个布尔值
//测试一个数组的所有元素是否都存在于另一个数组中
const isSubset = (array1, array2) =>
array2.every((element) => array1.includes(element));
console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 7, 6])); // true
console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 8, 7])); // false
Array.fill() 用于将一个固定值替换数组的元素
用一个固定值填充一个数组中从起始索引(默认为 0
)到终止索引(默认为 array.length
)内的全部元素。它返回修改后的数组。
语法:
fill(value, start, end)
- value:必需。填充的值。
- start:可选。开始填充位置(默认0);负数索引从数组的末端开始计算。
- end:可选。停止填充位置 (默认为 array.length);负数索引从数组的末端开始计算;fill() 填充到但不包含 `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]
// 一个简单的对象,被数组的每个空槽所引用
const arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
Array.filter() 检测数值元素,并返回符合条件所有元素的数组。
创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
//简单示例
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]
//使用 `filter()` 创建具有非零 `id` 的元素的 json
const arr = [
{ id: 15 },
{ id: -1 },
{ id: 0 },
{ id: 3 },
{ id: 12.2 },
{},
{ id: null },
{ id: NaN },
{ id: "undefined" },
];
let invalidEntries = 0;
function filterByID(item) {
if (Number.isFinite(item.id) && item.id !== 0) {
return true;
}
invalidEntries++;
return false;
}
const arrByID = arr.filter(filterByID);
console.log("过滤后的数组\n", arrByID);
// 过滤后的数组
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
console.log("无效条目数量 =", invalidEntries);
// 无效条目数量 = 5
如果想删除所有虚假值包括 null 、 undefined 、 0 、空字符串、 NaN 和 false,上面的过滤条件可以直接将布尔函数传递给 filter ,如下:
arr.filter(Boolean)
Array.find() 返回通过测试(函数内判断)的数组的第一个元素的值
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数;如果没有符合条件的元素返回 undefined
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// Expected output: 12
Array.findLast()并返回满足提供的测试函数的第一个元素的值。如果没有找到对应元素,则返回 [
undefined
]
Array.findIndex()返回数组中满足提供的测试函数的第一个元素的索引
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数;如果没有符合条件的元素返回 -1
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber));
// Expected output: 3
Array.findLastIndex()返回满足所提供的测试函数的第一个元素的索引。若没有找到对应元素,则返回 -1
Array.flat() 返回一个包含将数组与子数组中所有元素的新数组
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
//使用 Infinity,可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
**扁平化与数组空项:** flat() 方法会移除数组中的空项:
var arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]
Array.flatMap()首先使用映射函数映射每个元素,然后将结果压缩成一个新数组
//map() 与 flatMap()
var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
// only one level is flattened
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
Array.forEach()数组每个元素都执行一次回调函数
用于调用数组的每个元素,并将元素传递给回调函数。
const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// Expected output: "a"
// Expected output: "b"
// Expected output: "c"
Array.map()通过指定函数处理数组的每个元素,并返回处理后的数组
按照原始数组元素顺序依次处理元素
const array1 = [1, 4, 9, 16];
// Pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// Expected output: Array [2, 8, 18, 32]
Array.of()将一组值转换为数组
console.log(Array.of('foo', 2, 'bar', true));
// Expected output: Array ["foo", 2, "bar", true]
console.log(Array.of());
// Expected output: Array []
Array.reduce()将数组元素计算为一个值(从左到右)
语法: array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
- total: 必需。初始值, 或者计算结束后的返回值
- currentValue: 必需。当前元素
- initialValue: 可选。传递给函数的初始值
Array.reduceRight() 将数组元素计算为一个值(从右到左)
const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
(accumulator, currentValue) => accumulator + currentValue,
initialValue
);
console.log(sumWithInitial);
// Expected output: 10
Array.some()检测数组元素中是否有元素符合指定条件
测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true,则返回 true;否则返回 false。它不会修改数组。
//判断数组元素中是否存在某个值
const fruits = ["apple", "banana", "mango", "guava"];
function checkAvailability(arr, val) {
return arr.some((arrVal) => val === arrVal);
}
checkAvailability(fruits, "kela"); // false
checkAvailability(fruits, "banana"); // true
Array.sort()用于对数组的元素进行排序
默认排序顺序为按字母升序
[数字排序」:
//升序
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b}); //1,5,10,25,40,100
//降序
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a}); // 100,40,25,10,5,1
拓展:
数组去重
Set
var arr = [1, 2, 2, 'a', 'a', true, true, false, false, undefined, undefined, NaN, NaN];
console.log(new Set(arr)) // Set(7) {1, 2, 'a', true, false, …}
console.log([...new Set(arr)]); // [1, 2, 'a', true, false, undefined, NaN]
// 或 console.log(Array.from(new Set(arr)));
includes
function removeDuplicate(arr) {
const newArr = []
arr.forEach(item => {
if (!newArr.includes(item)) {
newArr.push(item)
}
})
return newArr
}
var arr = [1, 2, 2, 'a', 'a', true, true, false, false, undefined, undefined, NaN, NaN];
removeDuplicate(arr); // [1, 2, 'a', true, false, undefined, NaN]
数组对象去重
var arr = [
{name: "张三",id: 1},
{name: "李四",id: 2},
{name: "王五",id: 3},
{name: "李四",id: 2},
{name: "张三",id: 1},
];
//Set() + map
const noRepeat = [...new Set(arr.map(item => JSON.stringify(item)))];
// 反序列化
const newArr = noRepeat.map(item => JSON.parse(item));
console.log(newArr);
/* 0: {name: '张三', id: 1}
1: {name: '李四', id: 2}
2: {name: '王五', id: 3} */
// Map()+filter
function removeDuplicate(arr, id){
const res = new Map();
return arr.filter((item) => !res.has(item[id]) && res.set(item[id], 1));
}
console.log(removeDuplicate(arr, 'id'))
/* 0: {name: '张三', id: 1}
1: {name: '李四', id: 2}
2: {name: '王五', id: 3} */
对象合并
var obj1 = {name: 'Lisa',age: 24};var obj2 = {sex: '女'}
//Object.assign
var newObj = {}
newObj = Object.assign(newObj,obj1,obj2);
console.log(newObj) //{name: 'Lisa', age: 24, sex: '女'}
// *:当两个对象中有相同字段,合并时,后者的key和value会覆盖前者的key和value
// es6
var newObj = {...obj1, ...obj2}
console.log(newObj) //{name: 'Lisa', age: 24, sex: '女'}
数组对象按某个属性合并
// Example: 根据code合并数组,并将sl值累加,如下两种方法:
var data = [
{ code: 1001, name: "苹果", sl: 12 },
{ code: 1001, name: "苹果", sl: 13 },
{ code: 1001, name: "苹果", sl: 14 },
{ code: 1001, name: "苹果", sl: 15 },
{ code: 1002, name: "西瓜", sl: 41 },
{ code: 1002, name: "西瓜", sl: 75 },
{ code: 1003, name: "梨", sl: 17 },
{ code: 1003, name: "梨", sl: 75 }
];
// 根据reduce遍历累加,得到数组
var newArray = data.reduce((accumulator, cur, index) => {
let hasValue = accumulator.findIndex(current => {
return current.code === cur.code;
});
hasValue === -1 && accumulator.push(cur);
hasValue !== -1 && (accumulator[hasValue].sl = accumulator[hasValue].sl + cur.sl);
return accumulator;
}, []);
console.log(newArray);
/* 0: {code: 1001, name: '苹果', sl: 54}
1: {code: 1002, name: '西瓜', sl: 116}
2: {code: 1003, name: '梨', sl: 92}*/
参考: