超实用ES6学习笔记(5-10节)

326 阅读5分钟

5.函数参数默认值

函数参数默认值是在传递形参时以 a = xx 的形式设置函数参数默认值。如果a有值则使用a传递的值,否则使用xx作为a的值。

function getName(age,name = 'bob',sex = 'man'){
  console.log(age) //12
  console.log(name) //bob
  console.log(sex) //man
}
getName(12);
注意,有设置函数参数默认值的形参需要放到传入参数的最后。

6.函数剩余参数

函数剩余参数是es6用来获取函数中传入参数的集合。在es6以前获取函数传入的所有参数一般是用arguments,可以得到一个所有传入参数的伪数组。

function getName(){
  console.log(arguments) //{ '0': 12, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5 }
}
getName(12,1,2,3,4,5);

而es6提供了...xx的方式获取函数的全部参数,可以获得所有传入参数形参的数组或某几个参数之后的剩余参数数组.

function getName(first,...others){
  console.log(others) //[ 1, 2, 3, 4, 5 ]
}
getName(0,1,2,3,4,5);

注意,剩余参数必须放在在函数形参的最后,否则会报错
function getName(first,...others,last){
  console.log(others) //Rest parameter must be last formal parameter
}
getName(0,1,2,3,4,5);

7. 展开数组:

作用:循环遍历数组,将其每个元素一次传入函数中 形式:函数调用时使用...xx+数组名

//以往调用函数时将数组元素作为参数依次传入函数,我们可以用apply方法
const arr = ['111','222','333','444'];
console.log.apply(this,arr) //111 222 333 444

//es6使用展开数组的方式:
const arr = ['111','222','333','444'];
console.log(...arr)  //111 222 333 444 同样实现遍历数组依次作为参数传入函数,这样可读性高了很多

8.箭头函数

8.1使用形式: (a,b,c...) => {}

8.2箭头函数意义

箭头函数作为es6函数申明的一种方式,他与es6之前的函数申明有着几个方面的不同作用,具体体现在:

8.2.1

简化函数申明、简化返回值输写(函数体只有一行返回值时大括号可以省略)

//例如我们想把数组中》3的元素提取出来成为一个数组
//es6以前的方式:
const arr = [1,2,3,4,5,6];
const arr2 =  arr.filter(function(item){
 console.log(item+2)
 return (item > 3)
})
console.log(arr2) //[ 4, 5, 6 ]
------
//在es6中使用箭头函数可以大大简化我们的代码量
const arr = [1,2,3,4,5,6];
const arr2 =  arr.filter( (item) => item>3)
console.log(arr2)//[ 4, 5, 6 ]

8.2.2 箭头函数中this指向

在普通函数中,this一般会指向调用这个函数的对象,但是在箭头函数中,this的指向不会被箭头函数改变,而是与箭头函数外部this指向一致,即指向调用箭头函数外部其调用函数的对象。


//如下两个函数,前者会输出undefined,后者能够获取到箭头函数外部函数其调用函数doOther的对象,即 a 对象。
const a = {
  age:16,
  name:'zhangsan',
  doSth:function(){
    (function(){
      console.log(`my name is ${this.name}`) //my name is undefined
    })()
  },
  doOther:function(){
    console.log(this.name);
    (()=>{
      console.log(`my name is ${this.name}`) //my name is zhangsan
    })()
  }
}
a.doSth();
a.doOther();

9.对象字面量

es6对象字面量主要是起到2个作用:

//1.声明更简单,如果对象的属性名与其要用到的属性值刚好一致,则只需要写属性名;对象中函数申明也可以不写:function
const name = 'lisi'
const a = {

  age:16,
  name,
  getTheName:function(){
    console.log(this.name);//lisi //普通对象声明函数
  },
  getName(){
    console.log(this.name);//lisi es6对象字面量申明函数
  }
}
a.getName()

10 对象扩展方法

10.1复制一个对象

形式:Object.assign(targetObj,originObj1,originObj2...) 作用:一般常用于开辟一块新的内存地址复制一个对象,改变这个对象不会影响源对象内存地址的值。

//传统的复制对象,会把源对象本身对内存地址的指针同时复制过来,改变新的对象,源对象也会改变。
const originObj = {
  a:'111',
  b:'222',
  c:'333'
}
const copyObj1 = originObj;
copyObj1.a = '444';
console.log(copyObj1);//{ a: '444', b: '222', c: '333' }
console.log(originObj); //{ a: '444', b: '222', c: '333' }
---
//es6以前想实现修改复制对象同时不修改源对象,一般可以用JSON.Stringfy()来实现对象的深拷贝。
const originObj = {
  a:'111',
  b:'222',
  c:'333'
}
const copyObj1 = JSON.parse(JSON.stringify(originObj));
copyObj1.a = '444';
console.log(copyObj1);//{ a: '444', b: '222', c: '333' }
console.log(originObj);//{ a: '111', b: '222', c: '333' }
---
//在es6中,我们可以直接使用对象扩展方法来实现对对象的深拷贝
const originObj = {
  a:'111',
  b:'222',
  c:'333'
}
const copyObj1 = Object.assign({},originObj)
copyObj1.a = '444';
console.log(copyObj1); //{ a: '444', b: '222', c: '333' }
console.log(originObj); //{ a: '111', b: '222', c: '333' }
---

Object.assign()传入的第一个对象为目标对象,之后传入的为源对象,可以传入多个源对象,有相同属性时,后传的对象属性会覆盖先传的对象对应的那个相同的属性。
const originObj = {
  a:'111',
  b:'222',
  c:'333'
}
const originObj2= {
  a:'555',
  b:'666',
  d:'777'
}
const copyObj1 = Object.assign({},originObj,originObj2)
copyObj1.a = '444';
console.log(copyObj1); //{ a: '444', b: '666', c: '333', d: '777' }

10.2判断2个值是否相等

形式:Object.is(obj1,obj2) 作用:判断两个值是否相等,不会有==号带来的隐式转换,也不会有===中NaN不等于NaN的问题

const originObj = {
  a:'111',
  b:'222',
  c:'333'
}
const originObj2= {
  a:'111',
  b:'222',
  c:'333'
}
console.log(Object.is(originObj,originObj2))     //false
console.log(Object.is(originObj.a,originObj2.a)) //true
console.log(Object.is(true,0))                   //false
console.log(Object.is(NaN,NaN))                  //true

下一篇:“超使用ES6学习笔记(11-15节)”