本文详细介绍了JavaScript中的Array对象，包括其概念、属性如constructor、length、prototype，以及各种实用方法，如concat、copyWithin、entries、every、fill、filter、find、findIndex、flat、flatMap、forEach、from、includes、indexOf、isArray、join、keys、lastIndexOf、map、pop、push、reduce、reduceRight、reverse、shift、slice、some、sort、splice、toLocaleString、toString、unshift和values。这些方法用于操作和处理数组，实现数组元素的添加、删除、查找、排序等操作。
一、概念
Array 对象用于在变量中存储多个值
二、属性
-
constructor
返回数组对象原型创建的函数：
var fruits= ['apple','orange','banana']; fruits.constructor; // function Array() { [native code] } -
length
返回数组的长度
var cars = ["Saab", "Volvo", "BMW"]; cars.length; // 3 -
prototype
允许您向对象添加属性和方法
Array.prototype.myUcase=function() { for (i=0;i<this.length;i++) { this[i]=this[i].toUpperCase(); } } var fruits=["Banana","Orange","Apple","Mango"]; fruits.myUcase();// BANANA,ORANGE,APPLE,MANGO
三、方法
-
concat()
array1.concat(array2,array3,...,arrayX)连接两个或多个数组
var hege = ["Cecilie", "Lone"]; var stale = ["Emil", "Tobias", "Linus"]; var kai = ["Robin"]; hege.concat(stale,kai);// Cecilie,Lone,Emil,Tobias,Linus,Robin -
copyWithin()
array.copyWithin(target, start, end)从数组的指定位置拷贝元素到数组的另一个指定位置中
target （必需）：从该位置开始替换数据。
start （可选）：从该位置开始读取数据，默认为 0 。如果为负值，表示倒数。
end （可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。// 将 3 号位复制到 0 号位 [1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5] // -2 相当于 3 号位， -1 相当于 4 号位 [1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5] // 将 3 号位复制到 0 号位 [].copyWithin.call({length: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, length: 5} // 将 2 号位到数组结束，复制到 0 号位 var i32a = new Int32Array([1, 2, 3, 4, 5]); i32a.copyWithin(0, 2); // Int32Array [3, 4, 5, 4, 5] // 对于没有部署 TypedArray 的 copyWithin 方法的平台 // 需要采用下面的写法 [].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); // Int32Array [4, 2, 3, 4, 5] ``` -
entries()
array.entries()返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.entries(); // [0, "Banana"] // [1, "Orange"] // [2, "Apple"] // [3, "Mango"] -
every()
array.every(function(currentValue,index,arr), thisValue)检测数组所有元素是否都符合指定条件（通过函数提供）
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。var ages = [32, 33, 16, 40]; function checkAdult(age) { return age >= 18; } function myFunction() { document.getElementById("demo").innerHTML = ages.every(checkAdult); } // false -
fill()
array.fill(value, start, end)将一个固定值替换数组的元素
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.fill("Runoob");// Runoob,Runoob,Runoob,Runoob fruits.fill("Runoob", 2, 4); // Banana,Orange,Runoob,Runoob -
filter()
array.filter(function(currentValue,index,arr), thisValue)创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
var ages = [32, 33, 16, 40]; function checkAdult(age) { return age >= 18; } function myFunction() { document.getElementById("demo").innerHTML = ages.filter(checkAdult); } // 32,33,40 -
find()
array.find(function(currentValue, index, arr),thisValue)返回通过测试（函数内判断）的数组的第一个元素的值
var ages = [3, 10, 18, 20]; function checkAdult(age) { return age >= 18; } function myFunction() { document.getElementById("demo").innerHTML = ages.find(checkAdult); } // 18 -
findIndex()
array.findIndex(function(currentValue, index, arr), thisValue)返回传入一个测试条件（函数）符合条件的数组第一个元素位置
var ages = [3, 10, 18, 20]; function checkAdult(age) { return age >= 18; } function myFunction() { document.getElementById("demo").innerHTML = ages.findIndex(checkAdult); } // 2 -
flat()
数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。
[1, 2, [3, 4]].flat() // [1, 2, 3, 4]flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。
[1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]] [1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
[1, [2, [3]]].flat(Infinity) // [1, 2, 3]如果原数组有空位，flat()方法会跳过空位。
[1, 2, , 4, 5].flat() // [1, 2, 4, 5] -
flatMap()
对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。
// 相当于 [[2, 4], [3, 6], [4, 8]].flat() [2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]flatMap()只能展开一层数组。
// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat() [1, 2, 3, 4].flatMap(x => [[x * 2]]) // [[2], [4], [6], [8]]flatMap()方法的参数是一个遍历函数，该函数可以接受三个参数，分别是当前数组成员、当前数组成员的位置（从零开始）、原数组。
arr.flatMap(function callback(currentValue[, index[, array]]) { // ... }[, thisArg])flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this。
-
forEach()
array.forEach(function(currentValue, index, arr), thisValue)调用数组的每个元素，并将元素传递给回调函数。
var arr = [1, 2, 3, 4, 5]; arr.forEach(function (item) { if (item === 3) { return; } console.log(item); }); -
from()
Array.from(object, mapFunction, thisValue)用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。
let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; // ES5的写法 var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c'] // ES6的写法 let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。
// NodeList对象 let ps = document.querySelectorAll('p'); Array.from(ps).filter(p => { return p.textContent.length > 100; }); // arguments对象 function foo() { var args = Array.from(arguments); // ... }只要是部署了 Iterator 接口的数据结构，Array.from都能将其转为数组。
Array.from('hello') // ['h', 'e', 'l', 'l', 'o'] let namesSet = new Set(['a', 'b']) Array.from(namesSet) // ['a', 'b']如果参数是一个真正的数组，Array.from会返回一个一模一样的新数组。
Array.from([1, 2, 3]) // [1, 2, 3]扩展运算符（…）也可以将某些数据结构转为数组。
// arguments对象 function foo() { const args = [...arguments]; } // NodeList对象 [...document.querySelectorAll('div')]扩展运算符背后调用的是遍历器接口（Symbol.iterator），如果一个对象没有部署这个接口，就无法转换。
Array.from方法还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。 -
includes()
arr.includes(searchElement, fromIndex)返回一个布尔值，表示某个数组是否包含给定的值
[1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false [1, 2, NaN].includes(NaN) // true第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。
[1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true -
indexOf()
array.indexOf(item,start)返回数组中某个指定的元素位置，如果没有搜索到则返回 -1
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var a = fruits.indexOf("Apple");// 2 -
isArray()
Array.isArray(obj)判断一个对象是否为数组
function myFunction() { var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = document.getElementById("demo"); x.innerHTML = Array.isArray(fruits); } -
join()
array.join(separator)把数组中的所有元素转换一个字符串
元素通过指定的分隔符进行分隔。var fruits = ["Banana", "Orange", "Apple", "Mango"]; var energy = fruits.join();// Banana,Orange,Apple,Mango -
keys()
从数组创建一个包含数组键的可迭代对象
var fruits = ["Banana", "Orange", "Apple", "Mango"]; [...fruits.keys()]// [0, 1, 2, 3] -
lastIndexOf()
array.lastIndexOf(item,start)返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。
如果要检索的元素没有出现，则该方法返回 -1。var fruits = ["Banana", "Orange", "Apple", "Mango"]; var a = fruits.lastIndexOf("Apple"); // 2 -
map()
array.map(function(currentValue,index,arr), thisValue)返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
按照原始数组元素顺序依次处理元素。var numbers = [4, 9, 16, 25]; function myFunction() { x = document.getElementById("demo") x.innerHTML = numbers.map(Math.sqrt); } // 2,3,4,5 -
pop()
用于删除数组的最后一个元素并返回删除的元素。
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.pop();// Banana,Orange,Apple -
push()
可向数组的末尾添加一个或多个元素，并返回新的长度。
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Kiwi")// Banana,Orange,Apple,Mango,Kiwi -
reduce()
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
var numbers = [65, 44, 12, 4]; function getSum(total, num) { return total + num; } function myFunction(item) { document.getElementById("demo").innerHTML = numbers.reduce(getSum); } // 125 -
reduceRight()
array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)接收一个函数作为累加器，数组中的每个值（从右到左）开始累加，最终计算为一个值。
var numbers = [65, 44, 12, 4]; function getSum(total, num) { return total + num; } function myFunction(item) { document.getElementById("demo").innerHTML = numbers.reduceRight(getSum); } // 125 -
reverse()
颠倒数组中元素的顺序。
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.reverse(); // Mango,Apple,Orange,Banana -
shift()
把数组的第一个元素从其中删除，并返回第一个元素的值。
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.shift() // Orange,Apple,Mango -
slice()
array.slice(start, end)从已有的数组中返回选定的元素
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(1,3); // Orange,Lemon -
some()
array.some(function(currentValue,index,arr),thisValue)检测数组中的元素是否满足指定条件（函数提供）
依次执行数组的每个元素：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。var ages = [3, 10, 18, 20]; function checkAdult(age) { return age >= 18; } function myFunction() { document.getElementById("demo").innerHTML = ages.some(checkAdult); } // true -
sort()
array.sort(sortfunction)对数组的元素进行排序
排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序。var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); // Apple,Banana,Mango,Orange -
splice()
array.splice(index,howmany,item1,.....,itemX)用于添加或删除数组中的元素。
// 数组中添加新元素： var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2,0,"Lemon","Kiwi"); // Banana,Orange,Lemon,Kiwi,Apple,Mango // 移除数组的第三个元素，并在数组第三个位置添加新元素: var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2,1,"Lemon","Kiwi"); // Banana,Orange,Lemon,Kiwi,Mango -
toLocaleString()
把数组转换为字符串，并返回结果。
数组中的元素之间用逗号分隔。var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.toLocaleString(); // Banana,Orange,Apple,Mango -
toString()
> 把数组转换为字符串，并返回结果。 数组中的元素之间用逗号分隔。 ``` var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.toString(); // Banana,Orange,Apple,Mango ``` -
unshift()
> 向数组的开头添加一个或更多元素，并返回新的长度。 ``` var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon","Pineapple"); // Lemon,Pineapple,Banana,Orange,Apple,Mango ``` -
values()
> 从数组创建一个包含数组值的可迭代对象 ``` var fruits = ["Banana", "Orange", "Apple", "Mango"]; [...fruits.values()] // ["Banana", "Orange", "Apple", "Mango"] ```
扫一扫
9986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
