PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > ES6对象数组函数的新特性总结及演示

ES6对象数组函数的新特性总结及演示

Jason Pu?
Jason Pu? 原创
2021年01月06日 15:48:20 609浏览

一:值传递与引用传递

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则执行后面的,对于简单的条件判断,用三元表达式,要简洁干练的多

上一条: JS常用函数 下一条: ES6:JS基础知识扩展
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议