遍历对象的方法: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'];
它呢有过滤的意思,也就说它就是一个过滤器 ,那它怎么用呢
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,就会返回一个次数,最后将所有符合添加的全部选出
从左到右 依此遍历,一般用来做加减乘除用算用的
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;如果后面的参数是个字符串,那么就是会是字符串拼接、
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
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遍历对象和数组的方法有哪些的详细内容。更多信息请关注PHP中文网其他相关文章!

在ES6中,可以利用数组对象的reverse()方法来实现数组反转,该方法用于颠倒数组中元素的顺序,将最后一个元素放在第一位,而第一个元素放在最后,语法“array.reverse()”。reverse()方法会修改原始数组,如果不想修改需要配合扩展运算符“...”使用,语法“[...array].reverse()”。

步骤:1、将两个数组分别转为set类型,语法“newA=new Set(a);newB=new Set(b);”;2、利用has()和filter()求差集,语法“new Set([...newA].filter(x =>!newB.has(x)))”,差集元素会被包含在一个set集合中返回;3、利用Array.from将集合转为数组类型,语法“Array.from(集合)”。

在es6中,可用Object对象的is()方法来判断两个对象是否相等,该方法检测两个变量的值是否为同一个值,判断两个对象的引用地址是否一致,语法“Object.is(对象1,对象2)”;该方法会返回布尔值,若返回true则表示两个对象相等。

转换方法:1、利用“+”给数字拼接一个空字符,语法“数字+""”;2、使用String(),可把对象的值转换为字符串,语法“String(数字对象)”;3、用toString(),可返回数字的字符串表示,语法“数字.toString()”。

3种转换方法:1、使用join()函数把数组中的所有元素放入一个字符串,语法“数组对象.join(分隔符)”;2、使用toString()函数,语法“数组对象.toString()”或“数组对象.toString().replace(/,/gi,'分隔符')”;3、使用toLocaleString()函数,语法“数组对象.toLocaleString()”。

some和every是es6方法。some()和every()是es6 Array对象新增的方法,some()用于检测数组中是否存在符合条件的元素,只要有一个符合就会返回true;而every()用来检测数组的所有元素是否都满足指定的条件。

转换方法:1、使用“for in”语句将类数组对象转换为数组,语法“for(var i in obj){console.log(arr.push(obj[i]));}”;2、使用内置对象keys和valus,语法“Object.keys(obj)”和“Object.values(obj)”;3、使用Array对象的from()函数,语法“Array.from(obj)”。

删除方法:1、用shift()删除第一个元素,语法“arr.shift()”;2、用pop()删除最后一个元素,语法“arr.pop()”;3、用splice()根据下标删除任意元素,语法“arr.splice(开始下标,删除元素个数)”。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3 英文版
推荐:为Win版本,支持代码提示!

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

Dreamweaver Mac版
视觉化网页开发工具