js中的遍曆

標籤：bsp   邏輯操作   foreach   style   user   index   rip   min   html   

對象遍曆：

首先，來理解一下對象的‘可枚舉屬性’，對象的每個屬性都有一個描述對象（Descriptor），用來控制該屬性的行為。Object.getOwnPropertyDescriptor方法可以擷取該屬性的描述對象。

var obj = {foo:123};console.log(Object.getOwnPropertyDescriptor(obj,‘foo‘));// { value: 123,//     writable: true,//     enumerable: true,//     configurable: true }

描述對象的enumerable屬性，稱為”可枚舉性“，如果該屬性為false，就表示某些操作會忽略當前屬性。

然後，寫一個測試對象objtest

Object.prototype.userProp = ‘userProp‘;Object.prototype.getUserProp = function() {    return Object.prototype.userProp;};// 定義一個對象，隱式地繼承自 Object.prototypevar objtest = {    name: ‘minna‘,    age: 21,    [Symbol(‘symbol 屬性‘)]: ‘symbolProp‘,    unEnumerable: ‘我是一個不可枚舉屬性‘,    skills: [‘html‘, ‘css‘, ‘js‘],    getSkills: function() {        return this.skills;    }};// 設定 unEnumerable 屬性為不可枚舉屬性Object.defineProperty(objtest, ‘unEnumerable‘, {    enumerable: false});

ES6 一共有5種方法可以遍曆對象的屬性。

1.  for...in迴圈遍曆對象自身的和繼承的可枚舉屬性（不含 Symbol 屬性）。

for (let key in objtest){    console.log(key);     console.log(objtest.key);    console.log(objtest[key]);}

不要使用 for…in 來遍曆數組，雖然可以遍曆，但是如果為 Object.prototype 設定了可枚舉屬性後，也會把這些屬性遍曆到,比如數組的length屬性，因為數組也是一種對象。

2. Object.keys返回一個數組，包括對象自身的（不含繼承的）所有可枚舉屬性（不含 Symbol 屬性）。

console.log(Object.keys(objtest));//[ ‘name‘, ‘age‘, ‘skills‘, ‘getSkills‘ ]

3.Object.getOwnPropertyNames返回一個數組，包含對象自身的所有屬性（不含 Symbol 屬性，但是包括不可枚舉屬性）。

console.log(Object.getOwnPropertyNames(objtest));//[ ‘name‘, ‘age‘, ‘unEnumerable‘, ‘skills‘, ‘getSkills‘ ]

4.Object.getOwnPropertySymbols返回一個數組，包含對象自身的所有 Symbol 屬性。

console.log(Object.getOwnPropertySymbols(objtest));//[ Symbol(symbol 屬性) ]

5.Reflect.ownKeys返回一個數組，包含對象自身的所有屬性，不管屬性名稱是 Symbol 或字串，也不管是否可枚舉。

console.log(Reflect.ownKeys(objtest));// [ ‘name‘,//     ‘age‘,//     ‘unEnumerable‘,//     ‘skills‘,//     ‘getSkills‘,//     Symbol(symbol 屬性) ]

數組遍曆：

數組實際上也是一種對象，所以也可以使用上面對象遍曆的任意一個方法（但要注意尺度），另外，數組還擁有其他遍曆的方法。

最基本的有for，while迴圈（有一個計數變數），es6又增加了for ...of ,這下就沒有計數變數了

var arr  = [1,2,3,4]for (let value of arr){    console.log(value)}// 1// 2// 3// 4

數組內建的遍曆方法：

1：Array.prototype.forEach()： 對數組的每個元素執行一次提供的函數，但是forEach 函數有個缺陷：不能正確處理 continue（跳過本次迴圈）、break（中斷迴圈）、return（返回到外層函數） 語句的邏輯

2:Array.prototype.map()： 返回一個新數組，每個元素都是回呼函數返回的值；

arr.map(function (obj) {    console.log(obj*2)})// 2// 4// 6// 8

一些有用的數組內建的方法：

• Array.prototype.every(callback[,thisArg])： 測試數組的各個元素是否通過了回呼函數的測試，若都通過，返回 true，否則返回 false（說地本質點兒，就是如果回呼函數每次返回的值都是 true 的話，則 every() 返回 true，否則為 false）
• Array.prototype.filter(callback[,thisArg])： 返回一個新數組，數組的元素是原數組中通過測試的元素（就是回呼函數返回 true 的話，對應的元素會進入新數組）
• Array.prototype.find(callback[,thisArg])： 返回第一個通過測試的元素
• Array.prototype.findIndex(callback[,thisArg])： 與上面函數類似，只不過這個是返回索引
• Array.prototype.some(callback[,thisArg])： 類似 find() ，只不過它不返回元素，只返回一個布爾值。只要找到一個通過測試的，就返回 true
• Array.prototype.reduceRight(callback[, initialValue])： 用法和上面的函數一樣，只不過遍曆方向正好相反
  

  上面這些函數的共性

• 都是通過每次的回呼函數的傳回值進行邏輯操作或判斷的
• 回呼函數都可以寫成更簡潔的箭頭函數（推薦）
• 都可以通過形如 Array.prototype.map.call(str,callback) 的方式來操作字串

js中的遍曆