2023es6遍历对象和数组的方法有哪些

 所属分类:web前端开发

 浏览:262次-  评论: 0次-  更新时间:2023-03-01
描述:更多教程资料进入php教程获得。 遍历对象的方法:1、“for in”语句,可循环遍历对象自身的和继承的可枚举属性;2、Object.keys()和Object...
更多教程资料进入php教程获得。

遍历对象的方法:1、“for in”语句,可循环遍历对象自身的和继承的可枚举属性;2、Object.keys()和Object.values();3、Object.getOwnPropertyNames()。遍历数组的方法:1、forEach(),可为数组中的每个元素调用一个函数;2、map(),对数组的每个元素调用指定的回调函数;3、filter();4、some()等等。

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

在工作中经常会用到数组或者对象的遍历,for的一大痛点就是额外定义了变量,for循环一多,变量又容易冲突。ES6给出了新的遍历的方法,我们一起来看一下

遍历对象

1、for (let k in obj) {}

循环遍历对象自身的和继承的可枚举属性 (循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)

let obj = {'0':'a','1':'b','2':'c'}
for (let k in obj) {
	console.log(k+':'+obj[k])
}
//0:a
//1:b
//2:c
登录后复制

2、Object.keys(obj)|| Object.values(obj)

返回一个遍历对象属性或者属性值的数组(不含Symbol属性)。

  • Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。

  • Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用 for...in 循环的顺序相同(区别在于 for-in 循环枚举原型链中的属性)。

let obj = {'0':'a','1':'b','2':'c'}
console.log(Object.keys(obj))
//["0","1","2"]
console.log(Object.values(obj))
//["a","b","c"]
登录后复制

3、Object.getOwnPropertyNames(obj)

返回一个遍历对象属性或者属性值的数组(不含Symbol属性,自身属性——不含原型上的属性)。

let obj = {'0':'a','1':'b','2':'c'};

Object.getOwnPropertyNames(obj).forEach(function(key){
    console.log(key,obj[key]);
});
// 0 a
// 1 b
// 2 c
登录后复制

遍历数组

1、arr.forEach

注意,参数是一个匿名函数,且第一个参数是数组成员的value,第二个是他们的index。

var name = ['张三', '李四', '王五'];
['张三', '李四', '王五'].forEach((v,l,k) => {
	console.log(v);
	console.log(l);
	console.log(k);
})
登录后复制

2、for(let k in arr){}

let arr = ['a','b','c','d']
for(let k in arr){
	console.log(k,arr[k])
}
// 0 a
// 1 b
// 2 c
// 3 d
登录后复制

k是每一个数组成员的index值。

3、for(let k of arr){}

k是每一个数组成员的value值。

不仅支持数组,还支持大多数类数组对象(伪数组),例如DOM NodeList对象.

也支持字符串遍历,它将字符串视为一系列的Unicode字符来进行遍历.

let arr = ['a','b','c','d']
for(let k of arr){
	console.log(k)
}
//  a
//  b
//  c
//  d
登录后复制

4、map():

map 是表示映射的,也就是一一对应,遍历完成之后会返回一个新的数组,但是不会修改原来的数组

var a1 = ['a', 'b', 'c'];
var a2 = a1.map(function(item,key,ary) {
     return item.toUpperCase();
});
console.log(a1);// ['a','b','c'];
console.log(a2); //['A','B','C'];
登录后复制

5、filter()

它呢有过滤的意思,也就说它就是一个过滤器 ,那它怎么用呢

var a1 = [1,2,3,4,5,6];
var a2 = a1.filter(function(item) { 
     return item <= 3; 
});
 console.log(a2); // [1,2,3];

//filter 它将是遍历每一个元素,用每一个元素去匹配,如果返回true,就会返回一个次数,最后将所有符合添加的全部选出
登录后复制

6、reduce()

从左到右 依此遍历,一般用来做加减乘除用算用的

var a1 = [1, 2, 3];
var total = a1.reduce(function(first, second) { 
     return first + second; 
},0);
console.log(total) // Prints 6

//注意 1、就是 return first+second 其实相当于  return first+=second; 也就是说每次的first 是上一次的和
    //2、就是function{}后面的参数,如果 有值 那么第一次加载的时候 first  = 0; second = 1;
    如果没有值 , first = 1 , second = 2;如果后面的参数是个字符串,那么就是会是字符串拼接、
登录后复制

7、every(且)

function isNumber(value){ 
    return typeof value == 'number';
}
var a1 = [1, 2, 3];
console.log(a1.every(isNumber)); // logs true
var a2 = [1, '2', 3];
console.log(a2.every(isNumber)); // logs false

//注意:数组中每一个元素在callback上都被返回true时就返回true,否则为false
登录后复制

8、some (或)

function isNumber(value){ 
return typeof value == 'number';
}
var a1 = [1, 2, 3];
console.log(a1.some(isNumber)); // logs true
var a2 = [1, '2', 3];
console.log(a2.some(isNumber)); // logs true
var a3 = ['1', '2', '3'];
console.log(a3.some(isNumber)); // logs false

//注意:只要数组中有一项在callback上被返回true,就返回true
登录后复制

【相关推荐:javascript视频教程、web前端】

以上就是es6遍历对象和数组的方法有哪些的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: es6数组,ES6,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!