正文

ES6精简要点

IP云
IP云V管理员/0 阅读
11/28
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

没想到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]

 

相关阅读

目录[+]