資訊專欄INFORMATION COLUMN
摘要：實際開發中，有時需要知道對象的所有屬性，原生提供了一個方法。這些元素是來自于給定的可直接枚舉的屬性，這些屬性的順序與手動遍歷該對象屬性時的一致。在中，非對象的參數將被強制轉換為一個對象。六要在原生不支持的就環境中添加兼容的可以添加以下腳本
實際開發中，有時需要知道對象的所有屬性，原生js提供了一個方法Object.keys()。
Object.keys(obj)返回的是一個數組，該數組的所有元素都是字符串。這些元素是來自于給定的obj可直接枚舉的屬性，這些屬性的順序與手動遍歷該對象屬性時的一致。
一. 傳入數組：返回索引
var arr = ["a", "b", "c"]; console.log(Object.keys(arr)); // console: ["0", "1", "2"]
二. 傳入對象：返回屬性名
var obj = {"a":"123","b":"345"};
console.log(Object.keys(obj)); //["a","b"]
var obj1 = { 100: "a", 2: "b", 7: "c"};
console.log(Object.keys(obj1)); // console: ["2", "7", "100"]
var obj2 = Object.create(
{},
{
getFoo : {
value : function () { return this.foo }
}
}
);
obj2.foo = 1;
console.log(Object.keys(obj2)); // console: ["foo"]
三.傳入字符串：返回索引
var str = "ab1234"; console.log(Object.keys(str)); // ["0","1","2","3","4","5"]
四、構造函數：返回空數組或者屬性名
function Pasta(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
this.toString = function () {
return (this.name + ", " + this.age + ", " + this.gender);
}
}
console.log(Object.keys(Pasta)); //console: []
var spaghetti = new Pasta("Tom", 20, "male");
console.log(Object.keys(spaghetti)); //console: ["name", "age", "gender", "toString"]
五、注意事項
在ES5里，如果此方法的參數不是對象（而是一個原始值），那么它會拋出 TypeError。在ES6中，非對象的參數將被強制轉換為一個對象。
Object.keys("foo");
// TypeError: "foo" is not an object (ES5 code)
Object.keys("foo");
// ["0", "1", "2"] (ES2015 code)
六、要在原生不支持的就環境中添加兼容的Object.keys(),可以添加以下腳本：
if (!Object.keys) {
Object.keys = (function () {
var hasOwnProperty = Object.prototype.hasOwnProperty,
hasDontEnumBug = !({toString: null}).propertyIsEnumerable("toString"),
dontEnums = [
"toString",
"toLocaleString",
"valueOf",
"hasOwnProperty",
"isPrototypeOf",
"propertyIsEnumerable",
"constructor"
],
dontEnumsLength = dontEnums.length;
return function (obj) {
if (typeof obj !== "object" && typeof obj !== "function" || obj === null) throw new TypeError("Object.keys called on non-object");
var result = [];
for (var prop in obj) {
if (hasOwnProperty.call(obj, prop)) result.push(prop);
}
if (hasDontEnumBug) {
for (var i=0; i < dontEnumsLength; i++) {
if (hasOwnProperty.call(obj, dontEnums[i])) result.push(dontEnums[i]);
}
}
return result;
}
})()
};
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96092.html
摘要：木易楊注意原始類型被包裝為對象木易楊原始類型會被包裝，和會被忽略。木易楊原因在于時，其屬性描述符為不可寫，即。木易楊解決方法也很簡單，使用我們在進階期中介紹的就可以了，使用如下。 引言 上篇文章介紹了賦值、淺拷貝和深拷貝，其中介紹了很多賦值和淺拷貝的相關知識以及兩者區別，限于篇幅只介紹了一種常用深拷貝方案。 本篇文章會先介紹淺拷貝 Object.assign 的實現原理，然后帶你手動實...
摘要：基本概念方法接收一個函數作為累加器，數組中的每個值從左到右開始縮減，最終為一個值。例進階應用使用方法可以完成多維度的數據疊加。在該函數內部，則執行多維的疊加工作。參考的內建函數數組方法的高級技巧 基本概念 reduce() 方法接收一個函數作為累加器（accumulator），數組中的每個值（從左到右）開始縮減，最終為一個值。 reduce 為數組中的每一個元素依次執行回調函數，不包括...
摘要：對象詳解對象深度剖析，深度理解對象這算是醞釀很久的一篇文章了。用空構造函數設置類名每個對象都共享相同屬性每個對象共享一個方法版本，省內存。 js對象詳解(JavaScript對象深度剖析，深度理解js對象) 這算是醞釀很久的一篇文章了。 JavaScript作為一個基于對象(沒有類的概念)的語言，從入門到精通到放棄一直會被對象這個問題圍繞。 平時發的文章基本都是開發中遇到的問題和對...
摘要：可以用來處理數組，但是會把數組視為對象。返回指定對象的原型內部屬性的值，即，而非對象的。判斷一個對象是否存在于另一個對象的原型鏈上。該方法返回被凍結的對象。密封一個對象會讓這個對象變的不能添加新屬性，且所有已有屬性會變的不可配置。 showImg(https://segmentfault.com/img/bVboKpP?w=796&h=398); Object.assign(targe...
摘要：在學習過程中，為加上了中文的注釋，希望可以對其他想學習源碼的小伙伴有所幫助。數據綁定原理前面已經講過數據綁定的原理了，現在從源碼來看一下數據綁定在中是如何實現的。 寫在前面 因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js源碼，并做了總結與輸出。文章的原地址：https://github.com/answershuto/le...
閱讀 2696·2023-04-25 21:26
閱讀 1514·2021-11-25 09:43
閱讀 1949·2019-08-30 15:52
閱讀 932·2019-08-30 14:05
閱讀 2614·2019-08-29 16:10
閱讀 414·2019-08-29 13:48
閱讀 1860·2019-08-29 12:47
閱讀 1299·2019-08-23 18:04
