原文博客地址，迎接进修交换:
点击预览

声明变量

能够运用let、const关键字声明变量，而不引荐运用var声明变量

var声明变量的题目：

• 能够屡次反复声明同一个变量名，存在掩盖的风险
• 在全局声明的变量会挂在全局对象上
• var不能形成块级作用域，比方：if、for局限外依旧能够运用var声明的变量
• var声明的变量具有变量提拔（hoisting）特征— 许可运用在前，声明在后

var存在许多题目，let横空出世。

let许可建立块级作用域，let声明的变量只在它地点的代码块内有用

{
  let test = 10;
  var foo = 1;
}

console.log(test) // ReferenceError: miaov is not defined.
console.log(foo) // 1

在if中运用：

if(false){
  let test = 10;  // 只在这个代码块内有用，形成了块级作用域
  var foo = 1;
}

console.log(test) // ReferenceError: miaov is not defined.
console.log(foo) // undefined

在for中运用,i只能在轮回体内运用，轮回体外会报错：

for (let i = 0; i < 10; i++) {
  // ...
}
console.log(i); // ReferenceError: i is not defined

const声明变量同let声明变量一样，在块级作用域有用。差别的是，const用来声明常量，一旦声明赋值后，变量不能被从新赋值：

const test = 123;
test = 10;
console.log(test);  // Uncaught TypeError: Assignment to constant variable.

如果赋的值是援用范例，那末能够经由过程变量来修正援用范例的值：

const test = {};
test.a = 1;
test.b = 2;
console.log(test);  // {a: 1, b: 2}

总结let和const：

• 声明的变量不具有变量提拔（hoisting）特征
• 只在声明地点的块级作用域内有用
• 不许可反复声明
• 暂时性死区（TDZ）所声明的变量绑定在定义的地区，运用let敕令声明变量之前，该变量都是不可用的
• const 在声明时必需被赋值值

解构赋值

ES6 许可依据肯定情势，从数组和对象中提取值，对变量举行赋值，这被称为解构。经由过程这类体式格局能够防止在对象赋值时发生中心变量。

数组的组织赋值

function test(){
    return [1,2,3,4];
}

var [a,b] = test();
console.log(a,b); // 1,2

test函数实行后，返回的是一个数组。取数组前两个值离别存在变量中，依据解构赋值的划定规矩，在左侧声明变量，放在中括号中，会把右边数组中的值一一对应赋值给左侧的变量。

对象的解构赋值

function test(){
    return {a:1,b:2,c:3};
}

var {a,b} = test();
console.log(a,b); // 1,2

test函数实行后，返回的是一个对象。离别掏出对象中属性为a和b的值，依据解构赋值的划定规矩，在左侧声明变量，放在大括号中，变量名要和属性名保持一致。

函数参数的解构赋值

function test({a,b}){
    console.log(a,b);
}

test({a:1,b:2,c:3})

在形参中定义变量，获得实参对象指定的属性。

默认值

能够给变量设置默认值和另声明一个变量

var {a:otherVar,b,d='默认值'} = {a:1,b:2,c:3};
console.log(d); // 默认值
console.log(otherVar); // 1
console.log(a); // Uncaught ReferenceError: a is not defined

运用=给变量赋一个默认值，如果右边对象中没有与之对应的属性，则按默认值来。
运用:从新声明一个变量，会把匹配到的a的值赋给新的变量otherVar，此时在表面运用时刻，不能运用a。

也能够连着一同运用：

var {a,b,d:foo='默认值'} = {a:1,b:2,c:3};
console.log(foo); // '默认值'

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。
定义字符串

var str = `<li>
    hello
</li>`

在模板字符串中拼写HTML组织，无需斟酌回车换行。

在模板字符串中要衬着某个变量的值，能够写在占位符${}中

var message = 'hello';
var str = `<li>
        ${message}
    </li>`

打印出：

"<li>
    hello
</li>"

${}中能够写入恣意的表达式（表达式是能够被求值的代码），比方：

var message = 'hello';
var str = `<li>
        ${message}
        ${1+1}
        ${1 > 2 ? true : false}
        ${
            [1,2,3].map(function(item){
                return item*2
            })
        }
    </li>`

但不能在${}中写入if和for如许的语句。

箭头函数（Arrow Functions）

在ES6中，箭头函数就是函数的一种简写情势,许可运用“箭头”（=>）定义函数。

之前声明函数：

function foo(){
    return 1;
}

革新为箭头函数:

let foo = () => 1;

上面运用“箭头”（=>）定义的函数，左侧的()包裹函数的形参，如果定义的函数没有形参或许多个形参，肯定要运用括号：

// 没有参数，要运用()
let test = () => 1;

// 多个参数，要运用()
let foo = (a,b) => a + b;
let bar = (a,b,c) => a + b + c;

如果形参只要一个，能够省略括号：

let foo = a => a;

“箭头”（=>）的右边是函数体代码，会在函数实行后作为函数的返回值，不须要显现的运用return

let foo = (a,b) => a + b;
console.log(foo(1,2)); // 3

以上的简写体式格局，使代码变得异常简约，不由得再来个例子：

let arr = [1,2,3];  
let newArr = arr.map(item => item * 2);
console.log(newArr); // [2,4,6]

有多行代码，能够写在一对{}中，手动挪用return返回值：

let foo = (a,b) => {
    console.log(a)
    console.log(b)
    return a + b; 
}

当要返回的是对象时，又不想手动挪用return，记得加上()保证是一个对象团体，而不被误以为是函数体：

var obj = () => ({a:1,b:2})
console.log(obj());  // {a:1,b:2}

箭头函数中this指向

箭头函数内的this，绑定定义时地点的作用域的this，并非在挪用时刻决议this的指向。

document.onclick = function (){
    setTimeout(function (){
        console.log(this); // 定时器实行的函数，在非严厉情势下this指向window    
    },1000)    
}

如果要在setTimeout中运用点击时的元素，一般须要存一个变量。

document.onclick = function (){
    var that = this;
    setTimeout(function (){
        console.log(that); // that变量存的就是触发事宜的元素
    },1000)    
}

如果运用箭头函数，统统讲变得异常简朴：

document.onclick = function (){
    setTimeout( () => {
        console.log(this); 
    },1000)    
}    

箭头函数是在事宜处置惩罚函数中定义，事宜处置惩罚函数this指向的是触发事宜的元素，所以这个this，也就是触发事宜的元素。

运用箭头函数的特征：

• 函数体内的this值，绑定定义时地点的作用域的this
• 不能够看成组织函数
• 不能够运用arguments对象

函数参数默认值

许可在形参声明时，写入默认值，申明这个值是可选的。

传统做法：

/*
    参数：
        a是必填项
        b可选的
*/
function fn(a,b){
    b = b || 10;
    return a + b;
}

以上的体式格局是参数b如果没传入的话，值就为10；
如许写会有一个题目,如果传到函数的参数为0，则b的值依旧为10，准确的应该是0才对，由于||运算符左侧不建立，就返回右边的值，左侧为0则不建立，就返回10了。

ES6中，许可给函数参数默认值：

function fn(a,b=10){
    return a + b;
}

在形参中直接写上b=10即可。

扩大运算符（spread）和Rest操作符

扩大运算符和Rest操作符都指的是…,依据上下文的语境差别，剖析体式格局也差别。

数组扩大运算符

将一个数组转为用逗号分开的参数序列。

var arr = [1,2,3,4];
console.log([...arr]);  // [1,2,3,4]

把数组的每一项扩大到另一个数组中。

也能够从数组中找到最大值：

var arr = [1,2,3,4];
console.log(Math.max(...arr)); // 会顺次把数组的每一项传入到函数中

对象扩大运算符

扩大运算符（…）用于掏出参数对象的一切可遍历属性，拷贝到当前对象中，相当于浅复制。

var arr = {a:1,b:2,c:3};
console.log({...arr});

应用对象的属性是唯一的特征，背面定义的掩盖前面的属性，能够修正一个属性的值：

var arr = {a:1,b:2,c:3};
console.log({...arr,a:'修正了'});

Rest操作符

在运用解构赋值时，会把盈余的值，放在一个数组中：

var arr = [1,2,3,4];
var [a,...b] = arr;
console.log(a);  // 1 
console.log(b); // [2,3,4]

如果是对象，会把盈余的属性放在新对象中：

var o = {a:1,b:2,c:3};
var {a,...d} = o;
console.log(a);  // 1
console.log(d); // {b:2,c:3}

在函数的形参中运用，会把盈余的形参都放在数组中：

function fn(a,...b){
    console.log(a);  // 1
    console.log(b); // [2,3,4]
}

fn(1,2,3,4)

Rest操作符可取到arguments,把实参传入到一个数组中，而不是arguments类数组中：

function fn(...b){
    console.log(b); // [1,2,3,4]
}

fn(1,2,3,4)

注重，Rest操作符只能写在参数的末了，不能写在开首或中心，不然会报语法错误：

function fn(a,...b,c){
    console.log(a); // 
    console.log(b);
    console.log(c)
}

fn(1,2,3,4); // Uncaught SyntaxError: Rest parameter must be last formal parameter

对象的简约示意法

变量名和属性名雷同，可直接写入变量名：

var a = 10;
var b = 20;
var o = {
    a,
    b
}

console.log(o); // {a:10,b:20}

定义函数可省略function关键字

var o = {
    fn(){}
}

相当于：

var o = {
    fn: function () {}
}

以上属于个人明白，若有误差迎接斧正进修，感谢。