menu 山水有轻音
more_vert
js循环的几种方式以及数组和字符之间的转化
2020-09-02 | js知识 | 暂无评论 | 36 次阅读 | 754字

常见的循环方式

一、for循环

for循环应该是最普遍的,使用最多的一种循环遍历方法了,所以也导致其可读性和易维护性比较差,但是它可以及时break出循环。

let arr = [1,2,3,4,5,6,7]
for(let i = 0;i<arr.length;i++){
  console.log(arr[i])
}
// 1,2,3,4,5,6,7

二、for...in

for...in循环主要针对于对象的遍历,当想要获取对象的对应键值时,使用for...in还是比较方便的

*针对对象来说 ,任何对象都继承了Object对象,或者其它对象,继承的类的属性是默认不可遍历的,
for... in循环遍历的时候会跳过,但是这个属性是可以更改为可以遍历的,那么就会造成遍历到不属于自身的属性。
//结合使用hasOwnProperty方法,在循环内部判断一下,某个属性是否为对象自身的属性。否则就可以产生遍历失真的情况。*

let obj = {name: 'xiaohua', sex: 'male', age: '28'}
for(let key in obj){
    if(obj.hasOwnProperty(key)){
        console.log(obj[key])
    }
}

三、map循环

map方法将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。循环中途是无法停止的,总是会将所有成员遍历完

let arr = [1,2,3,4,5]
let arr2 = arr.map((n)=>{
      return n+1
})
console.log(arr2) // [2,3,4,5,6]
console.log(arr) // [1,2,3,4,5]

map方法接受一个函数作为参数。该函数调用时,map方法向它传入三个参数:当前成员、当前位置和数组本身。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.map((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

四、forEach循环

forEach的使用方法和map使用方法差不多,只是forEach方法不返回值,只用来操作数据,且循环中途是无法停止的,总是会将所有成员遍历完

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.forEach((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

五、filter过滤循环

filter方法用于过滤数组成员,满足条件的成员组成一个新数组返回。它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
let arr2 = arrObj.filter((item,index,arr)=>{
    return (item.name === 'xiaohua')
})
console.log(arr2)  // [{id:1,name:'xiaohua}]

ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素 (false, null, undefined, 0, NaN or an empty string):

let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""];
let arrNew = arr.filter(Boolean);
console.log(arrNew)  //  [3, 4, 5, 2, 3]
Boolean 是一个函数,它会对遍历数组中的元素,并根据元素的真假类型,对应返回 true 或 false.

六、Object.keys遍历对象的属性

Object.keys方法的参数是一个对象,返回一个数组。该数组的成员都是该对象自身的(而不是继承的)所有属性名,且只返回可枚举的属性。

let obj = {name: 'xiaohua', sex: 'male', age: '28'}
console.log(Object.keys(obj))
// ["name", "sex", "age"]
判断一个对象是否是空对象,可以用Object.keys(obj).length>0

数组和字符换转化

一、数组转化为字符串

需要将数组元素用某个字符连接成字符串,示例代码如下

var a, b;
a = new Array(0,1,2,3,4);
b = a.join("-");      //"0-1-2-3-4"

二、字符串转数组

实现方法为将字符串按某个字符切割成若干个字符串,并以数组形式返回,示例代码如下:

var s = "abc,abcd,aaa";
ss = s.split(",");// 在每个逗号(,)处进行分解  ["abc", "abcd", "aaa"]

三、实现从对象转换为 JSON 字符串,使用 JSON.stringify()

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'

四、要实现从 JSON 转换为对象,使用 JSON.parse()

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}

五、字符串转化为数组对象

let list="[{'厦门':'city'},{'中国':'country'},{'福建':'source'}]";  
    let arr=eval('('+list+')');
    console.log('json字符串',list)
    console.log('转化后的数组',eval('('+list+')'))
    arr.map((item,index)=>{
        console.log('item',item)
        console.log('对应的键名',Object.keys(item));
        console.log('对应的属性值',item[Object.keys(item)[0]])
        item[item[Object.keys(item)[0]]]= Object.keys(item)[0]
        delete [item[Object.keys(item)[0]]]
    })
    console.log('返回的数组',arr)

如下图所示

None
发表评论
暂无评论
textsms
account_circle
email
link