這篇文章主要介紹“es6如何遍歷對(duì)象和數(shù)組”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“es6如何遍歷對(duì)象和數(shù)組”文章能幫助大家解決問(wèn)題。

成都創(chuàng)新互聯(lián)公司專注于吉陽(yáng)網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供吉陽(yáng)營(yíng)銷型網(wǎng)站建設(shè)，吉陽(yáng)網(wǎng)站制作、吉陽(yáng)網(wǎng)頁(yè)設(shè)計(jì)、吉陽(yáng)網(wǎng)站官網(wǎng)定制、微信小程序定制開(kāi)發(fā)服務(wù)，打造吉陽(yáng)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供吉陽(yáng)網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

遍歷對(duì)象的方法：1、“for in”語(yǔ)句，可循環(huán)遍歷對(duì)象自身的和繼承的可枚舉屬性；2、Object.keys()和Object.values()；3、Object.getOwnPropertyNames()。遍歷數(shù)組的方法：1、forEach()，可為數(shù)組中的每個(gè)元素調(diào)用一個(gè)函數(shù)；2、map()，對(duì)數(shù)組的每個(gè)元素調(diào)用指定的回調(diào)函數(shù)；3、filter()；4、some()等等。

遍歷對(duì)象

1、for (let k in obj) {}

循環(huán)遍歷對(duì)象自身的和繼承的可枚舉屬性 (循環(huán)遍歷對(duì)象自身的和繼承的可枚舉屬性(不含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)

返回一個(gè)遍歷對(duì)象屬性或者屬性值的數(shù)組(不含Symbol屬性)。

• Object.keys() 方法會(huì)返回一個(gè)由一個(gè)給定對(duì)象的自身可枚舉屬性組成的數(shù)組，數(shù)組中屬性名的排列順序和正常循環(huán)遍歷該對(duì)象時(shí)返回的順序一致。

• Object.values() 方法返回一個(gè)給定對(duì)象自身的所有可枚舉屬性值的數(shù)組，值的順序與使用 for...in 循環(huán)的順序相同（區(qū)別在于 for-in 循環(huán)枚舉原型鏈中的屬性）。

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)

返回一個(gè)遍歷對(duì)象屬性或者屬性值的數(shù)組(不含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

遍歷數(shù)組

1、arr.forEach

注意，參數(shù)是一個(gè)匿名函數(shù)，且第一個(gè)參數(shù)是數(shù)組成員的value,第二個(gè)是他們的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是每一個(gè)數(shù)組成員的index值。

3、for(let k of arr){}

k是每一個(gè)數(shù)組成員的value值。

不僅支持?jǐn)?shù)組，還支持大多數(shù)類數(shù)組對(duì)象(偽數(shù)組)，例如DOM NodeList對(duì)象.

也支持字符串遍歷，它將字符串視為一系列的Unicode字符來(lái)進(jìn)行遍歷.

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

4、map()：

map 是表示映射的，也就是一一對(duì)應(yīng)，遍歷完成之后會(huì)返回一個(gè)新的數(shù)組，但是不會(huì)修改原來(lái)的數(shù)組

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

它呢有過(guò)濾的意思，也就說(shuō)它就是一個(gè)過(guò)濾器 ，那它怎么用呢

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

//filter 它將是遍歷每一個(gè)元素，用每一個(gè)元素去匹配，如果返回true，就會(huì)返回一個(gè)次數(shù)，最后將所有符合添加的全部選出

6、reduce()

從左到右 依此遍歷，一般用來(lái)做加減乘除用算用的

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 其實(shí)相當(dāng)于  return first+=second； 也就是說(shuō)每次的first 是上一次的和
    //2、就是function{}后面的參數(shù)，如果 有值 那么第一次加載的時(shí)候 first  = 0； second = 1；
    如果沒(méi)有值 ， first = 1 ， second = 2；如果后面的參數(shù)是個(gè)字符串，那么就是會(huì)是字符串拼接、

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

//注意：數(shù)組中每一個(gè)元素在callback上都被返回true時(shí)就返回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

//注意：只要數(shù)組中有一項(xiàng)在callback上被返回true，就返回true

關(guān)于“es6如何遍歷對(duì)象和數(shù)組”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。