JS数组方法

join()

1
arr.join([separator])

描述

所有的数组元素被转换成字符串,再用一个分隔符将这些字符串连接起来。

参数

separator 可选

指定一个字符串来分隔数组的每个元素。如果需要,将分隔符转换为字符串。如果缺省该值,数组元素用逗号(,)分隔。如果separator是空字符串(""),则所有元素之间都没有任何字符。

返回值

一个所有数组元素连接的字符串。如果 arr.length 为0,则返回空字符串。

示例

1
2
3
4
5
6
7
8
9
10
const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

push()

1
arr.push(element1, ..., elementN)

描述

push方法将值追加到数组中。

push 方法具有通用性。该方法和 call()apply() 一起使用时,可应用在类似数组的对象上。push 方法根据 length 属性来决定从哪里开始插入给定的值。

如果 length 不能被转成一个数值,则插入的元素索引为 0,包括 length 不存在时。当 length 不存在时,将会创建它。

参数

element

被添加到数组末尾的元素。

返回值

当调用该方法时,新的 length 属性值将被返回。

示例

添加元素到数组

1
2
3
4
5
6
7
8
var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");

console.log(sports);
// ["soccer", "baseball", "football", "swimming"]

console.log(total);
// 4

合并数组

1
2
3
4
5
6
7
8
9
var vegetables = ['parsnip', 'potato'];
var moreVegs = ['celery', 'beetroot'];

// 将第二个数组融合进第一个数组
// 相当于 vegetables.push('celery', 'beetroot');
Array.prototype.push.apply(vegetables, moreVegs);

console.log(vegetables);
// ['parsnip', 'potato', 'celery', 'beetroot']

像数组一样使用对象

使用在 Array.prototype.push 上使用的 call 来调用该方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = {
length: 0,

addElem: function addElem (elem) {
// obj.length is automatically incremented
// every time an element is added.
[].push.call(this, elem);
}
};

// Let's add some empty objects just to illustrate.
obj.addElem({});
obj.addElem({});
console.log(obj.length);
// → 2

注意,尽管 obj 不是数组,但是 push 方法成功地使 obj 的 length 属性增长了,就像我们处理一个实际的数组一样。

pop()

1
arr.pop()

描述

pop 方法从一个数组中删除并返回最后一个元素。

返回值

从数组中删除的元素(当数组为空时返回undefined)。

示例

删除掉数组的最后一个元素

1
2
3
4
5
6
7
8
9
let myFish = ["angel", "clown", "mandarin", "surgeon"];

let popped = myFish.pop();

console.log(myFish);
// ["angel", "clown", "mandarin"]

console.log(popped);
// surgeon

shift()

1
arr.shift()

描述

shift 方法移除索引为 0 的元素(即第一个元素),并返回被移除的元素,其他元素的索引值随之减 1。

返回值

从数组中删除的元素;如果数组为空则返回undefined

示例

移除数组中的一个元素

1
2
3
4
5
6
7
8
9
10
11
12
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"

while循环中使用shift()

下例中每个循环将要从一个数组中移除下一项元素,直至它成为空数组。

1
2
3
4
5
6
var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"];

while( (i = names.shift()) !== undefined ) {
console.log(i);
}
// Andrew, Edward, Paul, Chris, John

unshift()

1
arr.unshift(element1, ..., elementN)

描述

unshift 方法会在调用它的类数组对象的开始位置插入给定的参数。

参数

element

要添加到数组开头的元素或多个元素。

返回值

当一个对象调用该方法时,返回其 length 属性值。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
let arr = [1, 2];

arr.unshift(0); // result of the call is 3, which is the new array length
// arr is [0, 1, 2]

arr.unshift(-2, -1); // the new array length is 5
// arr is [-2, -1, 0, 1, 2]

arr.unshift([-4, -3]); // the new array length is 6
// arr is [[-4, -3], -2, -1, 0, 1, 2]

arr.unshift([-7, -6], [-5]); // the new array length is 8
// arr is [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ]

注意, 如果传入多个参数,它们会被以块的形式插入到对象的开始位置,它们的顺序和被作为参数传入时的顺序一致。 于是,传入多个参数调用一次 unshift ,和传入一个参数调用多次 unshift (例如,循环调用),它们将得到不同的结果。

1
2
3
4
5
6
7
8
9
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]

sort()

1
arr.sort([compareFunction])

描述

sort() 方法用原地算法对数组的元素进行排序,并返回数组。

默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的。

ES10(EcmaScript 2019)以前没有要求稳定性。

参数

compareFunction 可选

用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。

  • firstEl

    第一个用于比较的元素。

  • secondEl

    第二个用于比较的元素。

如果指明了 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) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。

比较函数格式如下:

1
2
3
4
5
6
7
8
9
10
function compare(a, b) {
if (a < b ) { // 按某种排序标准进行比较, a 小于 b
return -1;
}
if (a > b ) {
return 1;
}
// a must be equal to b
return 0;
}

sort 方法可以使用 函数表达式 方便地书写:

1
2
3
4
5
6
7
8
9
10
11
12
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]

对象可以按照某个属性排序:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var items = [
{ name: 'Edward', value: 21 },
{ name: 'Sharpe', value: 37 },
{ name: 'And', value: 45 },
{ name: 'The', value: -12 },
{ name: 'Magnetic' },
{ name: 'Zeros', value: 37 }
];

// sort by value
items.sort(function (a, b) {
return (a.value - b.value)
});

// sort by name
items.sort(function(a, b) {
var nameA = a.name.toUpperCase(); // ignore upper and lowercase
var nameB = b.name.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}

// names must be equal
return 0;
});

返回值

排序后的数组。数组原地排序,并且不进行复制。

示例

创建、显示及排序数组

1
2
3
4
5
6
7
8
var stringArray = ["Blue", "Humpback", "Beluga"];
var numericStringArray = ["80", "9", "700"];
var numberArray = [40, 1, 5, 200];
var mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];

function compareNumbers(a, b){
return a - b;
}

对非 ASCII 字符排序

1
2
3
4
5
6
var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
items.sort(function (a, b) {
return a.localeCompare(b);
});

// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']

使用映射改善排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 需要被排序的数组
var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];

// 对需要排序的数字和位置的临时存储
var mapped = list.map(function(el, i) {
return { index: i, value: el.toLowerCase() };
})

// 按照多个值排序数组
mapped.sort(function(a, b) {
return +(a.value > b.value) || +(a.value === b.value) - 1;
});

// 根据索引得到排序的结果
var result = mapped.map(function(el){
return list[el.index];
});

reverse()

1
arr.reverse()

描述

reverse 方法颠倒数组中元素的位置,改变了数组,并返回该数组的引用。

返回值

颠倒后的数组。

示例

颠倒数组中的元素

1
2
3
4
const a = [1, 2, 3];
console.log(a); // [1, 2, 3]
a.reverse();
console.log(a); // [3, 2, 1]

颠倒类数组中的元素

1
2
3
4
const a = {0: 1, 1: 2, 2: 3, length: 3};
console.log(a); // {0: 1, 1: 2, 2: 3, length: 3}
Array.prototype.reverse.call(a); //same syntax for using apply()
console.log(a); // {0: 3, 1: 2, 2: 1, length: 3}

concat()

1
var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

描述

concat方法创建一个新的数组,它由被调用的对象中的元素组成,每个参数的顺序依次是该参数的元素(如果参数是数组)或参数本身(如果参数不是数组)。

它不会递归到嵌套数组参数中。

concat方法不会改变this或任何作为参数提供的数组,而是返回一个浅拷贝,它包含与原始数组相结合的相同元素的副本。

参数

value可选

数组和/或值,将被合并到一个新的数组中。如果省略了所有 valueN 参数,则 concat 会返回调用此方法的现存数组的一个浅拷贝。详情请参阅下文描述。

返回值

新的 Array 实例。

示例

连接多个数组

1
2
3
4
5
6
var num1 = [1, 2, 3],
num2 = [4, 5, 6],
num3 = [7, 8, 9];
var nums = num1.concat(num2, num3);
console.log(nums);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]

将值连接到数组

1
2
3
4
var alpha = ['a', 'b', 'c'];
var alphaNumeric = alpha.concat(1, [2, 3]);
console.log(alphaNumeric);
// results in ['a', 'b', 'c', 1, 2, 3]

合并嵌套数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var num1 = [[1]];
var num2 = [2, [3]];
var num3 = [5,[6]];

var nums = num1.concat(num2);

console.log(nums);
// results is [[1], 2, [3]]

var nums2=num1.concat(4,num3);

console.log(nums2)
// results is [[1], 4, 5,[6]]

// modify the first element of num1
num1[0].push(4);

console.log(nums);
// results is [[1, 4], 2, [3]]

slice()

1
arr.slice([begin[, end]])

描述

slice 不会修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。

原数组的元素会按照下述规则拷贝:

  • 如果该元素是个对象引用 (不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。

  • 对于字符串、数字及布尔值来说(不是 StringNumber 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。

参数

begin 可选

提取起始处的索引(从 0 开始),从该索引开始提取原数组元素。如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。如果省略 begin,则 slice 从索引 0 开始。如果 begin 超出原数组的索引范围,则会返回空数组。

end 可选

提取终止处的索引(从 0 开始),在该索引处结束提取原数组元素。slice 会提取原数组中索引从 beginend 的所有元素(包含 begin,但不包含 end)。slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 (索引为 1, 2, 3的元素)。如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。如果 end 被省略,则 slice 会一直提取到原数组末尾。如果 end 大于数组的长度,slice 也会一直提取到原数组末尾。

返回值

一个含有被提取元素的新数组。

示例

返回现有数组的一部分

1
2
3
4
5
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

类数组(Array-like)对象

1
2
3
4
5
function list() {
return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

除了使用 Array.prototype.slice.call(``arguments``),你也可以简单的使用 [].slice.call(arguments) 来代替。另外,你可以使用 bind 来简化该过程。

1
2
3
4
5
6
7
8
var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);

function list() {
return slice(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

splice()

1
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

描述

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

参数

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() 将只删除数组元素。

返回值

由被删除的元素组成的一个数组。

如果只删除了一个元素,则返回只包含一个元素的数组;如果没有删除元素,则返回空数组。

示例

从索引 2 的位置开始删除 0 个元素,插入“drum” 和 “guitar”

1
2
3
4
5
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除

indexOf()

1
arr.indexOf(searchElement[, fromIndex])

描述

indexOf 使用严格相等(无论是 ===, 还是 triple-equals操作符都基于同样的方法)进行判断 searchElement与数组中包含的元素之间的关系。

参数

searchElement

要查找的元素。

fromIndex 可选

开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0。

参数

searchElement

要查找的元素

fromIndex 可选

开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0。

参数

searchElement

要查找的元素

fromIndex 可选

开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0.

返回值

首个被找到的元素在数组中的索引位置;若没有找到则返回 -1

示例

使用indexOf

1
2
3
4
5
6
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

找出指定元素出现的所有位置

1
2
3
4
5
6
7
8
9
10
var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.indexOf(element);
while (idx != -1) {
indices.push(idx);
idx = array.indexOf(element, idx + 1);
}
console.log(indices);
// [0, 2, 4]

判断一个元素是否在数组里,不在则更新数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function updateVegetablesCollection (veggies, veggie) {
if (veggies.indexOf(veggie) === -1) {
veggies.push(veggie);
console.log('New veggies collection is : ' + veggies);
} else if (veggies.indexOf(veggie) > -1) {
console.log(veggie + ' already exists in the veggies collection.');
}
}

var veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];

// New veggies collection is : potato,tomato,chillies,green-papper,spinach
updateVegetablesCollection(veggies, 'spinach');
// spinach already exists in the veggies collection.
updateVegetablesCollection(veggies, 'spinach');

forEach()

1
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

描述

forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数,那些已删除或者未初始化的项将被跳过。

参数

callback

为数组中每个元素执行的函数,该函数接收一至三个参数:

  • currentValue

    数组中正在处理的当前元素。

  • index 可选

    数组中正在处理的当前元素的索引。

  • array 可选

    forEach() 方法正在操作的数组。

thisArg 可选

可选参数。当执行回调函数 callback 时,用作 this 的值。

示例

不对未初始化的值进行任何操作(稀疏数组)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

for循环转换为forEach

1
2
3
4
5
6
7
8
9
10
11
12
const items = ['item1', 'item2', 'item3'];
const copy = [];

// before
for (let i=0; i<items.length; i++) {
copy.push(items[i]);
}

// after
items.forEach(function(item){
copy.push(item);
});

map()

1
2
3
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])

描述

map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。

callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

你不该使用map: A)你不打算使用返回的新数组 B) 你没有从回调函数中返回值

参数

callback

生成新数组元素的函数,使用三个参数:

  • currentValue

    callback 数组中正在处理的当前元素。

  • index可选

    callback 数组中正在处理的当前元素的索引。

  • array可选

    map 方法调用的数组。

thisArg可选

执行 callback 函数时值被用作this

返回值

一个由原数组每个元素执行回调函数的结果组成的新数组。

示例

求数组中每个元素的平方根

1
2
3
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

使用map重新格式化数组中的对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var kvArray = [{key: 1, value: 10},
{key: 2, value: 20},
{key: 3, value: 30}];

var reformattedArray = kvArray.map(function(obj) {
var rObj = {};
rObj[obj.key] = obj.value;
return rObj;
});

// reformattedArray 数组为: [{1: 10}, {2: 20}, {3: 30}],

// kvArray 数组未被修改:
// [{key: 1, value: 10},
// {key: 2, value: 20},
// {key: 3, value: 30}]

使用一个包含一个参数的函数来mapping(构建)一个数字数组

1
2
3
4
5
6
7
var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
return num * 2;
});

// doubles数组的值为: [2, 8, 18]
// numbers数组未被修改: [1, 4, 9]

filter()

1
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

描述

filter 为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或等价于True的元素(即除 false0-00n""nullundefinedNaN 以外皆为真值)创建一个新数组。

参数

callback

用来测试数组的每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接受以下三个参数:

  • element

    数组中当前正在处理的元素。

  • index可选

    正在处理的元素在数组中的索引。

  • array可选

    调用了 filter 的数组本身。

thisArg可选

执行 callback 时,用于 this 的值。

返回值

一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。

示例

筛选排除所有较小的值

1
2
3
4
5
function isBigEnough(element) {
return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

过滤 JSON 中的无效条目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var arr = [
{ id: 15 },
{ id: -1 },
{ id: 0 },
{ id: 3 },
{ id: 12.2 },
{ },
{ id: null },
{ id: NaN },
{ id: 'undefined' }
];

var invalidEntries = 0;

function isNumber(obj) {
return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

function filterByID(item) {
if (isNumber(item.id) && item.id !== 0) {
return true;
}
invalidEntries++;
return false;
}

var arrByID = arr.filter(filterByID);

console.log('Filtered Array\n', arrByID);
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log('Number of Invalid Entries = ', invalidEntries);
// Number of Invalid Entries = 5

在数组中搜索

1
2
3
4
5
6
7
8
9
10
11
12
13
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
* Array filters items based on search criteria (query)
*/
const filterItems = (query) => {
return fruits.filter((el) =>
el.toLowerCase().indexOf(query.toLowerCase()) > -1
);
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange'

every()

1
arr.every(callback(element[, index[, array]])[, thisArg])

描述

every 方法为数组中的每个元素执行一次 callback 函数,直到它找到一个会使 callback 返回 falsy 的元素。

参数

callback

用来测试每个元素的函数,它可以接收三个参数:

  • element

    用于测试的当前值。

  • index可选

    用于测试的当前值的索引。

  • array可选

    调用 every 的当前数组。

thisArg

执行 callback 时使用的 this 值。

返回值

如果回调函数的每一次返回都为 truthy 值,返回 true ,否则返回 false

示例

检测所有数组元素的大小

1
2
3
4
5
function isBigEnough(element, index, array) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

使用箭头函数

1
2
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

some()

1
arr.some(callback(element[, index[, array]])[, thisArg])

描述

some() 为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。

如果找到了这样一个值,some() 将会立即返回 true。否则,some() 返回 false

参数

callback

用来测试每个元素的函数,接受三个参数:

  • element

    数组中正在处理的元素。

  • index 可选

    数组中正在处理的元素的索引值。

  • array可选

    some()被调用的数组。

thisArg可选

执行 callback 时使用的 this 值。

返回值

数组中有至少一个元素通过回调函数的测试就会返回**true**;所有元素都没有通过回调函数的测试返回值才会为false。

示例

测试数组元素的值

1
2
3
4
5
6
function isBiggerThan10(element, index, array) {
return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

使用箭头函数测试数组元素的值

1
2
[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true

判断数组元素中是否存在某个值

1
2
3
4
5
6
7
8
9
10
var fruits = ['apple', 'banana', 'mango', 'guava'];

function checkAvailability(arr, val) {
return arr.some(function(arrVal) {
return val === arrVal;
});
}

checkAvailability(fruits, 'kela'); // false
checkAvailability(fruits, 'banana'); // true

使用箭头函数判断数组元素中是否存在某个值

1
2
3
4
5
6
7
8
var fruits = ['apple', 'banana', 'mango', 'guava'];

function checkAvailability(arr, val) {
return arr.some(arrVal => val === arrVal);
}

checkAvailability(fruits, 'kela'); // false
checkAvailability(fruits, 'banana'); // true

将任意值转换为布尔类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var TRUTHY_VALUES = [true, 'true', 1];

function getBoolean(value) {
'use strict';

if (typeof value === 'string') {
value = value.toLowerCase().trim();
}

return TRUTHY_VALUES.some(function(t) {
return t === value;
});
}

getBoolean(false); // false
getBoolean('false'); // false
getBoolean(1); // true
getBoolean('true'); // true

flat()

1
var newArray = arr.flat([depth])

描述

flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

参数

depth 可选

指定要提取嵌套数组的结构深度,默认值为 1

返回值

一个包含将数组与子数组中所有元素的新数组

示例

扁平化嵌套数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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]

扁平化与数组空项

flat() 方法会移除数组中的空项:

1
2
3
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

includes()

1
arr.includes(valueToFind[, fromIndex])

描述

includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false

参数

valueToFind

需要查找的元素值,比较字符串和字符时区分大小写。

fromIndex 可选

fromIndex 索引处开始查找 valueToFind。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜 (即使从末尾开始往前跳 fromIndex 的绝对值个索引,然后往后搜寻)。默认为 0。

返回值

返回一个布尔值 Boolean

如果在数组中(或 fromIndex 指定的范围中)找到了 valueToFind,则返回 true,否则返回 false

示例

1
2
3
4
5
[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

计算出的索引小于 0

如果 fromIndex 为负值,计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0,则整个数组都会被搜索。

1
2
3
4
5
6
7
8
9
10
// array length is 3
// fromIndex is -100
// computed index is 3 + (-100) = -97

var arr = ['a', 'b', 'c'];

arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true
arr.includes('a', -2); // false

join()

1
arr.join([separator])

描述

所有的数组元素被转换成字符串,再用一个分隔符将这些字符串连接起来。

如果一个元素为 undefinednull,它会被转换为空字符串。

参数

separator 可选

指定一个字符串来分隔数组的每个元素。如果需要,将分隔符转换为字符串。如果缺省该值,数组元素用逗号(,)分隔。如果separator是空字符串(""),则所有元素之间都没有任何字符。

返回值

一个所有数组元素连接的字符串。如果 arr.length 为0,则返回空字符串。

示例

1
2
3
4
5
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"

连接类数组对象

1
2
3
4
5
function f(a, b, c) {
var s = Array.prototype.join.call(arguments);
console.log(s); // '1,a,true'
}
f(1, 'a', true);