2019-03-28/ES6新增特性理解-1

2019-03-28 本文已影响0人阿九_beta

一、 let 和 const

ES5:
存在全局作用域和函数作用域；
var、function申明的变量同时也是顶层对象的属性；
存在变量提升；
ES6:
存在全局作用域、函数作用域、块级作用域；
var、function申明的变量同时也是顶层对象的属性，但let const class申明的变量不是顶层对象的属性；
let const不存在变量提升；

ES6中的块级作用域可以替代立即执行函数IIFE

// IIFE
(function (){
  var tem = 1
  console.log(tem)
}())
==>
// 块级作用域
{
  let tem = 1
  console.log(tem)
}

二、箭头函数
1.箭头函数没有this,它的this由其作用域链继承而来

function ArrowPerson(){
    this.age=3
    setInterval(()=>{this.age++},1000) //this.age指向实例中的this.age=3
}

var age=0
function FuncPerson(){
    this.age=3
    setInterval(function(){this.age++},1000) // this.age指向window中的age=0
}

var ap=new ArrowPerson();
var fp=new FuncPerson();

ap //从3开始计数
fp //从0开始计数

2.箭头函数作为对象方法，且包含this时，this指向全局对象

var arrow = '我是window中的this'
var obj ={
    arrow : '我是obj中的this',
    print : ()=>{console.log('在箭头函数中打印this.arrow结果为:'+ this.arrow)}
}
obj.print() //在箭头函数中打印this.arrow结果为:我是window中的this

3.箭头函数的闭包改写

// 原闭包函数
function add(){
    var i=0
    return function incre(){
        return (++i)
    }
}

var Counter = add()
Counter() //1
Counter() //2
Counter() //3

//箭头函数闭包
var add = (i=0)=>{return (()=>(++i))}
var Counter = add()
Counter() //1
Counter() //2
Counter() //3

三、默认参数
1.函数定义时可以传入默认参数，调用时如果未传入实参，就用默认参数

function add(a, b=2){
  return a+b
}

add(1) //3
add(1,4) //5
add() //NaN 等同于undefined+2

四、...theArgs使用方法
1.作为剩余参数用法（可以使用数组的方法）
...theArgs与arguments最大的区别是：arguments不是数组实例，在上面不可以直接使用数组方法；而...theArgs直接可以使用数组方法


function multiply(multiplier,...theArgs){
    return theArgs.map(function(ele){
        return multiplier*ele
    })
}

multiply(2,1,2,3) // 2=>multiplier, theArgs=>[1,2,3]
var result=multiply(2,1,2,3) // result=>[2,4,6]

2.作为展开语法（可以拆开数组）

//2.1 等同于slice,可以用来浅拷贝

var arr = [1,2,1,7]
var copyArr=[...arr]
copyArr.push(4) //[1,2,1,7,4] 对arr没有影响

//2.2 相当于apply用法：把数组传入函数参数中
var args= [1,2,3]
function f(a,b,c){
}
f(...args) // 等同于f.apply(null,args)

//2.3 concat用法
var arr1=[1,2]
var arr2=[3,4]
var arr3=[...arr1,...arr2] //等同于arr1.concat(arr2)

//2.4略等同于unshift
var arr1=[1,2]
var arr2=[3,4]
var arr3=[...arr2,...arr1] //Array.prototype.unshift.apply(arr1,arr2) 结果一致，但是这种方式改变了原来arr1

//2.5 浅拷贝和合并字面量对象
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// 克隆后的对象: { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// 合并后的对象: { foo: "baz", x: 42, y: 13 }

五、结构赋值
使得将值从数组，或属性从对象，提取到不同的变量中，成为可能。
解构赋值语法中，表达式左边定义了要从原变量（表达式右边）中取出什么变量。也就是把右边解构了之后赋值给左边～

数组匹配 [ b, a ] = [ 1, 2 ]
对象匹配 let { a, b, c } = objABC
参数匹配 function g ({ name: n, val: v }) {}

var obj = [1, 2, 3, 4, 5];
var [y, z] = obj;   //将obj解构，取第一二个值分别赋给y z；
console.log(y); // 1
console.log(z); // 2

六、模版字符串-可以实现在字符串中潜入表达式，语法：

` ${expression} `

2019-03-28/ES6新增特性理解-1

猜你喜欢

热点阅读