js常见的循环方式以及数组和json字符串之间的转化

简介: 针对对象来说 ,任何对象都继承了Object对象,或者其它对象,继承的类的属性是默认不可遍历的, for... in循环遍历的时候会跳过,但是这个属性是可以更改为可以遍历的,那么就会造成遍历到不属于自身的属性。

常见的循环方式


一、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)


如下图所示


jRspm0AKIr1o0qS7VhRxdw0EjTmb9GsXhYLNgM9f.png

相关文章
|
16小时前
|
存储 JavaScript 前端开发
JavaScript中的数组是核心数据结构,用于存储和操作序列数据
【6月更文挑战第22天】JavaScript中的数组是核心数据结构,用于存储和操作序列数据。创建数组可以使用字面量`[]`或`new Array()`。访问元素通过索引,如`myArray[0]`,修改同样如此。常见方法包括:`push()`添加元素至末尾,`pop()`移除末尾元素,`shift()`移除首元素,`unshift()`添加到开头,`join()`连接为字符串,`slice()`提取子数组,`splice()`进行删除、替换,`indexOf()`查找元素位置,`sort()`排序数组。还有其他如`reverse()`、`concat()`等方法。
7 2
|
1天前
|
JavaScript 前端开发
JS如何判断一个对象是否为数组?
JS如何判断一个对象是否为数组?
7 0
|
1天前
|
XML JSON 前端开发
第十一篇JavaScript JSON与AJAX
第十一篇JavaScript JSON与AJAX
6 0
|
1天前
|
JavaScript 前端开发
记录Javascript数组类练习
记录Javascript数组类练习
8 1
|
4天前
|
JavaScript 前端开发
JS如何删除一个数组中的元素
JS如何删除一个数组中的元素
|
4天前
|
JavaScript 前端开发 索引
JS如何清空一组数组
JS如何清空一组数组
|
4天前
|
JavaScript 前端开发
js数组包对象格式怎么根据不同的键值使用sort排序一组数组
js数组包对象格式怎么根据不同的键值使用sort排序一组数组
|
4天前
|
存储 JSON JavaScript
【chat-gpt问答记录】python将数据存为json格式和yaml格式
【chat-gpt问答记录】python将数据存为json格式和yaml格式
16 1
|
6天前
|
JSON 关系型数据库 MySQL
实时计算 Flink版产品使用问题之在使用CDAS语法同步MySQL数据到Hologres时,如果开启了字段类型宽容模式,MySQL中的JSON类型会被转换为什么
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
|
8天前
|
JSON API 数据格式
如何用 Python 的 requests 库发送 JSON 数据的 POST 请求
使用 requests 库发送 JSON 数据的 POST 请求是一个非常简单且实用的操作。通过将目标 URL 和 JSON 数据传递给 requests.post 方法,你可以轻松发送请求并处理响应。本篇文章介绍了从安装 requests 库,到发送 JSON 数据的 POST 请求,再到处理响应的整个流程。希望这篇文章能帮助你更好地理解并应用这个强大的 HTTP 请求库。