数组
在 JavaScript中,数组可以容纳任何类型的值,可以是字符串、数字、对象,甚至是其他数组。
1let arr = [1, '2', [3]];
对数组声明后即可向其中加入值,不需要预先设定大小。
1let arr = [];
2arr[0] = 1;
在使用delete运算符删除数组元素后,数组的length属性并不会发生变化。
数组通过数字进行索引,但有趣的是它们也是对象,所以也可以包含字符串键值和属性(但这些并不计算在数组长度内)
1let arr = []
2arr[0] = 1
3arr['foo'] = 'foo'
4arr.length // 1
5arr['foo'] // 'foo'
6arr.foo = 'foo'
注意:如果字符串键值能够被强制类型转换为十进制的话,它就会被当作数字索引来处理。
1let arr = []
2
3arr['12'] = 12
4arr.length // 12
在数组中加入字符串键值/属性并不是一个好主意。建议使用对象来存放键值/属性值,用数组来存放数字索引值。
稀疏数组
含有空白或空缺单元的数组。
类数组
类数组并非真正意义上的数组
数组
数组(Array)是一种可以按顺序保存多个数据的集合,属于对象类型的一种,数组是有长度的。
声明语法
11. 使用构造函数声明数组
2let arr = new Array()
3
4注意:
5 构造函数内只有一个参数,则表示数组的长度
6 let arr = new Array(10) //数组的长度是10
7 如果输入多个参数则表示数组的初始化
8 let arr = new Array(10,'小苏',20)
9
10
112. []
12let 数组名 = [数据1,数据2,数据3,…,数据n]
13
14例:let names = ['小明','小刚','小红','小丽','小米']
- 数组是按顺序保存,所以每个数据都有自己的编号
- 计算机中的编号从0开始(索引、下标)
- 在数组中,数据的编号也叫索引或下标
- 数组可以存储任意类型的数据
赋值语法
1数组名[下标] = 值
2
3例如:
4 let arr = []
5 arr[0] = '小苏'
6 arr[1] = '小旭'
7
8如果想修改数组的值,找对应的索引重新赋值即可。
9 arr[0] = '小苏同学'
取值语法
1数组名[下标]
2
3例如:
4 //取值小苏
5 let arr = ['小苏','小旭']
6 console.log(arr[0])
数组函数
Array.at()
at()
方法接收一个整数值并返回该索引的项目,允许正数和负数。负整数从数组中的最后一个项目开始倒数。
1let arr = ["钢铁侠", "蜘蛛侠", "黑豹", "绿巨人"];
2let index = 2;
3console.log(arr.at(index)); // 黑豹
4index = -2;
5console.log(arr.at(index)); // 黑豹
Array.concat()
concat()
方法用于合并两个或多个数组。
此方法不会更改现有数组,而是返回一个新数组。
1const array1 = ['a', 'b', 'c'];
2const array2 = ['d', 'e', 'f'];
3const array3 = array1.concat(array2);
4
5console.log(array3);
Array.copyWithin()
copyWithin()
方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。
返回值:改变后的数组
1const array1 = ['a', 'b', 'c', 'd', 'e'];
2
3// copy to index 0 the element at index 3
4console.log(array1.copyWithin(0, 3, 4));
5// expected output: Array ["d", "b", "c", "d", "e"]
6
7// copy to index 1 all elements from index 3 to the end
8console.log(array1.copyWithin(1, 3));
9// expected output: Array ["d", "d", "e", "d", "e"]
Array.entries()
entries()
方法返回一个新的 Array Iterator 对象,该对象包含数组中每个索引的键/值对。
Array.every()
every()
方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
若收到一个空数组,此方法在任何情况下都会返回 true
。
1const isBelowThreshold = (currentValue) => currentValue < 40;
2
3const array1 = [1, 30, 39, 29, 10, 13];
4
5console.log(array1.every(isBelowThreshold));
6// expected output: true
Array.fill()
fill()
方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
1const array1 = [1, 2, 3, 4];
2
3// fill with 0 from position 2 until position 4
4console.log(array1.fill(0, 2, 4));
5// expected output: [1, 2, 0, 0]
6
7// fill with 5 from position 1
8console.log(array1.fill(5, 1));
9// expected output: [1, 5, 5, 5]
10
11console.log(array1.fill(6));
12// expected output: [6, 6, 6, 6]
Array.filter()
filter()
方法创建给定数组一部分的浅拷贝,其包含通过所提供函数实现的测试的所有元素。
1const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
2
3const result = words.filter(word => word.length > 6);
4
5console.log(result);
Array.find()
find()
方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
。
1const array1 = [5, 12, 8, 130, 44];
2
3const found = array1.find(element => element > 10);
4
5console.log(found);
Array.findIndex()
findIndex()
方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
1const array1 = [5, 12, 8, 130, 44];
2const isLargeNumber = (element) => element > 13;
3console.log(array1.findIndex(isLargeNumber));
Array.findLast()
findLast()
方法返回数组中满足提供的测试函数条件的最后一个元素的值。如果没有找到对应元素,则返回 undefined
。
1const array1 = [5, 12, 50, 130, 44];
2
3const found = array1.findLast((element) => element > 45);
4
5console.log(found);
6// expected output: 130
Array.findLastIndex()
findLastIndex()
方法返回数组中满足提供的测试函数条件的最后一个元素的索引。若没有找到对应元素,则返回 -1。
1const array1 = [5, 12, 50, 130, 44];
2
3const isLargeNumber = (element) => element > 45;
4
5console.log(array1.findLastIndex(isLargeNumber));
Array.flat()
flat()
方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
1const arr1 = [0, 1, 2, [3, 4]];
2
3console.log(arr1.flat());
4// expected output: [0, 1, 2, 3, 4]
5
6const arr2 = [0, 1, 2, [[[3, 4]]]];
7
8console.log(arr2.flat(2));
Array.flatMap()
flatMap()
方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同,但 flatMap
通常在合并成一种方法的效率稍微高一些。
1const arr1 = [1, 2, [3], [4, 5], 6, []];
2
3const flattened = arr1.flatMap(num => num);
4
5console.log(flattened);
6// expected output: Array [1, 2, 3, 4, 5, 6]
Array.forEach()
遍历数组
1let fruits = ['Apple', 'Banana']
2fruits.forEach(function(item, index, array) {
3 console.log(item, index)
4})
5// Apple 0
6// Banana 1
Array.from()
forEach()
方法对数组的每个元素执行一次给定的函数。
1const array1 = ['a', 'b', 'c'];
2
3array1.forEach(element => console.log(element));
4
5// expected output: "a"
6// expected output: "b"
7// expected output: "c"
Array.group()
Array.from()
方法对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。
1console.log(Array.from('foo'));
2// expected output: Array ["f", "o", "o"]
3
4console.log(Array.from([1, 2, 3], x => x + x));
5// expected output: Array [2, 4, 6]
Array.includes()
includes()
方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true
,否则返回 false
。
1let arr = ["钢铁侠", "蜘蛛侠", "黑豹", "绿巨人"];
2let res = arr.includes("钢铁侠");
3console.log(res); // true
Array.indexOf()
检测当前值在数组中第一次出现的位置索引
返回值:第一次查到的索引,未找到返回-1。
1let arr = ["钢铁侠", "蜘蛛侠", "黑豹", "绿巨人"];
2let res = arr.indexOf("钢铁侠");
3console.log(res); // 0
Array.isArray()
Array.isArray()
用于确定传递的值是否是一个 Array
。
1Array.isArray([1, 2, 3]); // true
2Array.isArray({foo: 123}); // false
3Array.isArray('foobar'); // false
4Array.isArray(undefined); // false
Array.join()
join()
方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。
1const elements = ['Fire', 'Air', 'Water'];
2
3console.log(elements.join());
4// expected output: "Fire,Air,Water"
5
6console.log(elements.join(''));
7// expected output: "FireAirWater"
8
9console.log(elements.join('-'));
10// expected output: "Fire-Air-Water"
Array.keys()
keys()
方法返回一个包含数组中每个索引键的 Array Iterator
对象。
1const array1 = ['a', 'b', 'c'];
2const iterator = array1.keys();
3
4for (const key of iterator) {
5 console.log(key);
6}
7
8// expected output: 0
9// expected output: 1
10// expected output: 2
Array.lastIndexOf()
lastIndexOf()
方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex
处开始。
1const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
2
3console.log(animals.lastIndexOf('Dodo'));
4// expected output: 3
5
6console.log(animals.lastIndexOf('Tiger'));
7// expected output: 1
Array.map()
map()
方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
1const array1 = [1, 4, 9, 16];
2// pass a function to map
3const map1 = array1.map(x => x * 2);
4console.log(map1);
5// expected output: Array [2, 8, 18, 32]
Array.of()
Array.of()
方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。
Array.of()
和 Array
构造函数之间的区别在于处理整数参数:Array.of(7)
创建一个具有单个元素 7 的数组,而 Array(7)
创建一个长度为 7 的空数组(注意:这是指一个有 7 个空位 (empty) 的数组,而不是由 7 个undefined
组成的数组)。
1Array.of(7); // [7]
2Array(7); // array of 7 empty slots
3
4Array.of(1, 2, 3); // [1, 2, 3]
5Array(1, 2, 3); // [1, 2, 3]
Array.pop()
pop()
方法从数组中删除最后一个元素,并返回该元素的值。此方法会更改数组的长度。
1let fruits = ['Apple', 'Banana']
2let last = fruits.pop() // remove Orange (from the end)
3// ["Apple", "Banana"]
Array.push()
push()
方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
1let fruits = ['Apple', 'Banana']
2let newLength = fruits.push('Orange')
3// ["Apple", "Banana", "Orange"]
Array.reduce()
reduce()
方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。
1const array1 = [1, 2, 3, 4];
2
3// 0 + 1 + 2 + 3 + 4
4const initialValue = 0;
5const sumWithInitial = array1.reduce(
6 (previousValue, currentValue) => previousValue + currentValue,
7 initialValue
8);
9
10console.log(sumWithInitial);
11// expected output: 10
Array.reduceRight()
reduceRight()
方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。
1const array1 = [[0, 1], [2, 3], [4, 5]];
2
3const result = array1.reduceRight((accumulator, currentValue) => accumulator.concat(currentValue));
4
5console.log(result);
6// expected output: Array [4, 5, 2, 3, 0, 1]
Array.reverse()
reverse()
方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。
1let arr = ["钢铁侠", "蜘蛛侠", "黑豹", "绿巨人"];
2arr.reverse();
3console.log(arr);
4// (4) ['绿巨人', '黑豹', '蜘蛛侠', '钢铁侠']
Array.shift()
shift()
方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
1let fruits = ['Apple', 'Banana']
2let first = fruits.shift() // remove Apple from the front
3// ["Banana"]
Array.slice()
slice()
方法返回一个新的数组对象,这一对象是一个由 begin
和 end
决定的原数组的浅拷贝(包括 begin
,不包括end
)。原始数组不会被改变。
1let shallowCopy = fruits.slice() // this is how to make a copy
2// ["Strawberry", "Mango"]
Array.some()
some()
方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。
1const array = [1, 2, 3, 4, 5];
2
3// checks whether an element is even
4const even = (element) => element % 2 === 0;
5
6console.log(array.some(even));
7// expected output: true
Array.sort()
sort()
方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的 UTF-16 代码单元值序列时构建的
由于它取决于具体实现,因此无法保证排序的时间和空间复杂性。
1const months = ['March', 'Jan', 'Feb', 'Dec'];
2months.sort();
3console.log(months);
4// expected output: Array ["Dec", "Feb", "Jan", "March"]
5
6const array1 = [1, 30, 4, 21, 100000];
7array1.sort();
8console.log(array1);
9// expected output: Array [1, 100000, 21, 30, 4]
Array.splice()
splice()
方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
1const months = ['Jan', 'March', 'April', 'June'];
2months.splice(1, 0, 'Feb');
3// inserts at index 1
4console.log(months);
5// expected output: Array ["Jan", "Feb", "March", "April", "June"]
6
7months.splice(4, 1, 'May');
8// replaces 1 element at index 4
9console.log(months);
10// expected output: Array ["Jan", "Feb", "March", "April", "May"]
Array.toLocaleString()
toLocaleString()
返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString
方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。
1const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
2const localeString = array1.toLocaleString('en', { timeZone: 'UTC' });
3
4console.log(localeString);
Array.toString()
toString()
方法返回一个字符串,表示指定的数组及其元素。
1const array1 = [1, 2, 'a', '1a'];
2
3console.log(array1.toString());
Array.unshift()
unshift()
方法将一个或多个元素添加到数组的开头,并返回该数组的新长度。
1const array1 = [1, 2, 3];
2
3console.log(array1.unshift(4, 5));
4// expected output: 5
5
6console.log(array1);
7// expected output: Array [4, 5, 1, 2, 3]
Array.values()
values()
方法返回一个新的 Array Iterator
对象,该对象包含数组每个索引的值。
1const array1 = ['a', 'b', 'c'];
2const iterator = array1.values();
3
4for (const value of iterator) {
5 console.log(value);
6}