JS中的数组
实例方法,属性
基础
length
length
返回或设置一个数组中的元素个数。该值是一个无符号 32-bit 整数,并且总是大于数组最高项的下标.
-
可以设置
length
属性的值来截断任何数组。var arr=[1,2,3]; arr.length=2; console.log(arr); //[1,2]
-
也可改变
length
属性值来扩展数组时,实际元素的数目将会增加。新增元素的值将会是undefined
var arr=[1,2,3]; arr.length=5; console.log(arr); // [1, 2, 3, empty × 2] console.log(arr[4]); //undefined
-
当对数组中为大于等于
length
的下标x
对应元素赋值时,数组大小length
会更改为x+1
,其他未初始化的元素值为undefined
var arr=[1,2,3]; arr[8]=4; console.log(arr.length); //9
toString()
**toString()
**返回一个字符串,表示指定的数组及其元素。
调用console.log()打印数组时,系统默认调用其toString()方法。
toLocaleString()
toLocaleString()
返回一个字符串表示数组中的元素。数组中的每个元素将使用各自的 toLocaleString()
方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 “,”)隔开。
var number = 1337; //number.toLocaleString() 为1,337
var date = new Date(); //date.toLocaleString() 为2025/2/24 17:59:18
var myArr = [number, date, 'foo']; //
console.log(myArr.toLocaleString()); //1,337,2025/2/24 17:59:18,foo
console.log(myArr); //[1337, Mon Feb 24 2025 17:59:18 GMT+0800 (中国标准时间), 'foo']
forEach()
**forEach(fun)
**方法对数组的每个元素执行一次指定的函数。
fun函数原型
function fun(Value, index, array) {
//函数体
}
参数
- value:正在处理的当前元素。
- index:可选,正在处理的当前元素下标
- array:可选,正在操作的数组
说明
forEach
方法按下标升序为数组中含有效值的每一项执行一次fun
函数,那些未初始化的项将被跳过。
操作数组
push()
push()
方法将一个或多个元素添加到数组的末尾,并返回新数组的长度。
var numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers); // [1, 2, 3, 4]
numbers.push(5, 6, 7);
console.log(numbers); // [1, 2, 3, 4, 5, 6, 7]
注:push
方法根据 length
属性来决定从哪里开始插入给定的值。
pop()
pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。
shift()
shift()
方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
unshift()
unshift()
方法将一个或多个元素添加到数组的开头,并返回新数组的长度。
var numbers = [1, 2, 3];
numbers.unshift(4);
console.log(numbers); // [4, 1, 2, 3]
numbers.unshift(5, 6, 7);
console.log(numbers); // [5, 6, 7, 4, 1, 2, 3]
splice()
splice()
方法通过删除现有元素和/或插入新元素来更改一个数组的内容。返回由被删除的元素组成的一个数组。
原型
array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)
参数
start
指定修改的开始位置(从0计数)。- 如果超出了数组的长度,则从数组末尾开始添加内容;
- 正值,则表示从数组0下标开始的第几位(从0计数);
- 负值,则表示从数组末位开始往前数的第几位(从1计数);
- 若只使用start参数而不使用deleteCount、item,如:array.splice(start) ,表示删除[start,end]的元素。
deleteCount
可选整数,表示要移除的数组元素的个数。- 如果
deleteCount
是 0,则不移除元素。这种情况下,至少应添加一个新元素。 - 如果
deleteCount
大于start
之后的元素的总数,则从start
及后面的元素都将被删除。如果deleteCount被省略,则其相当于(arr.length - start)。
- 如果
item1, item2, ...
可选,要添加进数组的元素,从start
位置开始。如果不指定,则splice()
将只删除数组元素
注:splice()
方法使用deleteCount参数来控制是删除(非0)还是不删除(0)
示例
- 删除指定下标及以后所有元素
var arr=[1,2,3,4,5]
var red=arr.splice(2);
console.log(arr); //[1,2]
console.log(red); //[3,4,5]
var arr=[1,2,3,4,5]
var red=arr.splice(-2);
console.log(arr); //[1,2,3]
console.log(red); //[4,5]
- 删除指定下标及以后n个元素
var arr=[1,2,3,4,5]
var red=arr.splice(2,2);
console.log(arr); //[1,2,5]
console.log(red); //[3,4]
- 指定下标插入一个元素
var arr=[1,2,3,4,5]
var red=arr.splice(2,0,8);
console.log(arr); //[1,2,8,3,4,5]
console.log(red); //[]
- 指定下标插入多个元素
var arr=[1,2,3,4,5]
var red=arr.splice(2,0,7,8,9);
console.log(arr); //[1,2,7,8,9,3,4,5]
console.log(red); //[]
- 指定下标删除后插入元素
var arr=[1,2,3,4,5]
var red=arr.splice(2,1,8);
console.log(arr); //[1,2,8,4,5]
console.log(red); //[3]
数组变换
reverse()
reverse()
方法将数组反转,并返回新数组的引用。
var arr=[1,2,3,4,5]
var red=arr.reverse();
console.log(arr); //[5,4,3,2,1]
console.log(red); //[5,4,3,2,1]
red[3]=9; //更改red数组,arr数组也随之改变
console.log(arr[3]); //9
sort()
**sort()
**方法用就地( in-place )的算法对数组的元素进行排序,并返回排序后数组的引用。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。
原型
arr.sort()
arr.sort(compareFunction)
compareFunction
可选。用来指定按某种顺序进行排列的函数
var items = [
{ name: 'Edward', value: 21 },
{ name: 'Sharpe', value: 37 },
{ name: 'And', value: 45 },
{ name: 'The', value: -12 },
{ name: 'Magnetic', value: 13 },
{ name: 'Zeros', value: 37 }
];
items.sort(function (a, b) {
return a.value - b.value; //负数,a排在前,正数,b排在前
});
console.log(items);
/*
[
{name: 'The', value: -12},
{name: 'Magnetic', value: 13},
{name: 'Edward', value: 21},
{name: 'Sharpe', value: 37},
{name: 'Zeros', value: 37},
{name: 'And', value: 45}
]
*/
- 数值默认按值升序
var arr=[1,2,5,3,6,3,2,7];
var red=arr.sort();
console.log(arr); //[1,2,2,3,3,5,6,7]
console.log(red); //[1,2,2,3,3,5,6,7]
- 字符串按字典序升序
var arr=['abc','sdt','tudf','ab','zy'];
var red=arr.sort();
console.log(arr); //['ab', 'abc', 'sdt', 'tudf', 'zy']
console.log(red); //['ab', 'abc', 'sdt', 'tudf', 'zy']
- 数值一定排在字符串前
var arr=['abc','sdt',3,'tudf',1,'ab','zy',2,56,999999999];
var red=arr.sort();
console.log(arr); //[1, 2, 3, 56, 999999999, 'ab', 'abc', 'sdt', 'tudf', 'zy']
console.log(red); //[1, 2, 3, 56, 999999999, 'ab', 'abc', 'sdt', 'tudf', 'zy']
concat()
**concat()
**方法用于合并两个或更多数组。此方法不会更改现有的数组,而是返回一个新的数组。
- 合并两个数组
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = arr1.concat(arr2);
console.log(arr3); //[1,2,3,4,5,6]
- 合并多个数组
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9,10];
var arr3 = arr1.concat(arr2,arr3);
console.log(arr3); //[1,2,3,4,5,6,7,8,9,10]
注:该方法会将此数组和参数数组内的所有元素的浅拷贝都尾添到新数组中
slice()
slice()
方法返回一个从原数组开始到结束(不包括结束)范围内所有元素的浅拷贝到一个新数组。不更改原数组。
原型
arr.slice()
arr.slice(begin)
arr.slice(begin, end)
参数
-
begin
可选,从该索引处开始提取原数组中的元素(从0开始)。如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,如果省略则slice
从索引 0 开始。 -
end
可选,在该索引处结束提取原数组元素(从0开始)。
注:slice(begin,end)
会提取原数组中索引从 begin
到 end
的所有元素(包含begin,不包含end)。
var a = ['zero', 'one', 'two', 'three'];
var sliced = a.slice(1, 3);
console.log(a); // ['zero', 'one', 'two', 'three']
console.log(sliced); // ['one', 'two']
注意:slice()
方法返回的新数组中的元素是原数组中对应元素的浅拷贝,
当原数组中元素为数组或对象的引用类型数据时,更改新数组的元素属性,原数组中对应元素属性随之改变。
var objs=[
{value: 2,id:3},
{value: 20,id:4},
{value: 3,id:3}
]
var now=objs.slice(1,3);
now[0].value=100; //改变新数组中下标为0的元素属性,原数组也随之更改
console.log(now); //[{value: 100, id: 4},{value: 3, id: 3}]
console.log(objs); //[{value: 2, id: 3},{value: 100, id: 4},{value: 3, id: 3}]
当原数组中元素为值类型时,更改新数组的元素,原数组中对应元素不会改变。
var a = ['zero', 'one', 'two', 'three'];
var sliced = a.slice(1, 3);
sliced[0]='123';
console.log(a); // ['zero', 'one', 'two', 'three']
console.log(sliced); // ['123', 'two']
entries()
entries()
方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。
var a = ['a', 'b', 'c'];
var iterator = a.entries();
console.log(iterator.next().value); // [0, 'a']
console.log(iterator.next().value); // [1, 'b']
console.log(iterator.next().value); // [2, 'c']
fill()
fill()
方法用一个固定值填充一个数组中从起始索引到终止索引内(不包括终止索引)的全部元素。
arr.fill(value)
arr.fill(value, start)
arr.fill(value, start, end)
-
value
用来填充数组元素的值。 -
start
可选起始索引,默认值为0。 -
end
可选终止索引(不包括),默认值为this.length
。
说明
fill()
将数组下标范围在[start,end)
的所有元素填充为value
[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, -2); // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]
Array(3).fill(4); // [4, 4, 4]
[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}
join()
**join()
**方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。该方法不更改原数组
原型
arr.join()
arr.join(separator)
参数
separator
可选,连接符,默认为‘,’
(逗号)
var a = ['Wind', 'Rain', 'Fire'];
a.join(); // 'Wind,Rain,Fire'
a.join('-'); // 'Wind-Rain-Fire'
测试数组
includes()
**includes()
**方法用来判断一个数组是否包含一个指定的值
原型
arr.includes(searchElement)
arr.includes(searchElement, fromIndex)
参数
-
searchElement
需要查找的元素值。 -
fromIndex
可选从该索引处开始查找searchElement
。如果为负值,则按下标升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
var a = [1, 2, 3];
a.includes(2); // true
a.includes(4); // false
a.includes(1,1); //false
a.includes(1,0); //true
find()
find()方法返回数组中满足指定测试函数的第一个元素的值。不存在返回undefined
var arr=[12, 5, 8, 130, 44];
arr.find(function(value[, index, array]){
return value>=15;
}); // 130
findIndex()
findIndex()方法返回数组中满足指定测试函数的第一个元素的下标。不存在返回-1
var arr=[12, 5, 8, 130, 44];
arr.findIndex(function(value[, index, array]){
return value>=15;
}); // 3
every()
every()
方法测试数组的所有元素是否都通过了指定函数的测试。
function isBigEnough(value[, index, array]) {
return value >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true
some()
every()
方法测试数组是否存在元素通过了指定函数的测试。
function isBigEnough(value[, index, array]) {
return value >= 10;
}
[4, 5, 8, 0, 4].every(isBigEnough); // false
[8, 9, 18, 130, 44].every(isBigEnough); // true
indexOf()
indexOf()
方法返回在数组中可以找到指定定元素的第一个索引,如果不存在,则返回-1。
var a = [2, 9, 9];
a.indexOf(2); // 0
a.indexOf(7); // -1
lastIndexOf()
lastIndexOf()
方法返回指定元素在数组中的最后一个索引,如果不存在则返回 -1。
var a = [2, 9, 9];
a.indexOf(9); // 2
a.indexOf(7); // -1
filter()
**filter()
**方法返回一个新数组, 其包含通过给定函数测试的所有元素。该方法对原数组不会影响
var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
var longWords = words.filter(function(word){
return word.length > 5;
});
console.log(longWords); //['exuberant', 'destruction', 'present']
静态方法
prototype
Array.prototype
属性表示Array
构造函数的原型,并允许您向所有Array对象添加新的属性和方法。
isArray()
Array.isArray()
用于确定传递的值是否是一个Array
Array.isArray([1, 2, 3]); // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar'); // false
Array.isArray(undefined); // false
of()
**Array.of()
**方法创建一个具有可变数量参数的新数组实例。
Array.of()
和 Array
构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素7的数组,而 Array(7) 创建一个包含7个undefined元素的数组。
Array.of()
方法不常用,用[...]
是一样的效果
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]
Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]
from()
**Array.from()
**方法从一个类似数组或可迭代对象中创建一个新的数组实例。
const bar = ['a', 'b', 'c'];
Array.from(bar);
// ['a', 'b', 'c']
Array.from('foo');
// ['f', 'o', 'o']