数组处理相关方法

ES5

---

1. 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

2. 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']

3. 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']

4. 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 ]

5. 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' ]

6. 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

7. every, filter, forEach, map & some

every & 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

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

---

1. 拓展运算符...

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

2. 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 ]

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