精华内容
下载资源
问答
  • js遍历数组对象的方法 数组 1.for循环 var arr=[1,2,3,4,5,6] for(var i=0;i<arr.length;i++){ //arr.length是数组的长度 console.log("arr="+arr[i]); } 2.forEach forEach()方法需要一个函数作为参数 ...

    js遍历数组和对象的方法

    数组

    1.for循环

    var arr=[1,2,3,4,5,6]
    	for(var i=0;i<arr.length;i++){        //arr.length是数组的长度
    		console.log("arr="+arr[i]);
    	}
    

    2.forEach

    • forEach()方法需要一个函数作为参数
    • 该方法没有返回值
    • 浏览器会在回调函数中传递三个参数,他们的作用分别为:
      第一个参数:就是当前正在遍历的对象
      第二个参数:就是当前正在遍历的对象的索引
      第三个参数:就是当前正在遍历的数组
    var arr=[1,2,3,4,5,6];
    		arr.forEach(function (value,index,array){
    			console.log("第一个参数="+value);
    //			console.log("第二个参数="+index);
    //			console.log("第三个参数="+array);
    		})
    

    3.map

    • map函数,遍历数组每个元素,并回调操作,需要返回值,返回值组成新的数组,原数组不变
    var arr = ['a', 'b', 'c', 'd'];
    arr.map(function(item, index, array) {
        console.log(item, index);
    })
    

    4.filter()函数

    • 返回一个新数组,数组的元素是原数组中通过测试的元素(就是回调函数返回 true 的话,对应的元素会进入新数组), 原数组不变。
    var arr=[1,"男",true,66];
    		var result=arr.filter(function (value){	
    			return typeof value === 'number';   //我们判断数据类型是否为Number,是则将其值返回
    		})
    		console.log (arr,result);
    
    

    5.some()函数

    • 遍历数组中是否有符合条件的元素,返回值为Boolean值
      这个它只要找到一个符合条件的,就返回 true。
    var arr=[1,"男",true,66];
    		var result=arr.some(function (value){	
    			return typeof value === 'number';
    		})
    		console.log (arr);
    		console.log (result);
    		
    		var arr2=[1,null,true,66];
    		var result2=arr2.some(function (value){	
    			return typeof value === 'String';
    		})
    		console.log (arr2);
    		console.log (result2);
    
    

    6.every()函数

    • 测试数组的各个元素是否通过了回调函数的测试
    • 若都通过,返回 true,否则返回 false
    • 简单的说就是如果回调函数每次返回的值都是 true 的话,则 every() 返回 true,否则为 false。
    var arr=[1,2,8,66];
    		var result=arr.every(function (value){
    			return typeof value === 'number';
    		})
    		console.log (arr);
    		console.log (result);
    		
    		var arr2=[1,"男",true,66];
    		var result2=arr2.every(function (value){	
    			return typeof value === 'number';
    		})
    		console.log (arr2);
    		console.log (result2);
    
    

    7.find()函数

    • 返回第一个通过测试的元素
    • 如果没有通过测试的元素,则会返回undefined。
    var arr=[1,2,8,66,"女","男"];
    		var result=arr.find(function (value){	
    			return typeof value === 'string';
    		})
    		console.log (arr);
    		console.log (result);
    		
    		var arr2=[1,"男",true,66,false];
    		var result2=arr2.find(function (value){
    			return typeof value === 'boolean';
    		})
    		console.log (arr2);
    		console.log (result2);
    
    

    8.findIndex()函数

    • 这个函数与上面的find()作用一样,就是它返回的值为该通过第一个元素的索引。
    var arr=[1,2,8,66,"女","男"];
    		var result=arr.findIndex(function (value){
    			return typeof value === 'string';
    		})
    		console.log (arr);
    		console.log (result);
    		
    		var arr2=[1,"男",true,66,false];
    		var result2=arr2.findIndex(function (value){
    			return typeof value === 'boolean';
    		})
    		console.log (arr2);
    		console.log (result2);
    
    

    对象

    1.for…in

    • 会遍历出对象的下标(也就是key值)
    
    for(let i in obj){
        console.log(i,obj[i]);
    }
    
    

    2.Object.keys(obj)

    • 遍历返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).
    
    Object.keys(obj).forEach(function(key){
        console.log(key,obj[key]); 
    })
    

    3.Object.getOwnPropertyNames(obj)

    • 遍历返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).
    Object.getOwnPropertyNames(obj).forEach( key => {
        console.log(key,obj[key]);
    })
    
    展开全文
  • 如何使用Ts泛型写一个通用的遍历数组对象的方法,支持异步

    使用Ts编写一个遍历数组和对象的方法

    type Obj<T = any> = { [key: string]: T }
    
    type Keys<T> = T extends (infer U)[] ? U : T[Extract<keyof T, string>]
    
    type Callback<T extends Obj> = (item: Keys<T>, index: number, source?: T) => boolean | void
    
    type AsyncCallback<T extends Obj> = (item: T extends (infer U)[] ? U : T[Extract<keyof T, string>], index: number, source?: T) => Promise<boolean> | Promise<void>
    
    const isArray = (type: unknown): type is Array<any> => type instanceof Array
    
    const isObject = (type: unknown): type is Obj => typeof type === 'object'
    
    // 同步
    export const each = <T extends Obj> (source: T, fn: Callback<T>): void => {
        if (isArray(source)) {
            for (let i = 0; i < source.length; i++) {
                if (fn(source[i], i)) return
            }
        } else if (isObject(source)) {
            let index = -1
            for (const key in source) {
                if (Reflect.has(source, key) && key !== 'constructor') {
                    if (fn(source[key], ++index)) return
                }
            }
        } else {
            fn(source, -1)
        }
    }
    
    // 异步
    export const asyncEach = async <T extends Obj> (source: T, fn: AsyncCallback<T>): Promise<void> => {
        if (isArray(source)) {
            for (let i = 0; i < source.length; i++) {
                const result = await fn(source[i], i)
                if (result) return
            }
        } else if (isObject(source)) {
            let index = -1
            for (const key in source) {
                if (Reflect.has(source, key) && key !== 'constructor') {
                    const result = await fn(source[key], ++index)
                    if (result) return
                }
            }
        } else {
            await fn(source, -1)
        }
    }
    

    使用

    const list = [1, 2, 3]
    each(list, (item, index) => {
        if (item === 2) {
            console.log(index)
            return true
        }
        console.log('111')
    })
    
    const obj: { a: number, b: string, c: { d: number } } = { a: 12, b: '123', c: { d: 1234 } }
    
    each(obj, (item, index) => {
        if (typeof item === 'object') {
            console.log(index, item.d)
            return true
        }
        console.log('222')
    })
    

    在这里插入图片描述

    展开全文
  • 1、遍历数组的方法 1.1 for(var i=0;i<arr.length;i++){} 1.2 Array.forEach()方法 var arr = ['Tony','July' ] arr.forEach(function(item,index){ console.log(index,item) }) arr.forEach(function(item,...

    1、遍历数组的方法

    1.1 for(var i=0;i<arr.length;i++){}

    1.2 Array.forEach()方法

    var arr = ['Tony','July' ]
    arr.forEach(function(item,index){
        console.log(index,item)
    })
    arr.forEach(function(item,index){
        console.log(index,item)
    })
    // 0 "Tony"
    // 1 "July"
    

    forEach无法使用break跳出循环,可以通过try…catch…扔出错误来实现跳出循环,例子如下:

    var arr = [1,3,5,7,9];
    try {
         arr.forEach(function (curItem, i) {
             if(curItem === 1) return;
             console.log(curItem)
             if (curItem === 7) {
                 throw Error();         //满足条件,跳出循环
             }
         })
     } catch (e) {  }
    

    1.3 for of 循环、for in循环
    二者区别

    • for of遍历的是数组元素值,
      for in 遍历的是数组的索引(即键名)
    • for of遍历的只是数组内的元素
      for in 遍历的不只是数组内的元素,还有其新增的原型属性和索引

    for of 遍历

    Array.prototype.method=function(){
      console.log(this.length);
    }
    var myArray=[11,21,41,51,61,71]
    myArray.name="数组";
    for (var value of myArray) {
      console.log(value);
    }
    //输出数组每项的值:11,21,41,51,61,71
    

    for in 遍历

    Array.prototype.method=function(){
      console.log(this.length);
    }
    var myArray=[11,21,41,51,61,71]
    myArray.name="数组";
    for (var value in myArray) {
      console.log(value);
    }
    // 输出数据的下标以及新增属性和方法: 0,1,2,3,4,5,method,name
    

    2、遍历对象的方法

    2.1、 for in来遍历对象的键名,同时也会遍历到原型方法和属性,可以通过hasOwnPropery方法判断某属性是否是该对象的实例属性

    Object.prototype.method=function(){
      console.log(this);
    }
    var myObject={
      a:1,
      b:2,
      c:3
    }
    for (var key in myObject) {
      if(myObject.hasOwnProperty(key)){    // hasOwnProperty() 可以把该对象的原型方法和属性过滤掉,即把method过滤掉
        console.log(key);
      }
    }
    

    在这里插入图片描述

    2.2、Object.keys(对象),返回对象的key所组成的数组,再将数组再遍历

    var myObject={
      a:1,
      b:2,
      c:3
    }
    Object.keys(myObject).forEach((item,index)=>{
          console.log(myObject[item]);
    })
    

    2.2、Object.values(对象),返回对象的value所组成的数组,再将数组再遍历
    注意: Obejct.values() 不支持IE

    var myObject={
      a:1,
      b:2,
      c:3
    }
    Object.keys(myObject).forEach((item,index)=>{
          console.log(item);
    })
    

    3、在Javascript中什么是伪数组?如何将伪数组转化为标准数组?

    • 伪数组(类数组)是什么
      1、有 length 属性,而且也是数值下标的对象。
      2、不具备 Array.prototype上的方法,但仍可以用遍历数组的方法来遍历它们的数组,
      这类数组,称为伪数组。

    • 伪数组有哪些

    1. 函数的arguments参数
    2. 像调用getElementsByTagName、document.childNodes之类的,它们都返回NodeList对象
    • 如何将伪数组转化为真正的数组
      • 方法一、使用Array.from(伪数组)方法
        Array.from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。
        真正数组 = Array.from(伪数组)

        var domP = document.getElementsByTagName('p');
        console.log(Array.from(domP))
        

        方法二、使用 ... 展开运算符(ES6+)

        var domP = document.getElementsByTagName('p');
        console.log([...domP])
        

        方法三、使用Array.prototype.slice.call(伪数组) 方法
        Array.prototype.slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。
        真正数组 = Array.prototype.slice.call(伪数组)
        其本质上也是循环遍历(注意:由于本质上是循环遍历,所以相应的伪类元素必须有对应的0~N下标才可使用此方法,因此,new Set()返回的值无法使用此方法)

        var domP = document.getElementsByTagName('p');
        console.log(Array.prototype.slice.call(domP))    //成功,返回去重后的数组
        
        var p = new Set([1,2,1])
        console.log( Array.prototype.slice.call(p) )      //失败,返回[]
        

        方法四、循环遍历(兼容性无敌)

    展开全文
  • arr.findIndex(item=>(item.children))

    arr.findIndex(item=>(item.children))

    展开全文
  • 一、遍历对象方法 1.for…in eg: 遍历输出的是对象自身的属性以及原型链上可枚举的属性(不含Symbol属性),原型链上的属性最后输出说明先遍历的是自身的可枚举属性,后遍历原型链上的 js var obj = { 'name': "yayaya",...
  • 本篇文章给大家带来的内容是关于js中遍历对象(5种)和遍历数组(6种)的方法总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。一、遍历对象方法1.for...in遍历输出的是对象自身的属性以及原型链...
  • 遍历数组对象属性并将生成新数组

    千次阅读 2019-10-16 14:27:53
    遍历数组对象属性并将生成新数组 sort() { let a = [] let b = this.tableData // 遍历数组对象属性并将生成新数组 b.forEach(function(item, index) { a.push({ id: item.btn_id, sort_num: 1 + index }) ...
  • 使用for循环来遍历数组因为数组的下标是连续的,数组的下标是从0开始。我们也可以得到数组的长度。格式:for(vari=0;i数组变量名[i]}注意:条件表达式的写法·i·i<=数组的长度-1 // 数组最大下标案例:求数组里面...
  • 数组对象一样都是引用数据类型,数组中的数据按照顺序排列,从0开始,把这个叫做索引,也叫做下标,把数组中的每个数据叫做元素,或者简称元 。数组的新建方式有字面量创建和构造函数创建两种方法字面量创建: var...
  • 遍历对象返回的是一个包含对象自身可枚举属性的数组(不含Symbol属性).3.Objcet.getOwnPropertyNames() 输出对象自身的可枚举和不可枚举属性的数组,不输出原型链上的属性 4.Reflect.ownKeys() 返回对象自身的所有...
  • arr.some(item=>(‘children’ in item))
  • 遍历数组 1、forEach方法 用来调用数组的每个元素,将元素传给回调函数。 不会返回新数组; 无法中途跳出循环,return或break无效; 会跳过数组的空位; 不会改变原始数组。 var arr = [0, ,4,6,8]; var sum = 0; ...
  • json数据返回的数组形式的,怎么遍历forEach处理:[code] let commonProblemList = that.data.commonProblemList; //wxml里的对应的遍历的自定义的数组名,wx:for那个common.myRequest({url: 'queryNormalIssueTag',...
  • 遍历数组的方法 普通的for循环 let arr = [1,2,3,4]; for(let i = 1; i < arr.length; i++){ console.log( i ); console.log( arr[i]); } for … in遍历数组的键名或者数组的下标 存在的问题: 1)在某些...
  • js遍历数组、字符串、对象的方法

    千次阅读 2018-05-05 18:31:11
    后端返回来的数据常常需要我们去遍历获取每一个值,或者对其进行相应的处理。...1.遍历数组1.for循环遍历arrlet arr = [0,1,2,3] for(let j=0;j&lt;arr.length;j++){ ++arr[j] } //结果 arr = [1,2,3,...
  • 1、给对象添加属性:使用 object.prop 或object['prop'] 给对象添加属性 let obj={}; obj.name="zhangsan"; obj["age"]=23; obj["class"]="语文"; console.log...
  • 数组对象 var arr = ["value1","value2","value3"]; var obj = { aa:"value1", bb:"value2"...//for in 遍历数组 for(var i;i&lt;arr.l
  • 数组实际上就是来源对象,脱胎于对象,继承于对象 数组的创建: var arr=[1,2,3,4,5,6]; var arr1=new Array(6); //这个数字就是数组的长度,没有元素 var arr=new Array(“a”); //这是数组只有一个元素a, var arr=...
  • 数组遍历 for --使用变量将数组长度缓存起来,在数组较长时性能优化效果明显 for(var i=0,len=arr.length;i<len;i++){ console.log("元素:"+arr[i]); } forEach --ES5语法,对数组的每个元素执行一次...
  • http://asi12.iteye.com/blog/808147 转载于:https://my.oschina.net/meSpace/blog/72414
  • 数组字转符串拼接成逗号去掉最后的逗号 var arr=[2,3,4,5] var str = ""; for (var i = 0; i < arr.length; i++) { str += arr[i]+ ","; } //去掉最后一个逗号(如果不需要去掉,就不用写) if (str.length...
  • 学习 axios 遍历数组

    2020-09-18 15:20:28
    2,遍历 3,父子组件之间的通讯 我的目录结构是这样子的,接下的代码里我只写重要的一些 封装axios 1,安装axios npm install axios 2在需要封装的js文件中导入 imort axios from 'axios 3,开始封装 export function...
  • 近一段时间,因为项目原因,会经常在前端对数组进行遍历、处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑。前端时间在ediary中总结了js原生自带的常用的对数组遍历...
  • ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等,只不过他们的返回结果不一样。但是使用foreach遍历数组的话,使用break不能中断循环,使用return也不能返回...
  • 1. for...of(for of遍历的只是数组内的元素,而不包括数组的原型属性method和索引name) Array.prototype.method=function(){  console.log(this.length); } var myArray=[1,2,4,5,6,7] myArray.name="数组"; for...
  • 本文实例讲述了JavaScript遍历数组的三种方法map、forEach与filter。分享给大家供大家参考,具体如下: 前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历、处理,JS自带的遍历方法有很多种,往往不加留意...
  • 我有一个对象数组,每个对象都有一个标题,内容和contentHTML.我想映射这个数组并创建一个新对象.新对象将获取title属性的值,并将其用作每个content和contentHTML属性的父属性.下面的代码似乎只是获取数组中的最后一个...
  • 本文实例讲述了JS中数组与对象的遍历方法。分享给大家供大家参考,具体如下: ...3、map函数,遍历数组每个元素,并回调操作,需要返回值,返回值组成新数组,原数组不变; var newarr=arr.map(function(i){ re

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 126,252
精华内容 50,500
关键字:

遍历数组组成对象