es6遍歷物件的方法有哪些

青灯夜游
發布: 2022-06-08 17:04:41
原創
12605 人瀏覽過

遍歷物件的6種方法:1、「for...in」語句,可循環遍歷物件本身的和繼承的可枚舉屬性;2、keys()對屬性名進行遍歷,values ()對屬性值進行遍歷;3、getOwnPropertyNames(),可傳回一個包含所有屬性的陣列等等。

es6遍歷物件的方法有哪些

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

ES6遍歷物件屬性的6種方法

#1、for...in

#循環遍歷物件本身的和繼承的可枚舉屬性(不含symbol屬性)

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
登入後複製

es6遍歷物件的方法有哪些

#2、Object.keys(obj)|| Object.values(obj )

傳回一個數組,包括物件本身的(不含繼承)所有可枚舉屬性(不含Symbol屬性)

keys()是對屬性名的遍歷、values()是屬性值的遍歷

let obj = {'0':'a','1':'b','2':'c'}
console.log(Object.keys(obj))
//["0","1","2"]
console.log(Object.values(obj))
//["a","b","c"]
登入後複製

es6遍歷物件的方法有哪些

#3、Object.getOwnPropertyNames(obj)

傳回一個陣列包含物件本身的所有屬性(不包含屬性,但包含不可列舉屬性)

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
登入後複製

es6遍歷物件的方法有哪些

4、Object .getOwnPropertySymbols(obj)

傳回一個陣列,包含物件本身的所有Symbol屬性

範例:取得物件自有的Symbol值屬性

var obj = {};
var a = Symbol("a");
var b = Symbol.for("b");

obj[a] = "localSymbol";
obj[b] = "globalSymbol";

var objectSymbols = Object.getOwnPropertySymbols(obj);

console.log(objectSymbols.length); // 2
console.log(objectSymbols)         // [Symbol(a), Symbol(b)]
console.log(objectSymbols[0])      // Symbol(a)
登入後複製

es6遍歷物件的方法有哪些

#5、Reflect.ownKeys(obj)

回傳一個陣列,包含物件本身的所有屬性,不管屬性名是Symbol或字串,也不管是否可枚舉.

const object1 = {
  property1: 42,
  property2: 13
};

const array1 = [];

console.log(Reflect.ownKeys(object1));
// expected output: Array ["property1", "property2"]

console.log(Reflect.ownKeys(array1));
// expected output: Array ["length"]
登入後複製

es6遍歷物件的方法有哪些

#6、Reflect.enumerate(obj)

#傳回一個Iterator物件,遍歷物件本身的和繼承的所有可枚舉屬性(不含Symbol屬性),與for ... in 迴圈相同.

var obj = { x: 1, y: 2 };

for (var name of Reflect.enumerate(obj)) {
  console.log(name);
}
// logs "x" and "y"
登入後複製

【相關推薦:javascript影片教學web前端

以上是es6遍歷物件的方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
es6
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板