Javascript es6语法新特性总结

Javascript es6语法新特性总结

前言

随着2015年6月份发布的第一个ES6版本开始，新生代的JavaScript语言在编程中用得越来越多，众多浏览器也对ES6有良好的支持。那么ES6出来后，它有哪些新特性，有哪些需要注意的地方，在这里做一个总结。

let命令

es6为我们带来了let命令，与var命令类似，但是它声明的变量只在代码块中有效(块作用域)，即局部变量声明的效果。

{
   
     let a = 1;
     var b = 1;
}
console.log(a); //ReferenceError: a is not defined
console.log(b); // 1

let很适合在for循环中使用，比如

for(let i=0; i<5; i++){
   
	//...
}

还有要注意的是let与var不一样的地方，let不存在变量提升，即要使用let声明的变量必须遵循先声明后使用的原则，否则会报错，比如：

console.log(a);
var a = 1; //变量提升，会输出undefined

console.log(b);
let b = 1; //报错ReferenceError

此外let声明的局部变量会对外部同名的全部变量其屏蔽作用，与C语言类似，比如

var a = 1;
{
   
	let a = 2;
	console.log(a); // 2
}
console.log(a); // 1

const命令

const用于声明一个只读的常量，一旦声明，常量的值就不能改变。const的作用域与let相同，也不存在变量提升。

const PI = 3.1415;

数组的特性

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。比如：

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

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

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

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

let [x, , y] = [1, 2, 3];
x // 1
y // 3

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

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

用于从函数返回多个值

/ 返回一个数组

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

// 返回一个对象

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

提取JSON数据

let jsonData = {
   
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let {
    id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。模板字符串中嵌入变量，需要将变量名写在${}之中。大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性.函数调用。

//传统模板写法
$('#result').append(
	'sum of a,b' + <br/> + 'a + b = ' + (a+b)
);
//es6模板字符串写法
$('#result').append(
	`sum of a,b + <br/>a+b= ${
     a+b}`
);

//变量引用样例
let x = 1;
let y = 2;
`${
     x} + ${
     y} = ${
     x + y}`
// "1 + 2 = 3"

`${
     x} + ${
     y * 2} = ${
     x + y * 2}`
// "1 + 4 = 5"

let obj = {
   x: 1, y: 2};
`${
     obj.x + obj.y}`
// "3"

function fn() {