ES6 实用新增特性总结

以下内容是我在学习ES6的语法时整理的一些比较常用的新特性。

let和const

let可以理解为var的替代版本，它的作用域更加严格，新增了{ }块作用域
const定义的值为常量

解构赋值

ES6可以从数组和对象中提取值赋值给变量

数组解构

let a = 1;
let b = 2;
// 等同于
let [a, b] = [1, 2];

只要等号两边的模式相同，左边的变量就会被赋予对应的值
如果解构不成功，变量的值就等于undefined
解构赋值允许指定默认值

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
// 默认值也可以是函数
function f() {
  console.log('aaa');
}
let [x = f()] = [1];

对象解构

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

变量名与属性名不一致

// 初始化变量baz 值为foo属性
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

用途

从函数返回多个值、提取 JSON 数据、遍历 Map 结构、输入模块的指定方法

字符串拓展

模板字符串

反引号`代替单引号', 用${ 表达式 }来插入值

let a = 1, b = 2, c = 3
console.log('a的值为 ' + a + ',b的值为 ' + b + ',c的值为 ' + c)
// 等同于
console.log(`a的值为 ${a}, b的值为 ${b}, c的值为 ${c}`)

内置方法

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
repeat方法返回一个新字符串，表示将原字符串重复n次。
如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

'abc'.padStart(10, '0123456789') //太长的话会被裁剪
'x'.padStart(4) // '   x' 默认用空格补全
'123456'.padStart(10, '0') // "0000123456"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

数值拓展

在Number对象上，新提供了Number.isFinite()和Number.isNaN()两个方法。
Number.isFinite()用来检查一个数值是否为有限的（finite），如果参数类型不是数值，一律返回false。
Number.isNaN()用来检查一个值是否为NaN。

全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变
Number.isInteger()判断是否为整数

函数拓展

参数默认值

function sum(x = 1, y = 2) { 
  console.log(x + y) 
} 
Sum(1) //3

rest 参数

function add(...values) { 
  let sum = 0; 
  for (var val of values) { 
    sum += val; 
  } 
  return sum; 
  } 
add(2, 5, 3) // 10

箭头函数

var f = v => v;

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

箭头函数会绑定this，减少让人头疼的this指向问题

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// 等同于ES5
function foo() {
  var _this = this;
  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}