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

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

關于“es6如何遍歷對象和數組”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。