JavaScript的 Array 对象是用于构造数组的全局对象,数组是类似于列表的高阶对象。
相关API手册参考: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
-
创建数组:var 数组名 = [值1,值2,值3]
var fruits = ['Apple', 'Banana', 'pear'];
console.log(fruits);
-
JavaScript 数组的索引是从0开始的,第一个元素的索引为0,最后一个元素的索引等于该数组的长度减1。如果指定的索引是一个无效值,JavaScript 数组并不会报错,而是会返回 undefined!!
数组名[元素索引] 例:arr[0]
-
打印数组长度
var fruits = ['Apple', 'Banana', 'pear'];
console.log(fruits.length);
-
数组名[] 通过索引访问数组元素
var fruits = ['Apple', 'Banana', 'pear'];
console.log(fruits);//打印
// 访问第一个数组元素
var first = fruits[0];
console.log(first);//打印
// 访问最后一个数组元素
var last = fruits[fruits.length - 1];
console.log(last);//打印
-
forEach() 遍历数组
var fruits = ['Apple', 'Banana', 'pear'];
fruits.forEach(function (item, index, array) {
console.log(item, index);
});
-
values() 方法返回一个新的 Array Iterator 对象,包含数组每个索引的值
const fruits = ['Apple', 'Banana', 'pear'];
const iterator = fruits.values();
for (const value of iterator) {
console.log(value);
}
-
unshift() 添加元素到数组的头部
var fruits = ['Apple', 'Banana', 'pear'];
console.log( fruits );
var newLength = fruits.unshift('Strawberry');
console.log( fruits );
-
push() 添加元素到数组的末尾
var fruits = ['Apple', 'Banana', 'pear'];
console.log( fruits );
var newLength = fruits.push('Orange');
console.log( fruits );
-
shift() 删除数组最前面(头部)的元素
var fruits = ['Apple', 'Banana', 'pear'];
console.log( fruits );
var first = fruits.shift();
console.log( fruits );
-
pop() 删除数组末尾的元素
var fruits = ['Apple', 'Banana', 'pear'];
console.log( fruits );
var last = fruits.pop();
console.log( fruits );
-
indexOf() 找出某个元素在数组中的索引
var fruits = ['Apple', 'Banana', 'pear'];
console.log( fruits );
var pos = fruits.indexOf('Banana');
console.log( pos );
-
splice() 通过索引删除某个或多个元素
1.通过索引删除某个或多个元素
var fruits = ['Apple', 'Banana', 'pear'];
console.log( fruits );
var removedItem = fruits.splice(fruits, 1);
console.log( fruits );
2.从一个索引位置删除多个元素
var fruits = ['Apple', 'Banana', 'pear'];
console.log( fruits );
var pos = 1, n = 2;
var removedItems = fruits.splice(pos, n);
console.log( fruits );
console.log(removedItems);
-
slice() 复制一个数组
var fruits = ['Apple', 'Banana', 'pear'];
console.log( fruits );
var shallowCopy = fruits.slice();
console.log( shallowCopy );
-
from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。
console.log(Array.from('foo'));
console.log(Array.from([1, 2, 3], x => x + x));
console.log(Array.from([1, 2, 3], x => x * 2 ));
-
isArray() 用于确定传递的值是否是一个 Array。如果值是 Array,则为true; 否则为false。
-
Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。
Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个长度为7的空数组(注意:这是指一个有7个空位(empty)的数组,而不是由7个undefined组成的数组)。
var array1 = Array.of(7);
console.log(array1);
var array2 = Array.of(1, 2, 3);
console.log(array2);
var array3 = Array(7);
console.log(array3);
var array4 = Array(1, 2, 3);
console.log(array4);
-
concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
用法:数组1.concat(数组2)
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
//连接三个数组
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = ['g', 'h', 'i'];
const array4 = array1.concat( array2,array3 );
console.log(array4);
-
copyWithin() 方法 浅复制数组的一部分到同一数组中的另一个位置,并返回它。不改变原数组的长度,但会改变原数组。
用法:copyWithin(target, start, end)
target:复制序列到该位置
start:开始位置索引,如下列:第3位为d,第4位为e-移动复制到0位
end:结束位置索引,可选项,若无则默认为末尾元素位置
const array1 = ['a', 'b', 'c', 'd', 'e'];
console.log(array1);
console.log(array1.copyWithin(0, 3, 4));
const array1 = ['a', 'b', 'c', 'd', 'e'];
console.log(array1);
console.log(array1.copyWithin(1, 3));
-
entries() 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。若收到一个空数组,此方法在一切情况下都会返回 true。
//判断array1是否有元素小于40
const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 42, 29, 10, 13];
console.log(array1);
console.log(array1.every(isBelowThreshold));
const array2 = [1, 30, 32, 29, 10, 13];
console.log(array2);
console.log(array2.every(isBelowThreshold));
-
fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
用法:fill(value, start, end)
value 用来填充数组元素的值
start 可选项 起始索引,默认值为0。
end 可选项 终止索引,默认值为 this.length。
const array1 = [1, 2, 3, 4];
// 用0填充索引第2位到第4位
console.log(array1.fill(0, 2, 4));
// 用5填充索引第1位到末尾
console.log(array1.fill(5, 1));
// 用6填充全部
console.log(array1.fill(6));
-
filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
-
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
-
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
//大于13的第一个元素为130,位于数组索引第三位,输出: 3
console.log(array1.findIndex(isLargeNumber));
-
flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
flat() 方法会移除数组中的空项
//var newArray = arr.flat([depth])--depth 可选 指定要提取嵌套数组的结构深度,默认值为 1。
var array1= [1, 2, [3, 4]];
array1.flat();
console.log(array1);
console.log(array1.flat());
//展开深度为2
var array2 = [1, 2, [3, 4, [5, 6]]];
console.log(array2);
console.log(array2.flat(2));
//使用 Infinity,可展开任意深度的嵌套数组
var array3 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(array3);
console.log(array3.flat(Infinity));
-
flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。
-
forEach() 方法对数组的每个元素执行一次给定的函数。
const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
-
includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
console.log(pets.includes('at'));
-
indexOf()方法返回在数组中可以找到一个给定元素完全匹配的第一个的索引,如果不存在,则返回-1。
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
console.log(beasts.indexOf('giraffe'));
-
lastIndexOf() 方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。
const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
console.log(animals.lastIndexOf('Dodo'));
console.log(animals.lastIndexOf('Tiger'));
-
join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。
const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join());
console.log(elements.join(''));
console.log(elements.join('-'));
-
keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。
const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();
for (const key of iterator) {
console.log(key);
}
-
map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一次提供的函数后的返回值。
const array1 = [1, 4, 9, 16];
console.log(array1);
const array2 = array1.map(x => x * 2);
console.log(array2);
-
unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度。该方法会修改原有数组。
const array1 = [1, 2, 3];
console.log(array1.unshift(4, 5));
console.log(array1);
-
shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
const array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1);
console.log(firstElement);
-
push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
const animals = ['pigs', 'goats', 'sheep'];
const count = animals.push('cows');
console.log(count);
console.log(animals);
animals.push('chickens', 'cats', 'dogs');
console.log(animals);
-
pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。
const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop());
console.log(plants);
plants.pop();
console.log(plants);
-
apply() 添加第二个数组的所有元素。
var vegetables = ['parsnip', 'potato'];
var moreVegs = ['celery', 'beetroot'];
// 将第二个数组融合进第一个数组
// 会改变原数组 相当于 vegetables.push('celery', 'beetroot');
Array.prototype.push.apply(vegetables, moreVegs);
console.log(vegetables);
-
reducer() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
Accumulator (acc) (累计器)
Current Value (cur) (当前值)
Current Index (idx) (当前索引)
Source Array (src) (源数组)
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
console.log(array1.reduce(reducer));
// 1 + 2 + 3 + 4 输出: 10
console.log(array1.reduce(reducer, 5));
// 5 + 1 + 2 + 3 + 4 输出: 15
-
reduceRight() 方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。
const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
(accumulator, currentValue) => accumulator.concat(currentValue)
);
console.log(array1);
-
reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。
const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
const reversed = array1.reverse();
console.log('reversed:', reversed);
console.log('array1:', array1);//原数组已改变
-
sort() 方法用原地算法对数组的元素进行排序,并返回数组。
默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的。由于它取决于具体实现,因此无法保证排序的时间和空间复杂性。
//转换字符串后进行比较
//例如单词,转换字符串后按开头第一个字母排序
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
//例如数字10,转换字符串后1开头 则比2要小
const number= ['2', '3', '5', '10'];
number.sort();
console.log(number);
-
slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
console.log(animals.slice(2, 4));
console.log(animals.slice(1, 5));
-
some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。
const array = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0;
console.log(array.some(even));
-
splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
用法:原数组.splice(第X位,删除X个元素,插入内容 可选项 也可多项以逗号隔开)
//从第 2 位开始删除 0 个元素,插入“Strawberry”
var fruits1 = ['Apple', 'Banana', 'pear'];
console.log(fruits1);
fruits1.splice(2, 0, 'Strawberry');
console.log(fruits1);
//从第 2 位开始删除 0 个元素,插入“Strawberry” 和 "Orange"
var fruits2 = ['Apple', 'Banana', 'pear'];
console.log(fruits2);
fruits2.splice(2, 0, 'Strawberry', 'Orange');
console.log(fruits2);
//从第 3 位开始删除 1 个元素
var fruits3 = ['Apple', 'Banana', 'pear', 'Strawberry', 'Orange'];
fruits3.splice(3, 1);
console.log(fruits3);
*相似用法参见:
push() / pop() - 在数组末尾增/删元素;
unshift() / shift() - 在数组首部增/删元素;
concat() - 把一个(或多个)数组和(或)值与原数组拼接,返回拼接后的数组。
-
toLocaleString() 返回一个字符串表示数组中的元素
数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。
const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
const localeString = array1.toLocaleString('en', { timeZone: 'UTC' });
console.log(localeString);
-
toString() 返回一个字符串,表示指定的数组及其元素
const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString());