侧边栏壁纸
博主头像
@小佑前端

学而不厌 不耻下问

  • 累计撰写 61 篇文章
  • 累计创建 81 个标签
  • 累计收到 11 条评论

目 录CONTENT

文章目录

javaScript循环分析

@小佑前端
2022-07-04 / 1 评论 / 0 点赞 / 539 阅读 / 895 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-08-17,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

map(数组方法)

总结

  1. map不改变原数组,返回新数组
  2. 抛出异常的方式来终止循环,如果有终止循环的需求就用for或者some
  3. 使用return 返回结果,外围用变量接受

实例

let newArr = arr.map((item,index) => {
	return String(item).length
    conso.log(item.length)
})

set(Es6新增)

总结

  1. Set和Map类似,也是一组key的集合,但不存储value。
  2. 由于key不能重复,所以,在Set中,没有重复的key。

实例

var s = new Set([2, 3, 3, '3', 4]);
    console.log(s);//Set {2, 3,'3', 4,}
    //添加一个key
    s.add(5);
    //重复元素在Set中自动被过滤
    s.add(5);
    console.log(s);//Set {2, 3, 4,5}
    //删除一个key
    s.delete(2);
    //Set{3, "3", 4, 5}//注意数字3和字符串'3'是不同的元素。
    console.log(s);

forEach(数组方法)

总结

  1. 简洁的方式,效率和for循环相同不用关心集合下标问题,效率提升
  2. 未有返回值
  3. 不能使用break终端循环返回到外层函数
  4. 空数组是不会执行回调函数
  5. for可以用continue 跳过循环中的迭代,forEach用containue会报错
  6. forEach 需要return跳过循环中的一个迭代,跳过之后会进入到下一个迭代

实例

let item = []
let newArr = arr.forEach((i,index) => {
		item.push(i)
})

for in(适用于对象)

用于循环数组和对象属性

总结:

  1. 可以便利数组的键名
  2. 遍历对象简洁方便

实例:

let obj ={name:"小白",age:28,city:"北京"}
let text=""
   for (let i in person){
      text+=person[i]
   }
   
<--------------------------------------------->
    
let arry=[1,2,3,4,5]
   for (let i in arry){
        console.log(arry[i])
    }

for of (Es6新增)

总结:

  1. 无法遍历普通对象是因为for of 遍历的都需要一个迭代器iterator。数组字,符串,集合之所以可以被for of 直接遍历是因为它们都内置了迭代器iterator,Object对象则没有内置迭代器iterator。 (推荐数组的时候用for of)
  2. 弥补了for in 和 forEach的短板,可以使用break, continue和return, 不仅支持数组的遍历,还可以遍历类似数组的对象
  3. for of循环出的是Key;
  4. 如果使用for of遍历对象需要通过和Object.keys()和 Object/Object.values()搭配使用。

实例

let arr = [9,8,7,6,5,4,3,2,1]
for(let value of size){ 
    document.write(value==7?value + "--":value + " ");//数组元素
}

--------------------
//如果我们按对象所拥有的属性进行循环,可使用内置的Object.keys()和方法
var obj = { name: 'zhangshan', age: 23, color: 'red' }
for (var item of Object.keys(obj)) {
        console.log(item)
}
    var obj = {
        name: '张三',
        gender: '男',
        age: 18
    }
 
    //通过Object()
    for (const obj of Object(map)) {
        console.log(obj)//['name', '张三'],['gender', '男'],['age', 18]
    }
    
    //通过Object.keys()
    for (const key of Object.values(obj)) {
        console.log(key)//name,gender,age
    }
 
    //通过Object.values()
    for (const value of Object.values(obj)) {
        console.log(value)//张三,男,18
    }

for循环

总结

  1. 定义了数组后对数组进行赋值,中间如有某些下标未被使用(即未被赋值)
  2. 在遍历的时候,采用一般的 for 循环和 for…in 循环得到的结果不同
  3. for…in 循环会自动跳过那些没被赋值的元素,而 for 循环则不会,它会显示出 undefined。

实例

var size=[1,2,3,4,5,6,7] //申明一个数组
for(var i=0,len=size.length; i<len; i++){ 
    document.write(size[i] + " ");//数组元素
}
0

评论区