51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

javaScript循环分析

map(数组方法) {#map(%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95)}

总结 {#%E6%80%BB%E7%BB%93}

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

实例 {#%E5%AE%9E%E4%BE%8B}

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

set(Es6新增) {#set(es6%E6%96%B0%E5%A2%9E)}

总结 {#%E6%80%BB%E7%BB%93-1}

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

实例 {#%E5%AE%9E%E4%BE%8B-1}

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(数组方法) {#foreach(%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95)}

总结 {#%E6%80%BB%E7%BB%93-2}

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

实例 {#%E5%AE%9E%E4%BE%8B-2}

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

for in(适用于对象) {#for-in(%E9%80%82%E7%94%A8%E4%BA%8E%E5%AF%B9%E8%B1%A1)}

用于循环数组和对象属性

总结: {#%E6%80%BB%E7%BB%93%EF%BC%9A}

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

实例: {#%E5%AE%9E%E4%BE%8B%EF%BC%9A}

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新增) {#for-of-(es6%E6%96%B0%E5%A2%9E)}

总结: {#%E6%80%BB%E7%BB%93%3A}

  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()搭配使用。

实例 {#%E5%AE%9E%E4%BE%8B-3}

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循环 {#for%E5%BE%AA%E7%8E%AF}

总结 {#%E6%80%BB%E7%BB%93-3}

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

实例 {#%E5%AE%9E%E4%BE%8B-4}

var size=[1,2,3,4,5,6,7] //申明一个数组
for(var i=0,len=size.length; i<len; i++){ 
    document.write(size[i] + " ");//数组元素
}
赞(3)
未经允许不得转载:工具盒子 » javaScript循环分析