ES6新特性

块级作用域let和const

let声明变量，const声明常量；都是块级作用域

//通常用var声明的变量，会有变量提升例如： 
!function(bool){
    if(bool){
        var test='test';
    }else{
        console.log(test);//undefined,说明test变量确实是被申明了，否者会打印test is not defined
    }
}(false)

!function(bool){
    if(bool){
        let test='test';
    }else{
        console.log(test)//is not defined ,说明test未被申明，
        //只存在if(bool){ let test='test';}作用域里面，可以理解为{}里面即是申明变量的作用域
    }
}(false)

//const申明常量,改变其值，会报错，例如：
const name='ouyang';
name='wei';// Assignment to constant variable.

var arr=[];
for(var i=0;i<10;i++){
    arr.push(
        function(){
            console.log(i);
        }
    )
}
arr.forEach(function(fun){
    fun();//10次10，只就是var申明i导致的，循环10，i的值一直在改变；
})

//如果用let来申明i，又会怎么样呢？
var arr=[];
for(let i=0;i<10;i++){
    arr.push(
        function(){
            console.log(i);
        }
    )
}
arr.forEach(function(fun){
    fun();//从0打印到9，这说明用let的变量的作用域，
    //只存在function(){console.log(i)};
})

//又或者用闭包来写
var arr=[];
for(var i=0;i<10;i++){
    arr.push(
        (function(args){
            return function(){
                console.log(args);
            }
        })(i)
    )
};
console.log(arr);
arr.forEach(function(fun){
    fun();
})

模板字符串

拼接字符串 用${}来划界

//${}字符串拼接
//es5
var name='ouyang';
console.log(name+'wei');//ouyangwei
//es6
console.log(`${name}wei`);//ouyangwei注意用``

反引号``

//es5用反斜来拼接多行字符
var text='hello \
ouyang';
console.log(text);//hello ouyang
//es6直接用反引号
var words=`hello 
world!`
console.log(words);//hello(换行)
//world!

// 1.includes：判断是否包含然后直接返回布尔值
let str = 'hahay'
console.log(str.includes('y')) // true
// 2.repeat: 获取字符串重复n次
let s = 'he'
console.log(s.repeat(3)) // 'hehehe'
 //如果你带入小数, Math.floor(num) 来处理

变量的解构赋值

es6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

\\数组解构赋值
let [a,b,c]=[1,2,3];
\\对象解构
let {foo,bar}={foo:"aaa",bar:"bbb"}
\\字符串解构
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

写法属于“模式匹配”，只有等号两边的模式相同，左边的变量就会被赋予相应的值，如果解构不成功，变量的值就等于undefined

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 // []

不完全解构，即左边的变量，与右边的值个数不匹配，能匹配几个就是几个

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

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

函数

默认值

//默认值
function fun(num){
    var num=num||20;
    console.log(num);
}
fun(0)//20因为0被当成false;
//es6的默认值问题
function fun1(num=20){
    var num=num;
    console.log(num);
}
fun1(0)//0
//与解构赋值默认值结合使用
function foo({x,y=5}){
  console.log(x,y);
}
foo({})//undefined 5
foo({x:1})// 1 5
foo({x:1,y:2})//1 2
foo()//typeError:Cannot red property 'x' of undefined

rest 参数

ES6引入rest参数（形式为：...变量名），用户获取函数的多余参数，rest参数搭配的变量是一个数组，改变量讲多余的参数放入数组中,可以替换arguments

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

name属性

函数name属性，返回该函数的函数名

 function foo(){}
foo.name//foo

箭头函数(=>)

箭头函数，例子：

var f=v => v
//等同于
var f=function(v){
  return v;
}
//多个参数或不需要参数的时候，使用园括号
var f = () => 5
//等同于
var f=function(){
  return 5;
}
var sum=(num1,num2) => num1+num2;
//等同于
var sum=function(num1,num2){
  return num1+num2;
}

如果要返回对象，必须在对象外面加上括号

let getTempItem = id => ({id:id,name:'temp'});
//等同于
let getTempItem=function(id){
  return {
    id:id,
    name:'temp'
  }
}

箭头函数this的指向问题，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

function foo(){
    setTimeout(function(){
        console.log('id:',this.id);
    },1000);
}
var id=21;
foo.call({id:42});//id:21
//setTimeout全局函数，this指向全局变量
//如果换成箭头函数呢？
function fun(){
    setTimeout(()=>{
        console.log('id:',this.id);
    },1000);
}

fun.call({id:42});//id:42
//说明箭头函数this指向其定义的对象

对象表达式

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};

promise对象

promise异步编程的一种解决方案，比传统的解决方案，回调函数和事件，更合理和强大。
所谓promise，简单来说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。promise是一个对象，从它可以获取异步操作的消息。promise提供统一的api,各种异步操作都可以用同样的方法进行处理。