目录
构造器
Array() 构造器用于创建Array对象
示例
可以通过使用数组字面量创建数组
const arr = ['red', 'blue', 'green', 'gray'];
// arr.length = 4;
// arr[0] = 'red'
单个参数的Array构造器
const arr = new Array(2);
// arr.length = 2;
// arr = [empty × 2];
// arr[0] = undefined;
多个参数的Array构造器
const arr = new Array('red', 'blue', 'green', 'gray');
// arr = ['red', 'blue', 'green', 'gray'];
// arr[0] = 'red';
// arr.length = 4;
静态方法
Arra.from
对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。
const arr = Array.from('hello word');
// arr = ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'd'];
const numberArr = Array.from([1,2,3], x => x * 3);
// numberArr = [3, 6, 9]
Arra.isArray()
用于确定传递的值是否是一个Array
// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c', 'd'))
// 鲜为人知的事实:其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype);
// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray(new Uint8Array(32))
Array.isArray({ __proto__: Array.prototype });
instanceof 和 isArray
当检测Array实例时, Array.isArray
优于 instanceof
,因为Array.isArray能检测iframes
.
Array.of()
创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。
Array.of()
和Array
构造函数之间的区别在于处理整数参数:Array.of(7)
创建一个具有单个元素 7 的数组,而Array(7)
创建一个长度为7的空数组(注意:这是指一个有7个空位(empty)的数组,而不是由7个undefined
组成的数组)。
Array.of(7);
// [7]
Array.of(1, 2, 3);
// [1, 2, 3]
Array.of(undefined);
// [undefined]
Array(7);
// [empty × 7]
Array(1, 2, 3);
// [1, 2, 3]
实例属性
length
是
Array
的实例属性。返回或设置一个数组中的元素个数。该值是一个无符号 32-bit 整数,并且总是大于数组最高项的下标。
console.log(arr.length); // 4
描述
可以设置length属性的值来截断任何数组。例如:将一个有两个元素数组的length属性值设置为3时,那么这个数组将会包含三个元素,并且,第三个元素的值将会是undefined。
const arr = ['red', 'blue', 'green', 'gray'];
// arr.length = 6;
// ['red', 'blue', 'green', 'gray', empty × 2]
// arr.length = 2;
// ['red', 'blue']
Array.length 属性的属性特性 | 默认值 | 说明 |
---|---|---|
writable | true | false: 改属性值价不能被修改 |
enumerable | false | false: 删除或更改任何属性都将会失败 |
configurable | false | true: 属性可以通过迭代器 for 或 for...in 进行迭代 |
实例方法
toString()
返回一个字符串,表示指定的数组及其元素。
let arr = ['red', 'blue', 'green', 'gray'];
const str = arr.toString();
// "red,blue,green,gray"
toLocaleString()
返回一个字符串表示数组中的元素。数组中的元素将使用各自的
toLocaleString
方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。
参数
locales 可选
带有BCP 47语言标记的字符串或字符串数组,关于locales
参数的形式与解释,请看Intl页面。
options 可选
一个可配置属性的对象,对于数字 Number.prototype.toLocaleString(),对于日期Date.prototype.toLocaleString().
示例
var prices = ['¥7', 500, 8123, 12];
const newPrices = prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
// newPrices = "¥7,¥500,¥8,123,¥12"
更多示例请看 Intl,NumberFormat和DateTimeFormat页面。
reverse()
将数组中的元素的位置颠倒,并返回该数组。
let arr = ['red', 'blue', 'green', 'gray'];
let newArr = arr.reverse();
// arr = newArr = ['gray', 'green', 'blue', 'red'];
join()
将一个数组(类数组)的所有元素链接成一个字符串并返回这个字符串,如果数组只有一个元素,那么只返回改元素而没有分隔符。
参数
separator: 可选
指定一个字符串来分隔数组的每个元素。默认是用逗号( , )分隔。如果separator是空字符串( " " ),则所有元素之间都没有任何字符。
描述
如果数组长度为0,则返回空字符串。
如果一个元素为 undefind 或 null ,他会被转换为空字符串。
示例
let arr = ['red', 'blue', 'green', 'gray'];
let str = arr.join();
// str = "red,blue,green,gray"
let str1 = arr.join("-");
// str1 = "red-blue-green-gray"
let str2 = arr.join(" ");
// str2 = "red blue green gray"
let str3 = arr.join("");
// str3 = "redbluegreengray"
concat()
用于合并两个或多个数组。此方法不会改变现有数组,而是返回一个新数组
语法
var newArr = arr.concat(value1, value2, ,value3, ...., valueN)
参数
valueN: 可选
数组 or 值将合并到一个新的数组中,如果不填写该参数,则新数组会进行一个浅拷贝
示例
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arr4 = arr1.concat(arr2, arr3);
// arr4 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const arr5 = arr1.concat(arr2, ['a', 'b', 'c']);
// arr5 = [1, 2, 3, 4, 5, 6, 'a', 'b', 'c'];
const str = 'blue';
const arr6 = arr.concat(arr2, str);
// arr6 = [1, 2, 3, 4, 5, 6, 'blue'];
sort()
数组排序:用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的
参数
compareFunction(firstElement, secondElement) 可选
用来指定按照某种顺序进行排列的函数,如果不写该参数,元素按照转换为的字符串的各个字符的Unicode位点进行排序。
firstElement 第一个用于比较的元素。
secondElement 第二个用于比较的元素。
示例
let arr = [1, 5, 3, 9, 4];
let newArr = arr.sort();
// newArr = arr = [1, 3, 4, 5, 9];
arr.sort((a, b) => a - b);
// arr [1, 3, 4, 5, 9]
arr.sort((a, b) => b - a);
// arr [9, 5, 4, 3, 1]
let arr = [
{ name: '小白', age: 18},
{ name: '小红', age: 22},
{ name: '小明', age: 19},
{ name: '小橘', age: 20}
];
arr.sort((a, b) => b.age - a.age);
// [
// { name: '小红', age: 22 },
// { name: '小橘', age: 20 },
// { name: '小明', age: 19 },
// { name: '小白', age: 18 }
// ]
push()
添加元素到数组尾部,并返回数组的新长度
let arr = ['red', 'blue', 'green', 'gray'];
let newLength = arr.push('yellow');
// arr = ['red', 'blue', 'green', 'gray', 'yellow'];
// newLength = 5;
arr.push('black');
// arr = ['red', 'blue', 'green', 'gray', 'yellow', 'black'];
pop()
删除数组最后一个元素,并返回该元素的值。
let arr = ['red', 'blue', 'green', 'gray'];
let deleteElement = arr.pop();
// arr = ['red', 'blue', 'green'];
// deleteElement = 'gray';
arr.pop();
// arr = ['red', 'blue'];
unshift()
添加元素到数组头部,并返回数组的新长度
let arr = ['red', 'blue', 'green', 'gray'];
let newLength = arr.unshift('yellow');
// arr = ['yellow', 'red', 'blue', 'green', 'gray'];
// newLength = 5;
arr.unshift('black');
// arr = ['black', 'yellow', 'red', 'blue', 'green', 'gray'];
shift()
删除数组头部元素,并返回该元素的值。
let arr = ['red', 'blue', 'green', 'gray'];
let deleteElement = arr.shift();
// arr = ['blue', 'green', 'gray'];
// deleteElement = 'red';
arr.shift();
// arr = ['green', 'gray'];
includes()
用来判断一个数组是否包含一个指定的值,包含返回
true
,否则返回false
参数:
searchElement
需要查找的元素 ,注意:includes() 比较字符串和字符时是区分大小写的
fromIndex 可选
从 fromIndex 索引处开始查找 searchElement。默认值为0; 如果为负值(-n),则从-n处的元素开始查找。
示例
let arr = [1, 2, 3, 2, 1, 3];
arr.includes(2); // true
arr.includes(4); // false
arr.includes(2, -2); // false
arr.includes(2, -2); // true
let arr1 = [NaN, null, undefined, 0, -1]
console.log(arr1.includes(0)); // true
console.log(arr1.includes(-1)); // true
console.log(arr1.includes(null)); // true
console.log(arr1.includes(undefined)); //true
console.log(arr1.includes(NaN)); // true
indexOf()
返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
参数:
searchElement: 要查找的元素
fromIndex: 可选参数
开始查找的位置,如果这个参数大于或者等于数组的长度,则会返回-1。如果参数提供的索引是个负数,-1表示从最后一个元素开始查找,-2从倒数第二个元素开始查找,以此类推。注意,如果参数提供的索引值是一个负数,并不会改变其查找顺序,查找顺序仍然是从前往后查询数组。
let arr = [1, 2, 5, 1, 9, 5, 2, 5];
arr.indexOf(2) // 1
arr.indexOf(7) // -1
arr.indexOf(9, 2) // 4
arr.indexOf(2, -1) // -1
arr.indexOf(2, -3) // 6
arr.indexOf(1, -8) // 0
slice()
返回一个新的数组对象,这一对象是一个由
begin
和end
决定的原数组的浅拷贝(包括begin
,不包括end
)。原始数组不会被改变。
描述:
slice不会修改原数组,只会返回一个浅复制了原数组中的元素的一个数组。按照下述的过则拷贝:
- 如果该元素是对象饮用,slice会拷贝这个对象引用到新的数组里,两个对象饮用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。
- 对于字符串、数组、布尔值来说(不是 String、Number、Boolean 对象,slice会拷贝这些值到新的数组里。在别的数组里修改这些字符串、数组、布尔值,将不会影响到另一个数组。
如果向两个数组任何一个中添加了新的元素,另一个数组不会收到影响。
参数:
begin: 可选
起始处索引,该索引开始提取原数组元素,如果该参数时负数(-n),则表示从原数组中的倒数第n个元素开始提取。如果不填写该参数,则表示从索引 0 开始,如果 begin 超出了原数组的索引值范围,则会返回空数组。
end: 可选
终止处索引,,在该索引处结束,slice会提取原数组中索引从 begin 到 end的所有元素(包含 begin,但不包含 end)。如果该参数为负数,则表示在原数组中倒数第n个元素结束提取。如果不填写 end ,则slice会一直提取到原数组末尾处。
示例:
let arr = ['red', 'blue', 'green', 'gray', 'black'];
let newArr = arr.slice(1, 3);
// ['blue', 'green']
let newArr1 = arr.slice(2);
// ['green', 'gray', 'black']
let newArr2 = arr.slice(-2);
// ['gray', 'black']
splice()
根据索引删除或替换现有元素,或者原地添加新的元素改变数组,并且返回一个新数组;
参数:
start
要删除元素的起始位置,如果是负数(-n),则表示从数组的末位开始数第n位;如果超出了数组的长度,则表示从数组末尾开始添加内容;如果负数的绝对值大于数组的长度,表示开始位置位第0位;
deleteCount: 可选参数
整数,表示要删除数组元素的个数,如果不填写则该数组start之后数组的所有元素都会被删除。如果deleteCount是0或者负数,则不移除元素,这种情况下,至少应该添加一个新元素。
item1, item2,... 可选
要添加的数组的元素,从start位置开始添加。
返回值: 由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。
let arr = ['red', 'blue', 'green', 'gray'];
let newArr1 = arr.splice(1);
// arr = ['red'];
// newArr1 = ['blue', 'green', 'gray'];
let newArr1 = arr.splice(-1);
// arr = ['red', 'blue', 'green'];
// newArr1 = ['gray'];
let newArr2 = arr.splice(1, 2);
// arr = ['red', 'gray'];
// newArr2 = ['blue, 'green'];
let newArr3 = arr.splice(1, 1, 'yellow', 'black');
// arr = ['red', 'yellow', 'black', 'gray'];
// newArr3 = ['blue', 'green'];
forEach()
遍历当前数组,不会改变原数组
备注:除了抛出异常外,没有办法中止或跳出forEach()循环。如果你需要中止或跳出循环,不应当使用当前方法。
如果需要提前终止循环,你可以用
- for 循环
- for…of / for...in 循环
- every() 、some() 、find() 、findIndex()
如果条件允许,也可以使用filter() 提前过滤出需要遍历的数组,在用forEach() 处理。
参数
callback
为数组中每个元素执行的函数,该函数接收一至三个参数:
- element 数组当前项的值
- index 可选 数组当前项的索引
- array 可选 数组对象本身
thisArg 可选
如果提供了 thisArg
参数,那么它将作为每次 callback
函数执行时的this
,如果未提供,则使用undefined。
示例
const arr = ['red', 'blue', 'green', 'gray'];
arr.forEach((item, index) => {
console.log(item, index);
})
// red 0
// blue 1
// green 2
// gray 3
map()
创建一个新数组,该数组中的每个元素是经过函数处理后的返回值。
参数:同上forEach()参数
示例
const arr = [1, 2, 3];
const map1 = arr.map(x => x * 2);
// map1 = [2, 4, 6];
const map2 = arr.map(x => [x * 2]);
// map2 = [[2], [4], [6]];
求每个元素的平方根
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]
find()
返回数组中满足条件的第一个元素的值,否则返回undefined
参数:同上forEach()参数
示例
let arr = [
{ name: 'apples', quantity: 2 },
{ name: 'bananas', quantity: 0 },
{ name: 'cherries', quantity: 5 }
]
const obj = arr.find(item => {
return item.name === 'apples';
})
console.log(obj); // { name: 'apples', quantity: 2 }
findIndex()
返回数组中满足提供条件函数的第一个元素的索引,若没有找到对应的元素则返回-1。
参数:同上forEach()参数
示例
const index = [1, 2, 3, 4, 5].findIndex(item => {
return item > 3;
})
console.log(index); // 3;
some()
测试数组中是不是至少有一个元素通过了被提供的函数测试,返回一个boolean类型的值;
数组中至少有个一元素通过回调函数的测试就会返回true,所有元素都没通过回调函数的测试返回值才会为false
参数:同上forEach()参数
示例
let arr = [2, 5, 8, 1, 4];
arr.some(x => x > 10); // false
arr.some(x => x > 5); // true
every()
测试数组中所有的元素是否都通过了某个指定函数的测试,返回一个boolean值;
备注:若收到一个空数组,此方法在一切情况下都会返回
true
。
参数:同上forEach() 参数
示例
let arr = [9, 5, 8, 10, 4];
arr.every(x => x > 3); // true
arr.every(x => x > 5); // false
flat()
按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
参数:同上forEach()参数
depth
指定要提取潜逃数组的结构深度,默认值为-1,使用 Infinity,可展开任意深度的嵌套数组
示例:
扁平化嵌套数组
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
//使用 Infinity,可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
扁平化与数组空项
var arr = [1, 2, , [4, 5]];
arr.flat();
// [1, 2, 4, 5];
flatMap()
首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同,但
flatMap
通常在合并成一种方法的效率稍微高一些。
参数:同上forEach()参数
示例:
map() 与 flatMap()
var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
上面的代码使用 map 和 flatMap 好像都可以,但下面代码展示如何使用 flatMap。
let arr = ['a', 'b', 'c', 'd'];
let arr1 = arr.map(x => x.split(" "));
let arr2 = arr.flatMap(x => x.split(""));
console.log(arr1); // [['hello', 'word'], [''], ['helle', 'flatMap']];
console.log(arr2); // ['hello', 'word', '', 'helle', 'flatMap'];