JS數組方法總結

前言

由於本身有時會忘記某個JS數組操做的方法，所以就對其進行總結，能夠時常回顧。

ES5

join & split

const colors = 'green, red, black';
const colorsArr = colors.split(',');
console.log(colorsArr); // [ 'green', ' red', ' black' ]
const colorsStr = colorsArr.join(',');
console.log(colorsStr); // green, red, black
複製代碼

push & pop

const colors = [];
colors.push('green', 'red');
console.log(colors); // ['green', 'red']

const item = colors.pop();
console.log(item); // 'red'
console.log(colors); // ['green']
複製代碼

shift & unshift

const colors = ['green', 'red'];
const item = colors.shift();
console.log(item); // 'green'
console.log(colors); // ['red']

colors.unshift('blue', 'grey');
console.log(colors); // ['blue', 'grey', 'red']
複製代碼

reverse & sort

const values = [1, 3, 44, 43, 654, 0];
values.reverse();
console.log(values); // [ 0, 654, 43, 44, 3, 1 ]

values.sort();
console.log(values); // [ 0, 1, 3, 43, 44, 654 ] 首字母開始比較
values.sort((val1, val2) => val2 - val1);
console.log(values); // [ 654, 44, 43, 3, 1, 0 ]
複製代碼

concat, slice & splice

const colors = ['red', 'green', 'blue'];
const colors2 = colors.concat('yellow', ['black']);
console.log(colors2); // [ 'red', 'green', 'blue', 'yellow', 'black' ]

const colors3 = colors2.slice(1, 5);
console.log(colors3); // [ 'green', 'blue', 'yellow', 'black' ]
console.log(colors2); // [ 'red', 'green', 'blue', 'yellow', 'black' ]

const remove1 = colors2.splice(0, 1);
console.log(remove1); // [ 'red' ]
console.log(colors2); // [ 'green', 'blue', 'yellow', 'black' ]
const remove2 = colors2.splice(1, 0, 'red', 'pink');
console.log(remove2); // [ ]
console.log(colors2); // [ 'green', 'red', 'pink', 'blue', 'yellow', 'black' ]
複製代碼

indexOf & lastIndexOf

const values= [1, 3, 4, 6, 7, 4, 3, 1];
console.log(values.indexOf(4)); // 2
console.log(values.lastIndexOf(4)); // 5
console.log(values.lastIndexOf(4, 4)); // 2
console.log(values.lastIndexOf(4, 5)); // 5
複製代碼

every, filter, forEach, map & some

every & some

const values = [1, 3, 4, 6, 7, 4, 3, 1];
const everyResult = values.every((item, index, array) => {
  return item > 2;
});
console.log(everyResult); // false

const someResult = values.some((item, index, array) => {
  return item > 2;
});
console.log(someResult); // true
複製代碼

filter

const values = [1, 3, 4, 6, 7, 4, 3, 1];
const filterResult = values.filter((item, index, array) => {
  return item > 2;
});
console.log(filterResult); // [ 3, 4, 6, 7, 4, 3 ]
const obj = [ { num: 3 }, { num: 4 }, { num: 1 },{ num: 5 },{ num: 0 }, { num: 4 }];
const filterObjResult = obj.filter((item, index, array) => {
  return item.num > 2;
});
console.log(filterObjResult); // [ { num: 3 }, { num: 4 }, { num: 5 }, { num: 4 } ]
複製代碼

map

const values = [1, 3, 4, 6, 7, 4, 3, 1];
const mapResult = values.map((item, index, array) => {
  return item * 2;
});
console.log(mapResult); // [ 2, 6, 8, 12, 14, 8, 6, 2 ]
const obj = [ { num: 3 }, { num: 4 }, { num: 1 },{ num: 5 },{ num: 0 }, { num: 4 }];
const mapObjResult = obj.map((item, index, array) => {
  return item.num;
});
console.log(mapObjResult); // [ 3, 4, 1, 5, 0, 4 ]
複製代碼

forEach

const values = [1, 3, 4, 6, 7, 4, 3, 1];
values.forEach((item, index, array) => {
  array[index] = item * 2;
});
console.log(values); // [ 2, 6, 8, 12, 14, 8, 6, 2 ]
複製代碼

reduce & reduceRight

const values = [1, 3, 4, 4, 4, 9];
const sum = values.reduce((prev, cur, index, array) => {
  return prev + cur;
});
console.log(sum); // 25

const sumRight = values.reduceRight((prev, cur, index, array) => {
  return prev + cur;
});
console.log(sumRight); // 25
複製代碼

ES6

拓展運算符...

const colors = ['green', 'red', 'pink'];
const colors1 = ['white', 'grey'];
const colors2 = [...colors, ...colors1];
console.log(colors2); // [ 'green', 'red', 'pink', 'white', 'grey' ]
複製代碼

Array.from() & Array.of()

const obj = {
  '0': '123',
  '1': '456',
  '2': 'c',
  length: 4
}

const arr = Array.from(obj);
console.log(arr); // [ '123', '456', 'c', undefined ]
const values = [1, 1, 3, 5];
const setValue = new Set(values);
const newArr = Array.from(setValue); // 也能夠直接[...new Set(values)]
console.log(newArr); // [ 1, 3, 5 ]
const newArr2 = Array.from(newArr, x => x * 2);
console.log(newArr2); // [ 2, 6, 10 ]

console.log(Array.of(undefined, 1, null)); // [ undefined, 1, null ]
複製代碼

copyWithin(target, start = 0, end = this.length)

有效時應 start > end

const arr = [1, 3, 4, 4, 5, 8, 10, 1, 0].copyWithin(0, 3, 4);
console.log(arr); // [ 4, 3, 4, 4, 5, 8, 10, 1, 0 ]
const arr = [1, 3, 4, 4, 5, 8, 10, 1, 0].copyWithin(0, 3, 8);
console.log(arr1); // [ 4, 5, 8, 10, 1, 8, 10, 1, 0 ]
複製代碼

fill

const colors = ['green', 'red', 'pink'];
const colors1 = colors.fill('white');
console.log(colors1); // [ 'white', 'white', 'white' ] 
複製代碼

find & findIndex

const values = [1, 3, 4, 5, 6, NaN];
const findResult = values.find(num => num > 4 ); // 找不到爲undefined
console.log(findResult); // 5
const findIndexResult = values.findIndex(num => num > 4 ); // 找不到爲-1
console.log(findIndexResult); // 3
複製代碼

entries(), keys() & values()

const colors = ["red", "green", "blue"];
for (const index of colors.keys()) {
  console.log(index); // 0 1 2
}

for (const ele of colors.values()) {
  console.log(ele); // red green blue
}
for (const [index, ele] of colors.entries()) {
  console.log(index, ele);
}
// 0 red
// 1 green
// 2 blue
複製代碼

ES7

includes

第二個參數是搜索的起始位置

const values = [1, 3, 4, 5, 6, NaN];
console.log(values.includes(NaN)); // true
console.log(values.includes(4, 3)); // false
複製代碼

ES10

flat & flatMap

const values = [1, 2, [3, 4]].flat();
console.log(values); // [1, 2, 3, 4]
const valuesDeep = [1, [2, [3]]];
console.log(valuesDeep.flat(Infinity)); // [1, 2, 3]
複製代碼

參考資料

• 阮一峯 ECMAScript 6 入門
• JavaScript高級程序設計（第三版）

我的博客地址

Tony's blog