ES6精简要点

没想到ES7都出来了(虽然并不大)，想到自己ES6还没学完

现在就补补吧，记录下重点部分

Let的用法

用来声明块级变量

f1();
function f1() {
  let n = 5;
  if (true) {
      let n = 10;
　　　 console.log(n);  //10
  }
  console.log(n); // 5
}

let声明的变量只能在他所在的{}里面使用

另外，ES6也规定，函数本身的作用域，在其所在的块级作用域之内。

function f() { console.log('I am outside!'); }
(function () {
  if(false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());

上面代码在ES5中运行，会得到“I am inside!”，但是在ES6中运行，会得到“I am outside!”。

这是因为ES5存在函数提升，不管会不会进入if代码块，函数声明都会提升到当前作用域的顶部，得到执行；

而ES6支持块级作用域，不管会不会进入if代码块，其内部声明的函数皆不会影响到作用域的外部。

const命令

const也用来声明变量，但是声明的是常量。

一旦声明，常量的值就不能改变。

const PI=3.14;
PI++;
console.log(PI);//报错

const的作用域与let命令相同：只在声明所在的块级作用域内有效。

f1();
function f1() {
    const n=1;
    console.log(n);
}
console.log(n);//报错undefine

const声明的常量，也与let一样不可重复声明。

数组的解构赋值

一起的赋值方式

var a = 1;
var b = 2;
var c = 3;

ES6

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

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

下面是一些使用嵌套数组进行解构的例子。

var [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

var [,,third] = ["foo", "bar", "baz"];
third // "baz"

var [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

 变量的解构赋值用途很多。

经常有面试管问；如何不用中间变量交换两个变量的值

[x, y] = [y, x];

从函数返回多个值

// 返回一个数组

function example() {
    return [1, 2, 3];
}
var [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
var { foo, bar } = example();

任何部署了Iterator接口的对象，都可以用for...of循环遍历。

Map结构原生支持Iterator接口，配合变量的结构赋值，获取键名和键值就非常方便。

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

如果只想获取键名，或者只想获取键值，可以写成下面这样。

// 获取键名
for (let [key] of map) {
  // ...
}

// 获取键值
for (let [,value] of map) {
  // ...
}

字符串扩展

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

var s = "Hello world!";

s.startsWith("Hello") // true
s.endsWith("!") // true
s.includes("o") // true

这三个方法都支持第二个参数，表示开始搜索的位置。

var s = "Hello world!";

s.startsWith("world", 6) // true
s.endsWith("Hello", 5) // true
s.includes("Hello", 6) // false

二进制和八进制表示法

0b111110111 === 503 // true
0o767 === 503 // true

 数值的扩展

ES6提供了二进制和八进制数值的新的写法，分别用前缀0b和0o表示。

0b111110111 === 503 // true
0o767 === 503 // true

 Math对象的扩展

Math.trunc方法用于去除一个数的小数部分，返回整数部分。

Math.trunc(4.1) // 4
Math.trunc(4.9) // 4
Math.trunc(-4.1) // -4
Math.trunc(-4.9) // -4

Math.sign方法用来判断一个数到底是正数、负数、还是零。

如果参数为正数，返回+1；

参数为负数，返回-1；

参数为0，返回0；

参数为NaN，返回NaN。

数学方法

    Math.acosh(x) 返回x的反双曲余弦（inverse hyperbolic cosine）
    Math.asinh(x) 返回x的反双曲正弦（inverse hyperbolic sine）
    Math.atanh(x) 返回x的反双曲正切（inverse hyperbolic tangent）
    Math.cbrt(x) 返回x的立方根
    Math.clz32(x) 返回x的32位二进制整数表示形式的前导0的个数
    Math.cosh(x) 返回x的双曲余弦（hyperbolic cosine）
    Math.expm1(x) 返回eˆx - 1
    Math.fround(x) 返回x的单精度浮点数形式
    Math.hypot(...values) 返回所有参数的平方和的平方根
    Math.imul(x, y) 返回两个参数以32位整数形式相乘的结果
    Math.log1p(x) 返回1 + x的自然对数
    Math.log10(x) 返回以10为底的x的对数
    Math.log2(x) 返回以2为底的x的对数
    Math.tanh(x) 返回x的双曲正切（hyperbolic tangent）

 Array.from()

Array.from()用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象，其中包括ES6新增的Set和Map结构。

let ps = document.querySelectorAll('p');

Array.from(ps).forEach(function (p) {
  console.log(p);
})

 任何有length属性的对象，都可以通过Array.from方法转为数组。

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

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

 Array.of()

Array.of()方法用于将一组值，转换为数组。

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

 数组实例的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

 数组实例的fill()

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

new Array(3).fill(7)
// [7, 7, 7]

fill()还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

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

 数组实例的entries()，keys()和values()

ES6提供三个新的方法——entries()，keys()和values()——用于遍历数组。

它们都返回一个遍历器，可以用for...of循环进行遍历，

唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

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"

 数组推导

var a1 = [1, 2, 3, 4];
var a2 = [for (i of a1) i * 2];

a2 // [2, 4, 6, 8]