es6常用功能

1、let/const

 let定义变量,可以被重新赋值。const定义常量,不能被重新赋值。

2、解构赋值

   解构赋值就是:按照一定的模式从数组或对象中取值,对变量进行赋值的过程。

注:
1.使用解构赋值,将会使等效的代码变得更加简洁并且可读性更高;
2.本质上,解构赋值属于一种“模式匹配”、“映射关系”;
只要等号两边的模式相同,一一对应,左边的变量就会被赋予右边对应的值。
3.对象,数组,块级作用域
//JS:
var obj = {a:100,b:200}
var a = obj.a
var b = obj.b

var arr = ['xxx','yyy','zzz']
var x = arr[0]

//ES6解构赋值:
const obj = {a:10,b:20,c:30}
const {a,c} = obj
console.log(a)
console.log(c)

const arr = ['xxx','yyy','zzz']
const [x,y,z] = arr
console.log(x)
console.log(y)

3、模板字符串

 使用 ` ` 模板字符串中嵌入变量,需要将变量名写在${}之中。比普通js拼接字符串方便很多

var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

4、块级作用域

var a=1;

function f(){
    console.log(a);
    if(false){
        var a='字符串变量';
    }
}
f()   // undefined

es5中,函数作用域覆盖全局作用域,得到变量提示。

var a = 1  设置的是全局变量,但是fn()的时候打印出了undefined,这是因为if(){ } 这个函数方法,函数里面的a提到了最前面,初始化a,给了一个undefined。

在es6中,用let命令新增了块级作用域,外层作用域无法获取到内层作用域,非常安全明了。

即使外层和内层都使用相同变量名,也都互不干扰。

{
  {
    let food = 'apple';
    console.log(food);   // apple
  }  
    let food = 'orange';
    console.log(food);   // orange     
}

5、箭头函数

1. 箭头函数基本形式

let func = (num) => num;
let func = () => num;
let sum = (num1,num2) => num1 + num2;
[1,2,3].map(x => x * x);

2. 箭头函数特点

参考:https://www.cnblogs.com/mengff/p/9656486.html

(1). 箭头函数this为父作用域的this,不是调用时的this

箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind。
普通函数的this指向调用它的那个对象。

原文地址:https://www.cnblogs.com/liumcb/p/13602358.html