学习笔记03

ES6数组方法学习

1、扩展运算符

扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

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

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

函数调用中使用

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

2、扩展运算符使用

复制数组简便方法

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

合并数组

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

3、filter方法

不改变原始数组、不对空数组检测

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
//        把数组中大于5的筛选出来
let new_arr = arr.filter((n) => {
  console.log(n);	// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  return n > 5;
});
console.log(new_arr);	// [6, 7, 8, 9, 10]
console.log(arr);	// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

4、map方法

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

// 对数组中的每一项乘 2再返回新数组
let new_arr = arr.map((n) => {
  console.log(n);	// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  return n * 2;
});
console.log(new_arr); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
console.log(arr)	// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

5、reduce方法

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

// 返回数组总和、且total初始为0
let new_arr_add = arr.reduce((total, n) => {
  console.log(total + "<=>" + n);	// 累加值 <=> 数组内的值
  return total + n;
}, 0);
console.log(new_arr_add);	// 55