es6遍歷物件和陣列的方法有哪些

遍歷物件的方法：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遍歷物件和陣列的方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！