js数组遍历方法和筛选方法集合,数组对象相互转换

最普通的for循环

 var array = [1,2,3,4,5]
  for (var i=0;i<array.length;i++){
      console.log(array[i])
   }
   输出结果:1 2 3 4 5

**

遍历数组

**
for in
1.index索引为字符串型数字,不能直接进行几何运算
2.遍历顺序有可能不是按照实际数组的内部顺序
3.使用for in会遍历数组所有的可枚举属性,包括原型。例如上栗的原型方法method和name属性
所以for in更适合遍历对象,不要使用for in遍历数组。

Array.prototype.method=function(){
  console.log(this.length);
}
var myArray=[1,2,4,5,6,7]
myArray.name="数组"
for (var index in myArray) {
console.log(myArray[index]);
}

输出结果为:
在这里插入图片描述
for of 遍历数组就遍历数组的值,不会遍历到原型的属性和方法

Array.prototype.method=function(){
  console.log(this.length);
}
var myArray=[1,2,4,5,6,7]
myArray.name="数组"
for (var value  of myArray) {
    console.log(value);
}

输出结果:1 2 4 5 6 7

记住,for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。

遍历对象

在这里插入代码片Object.prototype.method=function(){
  console.log(this);
}
var myObject={
  a:1,
  b:2,
  c:3
}
for (var key in myObject) {
  console.log(key);
}```
输出结果:a b c method
为了过滤遍历原型上方法和属性可以在可以在循环内部判断一下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性
for (var key in myObject) {
  if(myObject.hasOwnProperty(key)){
    console.log(key);
  }
}

forEach 遍历

Array.forEach(function(value , index , array){ //value为遍历的当前元素,index为当前索引,array为正在操作的数组
  //do something
},thisArg)      //thisArg为执行回调时的this值

forEach() 方法对数组的每个元素执行一次提供的函数。总是返回undefined;

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。返回值是一个新的数组;

var array1 = [1,2,3,4,5];
 
var x = array1.forEach(function(value,index){
 
    console.log(value);   //可遍历到所有数组元素
 
    return value + 10
});
console.log(x);   //undefined    无论怎样,总返回undefined
 
var y = array1.map(function(value,index){
 
    console.log(value);   //可遍历到所有数组元素
 
    return value + 10
});
console.log(y);   //[11, 12, 13, 14, 15]   返回一个新的数组

数组过滤

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
原数组不变
不会对空数组进行检测

let arr1 = [1,2,3,4]
let arr2 = arr1.filter(item=>item===1)
console.log(arr1, 'arr1')  // [1,2,3,4] arr1
console.log(arr2, 'arr2') // [1] arr2
      
let arr3 = [{
    id:1,
    name:'aa',
    desc: 'aaaa'
 },{
    id:2,
    name:'bb'
  },{
     id:3,
     name: 'aa'
 }]
let arr4 = arr3.filter(item=>item.name === 'aa')
console.log(arr4, 'arr4') // [{id:1,name:'aa', desc:'aaaa'},{id:3,name:'aa'}] arr4

find() 对于空数组,函数是不会执行的。
不会改变原数组
返回符合测试条件的第一个数组元素值

 let arr5 = [1,2,1,3,4,5]
let arr6 = arr5.find(item=>item===1)
console.log(arr6, 'arr6')  // 1 arr6

let arr7 = arr3.find(item=>item.name === 'aa')
console.log(arr7, 'arr7') // {id:1,name:'aa',desc:'aaaa'} arr7

some 用于检测数组中的元素是否满足指定条件
会依次执行数组的每个元素-如果有一个元素满足条件(即只要有条件满足即可相当于或),则表达式返回true , 剩余的元素不会再执行检测
----------------------如果没有满足条件的元素,则返回false

let someArr1 = [1,2,3,4]
      let someArr2 = someArr1.some(item=>item === 1)
      console.log(someArr2, 'someArr1') // true  someArr1
      
      let someArr4 = [{
          id:1,
          name:'bb'
      },{
          id:4,
          name:'cc'
      },{
          id:1,
          name:'dd'
      }]
      
      let someArr3 = someArr4.find(info=>{
          return arr3.some(item=>item.id === info.id)
      })
      console.log(someArr3) // {id:1,name:'bb'}

every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)
every() 方法使用指定函数检测数组中的所有元素-如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测
------------------------------------------如果所有元素都满足条件,则返回 true

let everyArr = [1,2,3,4]
let everyArr2 = everyArr.every(item=>item===1)
console.log(everyArr2, 'everyArr2') //false "everyArr2"

对象和字符串相互转换

    var user = {
                name: "成龙",
                address: "中国香港"
            };
            //将对象转换成字符
            var str = JSON.stringify(user);
            console.log(str);
            console.log(typeof(str))
            //将字符串转换成json对象
            var zxy = JSON.parse(str);
            console.log(zxy)

对象变成数组

var arr = []
for (let i in obj) {
    let o = {};
	o[i] = obj[i];
	arr.push(o)
}
console.log(arr);
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值