ES6的基本语法

ES6

详细参考页面

简介

• ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。一般来说，这两个词是可以互换的。

let命令

• ES6新增了let命令，用来声明变量，它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
  let a = ;
  var b = ;
}

a // ReferenceError: a is not defined.
b //

• let命令避免了循环变量泄露为全局变量

var s = 'hello';

for (var i = ; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); //

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

变量的解构赋值

• ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
• 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [, [[], ]];
foo //
bar //
baz //

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

let [x, , y] = [, , ];
x //
y //

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

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

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

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

var { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

• 解构赋值允许指定默认值。

var [foo = true] = [];
foo // true

[x, y = 'b'] = ['a']; // x='a', y='b'
[x, y = 'b'] = ['a', undefined]; // x='a', y='b'

模版字符串

传统的JavaScript语言，输出模板通常是这样写的。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

上面这种写法相当繁琐不方便，ES6引入了模板字符串解决这个问题。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line
string text line `);

// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

Number全局对象

ES6将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。

函数变化

• ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。

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

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

• 参数默认值可以与解构赋值的默认值，结合起来使用。

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

foo({}) // undefined, 5
foo({x: }) // 1, 5
foo({x: , y: }) // 1, 2
foo() // TypeError: Cannot read property 'x' of undefined

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

function add(...values) {
  let sum = ;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(, , ) //

• 箭头函数 
  ES6允许使用“箭头”（=>）定义函数。

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

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

const full = ({ first, last }) => first + ' ' + last;

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}

扩展运算符

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

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

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

var numbers = [, ];
add(...numbers) //

扩展运算符的应用

// ES5
[, ].concat(more)
// ES6
[, , ...more]

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

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

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

// ES5
a = list[], rest = list.slice()
// ES6,与解构赋值结合
[a, ...rest] = list

//函数的返回值
var dateFields = readDateFields(database);
var d = new Date(...dateFields);

对象

• ES6允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

var birth = '2000/01/01';

var Person = {

  name: '张三',

  //等同于birth: birth
  birth,

  // 等同于hello: function ()...
  hello() { console.log('我的名字是', this.name); }

};

• 属性名表达式,ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。

let propKey = 'foo';

let obj = {
  [propKey]: true,
  ['a' + 'bc']:
};

Array.prototype.includes()方法

includes()的作用，是查找一个值在不在数组里，若在，则返回true，反之返回false。 基本用法：

['a', 'b', 'c'].includes('a')     // true
['a', 'b', 'c'].includes('d')     // false

Array.prototype.includes()方法接收两个参数：要搜索的值和搜索的开始索引。当第二个参数被传入时，该方法会从索引处开始往后搜索（默认索引值为0）。若搜索值在数组中存在则返回true，否则返回false。 且看下面示例：

['a', 'b', 'c', 'd'].includes('b')         // true
['a', 'b', 'c', 'd'].includes('b', )      // true
['a', 'b', 'c', 'd'].includes('b', )      // false

求幂运算符（**）

基本用法

 **            //

效果同：

Math.pow(, )   //

** 是一个用于求幂的中缀算子，比较可知，中缀符号比函数符号更简洁，这也使得它更为可取。 下面让我们扩展下思路，既然说**是一个运算符，那么它就应该能满足类似加等的操作，我们姑且称之为幂等，例如下面的例子，a的值依然是9：

let a =
a **=
//

Object.entries()

如果一个对象是具有键值对的数据结构，则每一个键值对都将会编译成一个具有两个元素的数组，这些数组最终会放到一个数组中，返回一个二维数组。简言之，该方法会将某个对象的可枚举属性与值按照二维数组的方式返回。若目标对象是数组时，则会将数组的下标作为键值返回。例如：

Object.entries({ one: , two:  })    //[['one', 1], ['two', 2]]
Object.entries([, ])                //[['0', 1], ['1', 2]]

注意：键值对中，如果键的值是Symbol，编译时将会被忽略。例如：

Object.entries({ [Symbol()]: , two:  })       //[['two', 2]]

Object.entries()返回的数组的顺序与for-in循环保持一致，即如果对象的key值是数字，则返回值会对key值进行排序，返回的是排序后的结果。例如：

Object.entries({ : 'a', : 'b', : 'c' })    //[['1', 'c'], ['3', 'a'], ['4', 'b']]

使用Object.entries()，我们还可以进行对象属性的遍历。例如：

let obj = { one: , two:  };
for (let [k,v] of Object.entries(obj)) {
  console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`);
}

//输出结果如下：
'one':
'two': 

Object.values()

它的工作原理跟Object.entries()很像，顾名思义，它只返回自己的键值对中属性的值。它返回的数组顺序，也跟Object.entries()保持一致。

Object.values({ one: , two:  })            //[1, 2]
Object.values({ : 'a', : 'b', : 'c' })    //['c', 'a', 'b']

字符串填充：padStart和padEnd

ES8提供了新的字符串方法-padStart和padEnd。padStart函数通过填充字符串的首部来保证字符串达到固定的长度，反之，padEnd是填充字符串的尾部来保证字符串的长度的。该方法提供了两个参数：字符串目标长度和填充字段，其中第二个参数可以不填，默认情况下使用空格填充。

'Vue'.padStart()           //'       Vue'
'React'.padStart()         //'     React'
'JavaScript'.padStart()    //'JavaScript'