2020.9.21叶梦宇

for of

var li = document.querySelectorAll("#ul>li");
    var str = "hello word";
    var arr = [2,4,5,9,3];
    var obj={
      name:"kiki",
      age:12
    }
    for(var key of arr){
        console.log(key)
    }
  • 对比循环

  1. for循环
  2. arr.forEach()
  3. for of 局限:无法获得当前遍历的位置;是ES6的功能,不是所有浏览器,所有数组和类数组对象都支持
    for of和for循环一样的,可以遍历数组、类数组对象、字符串,但是不能遍历对象和关联数组

    1. for in 只能遍历关联数组和对象,in其实不仅遍历当前对象自己的成员,且会延着原型链向父对象继续查找所有可用的成员名
  • for循环、for of、forEach三种遍历,哪种效率高?
    答:一样高。其实只有一种遍历,就是for循环。其他的都是封装的for循环而已。所以,ES5的其他遍历函数 indexOf、every、some、forEach、 map、filter 和 reduce,都没有效率的提升,因为内部都是for循环而已,只是语法简单而已

  • 是不是有了ES6,就不用ES5了?
    答:要看浏览器是否兼容ES6。如果使用框架和微信开发,基本上可以使用最新的语法。因为框架中和微信开发中都自带翻译工具(Babel),在项目打包时,会将ES6代码翻译成ES5代码,保证浏览器兼容性。如果没使用框架,使用原生或jquery开发,则尽量不要使用ES6

参数增强

  • 参数默认值

  1. 什么是参数默认值(default)?
    ES6允许为函数定义中形参列表的最后一个参数定义默认值,如果没有传递实参,则自动调用形参的默认值
    function fn(a,b,c=0){...}
  2. 使用
    定义:function 函数名(形参1,形参2,...,形参n=默认值)
    提示:如果调用函数时,没有提供最后一个实参,就自动用默认值代替
//形参默认值
    function add(a,b,c=10){
      console.log(a+b+c)
    }
    add(1,2,3)//6
    add(1,2)//13
调用函数时,如果没有传入最后一个实参值,则自动使用默认值代替

兼容性写法:

function add(a,b,c){
      //兼容性写法
      c=c||10
      //或者写  c === undefined && (c=10)
      console.log(a+b+c)
    }
    add(1,2,3)//6
    add(1,2)//13

案例

//点餐案例
    function order(zhushi,xiaochi,yinliao="可乐"){
      console.log(`您点的套餐为:
        主食:${zhushi}
        小吃:${xiaochi}
        饮料:${yinliao}
      `)
    }
    order("米饭","鸡腿")
  • 剩余参数
    专门代替arguments的语法,代替arguments处理不确定参数个数的情况

  1. 定义函数时
    从头到尾获得所有实参值
    function fun(...数组名){...}
    提示:...的意思是”收集”,把传给函数的所有实参值都收集到...后的数组中保存
//剩余参数
    var arr=[]
    function order(...arr){
      console.log(arr)
    }
    order("套餐1","套餐2","套餐3")

剩余参数可以只收集部分实参值
function 函数名(形参1,形参2,...数组名){...}
提示:...数组名 收集的是除了之前形参1和形参2对应的实参值之外的所有剩余的实参值
注意:保存剩余实参值的结构是一个纯正的数组,可用数组家全部APi

var arr=[]
    function order(taocan1,taocan2,...arr){
      arr.forEach(function(elem,i){
        console.log(elem+i)//元素值+下标
      })
    }
    order("套餐1","套餐2","套餐3","套餐4")//套餐32套餐43

案例1:使用剩余参数语法求和

var arr=[];
    function add(...arr){
      console.log(arr)
      var result = arr.reduce(function(prev,elem,i,arr){
        return elem+prev;//prev是前一个参数,elem是当前参数值
      })
      return result;
    }
    console.log(add(1,2,3,4))//10

案例2:计算员工薪资,包含姓名和基本工资(bonus),以及其他来源工资(送外卖,跑滴滴,兼职...),使用剩余参数来实现

var arr=[];
    function add(name,jibengongzi,...arr){
      var result = arr.reduce(function(prev,elem){
        return prev+elem
      })
      var sum=result+jibengongzi
      // return sum;
      console.log(`${name}的总工资是${sum}`)
      // return `${name}的总工资是${sum}`
    }
    // console.log(add("lili",2000,1,2,3,4))
    add("lili",2000,1,2,3,4)
//用for循环做
var arr=[];
    function add(name,jibengongzi,...arr){
      // var result = arr.reduce(function(prev,elem){
      //   return prev+elem
      // })
      // var sum=result+jibengongzi

      // //用for循环做
      for(var i=0;i<arr.length;i++){
        var result=result+arr[i]
      }
      var sum = result+jibengongzi;
      // return sum;
      console.log(`${name}的总工资是${sum}`)
      // return `${name}的总工资是${sum}`
    }
    // console.log(add("lili",2000,1,2,3,4))
    add("lili",2000,1,2,3,4)
    add("bibi",3000,1,2,3,4,5)
  • 打散数组
    什么是打散数组?

    将一个数组打散为多个元素值,依次传给函数的多个形参变量,代替apply

    为什么使用打散数组?

    apply()也能打散数组参数,再传给要调用的函数。但是,apply()的本职工作是修改this,然后顺便帮忙打散数组。如果今后我们只想单纯的打散数组,跟this无关时。apply()就不好用了。如果用apply()单纯打散数组,必须给定一个无意义的对象作为第一个参数
    Math.max.apply( ? ,arr)

    var arr=[4,6,2]
    console.log(Math.max.apply(null,arr))//(this指针的方向,数组)

什么时候使用打散数组?

当一个函数不支持数组参数,而给定的实参值却是放在一个数组中的时候,都要先打散数组,再使用多个值
Math.max(...arr)

...先将数组打散为单个值,再传入前边的函数。好处是,...和this无关,只是专门单纯的打散数组

使用打散数组
(要考)
函数名(...数组)

复制数组:
第一种:var arr1 = arr.slice();
第二种: var arr1=[...arr]

合并两个数组
第一种: var arr3=[].concat(arr1,arr2)
第二种: var arr3=[...arr1,...arr3]

浅克隆一个对象
var obj1 = {...obj}

合并两个对象
第一种: var obj3 = Object.assign({},obj1,obj2)
将obj1和obj2打散后,所有的属性,都放入第一个参数空对象中返回
Object.assign方法用于对象的合并,第一个参数是目标对象,后面的参数都是源对象

第二种: var obj3={...obj1,...obj2}
笔试题:

  1. ...不是打散的意思吗?这里怎么成了收集?

    定义函数时,形参列表中的...是收集不确定个数的实参值的意思。调用函数时,实参值列表中的...是打散数组实参为多个实参值,分别传入的意思

  2. ...作为打散数组放在实参列表中时,不一定放在结尾?

    是的,可以和其他单独的

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1