ES6新特性~~~一篇文章搞定

1.什么是ES6

es6全名是“ECMAScript 6”，因其是ECMAScript的第6个版本而得名；其实它正式名为ECMAScript 2015，是2015年6月正式发布的JS语言的标准。es6已基本成为业界标准，主流浏览器已支持ES6绝大多数的特性。

2.let、const块级作用域

var的缺点：

1.可以重复声明同一个变量

使用var对同一个变量进行声明，不报错

var a=0

var a=1

console.log(a)         //1

2.具有变量提升

JS引擎在处理var声明的变量时，会将声明提到作用域最前面

console.log(a)        //undefined

var a=1

console.log(a)        //1

//上面代码等价于

var a

console.log(a)

a=1

console.log(a)            

3.没有块级作用域

var定义的变量在哪都可以被访问到

var a=1

{

    var b=2

    console.log(a)        //1

    console.log(b)        //2

}

console.log(b)        //2

let、const新特点：

1.具有块级作用域，同一作用域内不可以重复声明

let b=1

const c=3

{

    let b=2

    const c=4

    console.log(c)        //4

    console.log(b)        //2

}

console.log(b)        //1

console.log(c)        //3

//let b=5        系统会报错

2.没有变量提升

let、const声明的变量，声明前不能使用，否则会出错

console.log(b)        //报错

let b=1

console.log(b)

3.const声明的变量不可修改

const声明时就要赋值，且无法修改其值

若const存储的是引用数据类型，const里存储的是地址，可以更改数据值，不能更改地址

const c=1

c=2

3.模板字符串

模板字符串要包裹在反引号（``）中，以${}包裹变量名

const msg = 'world'
const str =`你好，${msg}再见`
console.log(str)        //你好，world再见

4.数组/对象的解构赋值

• 数组解构

  将数组的单元值快速批量赋值给一系列变量的简洁语法

const arr=[100,  60, 80]
const [max, min, avg]=arr
//相当于赋值max=100, min=60, avg=80
​
let a=1
let b=2; //一定要加;
[b,a]=[a,b]
​
//立即执行函数也要加;
(function(){})();

• 对象解构(重要)

将对象属性和方法批量赋值给一系列变量的简洁语法

  const obj {
      uname: 'hrr',
      age: 22
  }
  //解构对象,解构的属性名和变量名要一致
  const {uname,age} = obj
  //等价于const uname = obj.uname , const age = obj.age
  //对象解构的变量名，可以重新改名
  const {uname：username, age} = {uname: 'hrr' , age :22}
  //多级对象解构应声明包含哪个对象

5.箭头函数

1.箭头函数形式

箭头函数用 => 符号表示，相当于匿名函数，箭头左边是传入函数的参数，右边是函数中执行的语句

let a = (x,y)=>{

        return x+y

}

//箭头函数的简写形式

//当传入参数为一个时，可以省略小括号()

//当要执行的代码只有一条语句且为return语句时，可以省略大括号和return关键字

//当不需要参数时，使用空的圆括号，里面为空

2.箭头函数与普通函数的区别

• 箭头函数不能用于构造函数(无法指明this指向)，普通函数可以用于构造函数，以此创建对象实例。
•  this 的指向不同。在普通函数中，this 总是指向调用它的对象，如果用作构造函数，它指向创建的对象实例。箭头函数this为父作用域的this，不是调用时的this，并且无法通过call(),apply(),bind()更改其this指向。
• 箭头函数不具有 arguments 对象：每一个普通函数调用后都具有一个arguments 对象，用来存储实际传递的参数。
• 箭头函数不具有 prototype 原型对象，箭头函数不具有 super。

• 箭头函数在ES6 class中声明的方法为实例方法，不是原型方法。

6.函数的参数默认值

在函数定义时，提供默认值，若用户为传参，则使用默认值，否则使用用户传递的参数

function Hello(str='hr'){
    console.log('hello '+str)
}
Hello()    //hello hr
Hello('csdn')    //hello csdn

7.剩余参数&&拓展运算符

• 剩余参数

允许将不定量的参数传给一个数组，以...变量名进行接收

function getSum(a,...arr){
    console.log(arr)
}
get(2)//arr=[]
getSum(2,3) //arr=[3]
getSum(1,2,3)//arr=[2,3]

• 拓展运算符

将数组（对象）转为用逗号分隔的参数序列

let arr1 = [1,3,5];
let arr2 = [2,4,6];
let arr3 = [...arr1, ...arr2];	// arr3 == [1,3,5,2,4,6];

太多啦，等等我继续更————————