Array方法

日常工作中经常用到数组，感觉还是有点混乱，是时候总结一波了。

concat

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

废话不多说，举几个mdn上的例子。

连接俩个数组

var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];

alpha.concat(numeric);
// result in ['a', 'b', 'c', 1, 2, 3]

1
2
3
4
5

连接三个数组

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
5
6
7
8

将值连接到数组

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

合并嵌套数组

var num1 = [[1]];
var num2 = [2, [3]];

var nums = num1.concat(num2);

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13

entries

entries方法返回一个新的数组迭代器对象，每次迭代都会返回一个由包含键值对(键就是索引)的数组。

var a = ['a', 'b', 'c'];
var iterator = a.entries();

for (let e of iterator) {
  console.log(e);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']

1
2
3
4
5
6
7
8
9

every

every方法检测数组中是否每个元素都满足函数的条件(polyfill可做)

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
3
4
5

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

1
2

filter

filter方法将数组中每个符合条件的元素过滤出来组成一个新的数组(不改变原数组)。

过滤小于10的值

function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

1
2
3
4
5
6

find，findIndex

find方法返回数组中符合条件的第一个元素，否则返回undefined。 findIndex方法返回数组中符合条件的第一个元素的索引值，否则返回-1。

// find
const inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

const result = inventory.find(fruit => fruit.name === 'cherries');

console.log(result) // { name: 'cherries', quantity: 5 }

1
2
3
4
5
6
7
8
9
10

// findIndex
const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"];

const index = fruits.findIndex(fruit => fruit === "blueberries");

console.log(index); // 3
console.log(fruits[index]); // blueberries

1
2
3
4
5
6
7

flat

flat方法创建一个新数组，所有子数组元素以递归方式连接到指定的深度。

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]

1
2
3
4
5
6
7
8
9
10
11

// 删除数组中的空位置
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

1
2
3
4

forEach

forEach方法就是遍历数组的元素。 forEach是无法终止的，除了抛出异常外，如果需要终止操作，forEach是不合适的。

includes

includes方法确定数组是否在其条目中包含某个值，并在适当时返回true或者false

[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
['a', 'b', 'c'].includes('a'); // true
['a', 'b', 'c'].includes('d'); // true

1
2
3
4
5
6
7

indexOf

indexOf方法返回数组中找到的第一个元素的索引值，否则返回-1。

var array = [2, 9, 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

join

join方法通过连接数组中的所有元素（或类数组对象）来创建并返回一个新字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

var a = ['Wind', 'Rain', 'Fire'];
a.join();      // 'Wind,Rain,Fire'
a.join(', ');  // 'Wind, Rain, Fire'
a.join(' + '); // 'Wind + Rain + Fire'
a.join('');    // '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);
//expected output: "1,a,true"

1
2
3
4
5
6
7

keys

var array1 = ['a', 'b', 'c'];
var iterator = array1.keys(); 
  
for (let key of iterator) {
  console.log(key); // expected output: 0 1 2
}

1
2
3
4
5
6

lastIndexOf

var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo'));
// expected output: 3

console.log(animals.lastIndexOf('Tiger'));
// expected output: 1

1
2
3
4
5
6
7

var numbers = [2, 5, 9, 2];
numbers.lastIndexOf(2);     // 3
numbers.lastIndexOf(7);     // -1
numbers.lastIndexOf(2, 3);  // 3
numbers.lastIndexOf(2, 2);  // 0
numbers.lastIndexOf(2, -2); // 0
numbers.lastIndexOf(2, -1); // 3

1
2
3
4
5
6
7

map

map方法通过提供的函数遍历每个元素来返回一个新的数组。

var numbers = [1, 4, 9];
var roots = numbers.map(function(num) {
return Math.sqrt(num)
});
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]

1
2
3
4
5
6

var map = Array.prototype.map;
var a = map.call('Hello World', function(x) { 
  return x.charCodeAt(0); 
});
// a now equals [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

1
2
3
4
5

var elems = document.querySelectorAll('select option:checked');
var values = Array.prototype.map.call(elems, function(obj) {
  return obj.value;
});

1
2
3
4

pop，shift和push，unshift

pop方法移除数组的最后一个元素并返回，这个方法会改变数组的长度。 shift方法移除数组的第一个元素并返回，这个方法会改变数组的长度。 push方法将一个或多个元素添加到数组的末尾，并返回数组的新长度。

// pop
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

var popped = myFish.pop();

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

console.log(popped); // 'sturgeon'

1
2
3
4
5
6
7
8

var myFish = {0:'angel', 1:'clown', 2:'mandarin', 3:'sturgeon', length: 4};

var popped = Array.prototype.pop.call(myFish); //same syntax for using apply( )

console.log(myFish); // {0:'angel', 1:'clown', 2:'mandarin', length: 3} 

console.log(popped); // 'sturgeon'

1
2
3
4
5
6
7

// shift
var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

console.log('myFish before:', JSON.stringify(myFish));
// myFish before: ['angel', 'clown', 'mandarin', 'surgeon']

var shifted = myFish.shift(); 

console.log('myFish after:', myFish); 
// myFish after: ['clown', 'mandarin', 'surgeon']

console.log('Removed this element:', shifted); 
// Removed this element: angel

1
2
3
4
5
6
7
8
9
10
11
12
13

// push
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

var vegetables = ['parsnip', 'potato'];
var moreVegs = ['celery', 'beetroot'];

// Merge the second array into the first one
// Equivalent to vegetables.push('celery', 'beetroot');
Array.prototype.push.apply(vegetables, moreVegs);

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

1
2
3
4
5
6
7
8

// unshift
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 ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14

reduce

reduce方法在数组的每个成员上执行reducer函数（您提供），从而产生单个输出值。 reducer有四个值：

累加值
当前值
索引
源数组

[2, 3, 4, 5].reduce((accumulator, currentValue, currentIndex, array) => accumulator + currentValue, 1);
// 初始值为1，结果为15

1
2

var initialValue = 0;
var sum = [{x: 1}, {x: 2}, {x: 3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.x
    ,initialValue
);

console.log(sum) // logs 6

1
2
3
4
5
6
7

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  ( accumulator, currentValue ) => accumulator.concat(currentValue),
  []
);

1
2
3
4

reverse

reverse反转数组中的元素位置。

const a = [1, 2, 3];

console.log(a); // [1, 2, 3]

a.reverse();

console.log(a); // [3, 2, 1]

1
2
3
4
5
6
7

slice

slice方法返回从数组的开始和结束位置浅拷贝元素到一个新数组（不包括结尾索引）。原始数组不会被修改。

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

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

1
2
3
4
5

function list() {
  return Array.prototype.slice.call(arguments);
}

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

1
2
3
4
5

some

some方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。

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

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

1
2

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

splice

splice方法通过删除或替换现有元素和/或在适当位置添加新元素来更改数组的内容。

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

// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"] 
// removed is [], no elements removed

1
2
3
4
5
6

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

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"] 
// removed is [], no elements removed

1
2
3
4
5

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

// removed is ["mandarin"]
// myFish is ["angel", "clown", "drum", "sturgeon"]

1
2
3
4
5

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, 'trumpet');

// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]

1
2
3
4
5

var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');

// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"] 
// removed is ["angel", "clown"]

1
2
3
4
5

var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
var removed = myFish.splice(myFish.length - 3, 2);

// myFish is ["parrot", "anemone", "sturgeon"] 
// removed is ["blue", "trumpet"]

1
2
3
4
5

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(-2, 1);

// myFish is ["angel", "clown", "sturgeon"] 
// removed is ["mandarin"]

1
2
3
4
5

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);

// myFish is ["angel", "clown"] 
// removed is ["mandarin", "sturgeon"]

1
2
3
4
5

sort

sort方法对数组中的元素进行排序并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。由于它取决于实现，因此无法保证排序的时间和空间复杂性。

let 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

# Array方法

# concat

# 连接俩个数组

# 连接三个数组

# 将值连接到数组

# 合并嵌套数组

# entries

# every

# filter

# find，findIndex

# flat

# forEach

# includes

# indexOf

# join

# keys

# lastIndexOf

# map

# pop，shift和push，unshift

# reduce

# reverse

# slice

# some

# splice

# sort

Array方法

concat

连接俩个数组

连接三个数组

将值连接到数组

合并嵌套数组

entries

every

filter

find，findIndex

flat

forEach

includes

indexOf

join

keys

lastIndexOf

map

pop，shift和push，unshift

reduce

reverse

slice

some

splice

sort