JavaScript-关于Array数组的方法
- Array.prototype.at()--- 数组取值
- Array.prototype.concat() --- 数组连接
- Array.prototype.copyWithin() --- 复制数组一部分到另一部分
- Array.prototype.entries() --- 返回新的可迭代对象
- Array.prototype.every() --- 数组每个元素是否满足条件
- Array.prototype.fill() -- 给数组填充元素
- Array.prototype.filter() -- 过滤数组
- Array.prototype.find() -- 找到符合条件的值
- Array.prototype.findIndex() -- 找到符合条件值的索引
- Array.prototype.findLast()-- 找到满足条件的最后一个元素的值
- Array.prototype.findLastIndex() -- 找到满足条件的最后一个属性值的索引
- Array.prototype.flat() -- 可指定深度的数据扁平化
- Array.prototype.flatMap() -- 类似flat().map(callback)
- Array.prototype.forEach() -- 遍历数组
- Array.from() -- 把可迭代对象或伪对象转化为数组实例
- Array.prototype.includes() -- 判断是否含有指定的值
- Array.prototype.indexOf() -- 找到符合条件的属性值对于的索引
- Array.isArray() -- 判断是否是Array
- Array.prototype.join() -- 拼接成字符串
- Array.prototype.keys() -- 返回一个迭代对象
- Array.prototype.lastIndexOf() -- 找到指定元素的索引
- Array.prototype.map() -- 遍历数组
- Array.of() -- 可变数量参数的新数组实例
- Array.prototype.pop() -- 删除最后一个元素
- Array.prototype.push() -- 在末尾添加元素
- Array.prototype.reduce() -- 遍历数组
- Array.prototype.reduceRight() -- 遍历数组
- Array.prototype.reverse() -- 颠倒位置
- Array.prototype.shift() -- 删除第一个元素
- Array.prototype.slice() -- 截取数组
- Array.prototype.some() -- 至少一个元素通过
- Array.prototype.sort() -- 排序
- Array.prototype.splice() -- 删除,替换,添加元素
- Array.prototype.toLocaleString() -- 每个元素转字符串,再拼接成字符串
- Array.prototype.toString() -- 转为字符串
- Array.prototype.unshift() -- 首部添加元素
- Array.prototype.values() -- 返回新的迭代对象
Array.prototype.at()— 数组取值
at() 方法接收一个整数值并返回该索引的项目,允许正数和负数。负整数从数组中的最后一个项目开始倒数。
array[0]将返回第一个项目。然而,对于后面的项目,不要使用array.length,例如,对于最后一个项目,可以调用array.at(-1)。(参见以下示例)
const array1 = [5, 12, 8, 130, 44];
let index = 2;
console.log(` ${index} ===> ${array1.at(index)}`);
index = -2;
console.log(` ${index} ===> ${array1.at(index)}`);
Array.prototype.concat() — 数组连接
concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// ["a", "b", "c", "d", "e", "f"]
语法
var new_array = oldArray.concat(value1[, value2[, …[, valueN]]])
参数
valueN(可选)
数组和/或值,将被合并到一个新的数组中。如果省略了所有 valueN 参数,则 concat 会返回调用此方法的现存数组的一个浅拷贝。
返回值
新的 Array 实例。
示例
//连接两个数组
var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];
alpha.concat(numeric);
// ['a', 'b', 'c', 1, 2, 3]
//连接三个数组
var num1 = [1, 2, 3],
num2 = [4, 5, 6],
num3 = [7, 8, 9];
var nums = num1.concat(num2, num3);
console.log(nums);
//[1, 2, 3, 4, 5, 6, 7, 8, 9]
Array.prototype.copyWithin() — 复制数组一部分到另一部分
copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。
const array1 = ['a', 'b', 'c', 'd', 'e'];
console.log(array1.copyWithin(0, 3, 4));
//["d", "b", "c", "d", "e"]
console.log(array1.copyWithin(1, 3));
// ["d", "d", "e", "d", "e"]
语法
arr.copyWithin(target[, start[, end]])
参数
- target
0 为基底的索引,复制序列到该位置。如果是负数,target 将从末尾开始计算。如果 target 大于等于 arr.length,将不会发生拷贝。如果 target 在 start 之后,复制的序列将被修改以符合 arr.length。
- start
0 为基底的索引,开始复制元素的起始位置。如果是负数,start 将从末尾开始计算。如果 start 被忽略,copyWithin 将会从 0 开始复制。
- end
0 为基底的索引,开始复制元素的结束位置。copyWithin 将会拷贝到该位置,但不包括 end 这个位置的元素。如果是负数, end 将从末尾开始计算。如果 end 被忽略,copyWithin 方法将会一直复制至数组结尾(默认为 arr.length)。
返回值
改变后的数组。
描述
-
参数 target、start 和 end 必须为整数。
-
如果 start 为负,则其指定的索引位置等同于 length+start,length 为数组的长度。end 也是如此。
-
copyWithin 方法不要求其 this 值必须是一个数组对象;除此之外,copyWithin 是一个可变方法,它可以改变 this
对象本身,并且返回它,而不仅仅是它的拷贝。 -
copyWithin 就像 C 和 C++ 的 memcpy 函数一样,且它是用来移动 Array 或者 TypedArray
数据的一个高性能的方法。复制以及粘贴序列这两者是为一体的操作;即使复制和粘贴区域重叠,粘贴的序列也会有拷贝来的值。 -
copyWithin 函数被设计为通用式的,其不要求其 this 值必须是一个数组对象。
-
copyWithin 是一个可变方法,它不会改变 this 的长度 length,但是会改变 this
本身的内容,且需要时会创建新的属性。
Array.prototype.entries() — 返回新的可迭代对象
entries() 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。
const array1 = ['a', 'b', 'c'];
const iterator1 = array1.entries();
console.log(iterator1.next().value);
// [0, "a"]
console.log(iterator1.next().value);
// [1, "b"]
返回值
一个新的 Array 迭代器对象。Array Iterator是对象,它的原型(proto:Array Iterator)上有一个next方法,可用用于遍历迭代器取得原数组的 [key,value]。
Array.prototype.every() — 数组每个元素是否满足条件
every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
注意:若收到一个空数组,此方法在任何情况下都会返回 true。
const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// true
语法
arr.every(callback(element[, index[, array]])[, thisArg])
参数
- callback 用来测试每个元素的函数,它可以接收三个参数:
-1 element 用于测试的当前值。
-2 index(可选) 用于测试的当前值的索引。
-3 array(可选) 调用 every 的当前数组。 - thisArg 执行 callback 时使用的 this 值。
返回值
如果回调函数的每一次返回都为 truthy 值,返回 true,否则返回 false。
示例
// 下例检测数组中的所有元素是否都大于 10。
function isBigEnough(element, index, array) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true
Array.prototype.fill() – 给数组填充元素
fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
const array1 = [1, 2, 3, 4];
console.log(array1.fill(0, 2, 4));
// [1, 2, 0, 0]
console.log(array1.fill(5, 1));
//[1, 5, 5, 5]
console.log(array1.fill(6));
// [6, 6, 6, 6]
语法
arr.fill(value[, start[, end]])
参数
- value 用来填充数组元素的值。
- start 可选 起始索引,默认值为 0。
- end 可选 终止索引,默认值为 this.length。
返回值
修改后的数组。
描述
fill 方法接受三个参数 value, start 以及 end. start 和 end 参数是可选的,其默认值分别为 0 和 this 对象的 length 属性值。
如果 start 是个负数,则开始索引会被自动计算成为 length+start, 其中 length 是 this 对象的 length 属性值。如果 end 是个负数,则结束索引会被自动计算成为 length+end。
fill 方法故意被设计成通用方法,该方法不要求 this 是数组对象。
fill 方法是个可变方法,它会改变调用它的 this 对象本身,然后返回它,而并不是返回一个副本。
当一个对象被传递给 fill方法的时候,填充数组的是这个对象的引用。
示例
[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, 3); // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5); // [1, 2, 3]
Array(3).fill(4); // [4, 4, 4]
[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}
var arr = Array(3).fill({}) // [{}, {}, {}];
// 需要注意如果 fill 的参数为引用类型,会导致都执行同一个引用类型
// 如 arr[0] === arr[1] 为 true
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
Array.prototype.filter() – 过滤数组
filter() 方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素。
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
//["exuberant", "destruction", "present"]
语法
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
参数
- callback 用来测试数组的每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接受以下三个参数:
-1 element 数组中当前正在处理的元素。
-2 index可选 正在处理的元素在数组中的索引。
-3 array可选 调用了 filter 的数组本身。 - thisArg可选 执行 callback 时,用于 this 的值。
返回值
一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。
描述 - filter 为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或等价于 true的值的元素创建一个新数组。callback 只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过callback 测试的元素会被跳过,不会被包含在新数组中。
- callback 被调用时传入三个参数:
-1 元素的值
-2 元素的索引
-3 被遍历的数组本身 - 如果为 filter 提供一个 thisArg 参数,则它会被作为 callback 被调用时的 this 值。否则,callback 的this 值在非严格模式下将是全局对象,严格模式下为 undefined。callback 函数最终观察到的 this值是根据通常函数所看到的 "this"的规则确定的。
- filter 不会改变原数组,它返回过滤后的新数组。
- filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被filter 遍历到。如果已经存在的元素被改变了,则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。
示例
//下例使用 filter 创建了一个新数组,该数组的元素由原数组中值大于 10 的元素组成
function isBigEnough(element) {
return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
//[12, 130, 44]
Array.prototype.find() – 找到符合条件的值
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// 12
语法
arr.find(callback[, thisArg])
参数
- callback 在数组每一项上执行的函数,接收 3 个参数:
-1 element 当前遍历到的元素。
-2 index可选 当前遍历到的索引。
-3 array可选 数组本身。 - thisArg可选 执行回调时用作 this 的对象。
返回值
数组中第一个满足所提供测试函数的元素的值,否则返回 undefined。
描述 - find 方法对数组中的每一项元素执行一次 callback 函数,直至有一个 callback 返回true。当找到了这样一个元素后,该方法会立即返回这个元素的值,否则返undefined。注意 callback 函数会为数组中的每个索引调用即从 0 到 length -1,而不仅仅是那些被赋值的索引,这意味着对于稀疏数组来说,该方法的效率要低于那些只遍历有值的索引的方法。
- callback 函数带有 3 个参数:当前元素的值、当前元素的索引,以及数组本身。
- 如果提供了 thisArg 参数,那么它将作为每次 callback 函数执行时的 this,如果未提供,则使用 undefined。
- find 方法不会改变数组。
- 在第一次调用 callback 函数时会确定元素的索引范围,因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback
函数访问到。如果数组中一个尚未被 callback 函数访问到的元素的值被 callback 函数所改变,那么当 callback
函数访问到它时,它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到,但是其值已经是 undefined 了。
示例
// 1.用对象的属性查找数组里的对象
const inventory = [
{name: 'apples', quantity: 2},
{name: 'bananas', quantity: 0},
{name: 'cherries', quantity: 5}
];
function isCherries(fruit) {
return fruit.name === 'cherries';
}
console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
// 2.如何从一个数组中寻找质数(如果找不到质数则返回 undefined)
function isPrime(element, index, array) {
let start = 2;
while (start <= Math.sqrt(element)) {
if (element % start++ < 1) {
return false;
}
}
return element > 1;
}
console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
console.log([4, 5, 8, 12].find(isPrime)); // 5
Array.prototype.findIndex() – 找到符合条件值的索引
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber));
// 3
// 3是数组array1中130的索引
语法
arr.findIndex(callback[, thisArg])
参数
- callback 针对数组中的每个元素,都会执行该回调函数,执行时会自动传入下面三个参数:
-1 element 当前元素。
-2 index 当前元素的索引。
-3 array 调用findIndex的数组。 - thisArg 可选。执行callback时作为this对象的值。
返回值
数组中通过提供测试函数的第一个元素的索引。否则,返回-1
描述 - findIndex方法对数组中的每个数组索引0…length-1(包括)执行一次callback函数,直到找到一个callback函数返回真实值(强制为true)的值。如果找到这样的元素,findIndex会立即返回该元素的索引。如果回调从不返回真值,或者数组的length为 0,则findIndex返回-1。 与某些其他数组方法(如 Array#some)不同,在稀疏数组中,即使对于数组中不存在的条目的索引也会调用回调函数。
- 回调函数调用时有三个参数:元素的值,元素的索引,以及被遍历的数组。
- 如果一个 thisArg 参数被提供给 findIndex, 它将会被当作this使用在每次回调函数被调用的时候。如果没有被提供,将会使用undefined。
- findIndex不会修改所调用的数组。
- 在第一次调用callback函数时会确定元素的索引范围,因此在findIndex方法开始执行之后添加到数组的新元素将不会被callback函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变,那么当callback函数访问到它时,它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍然会被访问到。
示例
// 查找数组中素数的元素的索引(如果不存在素数,则返回-1)。
function isPrime(element, index, array) {
let start = 2;
while (start <= Math.sqrt(element)) {
if (element % start++ < 1) {
return false;
}
}
return element > 1;
}
console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2
Array.prototype.findLast()-- 找到满足条件的最后一个元素的值
findLast() 方法返回数组中满足提供的测试函数条件的最后一个元素的值。如果没有找到对应元素,则返回 undefined。
const array1 = [5, 12, 50, 130, 44];
const found = array1.findLast((element) => element > 45);
console.log(found);
// 130
语法
// 匿名 function
findLast((element) => { /* ... */ } )
findLast((element, index) => { /* ... */ } )
findLast((element, index, array) => { /* ... */ } )
// Callback function
findLast(callbackFn)
findLast(callbackFn, thisArg)
// 内联 callback function
findLast(function(element) { /* ... */ })
findLast(function(element, index) { /* ... */ })
findLast(function(element, index, array){ /* ... */ })
findLast(function(element, index, array) { /* ... */ }, thisArg)
参数
- callbackFn 数组中测试元素的函数。函数在被调用时会传递以下参数:
-1 element 当前遍历到的元素。
-2 index 当前遍历到的元素的索引(位置)。
-3 array 调用 findLast() 的数组本身。
-: 回调必须返回一个真值,表示发现一个适当的元素。该元素被 findLast() 返回。 - thisArg (可选)执行 callbackFn 时,用作 this 的对象。
返回值
数组中满足提供的测试函数索引最高的元素;如果没有元素匹配,返回 undefined。
Array.prototype.findLastIndex() – 找到满足条件的最后一个属性值的索引
findLastIndex() 方法返回数组中满足提供的测试函数条件的最后一个元素的索引。若没有找到对应元素,则返回 -1。
const array1 = [5, 12, 50, 130, 44];
const isLargeNumber = (element) => element > 45;
console.log(array1.findLastIndex(isLargeNumber));
// 3
语法
// 匿名 function
findLastIndex((element) => { /* ... */ } )
findLastIndex((element, index) => { /* ... */ } )
findLastIndex((element, index, array) => { /* ... */ } )
// Callback function
findLastIndex(callbackFn)
findLastIndex(callbackFn, thisArg)
// 内联 callback function
findLastIndex(function(element) { /* ... */ })
findLastIndex(function(element, index) { /* ... */ })
findLastIndex(function(element, index, array){ /* ... */ })
findLastIndex(function(element, index, array) { /* ... */ }, thisArg)
参数
-
callbackFn 数组中测试元素的函数。函数在被调用时会传递以下参数:
-1 element 当前遍历到的元素。
-2 index 当前遍历到的元素的索引(位置)。
-3 array 调用 findLast() 的数组本身。
-: 回调必须返回一个真值,表示发现一个适当的元素。然后这个元素的索引由 findLastIndex() 返回。 -
thisArg(可选)执行 callbackFn 时,用作 this 的对象。
返回值
数组中通过测试的最后一个元素(最大的索引)。如果没有任何元素匹配,则返回 -1。
Array.prototype.flat() – 可指定深度的数据扁平化
flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());
// [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2));
// [0, 1, 2, [3, 4]]
语法
var newArray = arr.flat([depth])
参数
- depth (可选)指定要提取嵌套数组的结构深度,默认值为 1。
返回值
一个包含将数组与子数组中所有元素的新数组。
示例
// 1.扁平化嵌套数组
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]
// 2.flat() 方法会移除数组中的空项:
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]
Array.prototype.flatMap() – 类似flat().map(callback)
flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。
const arr1 = [1, 2, [3], [4, 5], 6, []];
const flattened = arr1.flatMap(num => num);
console.log(flattened);
// [1, 2, 3, 4, 5, 6]
语法
var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
}[, thisArg])
参数
- callback 可以生成一个新数组中的元素的函数,可以传入三个参数:
- currentValue 当前正在数组中处理的元素
-1 index(可选)数组中正在处理的当前元素的索引。
-2 array(可选)被调用的 map 数组。 - thisArg(可选)执行 callback 函数时 使用的this 值。
描述
有关回调函数的详细描述,请参见 Array.prototype.map() 。 flatMap 方法与 map 方法和深度 depth 为 1 的 flat 几乎相同。
示例
// 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。
所以,为了更好的展示 flatMap 的作用,下面我们将包含几句话的数组拆分成单个词组成的新数组。
let arr1 = ["it's Sunny in", "", "California"];
arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]
arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]
注意,输出列表长度可以不同于输入列表长度。
Array.prototype.forEach() – 遍历数组
forEach() 方法对数组的每个元素执行一次给定的函数。
const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// "a"
// "b"
// "c"
语法
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
参数
- callback 为数组中每个元素执行的函数,该函数接收一至三个参数:
- currentValue 数组中正在处理的当前元素。
-1 index (可选)数组中正在处理的当前元素的索引。
-2 array (可选)forEach() 方法正在操作的数组。 - thisArg (可选)当执行回调函数 callback 时,用作 this 的值。
返回值
undefined
描述 - forEach() 方法按升序为数组中含有效值的每一项执行一次 callback函数,那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)。
- 可依次向 callback 函数传入三个参数:
-1 数组当前项的值
-2 数组当前项的索引
-3 数组对象本身 - 如果 thisArg 参数有值,则每次 callback 函数被调用时,this 都会指向 thisArg 参数。如果省略了 thisArg 参数,或者其值为 null 或 undefined,this 则指向全局对象。按照函数观察到 this 的常用规则,callback 函数最终可观察到 this 值。
- forEach() 遍历的范围在第一次调用 callback 前就会确定。调用 forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变,则传递给 callback 的值是 forEach() 遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了(例如使用 shift()),之后的元素将被跳过。
- forEach() 为每个数组元素执行一次 callback 函数;与 map() 或者 reduce() 不同的是,它总是返回 undefined 值,并且不可链式调用。其典型用例是在一个调用链的最后执行副作用(side effects,函数式编程上,指函数进行 返回结果值 以外的操作)。
示例
//3 和 7 之间空缺的数组单元未被 forEach() 调用
// callback 函数,或进行任何其他操作。
const arraySparse = [1,3,,7];
let numCallbackRuns = 0;
arraySparse.forEach(function(element){
console.log(element);
numCallbackRuns++;
});
console.log("numCallbackRuns: ", numCallbackRuns);
// 1
// 3
// 7
// numCallbackRuns: 3
Array.from() – 把可迭代对象或伪对象转化为数组实例
Array.from() 方法对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。
console.log(Array.from('foo'));
// Array ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x));
// Array [2, 4, 6]
语法
Array.from(arrayLike[, mapFn[, thisArg]])
参数
- arrayLike 想要转换成数组的伪数组对象或可迭代对象。
- mapFn (可选)如果指定了该参数,新数组中的每个元素会执行该回调函数。
- thisArg(可选)执行回调函数 mapFn 时 this 对象。
返回值
一个新的数组实例。
描述 - Array.from() 可以通过以下方式来创建数组对象:
- 伪数组对象(拥有一个 length 属性和若干索引属性的任意对象)
- 可迭代对象(可以获取对象中的元素,如 Map 和 Set 等)
- Array.from() 方法有一个可选参数 mapFn,让你可以在最后生成的数组上再执行一次 map 方法后再返回。也就是说 Array.from(obj, mapFn, thisArg) 就相当于 Array.from(obj).map(mapFn, thisArg), 除非创建的不是可用的中间数组。 这对一些数组的子类,如 typed arrays 来说很重要,因为中间数组的值在调用 map() 时需要是适当的类型。
- from() 的 length 属性为 1 ,即 Array.from.length === 1。
- 在 ES2015 中, Class 语法允许我们为内置类型(比如 Array)和自定义类新建子类(比如叫 SubArray)。这些子类也会继承父类的静态方法,比如 SubArray.from(),调用该方法后会返回子类 SubArray 的一个实例,而不是 Array 的实例。
示例
// 1.从 String 生成数组
Array.from('foo');
// [ "f", "o", "o" ]
// 2.从 Set 生成数组
const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]
// 3.从 Map 生成数组
const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]
const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];
Array.from(mapper.keys());
// ['1', '2'];
// 4.从类数组对象(arguments)生成数组
function f() {
return Array.from(arguments);
}
f(1, 2, 3);
// [ 1, 2, 3 ]
数组去重合并
function combine(){
//没有去重复的新数组
let arr = [].concat.apply([], arguments);
return Array.from(new Set(arr));
}
var m = [1, 2, 2], n = [2,3,3];
console.log(combine(m,n));
Array.prototype.includes() – 判断是否含有指定的值
includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。
const array1 = [1, 2, 3];
console.log(array1.includes(2));
// true
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
// true
console.log(pets.includes('at'));
// false
语法
arr.includes(valueToFind[, fromIndex])
参数
- valueToFind 需要查找的元素值。(区分大小写)
- fromIndex (可选)从fromIndex 索引处开始查找 valueToFind。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜(即使从末尾开始往前跳 fromIndex 的绝对值个索引,然后往后搜寻)。默认为 0。
返回值
返回一个布尔值 Boolean 。
如果在数组中(或 fromIndex 指定的范围中)找到了 valueToFind,则返回 true,否则返回 false。
0 的值将全部视为相等,与符号无关(即 -0 与 0 和 +0 相等),但 false 不被认为与 0 相等。
示例
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
Array.prototype.indexOf() – 找到符合条件的属性值对于的索引
indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// 1
console.log(beasts.indexOf('bison', 2));
// 4
console.log(beasts.indexOf('giraffe'));
// -1
语法
arr.indexOf(searchElement[, fromIndex])
参数
- searchElement 要查找的元素
- fromIndex (可选)开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回 -1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即 -1 表示从最后一个元素开始查找,-2 表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于 0,则整个数组都将会被查询。其默认值为 0。
返回值
首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1
示例
// 1.使用indexOf 方法确定多个值在数组中的位置。
var array = [2, 5, 9];
array.indexOf(2); // 0
array.indexOf(7); // -1
array.indexOf(9, 2); // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0
Array.isArray() – 判断是否是Array
Array.isArray() 用于确定传递的值是否是一个 Array。
语法
Array.isArray(obj)
参数
- obj 需要检测的值。
返回值
如果值是 Array,则为 true;否则为 false。
示例
// 下面的函数调用都返回 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 });
Array.prototype.join() – 拼接成字符串
join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。
const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join());
// "Fire,Air,Water"
console.log(elements.join(''));
// "FireAirWater"
console.log(elements.join('-'));
// "Fire-Air-Water"
语法
arr.join([separator])
参数
- separator (可选)指定一个字符串来分隔数组的每个元素。如果需要,将分隔符转换为字符串。如果缺省该值,数组元素用逗号(,)分隔。如果separator是空字符串 (“”),则所有元素之间都没有任何字符。
返回值
一个所有数组元素连接的字符串。如果 arr.length 为 0,则返回空字符串。
描述
所有的数组元素被转换成字符串,再用一个分隔符将这些字符串连接起来。
注意:如果一个元素为 undefined 或 null,它会被转换为空字符串。
示例
var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join(); // myVar1 的值变为"Wind,Rain,Fire"
var myVar2 = a.join(', '); // myVar2 的值变为"Wind, Rain, Fire"
var myVar3 = a.join(' + '); // myVar3 的值变为"Wind + Rain + Fire"
var myVar4 = a.join(''); // myVar4 的值变为"WindRainFire"
Array.prototype.keys() – 返回一个迭代对象
keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。
nst array1 = ['a', 'b', 'c'];
const iterator = array1.keys();
for (const key of iterator) {
console.log(key);
}
// 0
// 1
// 2
语法
arr.keys()
返回值
一个新的 Array 迭代器对象。
示例
//索引迭代器会包含那些没有对应元素的索引
var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr);
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys); // [0, 1, 2]
Array.prototype.lastIndexOf() – 找到指定元素的索引
lastIndexOf() 方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。
const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
console.log(animals.lastIndexOf('Dodo'));
// 3
console.log(animals.lastIndexOf('Tiger'));
// 1
语法
arr.lastIndexOf(searchElement[, fromIndex])
参数
- searchElement 被查找的元素。
- fromIndex (可选)从此位置开始逆向查找。默认为数组的长度减 1(arr.length - 1),即整个数组都被查找。如果该值大于或等于数组的长度,则整个数组会被查找。如果为负值,将其视为从数组末尾向前的偏移。即使该值为负,数组仍然会被从后向前查找。如果该值为负时,其绝对值大于数组长度,则方法返回 -1,即数组不会被查找。
返回值
数组中该元素最后一次出现的索引,如未找到返回-1。
描述
lastIndexOf 使用严格相等(strict equality,即 ===)比较 searchElement 和数组中的元素。
示例
var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// 3
index = array.lastIndexOf(7);
// -1
index = array.lastIndexOf(2, 3);
// 3
index = array.lastIndexOf(2, 2);
// 0
index = array.lastIndexOf(2, -2);
// 0
index = array.lastIndexOf(2, -1);
// 3
Array.prototype.map() – 遍历数组
map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1);
// [2, 8, 18, 32]
语法
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
}[, thisArg])
参数
- callback 生成新数组元素的函数,使用三个参数:
-1 currentValue callback 数组中正在处理的当前元素。
-2 index(可选)callback 数组中正在处理的当前元素的索引。
-3 array(可选)map 方法调用的数组。 - thisArg(可选)执行 callback 函数时值被用作this。
返回值
一个由原数组每个元素执行回调函数的结果组成的新数组。
描述
map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。
因为map生成一个新数组,当你不打算使用返回的新数组却使用map是违背设计初衷的,请用forEach或者for-of替代。你不该使用map: A) 你不打算使用返回的新数组,或/且 B) 你没有从回调函数中返回值。
callback 函数会被自动传入三个参数:数组元素,元素索引,原数组本身。
callback 函数会被自动传入三个参数:数组元素,元素索引,原数组本身。
map 方法处理数组元素的范围是在 callback 方法第一次调用之前就已经确定了。调用map方法之后追加的数组元素不会被callback访问。如果存在的数组元素改变了,那么传给callback的值是map访问该元素时的值。在map函数调用后但在访问该元素前,该元素被删除的话,则无法被访问到。
示例
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots 的值为 [1, 2, 3], numbers 的值仍为 [1, 4, 9]
使用技巧案例
通常情况下,map 方法中的 callback 函数只需要接受一个参数,就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。
["1", "2", "3"].map(parseInt);
我们期望输出 [1, 2, 3], 而实际结果是 [1, NaN, NaN].
parseInt 经常被带着一个参数使用,但是这里接受两个。第一个参数是一个表达式而第二个是 callback function 的基,Array.prototype.map 传递 3 个参数:
- the element
- the index
- the array
第三个参数被 parseInt 忽视了,但不是第二个。因此可能出现混淆。下面是迭代步骤的简明示例:
// parseInt(string, radix) -> map(parseInt(value, index))
parseInt("1", 0); // 1
parseInt("2", 1); // NaN
parseInt("3", 2); // NaN
下面让我们来讨论解决方案:
function returnInt(element) {
return parseInt(element, 10);
}
['1', '2', '3'].map(returnInt); // [1, 2, 3]
['1', '2', '3'].map( str => parseInt(str) );
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
['1.1', '2.2e2', '3e300'].map( str => parseInt(str) ); // [1, 2, 3]
一个 map 方法调用 parseInt 作为一个参数的等效输出运行如下:
var numbers = [1, 2, 3, 4];
var filteredNumbers = numbers.map(function(num, index) {
if(index < 3) {
return num;
}
});
// filteredNumbers:[1, 2, 3, undefined]
// numbers : [1, 2, 3, 4]
Array.of() – 可变数量参数的新数组实例
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(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]
语法
Array.of(element0[, element1[, …[, elementN]]])
参数
- elementN 任意个参数,将按顺序成为返回数组中的元素。
返回值
新的 Array 实例。
示例
Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(undefined); // [undefined]
Array.prototype.pop() – 删除最后一个元素
pop() 方法从数组中删除最后一个元素,并返回该元素的值。此方法会更改数组的长度。
let arr = [1,2,3,4]
arr.pop()
console.log(arr) // [1,2,3]
语法
arr.pop()
返回值
从数组中删除的元素(当数组为空时返回undefined)。
描述
pop 方法从一个数组中删除并返回最后一个元素。
pop 方法有意具有通用性。该方法和 call() 或 apply() 一起使用时,可应用在类似数组的对象上。pop 方法根据 length 属性来确定最后一个元素的位置。如果不包含 length 属性或 length 属性不能被转成一个数值,会将 length 置为 0,并返回 undefined。
如果你在一个空数组上调用 pop(),它将返回 undefined。
示例
const myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
const popped = myFish.pop();
console.log(myFish); // ['angel', 'clown', 'mandarin']
console.log(popped); // 'sturgeon'
Array.prototype.push() – 在末尾添加元素
push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
const animals = ['pigs', 'goats', 'sheep'];
const count = animals.push('cows');
console.log(count);
// 4
console.log(animals);
// ["pigs", "goats", "sheep", "cows"]
animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]
语法
arr.push(element1, …, elementN)
参数
- elementN 被添加到数组末尾的元素。
返回值
当调用该方法时,新的 length 属性值将被返回。
描述
push 方法将值追加到数组中。
push 方法具有通用性。该方法和 call() 或 apply() 一起使用时,可应用在类似数组的对象上。push 方法根据 length 属性来决定从哪里开始插入给定的值。如果 length 不能被转成一个数值,则插入的元素索引为 0,包括 length 不存在时。当 length 不存在时,将会创建它。
唯一的原生类数组(array-like)对象是 Strings,尽管如此,它们并不适用该方法,因为字符串是不可改变的。
示例
var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");
console.log(sports);
// ["soccer", "baseball", "football", "swimming"]
console.log(total);
// 4
Array.prototype.reduce() – 遍历数组
reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。
第一次执行回调函数时,不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被作为初始值 initialValue,迭代器将从第二个元素开始执行(索引为 1 而不是 0)。
const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
(previousValue, currentValue) => previousValue + currentValue,
initialValue
);
console.log(sumWithInitial);
// 10
reducer 逐个遍历数组元素,每一步都将当前元素的值与上一步的计算结果相加(上一步的计算结果是当前元素之前所有元素的总和)——直到没有更多的元素被相加。
对于从右向左遍历的相似方法请参阅 Array.prototype.reduceRight().
语法
// 匿名 function
reduce((previousValue, currentValue) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)
// Callback function
reduce(callbackFn)
reduce(callbackFn, initialValue)
// 内联 callback function
reduce(function(previousValue, currentValue) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ }, initialValue)
参数
- callbackFn 一个 “reducer” 函数,包含四个参数:
-1 previousValue:上一次调用 callbackFn 时的返回值。在第一次调用时,若指定了初始值 initialValue,其值则为 initialValue,否则为数组索引为 0 的元素 array[0]。
-2 currentValue:数组中正在处理的元素。在第一次调用时,若指定了初始值 initialValue,其值则为数组索引为 0 的元素 array[0],否则为 array[1]。
-3 currentIndex:数组中正在处理的元素的索引。若指定了初始值 initialValue,则起始索引号为 0,否则从索引 1 起始。
-4 array:用于遍历的数组。 - initialValue (可选)作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue,则 currentValue 则将使用数组第一个元素;否则 previousValue 将使用数组第一个元素,而currentValue 将使用数组第二个元素。
返回值
使用 “reducer” 回调函数遍历整个数组后的结果。
描述
如果数组仅有一个元素(无论位置如何)并且没有提供初始值 initialValue,或者有提供 initialValue 但是数组为空,那么此唯一值将被返回且 callbackfn 不会被执行。
提供初始值 initialValue 通常更安全,正如下面的例子,如果没有提供 initialValue,则 reduce 方法会因数组长度的不同(大于 1、等于 1、等于 0)而有不同的表现。
示例
let sum = [0,1,2,3].reduce(function(previousValue,currentValue) {
return previousValue + currentValue
}, 0)
// sum: 6
数组去重
let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']
let result = myArray.reduce(function (preValue, currValue) {
if (preValue.indexOf(currValue) === -1) {
preValue.push(currValue)
}
return preValue
}, [])
console.log(result)
// ['a', 'b', 'c', 'e', 'd']
Array.prototype.reduceRight() – 遍历数组
reduceRight() 方法接受一个函数作为累加(accumulator)和数组的每个值(从右到左)将其减少为单个值。
const array1 = [[0, 1], [2, 3], [4, 5]];
const result = array1.reduceRight((accumulator, currentValue) => accumulator.concat(currentValue));
console.log(result);
// [4, 5, 2, 3, 0, 1]
对于从左至右遍历的相似方法请参阅 Array.prototype.reduce().
其他属性和方法同Array.prototype.reduce().
Array.prototype.reverse() – 颠倒位置
reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。
const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// ["one", "two", "three"]
const reversed = array1.reverse();
console.log('reversed:', reversed);
// ["three", "two", "one"]
console.log('array1:', array1);
// ["three", "two", "one"]
Array.prototype.shift() – 删除第一个元素
shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
const array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1);
//[2, 3]
console.log(firstElement);
// 1
语法
arr.shift()
返回值
从数组中删除的元素; 如果数组为空则返回undefined 。
描述
shift 方法移除索引为 0 的元素 (即第一个元素),并返回被移除的元素,其他元素的索引值随之减 1。如果 length 属性的值为 0 (长度为 0),则返回 undefined。
shift 方法并不局限于数组:这个方法能够通过 call 或 apply 方法作用于类似数组的对象上。但是对于没有 length 属性(从 0 开始的一系列连续的数字属性的最后一个)的对象,调用该方法可能没有任何意义。
Array.prototype.pop() 有着和 shift相似的行为,但是是作用在数组的最后一个元素上的。
示例
let myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
console.log('调用 shift 之前: ' + myFish);
// "调用 shift 之前: angel,clown,mandarin,surgeon"
var shifted = myFish.shift();
console.log('调用 shift 之后: ' + myFish);
// "调用 shift 之后: clown,mandarin,surgeon"
console.log('被删除的元素: ' + shifted);
// "被删除的元素: angel"
Array.prototype.slice() – 截取数组
slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// ["camel", "duck"]
console.log(animals.slice(1, 5));
// ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2));
// ["duck", "elephant"]
console.log(animals.slice(2, -1));
// ["camel", "duck"]
console.log(animals.slice());
// ["ant", "bison", "camel", "duck", "elephant"]
语法
arr.slice([begin[, end]])
参数
- begin (可选)提取起始处的索引(从 0 开始),从该索引开始提取原数组元素。如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。如果省略 begin,则 slice 从索引 0 开始。如果 begin 超出原数组的索引范围,则会返回空数组。
- end (可选)提取终止处的索引(从 0 开始),在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素(包含 begin,但不包含 end)。slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素(索引为 1, 2, 3 的元素)。如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。如果 end 被省略,则 slice 会一直提取到原数组末尾。如果 end 大于数组的长度,slice 也会一直提取到原数组末尾。
返回值
一个含有被提取元素的新数组。
描述 - slice 不会修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。原数组的元素会按照下述规则拷贝:
-1 如果该元素是个对象引用(不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。
-2 对于字符串、数字及布尔值来说(不是 String、Number 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。 - 如果向两个数组任一中添加了新元素,则另一个不会受到影响。
示例
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);
// fruits :['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus : ['Orange','Lemon']
Array.prototype.some() – 至少一个元素通过
some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。
备注:如果用一个空数组进行测试,在任何情况下它返回的都是false。
const array = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0;
console.log(array.some(even));
// true
语法
arr.some(callback(element[, index[, array]])[, thisArg])
参数
- callback 用来测试每个元素的函数,接受三个参数:
-1 element 数组中正在处理的元素。
-2 index (可选) 数组中正在处理的元素的索引值。
-3 array(可选)some()被调用的数组。 - thisArg(可选)执行 callback 时使用的 this 值。
返回值
数组中有至少一个元素通过回调函数的测试就会返回true;所有元素都没有通过回调函数的测试返回值才会为 false。
描述
some() 为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some() 将会立即返回 true。否则,some() 返回 false。callback 只会在那些”有值“的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。
callback 被调用时传入三个参数:元素的值,元素的索引,被遍历的数组。
some() 被调用时不会改变数组。
some() 遍历的元素的范围在第一次调用 callback. 前就已经确定了。在调用 some() 后被添加到数组中的值不会被 callback 访问到。如果数组中存在且还未被访问到的元素被 callback 改变了,则其传递给 callback 的值是 some() 访问到它那一刻的值。已经被删除的元素不会被访问到。
示例
// 检测在数组中是否有元素大于 10
function isBiggerThan10(element, index, array) {
return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
Array.prototype.sort() – 排序
sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的 UTF-16 代码单元值序列时构建的
由于它取决于具体实现,因此无法保证排序的时间和空间复杂性。
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// ["Dec", "Feb", "Jan", "March"]
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// [1, 100000, 21, 30, 4]
语法
arr.sort([compareFunction])
参数
- compareFunction (可选)用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的 Unicode 位点进行排序。
-1 firstEl 第一个用于比较的元素。
-2 secondEl 第二个用于比较的元素。
返回值
排序后的数组。请注意,数组已原地排序,并且不进行复制。
描述
如果没有指明 compareFunction ,那么元素会按照转换为的字符串的诸个字符的 Unicode 位点进行排序。例如 “Banana” 会被排列到 “cherry” 之前。当数字按由小到大排序时,9 出现在 80 之前,但因为(没有指明 compareFunction),比较的数字会先被转换为字符串,所以在 Unicode 顺序上 “80” 要比 “9” 要靠前。
如果指明了 compareFunction ,那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素:
- 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
- 如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变。备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);
- 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。
- compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。
示例
//要比较数字而非字符串,比较函数可以简单的以 a 减 b,如下的函数将会将数组升序排列
function compareNumbers(a, b) {
return a - b;
}
//sort 方法可以使用 函数表达式 方便地书写:
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers);
//也可以写成:
var numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers);
// [1, 2, 3, 4, 5]
//对象可以按照某个属性排序:
var items = [
{ name: 'Edward', value: 21 },
{ name: 'Sharpe', value: 37 },
{ name: 'And', value: 45 },
{ name: 'The', value: -12 },
{ name: 'Magnetic' },
{ name: 'Zeros', value: 37 }
];
items.sort(function (a, b) {
return (a.value - b.value)
});
items.sort(function(a, b) {
var nameA = a.name.toUpperCase();
var nameB = b.name.toUpperCase();
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
return 0;
});
对非 ASCII 字符排序
当排序非 ASCII 字符的字符串(如包含类似 e, é, è, a, ä 等字符的字符串)。一些非英语语言的字符串需要使用 String.localeCompare。这个函数可以将函数排序到正确的顺序。
var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
items.sort(function (a, b) {
return a.localeCompare(b);
});
// items : ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']
Array.prototype.splice() – 删除,替换,添加元素
splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);
// ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
console.log(months);
// ["Jan", "Feb", "March", "April", "May"]
语法
array.splice(start[, deleteCount[, item1[, item2[, …]]]])
参数
- start 指定修改的开始位置(从 0 计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从 -1 计数,这意味着 -n 是倒数第 n 个元素并且等价于 array.length-n);如果负数的绝对值大于数组的长度,则表示开始位置为第 0 位。
- deleteCount (可选)整数,表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是说,如果它大于或者等于start之后的所有元素的数量),那么start之后数组的所有元素都会被删除。如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。
- item1, item2, … (可选)要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。
返回值
由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。
描述
如果添加进数组的元素个数不等于被删除的元素个数,数组的长度会发生相应的改变。
示例
// 1.从索引 2 的位置开始删除 0 个元素,插入“drum”
var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum");
// 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除
// 2.从索引 2 的位置开始删除 0 个元素,插入“drum” 和 "guitar"
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');
// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除
// 3.从索引 3 的位置开始删除 1 个元素
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);
// 运算后的 myFish: ["angel", "clown", "drum", "sturgeon"]
// 被删除的元素: ["mandarin"]
// 4.从索引 2 的位置开始删除 1 个元素,插入“trumpet”
var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, "trumpet");
// 运算后的 myFish: ["angel", "clown", "trumpet", "sturgeon"]
// 被删除的元素: ["drum"]
// 5.从索引 0 的位置开始删除 2 个元素,插入"parrot"、"anemone"和"blue"
var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
// 运算后的 myFish: ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// 被删除的元素: ["angel", "clown"]
// 6.从索引 2 的位置开始删除 2 个元素
var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
var removed = myFish.splice(myFish.length - 3, 2);
// 运算后的 myFish: ["parrot", "anemone", "sturgeon"]
// 被删除的元素: ["blue", "trumpet"]
// 7.从索引 -2 的位置开始删除 1 个元素
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(-2, 1);
// 运算后的 myFish: ["angel", "clown", "sturgeon"]
// 被删除的元素: ["mandarin"]
// 8.从索引 2 的位置开始删除所有元素
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);
// 运算后的 myFish: ["angel", "clown"]
// 被删除的元素: ["mandarin", "sturgeon"]
Array.prototype.toLocaleString() – 每个元素转字符串,再拼接成字符串
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);
// "1,a,12/21/1997, 2:12:00 PM"
语法
arr.toLocaleString([locales[,options]]);
参数
- locales (可选)带有 BCP 47 语言标记的字符串或字符串数组
- options (可选)一个可配置属性的对象,对于数字 Number.prototype.toLocaleString(),对于日期Date.prototype.toLocaleString().
返回值
表示数组元素的字符串。
示例
var prices = ['¥7', 500, 8123, 12];
prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
// "¥7,¥500,¥8,123,¥12"
Array.prototype.toString() – 转为字符串
toString() 返回一个字符串,表示指定的数组及其元素。
const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString());
// "1,2,a,1a"
语法
arr.toString()
返回值
一个表示指定的数组及其元素的字符串。
描述
Array对象覆盖了Object的 toString 方法。对于数组对象,toString 方法连接数组并返回一个字符串,其中包含用逗号分隔的每个数组元素。
当一个数组被作为文本值或者进行字符串连接操作时,将会自动调用其 toString 方法。
Array.prototype.unshift() – 首部添加元素
unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。
const array1 = [1, 2, 3];
console.log(array1.unshift(4, 5));
// 5
console.log(array1);
// [4, 5, 1, 2, 3]
语法
arr.unshift(element1, …, elementN)
参数列表
- elementN 要添加到数组开头的元素或多个元素。
返回值
当一个对象调用该方法时,返回其 length 属性值。
描述
unshift 方法会在调用它的类数组对象的开始位置插入给定的参数。
unshift 特意被设计成具有通用性;这个方法能够通过 call 或 apply 方法作用于类数组对象上。不过对于没有 length 属性(代表从 0 开始的一系列连续的数字属性的最后一个)的对象,调用该方法可能没有任何意义。
注意,如果传入多个参数,它们会被以块的形式插入到对象的开始位置,它们的顺序和被作为参数传入时的顺序一致。 于是,传入多个参数调用一次 unshift ,和传入一个参数调用多次 unshift (例如,循环调用),它们将得到不同的结果。例如:
let arr = [4,5,6];
arr.unshift(1,2,3);
console.log(arr); // [1, 2, 3, 4, 5, 6]
arr = [4,5,6]; // 重置数组
arr.unshift(1);
arr.unshift(2);
arr.unshift(3);
console.log(arr); // [3, 2, 1, 4, 5, 6]
示例
let arr = [1, 2];
arr.unshift(0);
// arr is [0, 1, 2]
arr.unshift(-2, -1);
// [-2, -1, 0, 1, 2]
arr.unshift([-4, -3]);
// [[-4, -3], -2, -1, 0, 1, 2]
arr.unshift([-7, -6], [-5]);
// [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ]
Array.prototype.values() – 返回新的迭代对象
values() 方法返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值。
const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
for (const value of iterator) {
console.log(value);
}
// "a"
// "b"
// "c"
语法
arr.values()
返回值
一个新的 Array 迭代对象。
示例
使用 for…of 循环进行迭代
const arr = ['a', 'b', 'c', 'd', 'e'];
const iterator = arr.values();
for (let letter of iterator) {
console.log(letter);
} //"a" "b" "c" "d" "e"
Array.prototype.values 是 Array.prototype[Symbol.iterator] 的默认实现。
Array.prototype.values === Array.prototype[Symbol.iterator] // true
使用 .next() 迭代
const arr = ['a', 'b', 'c', 'd', 'e'];
const iterator = arr.values();
iterator.next(); // Object { value: "a", done: false }
iterator.next().value; // "b"
iterator.next()["value"]; // "c"
iterator.next(); // Object { value: "d", done: false }
iterator.next(); // Object { value: "e", done: false }
iterator.next(); // Object { value: undefined, done: true }
iterator.next().value; // undefined