集合类
JavaScript 中没有明确的数组数据类型。但是,你可以使用预定义的 Array
对象及其方法来处理应用程序中的数组。Array
对象具有以各种方式操作数组的方法,例如连接、反转和排序。它有一个用于确定数组长度的属性和用于正则表达式的其他属性。
创建数组
以下语句创建了等效的数组:
const arr1 = new Array(element0, element1, /* … ,*/ elementN);
const arr2 = Array(element0, element1, /* … ,*/ elementN);
const arr3 = [element0, element1, /* … ,*/ elementN];
为了创建一个长度不为 0,但是又没有任何元素的数组,可选以下任何一种方式:
// This...
const arr1 = new Array(arrayLength);
// ...results in the same array as this
const arr2 = Array(arrayLength);
// This has exactly the same effect
const arr3 = [];
arr3.length = arrayLength;
备注: 以上代码,数组长度(arrayLength
)必须为一个数字(Number
)。否则,将会创建一个只有单个元素(提供的值)的数组。调用 arr.length
会返回数组长度,但数组不包含任何元素。for...in
循环在数组上找不到任何属性。
除了上面所示的新定义的变量外,数组还可以被赋值为新对象或现有对象的属性:
const obj = {};
// …
obj.prop = [element0, element1, /* … ,*/ elementN];
// OR
const obj = { prop: [element0, element1, /* … ,*/ elementN] };
如果你希望用单个元素初始化一个数组,而这个元素恰好又是数字(Number
),那么你必须使用括号语法。当单个的数字(Number
)传递给 Array()
构造函数时,将会被解释为 arrayLength
,并非单个元素。
// 创建一个只有唯一元素的数组:the number 42.
const arr = [42];
// 创建一个没有元素的数组,但是数组的长度被设置成 42.
const arr = Array(42);
// 上面的代码与下面的代码等价
const arr = [];
arr.length = 42;
如果你需要创建任意类型的单元素数组,安全的方式是使用字面值。或者在向数组添加单个元素之前先创建一个空的数组。
你也可以使用 Array.of
静态方法来创建包含单个元素的数组。
const wisenArray = Array.of(9.3); // wisenArray contains only one element 9.3
引用数组元素
因为元素也是属性,你可以使用属性访问器来访问。假设你定义了以下数组:
const myArray = ['Wind', 'Rain', 'Fire'];
你可以将数组的第一个元素引用为 myArray[0]
,将数组的第二个元素引用为 myArray[1]
,等等...元素的索引从零开始。
填充数组
你可以通过给数组元素赋值来填充数组,例如:
const emp = [];
emp[0] = 'Casey Jones';
emp[1] = 'Phil Lesh';
emp[2] = 'August West';
你也可以在创建数组的时候去填充它:
const myArray = new Array('Hello', myVar, 3.14159);
// OR
const myArray = ['Mango', 'Apple', 'Orange'];
理解length
在实施层面,JavaScript 实际上是将元素作为标准的对象属性来存储,把数组索引作为属性名。
索引从0开始,所以数组的length得索引值+1
你也可以给 length
属性赋值。
写一个小于数组元素数量的值将截断数组,写 0
会彻底清空数组
遍历数组
一种常见的操作是遍历数组的值,以某种方式处理每个值。最简单的方法如下:
const colors = ['red', 'green', 'blue'];
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}
如果你确定数组中没有一个元素的求值是 false
—— 如果你的数组只包含 DOM 节点,如下,你可以选择一个更高效的土法子:
const divs = document.getElementsByTagName('div');
for (let i = 0, div; div = divs[i]; i++) {
/* Process div in some way */
}
这避免了检查数组长度的开销,并确保 div
变量在每次循环时都被重新赋值给当前项,从而增加了便利性。
forEach()
方法提供了遍历数组元素的其他方法:
const colors = ['red', 'green', 'blue'];
colors.forEach((color) => console.log(color));
// red
// green
// blue
传递给 forEach
的函数对数组中的每个元素执行一次,数组元素作为参数传递给该函数。未赋值的值不会在 forEach
循环迭代。
注意,在数组定义时省略的元素不会在 forEach
遍历时被列出,但是手动赋值为 undefined
的元素是会被列出的:
const sparseArray = ['first', 'second', , 'fourth'];
sparseArray.forEach((element) => {
console.log(element);
});
// first
// second
// fourth
if (sparseArray[2] === undefined) {
console.log('sparseArray[2] is undefined'); // true
}
const nonsparseArray = ['first', 'second', undefined, 'fourth'];
nonsparseArray.forEach((element) => {
console.log(element);
});
// first
// second
// undefined
// fourth
由于 JavaScript 元素被保存为标准对象属性,因此不建议使用 for...in
循环遍历 JavaScript 数组,因为普通元素和所有可枚举属性都将被列出。
数组方法
Array
对象具有下列方法:
concat()
方法连接两个或多个数组并返回一个新的数组。
let myArray = ['1', '2', '3'];
myArray = myArray.concat('a', 'b', 'c');
// myArray is now ["1", "2", "3", "a", "b", "c"]
join()
方法将数组中的所有元素连接成一个字符串。
const myArray = ['Wind', 'Rain', 'Fire'];
const list = myArray.join(' - '); // list is "Wind - Rain - Fire"
push()
方法在数组末尾添加一个或多个元素,并返回数组操作后的 length
。
const myArray = ['1', '2'];
myArray.push('3'); // myArray is now ["1", "2", "3"]
pop()
方法从数组移出最后一个元素,并返回该元素。
const myArray = ['1', '2', '3'];
const last = myArray.pop();
// myArray is now ["1", "2"], last = "3"
shift()
方法从数组移出第一个元素,并返回该元素。
const myArray = ['1', '2', '3'];
const first = myArray.shift();
// myArray is now ["2", "3"], first is "1"
unshift()
方法在数组开头添加一个或多个元素,并返回数组的新长度。
const myArray = ['1', '2', '3'];
myArray.unshift('4', '5');
// myArray becomes ["4", "5", "1", "2", "3"]
slice()
方法从数组提取一个片段,并作为一个新数组返回。
let myArray = ['a', 'b', 'c', 'd', 'e'];
myArray = myArray.slice(1, 4); // 包含索引 1,不包括索引 4
// returning [ "b", "c", "d"]
at()
方法返回数组中指定索引处的元素,如果索引超出范围,则返回 undefined
。它主要用于从数组末尾访问元素的负下标。
const myArray = ['a', 'b', 'c', 'd', 'e'];
myArray.at(-2); // "d", the second-last element of myArray
splice()
方法从数组移出一些元素,并(可选地)替换它们。它返回从数组中删除的元素。
const myArray = ['1', '2', '3', '4', '5'];
myArray.splice(1, 3, 'a', 'b', 'c', 'd');
// myArray is now ["1", "a", "b", "c", "d", "5"]
// This code started at index one (or where the "2" was),
// removed 3 elements there, and then inserted all consecutive
// elements in its place.
reverse()
方法颠倒数组元素的顺序:第一个数组元素变为最后一个数组元素,最后一个数组元素变为第一个数组元素。它返回对数组的引用。
const myArray = ['1', '2', '3'];
myArray.reverse();
// transposes the array so that myArray = [ "3", "2", "1" ]
flat()
方法返回一个新数组,所有子数组元素递归地连接到其中,直到指定的深度。
let myArray = [1, 2, [3, 4]];
myArray = myArray.flat();
// myArray is now [1, 2, 3, 4], since the [3, 4] subarray is flattened
sort()
方法对数组的元素进行适当的排序,并返回对数组的引用。
const myArray = ['Wind', 'Rain', 'Fire'];
myArray.sort();
// sorts the array so that myArray = ["Fire", "Rain", "Wind"]
sort()
也可以接受回调函数来决定如何比较数组元素。使用两个参数调用回调函数,它们是来自数组的两个值。该函数比较这两个值并返回正数、负数或零,表示这两个值的顺序。例如,以下命令将根据字符串的最后一个字母对数组进行排序:
const sortFn = (a, b) => {
if (a[a.length - 1] < b[b.length - 1]) {
return -1; // Negative number => a < b, a comes before b
} else if (a[a.length - 1] > b[b.length - 1]) {
return 1; // Positive number => a > b, a comes after b
}
return 0; // Zero => a = b, a and b keep their original order
}
myArray.sort(sortFn);
// sorts the array so that myArray = ["Wind","Fire","Rain"]
-
如果
a
小于b
,返回-1
(或任何负数) -
如果
a
大于b
,返回1
(或任何正数) -
如果
a
和b
相等,返回0
。
indexOf()
方法在数组中搜索 searchElement
并返回第一个匹配的索引。
const a = ['a', 'b', 'a', 'b', 'a'];
console.log(a.indexOf('b')); // 1
// Now try again, starting from after the last match
console.log(a.indexOf('b', 2)); // 3
console.log(a.indexOf('z')); // -1, because 'z' was not found
lastIndexOf()
方法的工作原理类似于 indexOf
,但这是从末尾开始,反向搜索。
const a = ['a', 'b', 'c', 'd', 'a', 'b'];
console.log(a.lastIndexOf('b')); // 5
// Now try again, starting from before the last match
console.log(a.lastIndexOf('b', 4)); // 1
console.log(a.lastIndexOf('z')); // -1
forEach()
方法对数组中的每个元素执行 callback
并返回 undefined
。
const a = ['a', 'b', 'c'];
a.forEach((element) => {
console.log(element);
});
// Logs:
// a
// b
// c
map()
方法返回由每个数组元素上执行 callback
的返回值所组成的新数组。
const a1 = ['a', 'b', 'c'];
const a2 = a1.map((item) => item.toUpperCase());
console.log(a2); // ['A', 'B', 'C']
flatMap()
方法先执行 map()
,再执行深度为 1 的 flat()
。
const a1 = ['a', 'b', 'c'];
const a2 = a1.flatMap((item) => [item.toUpperCase(), item.toLowerCase()]);
console.log(a2); // ['A', 'a', 'B', 'b', 'C', 'c']
filter()
方法返回过滤后的新数组,其中包含 callback
返回 true
的元素。
const a1 = ['a', 10, 'b', 20, 'c', 30];
const a2 = a1.filter((item) => typeof item === 'number');
console.log(a2); // [10, 20, 30]
find()
方法返回 callback
返回 true
的第一个元素。
const a1 = ['a', 10, 'b', 20, 'c', 30];
const i = a1.find((item) => typeof item === 'number');
console.log(i); // 10
findLast()
方法返回 callback
返回 true
的最后一个元素。
const a1 = ['a', 10, 'b', 20, 'c', 30];
const i = a1.findLast((item) => typeof item === 'number');
console.log(i); // 30
findIndex()
方法返回 callback
返回 true
的第一个元素的索引。
const a1 = ['a', 10, 'b', 20, 'c', 30];
const i = a1.findIndex((item) => typeof item === 'number');
console.log(i); // 1
findLastIndex()
方法返回 callback
返回 true
的最后一个元素的索引。
const a1 = ['a', 10, 'b', 20, 'c', 30];
const i = a1.findLastIndex((item) => typeof item === 'number');
console.log(i); // 5
如果 callback
对数组中的每一个元素都返回 true
,则
every()
方法返回 true
。
function isNumber(value) {
return typeof value === 'number';
}
const a1 = [1, 2, 3];
console.log(a1.every(isNumber)); // true
const a2 = [1, '2', 3];
console.log(a2.every(isNumber)); // false
如果 callback
对数组中至少一个元素返回 true
,则
some()
方法返回 true
。
function isNumber(value) {
return typeof value === 'number';
}
const a1 = [1, 2, 3];
console.log(a1.some(isNumber)); // true
const a2 = [1, '2', 3];
console.log(a2.some(isNumber)); // true
const a3 = ['1', '2', '3'];
console.log(a3.some(isNumber)); // false
reduce()
方法.如果 callback
需要访问正在处理的元素的索引,或者访问整个数组,它们可以作为可选参数。
const a = [10, 20, 30];
const total = a.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(total); // 60
reduceRight()
方法的工作原理类似于 reduce()
,但这从最后一个元素开始的。
reduce
和 reduceRight
是迭代数组方法中最不被人熟知的两个函数。它们应该使用在那些需要把数组的元素两两递归处理,并最终计算成一个单一结果的算法*。
多维数组
数组是可以嵌套的,这就意味着一个数组可以作为一个元素被包含在另外一个数组里面。利用 JavaScript 数组的这个特性,可以创建多维数组。
以下代码创建了一个二维数组。
var a = new Array(4);
for (i = 0; i < 4; i++) {
a[i] = new Array(4);
for (j = 0; j < 4; j++) {
a[i][j] = "[" + i + "," + j + "]";
}
}
这个例子创建的数组拥有以下行数据:
Row 0: [0,0] [0,1] [0,2] [0,3]
Row 1: [1,0] [1,1] [1,2] [1,3]
Row 2: [2,0] [2,1] [2,2] [2,3]
Row 3: [3,0] [3,1] [3,2] [3,3]
数组和正则表达式
当一个数组作为字符串和正则表达式的匹配结果时,该数组将会返回相关匹配信息的属性和元素。 RegExp.exec()
, String.match()
和 String.split()
的返回值是一个数组。
使用类数组对象
一些 JavaScript 对象,例如 document.getElementsByTagName()
返回的 NodeList
或者函数内部可用的 arguments
对象,他们表面上看起来,外观和行为像数组,但是不共享他们所有的方法。例如 arguments
对象就提供一个 length
属性,但是不实现 forEach()
方法。
Array 的原生 (prototype) 方法可以用来处理类似数组行为的对象,例如: :
function printArguments() {
Array.prototype.forEach.call(arguments, function(item) {
console.log(item);
});
}
Array 的常规方法也可以用于处理字符串,因为它提供了序列访问字符转为数组的简单方法:
Array.prototype.forEach.call("a string", function(chr) {
console.log(chr);
});
数组推导式
推导式创建一个数字数组并且创建一个新的数组,数组的每个元素都是原来数值的两倍(译者注:这种形式类似于 Python 的列表推导式)。
var numbers = [1, 2, 3, 4];
var doubled = [for (i of numbers) i * 2];
console.log(doubled); // logs 2,4,6,8
这跟下面的 map() 方法的操作是等价的。
var doubled = numbers.map(function(i){return i * 2;});
推导式也可以用来筛选满足条件表达式的元素。下面的推导式用来筛选是 2 的倍数的元素:
var numbers = [1, 2, 3, 21, 22, 30];
var evens = [i for (i of numbers) if (i % 2 === 0)];
console.log(evens); // logs 2,22,30
filter()
也可以达到相同的目的:
var evens = numbers.filter(function(i){return i % 2 === 0;});
map()
和 filter()
类型的操作可以被组合(等效)为单个数组推导式。这里就有一个过滤出偶数,创建一个它的倍数数组的例子:
var numbers = [1, 2, 3, 21, 22, 30];
var doubledEvens = [i * 2 for (i of numbers) if (i % 2 === 0)];
console.log(doubledEvens); // logs 4,44,60
数组推导式隐含了块作用域。新的变量 (如例子中的 i) 类似于是采用 let
声明的。这意味着他们不能在推导式以外访问。
数组推导式的输入不一定必须是数组; 迭代器和生成器 也是可以的。
甚至字符串也可以用来作为输入; 实现 filter 或者 map 行为 (参考上面类似数组行为的对象) 如下:
var str = 'abcdef';
var consonantsOnlyStr = [c for (c of str) if (!(/[aeiouAEIOU]/).test(c)) ].join(''); // 'bcdf'
var interpolatedZeros = [c+'0' for (c of str) ].join(''); // 'a0b0c0d0e0f0'
不过,输入形式是不能保存的,所以我们要使用 join() 回复到一个字符串。
使用类数组对象
如 document.getElementsByTagName()
返回的 NodeList
或 arguments
等 JavaScript 对象,有与数组相似的行为,但它们并不共享数组的所有方法。arguments
对象提供了 length
属性,但没有实现如 forEach()
等数组方法。
不能直接在类数组对象上调用数组方法。
但你可以通过 Function.prototype.call()
间接调用它们。
function printArguments() {
Array.prototype.forEach.call(arguments, (item) => {
console.log(item);
});
}
数组原型方法也可以用于字符串,因为它们以类似于数组的方式提供对其中字符的顺序访问:
Array.prototype.forEach.call('a string', (chr) => {
console.log(chr)
})
标签:元素,const,进阶,16,JavaScript,myArray,数组,console,log From: https://www.cnblogs.com/zjy1020/p/17506053.html