ES6学习笔记（二）

1. 数组的扩展

a.Array.from()

Array.from()可以将类数组对象和可遍历对象转化为真正的数组。
常见的类数组对象有函数内部的arguments对象，以及DOM操作返回的NodeList集合。

类数组对象转为数组
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

//函数内部的arguments参数转为数组
function foo() {
  var args = Array.from(arguments); //args为参数数组
}

//NodeList对象转为数组
let ps = document.querySelectorAll('p');
let psArr = Array.from(ps);

//参数为字符串
Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']

//参数是数组，返回一个一样的新数组
Array.from([1, 2, 3]); // [1, 2, 3]

//只要是部署了Iterator接口的数据结构，都能将其转为数组。
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

Array.from()可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

let arrayLike1 = {
    '0': '1',
    '1': '2',
    '2': '3',
    length: 3
};
let arrs1 = Array.from( arrayLike1, function(x){ return x*x; });
//[1,4,9]

b.Array.of()

Array.of方法用于将一组值，转换为数组。Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

c.copyWithin()

在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组，会修改原数组。
copyWithin(target,start,end);

• target 表示从此位置开始拷贝
• start 表示从该位置开始读取数据
• end 表示从该位置停止读数据

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

d.find()和findIndex()

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

e.其他方法

• fill(content,start,end) 填充数组

  content表示填充的内容，start和end分别表示填充的起始位置和结束位置。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

• entries(),keys(),values()

  可以用for…of…遍历数组

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

• includes(content,start) 检测数组是否包含给定值

  content表示给定值，start表示搜索的起始位置

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false

[1, 2, 3].includes(3, 3);  // false

2.函数的扩展

a.函数参数默认值

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

通常定义了默认值的参数都是位于函数的尾参数，且调用时可以省略，但是如果定义了默认值的参数不在参数尾部，则这个参数没法省略，除非显示输入undefined

function foo(x = 5, y = 6) {
  console.log(x, y);
}

foo(undefined, null)
// 5 null

指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。

log.length; //1
foo.length; //0

b.rest参数

rest参数（形式为“…变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function concatenateAll(...args) {
  return args；
}
concatenateAll(1,2,3); //[1,2,3]

c.扩展运算符...

扩转运算符也可以把数组或类数组对象展开成一系列用逗号隔开的值，在函数调用时可以取代apply方法。

var foo = function(a, b, c) {
  console.log(a); console.log(b); console.log(c);
}
var arr = [1, 2, 3];
//传统写法
foo(arr[0], arr[1], arr[2]);

//使用扩展运算符
foo(...arr);
//1
//2
//3

扩展运算符的应用：

• 合并数组

let a=[1,2];
let b=[3,4];
let c=[...a,...b]; //[1,2,3,4]

• 与解构赋值结合

//扩展运算符用于数组赋值时，只能放在参数的最后一位
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

• 将特定某些数据结构转化为数组

// arguments对象转为数组
function foo() {
  var args = [...arguments];
}

// NodeList对象转为数组
[...document.querySelectorAll('div')]

//将字符串转换为数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]

//map、set结构转换为数组
let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]

//Generator函数转为数组
var go = function*(){
  yield 1;
  yield 2;
  yield 3;
};
[...go()] // [1, 2, 3]

d.箭头函数

var f = v => v;

//等同于
var f = function(v) {
  return v;
};

当箭头函数的参数为0或多个时，用圆括号代表参数部分

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

箭头函数可以简化回调函数

[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

注意点：

• 函数体内的this对象，是定义时所在的对象，而不是使用时所在的对象。
• 不可以当作构造函数，不可以使用new命令，否则会抛错。
• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
• 不可以使用yield命令，因此箭头函数不能用作Generator函数。

---

参考资料：《ECMAScript 6 入门》——阮一峰