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)
}
-
对比循环
- for循环
- arr.forEach()
-
for of 局限:无法获得当前遍历的位置;是ES6的功能,不是所有浏览器,所有数组和类数组对象都支持
for of和for循环一样的,可以遍历数组、类数组对象、字符串,但是不能遍历对象和关联数组- 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
参数增强
-
参数默认值
- 什么是参数默认值(default)?
ES6允许为函数定义中形参列表的最后一个参数定义默认值,如果没有传递实参,则自动调用形参的默认值
function fn(a,b,c=0){...} - 使用
定义: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处理不确定参数个数的情况
- 定义函数时
从头到尾获得所有实参值
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}
笔试题:
-
...不是打散的意思吗?这里怎么成了收集?
定义函数时,形参列表中的...是收集不确定个数的实参值的意思。调用函数时,实参值列表中的...是打散数组实参为多个实参值,分别传入的意思
-
...作为打散数组放在实参列表中时,不一定放在结尾?
是的,可以和其他单独的
近期评论