Blogger Information
Blog 37
fans 1
comment 0
visits 32628
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
ES6对象数组函数的新特性总结及演示
Jason Pu?
Original
643 people have browsed it

一:值传递与引用传递

1.赋值
1.1值传递:原始类型,string,number,bool
例如:

  1. let num1 = 10;
  2. let num2 = num1;
  3. // 此时num1和num2都是10
  4. console.log(num1,num2);//10 10
  5. num1 = 20;//更新num1
  6. console.log(num2);//此时num1的值依然是10
  7. // 说明原始类型是值传递,只传值不传地址

1.2引用传递:引用类型,object,array,引用类型是引用传递,例如:

  1. let arr1 = [1,2,3,4,5];
  2. let arr2 = arr1;
  3. arr2[0]=10;//修改arr2的第一个属性,arr1的第一个也会被同步更新
  4. console.log(arr1[0]);//10

2.传参
传参时无论什么类型,都是值传递,参数中对参数的更新并不会影响到入参
例如:

  1. const func1=a=>a = 20;
  2. let a = 10;
  3. func1(a);
  4. console.log(func1(a));//20
  5. console.log(a);//10

二:数组与对象解构的常用方法与函数传参

解构赋值, 可以将属性/值从对象/数组中取出并赋值给其他变量,要求两边类型一致,如果是解构一个对象,外面需要加上大括号,以视一个代码块
1.数组解构:

  1. let arr1 = [1,2,3];
  2. let [a,b,c]=arr1;
  3. console.log(a,b,c);//123

也可以给变量添加默认值:

  1. let [d,e,f,g=10] = arr1;
  2. console.log(d,e,f,g);//1 2 3 10

也可以把数组中的几个值打包成数组赋值给一个变量:

  1. let [h,i,...j]=[1,2,3,4,5,6,7];
  2. console.log(j);//[ 3, 4, 5, 6, 7 ]

2.对象解构
对象解构要求属性名与变量名必须一一对应,顺序不管

  1. ({age,name}={name:"Jasper",age:18});
  2. console.log(age,name);//18 Jasper

3.参数解构
1.数组传参
例如:

  1. let mult = ([num1,num2])=>num1*num2;
  2. console.log(mult([12,5]));//60

对象传参:

  1. let userInfo = ({uName,uAge})=>[uName,uAge];
  2. console.log(userInfo({uName:'Jasper',uAge:18}));//Array [ "Jasper", 18 ]

三. call,apply,bind的区别与联系

相同点

1,call,apply,bind都是Fuction.prototype的方法,所有的function都具有的方法。
2,并且都是可以改变函数内部this指向的方法

不同点:

1.call和apply都是在调用之后立即执行,而bind调用后需要再调用一次
2.apply的第二个参数必须是数组

用代码进行演示:

  1. let a = {
  2. name:'Jasper',
  3. age:18
  4. };
  5. let b = {
  6. name:"Peter",
  7. age:28
  8. };
  9. function infoA(){
  10. console.log(`姓名:${this.name}年龄${this.age}`);
  11. };
  12. function infoB(name,age){
  13. this.name = name;
  14. this.age = age;
  15. console.log(`姓名:${this.name}年龄${this.age}`)
  16. }
  17. //bind()只返回一个函数声明,不会立即执行
  18. infoA.bind(a)();//把this指向了对象a,姓名:Jasper年龄18
  19. // call()会立即执行:
  20. infoA.call(b);//姓名:Peter年龄28
  21. // apply()的不同之处在于,第二个参数是一个数组:例如:
  22. infoB.apply(a,["Andy",19]);//姓名:Andy年龄19

四:访问器属性的原理与实现过程

在js中方法也是以object的形式存在,可以以属性的方式来进行抽象,js的属性提供了两类属性get/set,get是一种获得属性值的方法,set是一种设置属性值的方法,我们可以将方法伪造成一个属性
例如:

  1. let info = {
  2. data:[
  3. {name:"Lee",income:3000},
  4. {name:"Zhang",income:3800},
  5. {name:"Luo",income:5000}
  6. ],
  7. // get方法可以获取值
  8. get totalIncome(){
  9. let total=0;
  10. for(let i=0;i<this.data.length;i++){
  11. total+=this.data[i].income;
  12. }
  13. return total;
  14. },
  15. //set方法可以改变值
  16. set changeIncom(income){
  17. this.data[0].income=income;
  18. }
  19. };
  20. console.log(info.totalIncome);//11800
  21. // set是一种设置属性值的方法,所以改变值的时候要用=而不是()
  22. info.changeIncom=3900;
  23. console.log(info.data[0].income);//3900

五:多分支与switch转换以及三元表达式的运用场景

1.多分支:if(){}else if(){}:在判断多个区间的时候使用

2.switch case适合用来判断精确的值,具有执行效率更高的优点

3.三元表达式:表达式 (expr1) ? (expr2) : (expr3),判断是true则执行?后面的,是false则执行后面的,对于简单的条件判断,用三元表达式,要简洁干练的多

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post