这篇博客详细介绍了JavaScript中的数组方法，包括静态方法Array.from()、Array.isArray()、Array.of()，实例属性Array.prototype.length，以及各种实例方法如at()、concat()、copyWithin()等。通过实例展示了这些方法如何用于遍历、修改数组元素以及处理数组数据。此外，还讨论了数组的查找、过滤、映射、扁平化等操作，帮助开发者更好地理解和应用JavaScript数组功能。
数组Array是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。
目录
静态方法：
Array.from()
从类数组(伪数组)对象或者可迭代对象（Map()、Set()）中创建一个新的数组实例(转换为真数组，可使用数组中的所有方法)
Array.from('abc')
//['a','b','c'] 字符串转数组
Array.from(new Set(['a','b','c']))
//['a','b','c'] Set集转数组
function isArray(){
retrun Array.from(arguments)
//arguments是除箭头函数外所有函数都有的内置属性，代表了函数所有传进来的参数
}
isArray(1,2,3)
//[1,2,3] 伪数组转真数组Array.isArray()
用来判断某个变量是否是一个数组对象,如果是数组返回true，不是返回false
Array.isArray([]);
Array.isArray(new Array('a', 'b', 'c', 'd'))
// 鲜为人知的事实：其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype);
//以上判断都返回trueArray.of()
根据一组参数来创建新的数组实例，支持任意的参数数量和类型
Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(undefined); // [undefined]实例属性：
Array.prototype.length()
数组中的元素个数
let arr = [1,2,3]
arr.length
//3 实例方法：
挂载在数组原型对象（prototype）上的方法，感兴趣可以自己打印一个数组看看
at（）
返回给定索引处的数组项。接受负整数，从最后一项开始计数。
let arr = [
{
name:'zs',
age:14
},
'gender',
123
]
arr.at(0)
//返回数组第一项的对象
let obj = arr.at(0)
obj.name = '王麻子'
//这时数组arr也会跟着发生改变，他们的引用地址是一样的
//一般的适用场景是获取较长数组最后一个的值
arr.at(-1)
//123concat（）
用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组
let arr = ['a','b']
arr.concat(1,['zs'])
//['a','b',1,'zs']copyWithin（）
浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度，会修改原数组的值
arr.copyWithin(target,start, end)
target为必需，复制到指定位置目标索引，可以为负值，为负值后，索引为length+target
start 可选，元素复制的起始位置，省略，默认为0。可以为负值，为负值后，索引为length+startend 可选，省略，默认为数组的length，可以为负值，为负值后，索引为length+end
若start的值大于end，则直接返回原数组，不进行任何处理
[1, 2, 3, 4, 5].copyWithin(-2)
// [1, 2, 3, 1, 2]
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(-2, -3, -1)
// [1, 2, 3, 3, 4]entries（）
一个新的 Array 迭代器对象。Array Iterator是对象，它的原型（__proto__:Array Iterator）上有一个next方法，可用用于遍历迭代器取得原数组的 [key,value]
let arr = ["a", "b", "c"];
let iterator = arr.entries();
console.log(iterator);
/*Array Iterator {}
__proto__:Array Iterator
next:ƒ next()
Symbol(Symbol.toStringTag):"Array Iterator"
__proto__:Object
*/
let arr = ["a", "b", "c"];
let iterator = arr.entries();
console.log(iterator.next());
/*{value: Array(2), done: false}
done:false
value:(2) [0, "a"]
__proto__: Object
*/
// iterator.next() 返回一个对象，对于有元素的数组，
// 是 next{ value: Array(2), done: false }；
// next.done 用于指示迭代器是否完成：在每次迭代时进行更新而且都是 false，
// 直到迭代器结束 done 才是 true。
// next.value 是一个 ["key","value"] 的数组，是返回的迭代器中的元素值。
//可用于二维数组排序every()
测试一个数组内的所有元素是否都能通过某个指定函数的测试（满足某个条件）。它返回一个布尔值。
function judge(element, index, array) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(judge); // false
[12, 54, 18, 130, 44].every(judge); // true
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // truefill()
用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
arr.fill(value,start,end)
//value 填充的值 start 开始填充的位置 end 结束位置（不包括）
//如果 start 是个负数，则开始索引会被自动计算成为 length + start，其中 length 是 this 对象的 //length 属性值。如果 end 是个负数，则结束索引会被自动计算成为 length + end
[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3); // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]filter()
创建一个新数组，其包含通过所提供函数实现的测试的所有元素
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
const filterItems = (query) => {
return fruits.filter((el) =>
el.toLowerCase().indexOf(query.toLowerCase()) > -1
);
}
console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']find()
返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
const arr = [5, 12, 8, 130, 44];
const found = arr.find(element => element > 10);
console.log(found) //12findIndex()
返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber));
// 3findLast()
返回数组中满足提供的测试函数条件的最后一个元素的值。如果没有找到对应元素，则返回 undefined。
const array1 = [5, 12, 50, 130, 44];
const found = array1.findLast((element) => element > 45);
console.log(found);
// 130findLastIndex()
返回数组中满足提供的测试函数条件的最后一个元素的索引。若没有找到对应元素，则返回 -1。
const array1 = [5, 12, 50, 130, 44];
const isLargeNumber = (element) => element > 45;
console.log(array1.findLastIndex(isLargeNumber));
// 3 flat()
按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。(数据扁平化)
let arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
let arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
let arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
//使用 Infinity，可展开任意深度的嵌套数组
let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]flatMap()
首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
const arr1 = [1, 2, [3], [4, 5], 6, []];
const flattened = arr1.flatMap(num => num);
console.log(flattened);
// [1, 2, 3, 4, 5, 6]
let 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]]forEach()
遍历数组每一项
const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// "a"
// "b"
// "c"includes()
用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
//若果第二个参数大于数组的长度，直接返回FALSE，如果 第二个参数 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。
let arr = ['a', 'b', 'c'];
//3 + (-100) = -97 搜索全数组
arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true
arr.includes('a', -2); // falseindexOf()
返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1
let array = [2, 5, 9];
array.indexOf(2); // 0
array.indexOf(7); // -1
array.indexOf(9, 2); // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0
//第二个参数：开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回 -1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即 -1 表示从最后一个元素开始查找，-2 表示从倒数第二个元素开始查找 ，以此类推。 注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于 0，则整个数组都将会被查询。其默认值为 0。join()
将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。
let a = ['Wind', 'Rain', 'Fire'];
let myVar1 = a.join(); // myVar1 的值变为"Wind,Rain,Fire"
let myVar2 = a.join(', '); // myVar2 的值变为"Wind, Rain, Fire"
let myVar3 = a.join(' + '); // myVar3 的值变为"Wind + Rain + Fire"
let myVar4 = a.join(''); // myVar4 的值变为"WindRainFire"keys()
返回数组的每个键
const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();
for (const key of iterator) {
console.log(key);
}
// 0
// 1
// 2map（）
创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// [2, 8, 18, 32]
//开平方根
let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt);
// roots 的值为 [1, 2, 3], numbers 的值仍为 [1, 4, 9]pop()
从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度
const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop());
// "tomato"
console.log(plants);
// ["broccoli", "cauliflower", "cabbage", "kale"]
plants.pop();
console.log(plants);
//["broccoli", "cauliflower", "cabbage"]push()
将一个或多个元素添加到数组的末尾，并返回该数组的新长度
const animals = ['pigs', 'goats', 'sheep'];
const count = animals.push('cows');
console.log(count);
// 4
console.log(animals);
// ["pigs", "goats", "sheep", "cows"]
animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]
reduce()
对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。（计算总和）
let total = [ 0, 1, 2, 3 ].reduce(
( previousValue, currentValue ) => previousValue + currentValue,
0
)
const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
(previousValue, currentValue) => previousValue + currentValue,
initialValue //初始总值
);
console.log(sumWithInitial);
// 10reduceRight（）
与reduce效果差不多，不过是相反方向
let a = ['1', '2', '3', '4', '5'];
let left = a.reduce(function(prev, cur) { return prev + cur; });
let right = a.reduceRight(function(prev, cur) { return prev + cur; });
console.log(left); // "12345"
console.log(right); // "54321"reverse()
反转数组 ，该方法会改变原数组
const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// "array1:" Array ["one", "two", "three"]
const reversed = array1.reverse();
console.log('reversed:', reversed);
// "reversed:" Array ["three", "two", "one"]
// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// "array1:" Array ["three", "two", "one"]shift()
从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度
const array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1);
// [2, 3]
console.log(firstElement);
// 1slice()
返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
arr.slice([begin, end) end可选
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// ["camel", "duck"]
console.log(animals.slice(1, 5));
// ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2));
// ["duck", "elephant"]
console.log(animals.slice(2, -1));
// ["camel", "duck"]some()
测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。
//检测是否有元素大于10
function isBiggerThan10(element, index, array) {
return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // truesort()
用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的
const students = [
{ name: "Alex", grade: 15 },
{ name: "Devlin", grade: 15 },
{ name: "Eagle", grade: 13 },
{ name: "Sam", grade: 14 },
];
students.sort((firstItem, secondItem) => firstItem.grade - secondItem.grade);
[
{ name: "Eagle", grade: 13 },
{ name: "Sam", grade: 14 },
{ name: "Alex", grade: 15 }, // grade 相同时维持原先的顺序 (稳定排序)
{ name: "Devlin", grade: 15 }, // grade 相同时维持原先的顺序 (稳定排序)
];splice()
通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])start开始位置 deleteCount删除个数 item增加的元素
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// ["Jan", "Feb", "March", "April", "May"]
toString()
返回一个字符串，表示指定的数组及其元素。
const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString());
// "1,2,a,1a"unshift()
将一个或多个元素添加到数组的开头，并返回该数组的新长度（该方法修改原有数组）。
const array1 = [1, 2, 3];
console.log(array1.unshift(4, 5));
// 5
console.log(array1);
// Array [4, 5, 1, 2, 3]
values()
返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值。
const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
for (const value of iterator) {
console.log(value);
}
// "a"
// "b"
// "c"
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
