es6如何遍历对象与数组

发布时间：2023-07-24 12:00:15 所属栏目：教程来源：网络

导读： 　　这篇文章主要介绍“es6如何遍历对象和数组”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“es6如何遍历对象和数组”文

　　这篇文章主要介绍“es6如何遍历对象和数组”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“es6如何遍历对象和数组”文章能帮助大家解决问题。

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

　　遍历对象

　　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);

　　})

　　es6如何遍历对象和数组

　　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

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!