數(shù)組遍歷

1. 普通for循環(huán)

let arr = [1,2,3,4,5] for (let i = 0; i < arr.length; i++) {console.log(arr[i]) } // 輸出結(jié)果 // 1 // 2 // 3 // 4 // 5

2. 優(yōu)化普通for循環(huán)

let arr = [1,2,3,4,5] for(var j = 0,len = arr.length; j < len; j++){console.log(arr[j]); }

3. forEach循環(huán) (箭頭函數(shù)改變this指向 手寫forEach)

forEach() 方法用于調(diào)用數(shù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)。

注意: forEach() 對(duì)于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的。

let arr = [1,2,3,4,5] let obj = {a:1,b:2} arr.forEach((currentValue, index, arr) => {console.log(currentValue,index,arr,this) }, obj) arr.forEach(function(currentValue, index, arr){console.log(currentValue,index,arr,this) }, obj)

forEach() 的 continue 與 break

forEach() 本身是不支持的 continue 與 break 語句的，我們可以通過 some 和 every 來實(shí)現(xiàn)。

使用 return 語句實(shí)現(xiàn) continue 關(guān)鍵字的效果：

4. map遍歷

map() 方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。

map() 方法按照原始數(shù)組元素順序依次處理元素。

注意： map() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。

注意： map() 不會(huì)改變?cè)紨?shù)組。

語法 array.map(function(currentValue,index,arr), thisValue) let arr = [1,2,3,4,5] let mapResult = arr.map((currentValue, index, arr)=>{console.log(currentValue,index,arr)return currentValue * index }) console.log(mapResult)1 0 (5) [1, 2, 3, 4, 5] 2 1 (5) [1, 2, 3, 4, 5] 3 2 (5) [1, 2, 3, 4, 5] 4 3 (5) [1, 2, 3, 4, 5] 5 4 (5) [1, 2, 3, 4, 5] (5) [0, 2, 6, 12, 20]

forEach 和 map 的區(qū)別

forEach適合于你并不打算改變數(shù)據(jù)的時(shí)候，而只是想用數(shù)據(jù)做一些事情 – 比如存入數(shù)據(jù)庫或則打印出來。

map()適用于你要改變數(shù)據(jù)值的時(shí)候。不僅僅在于它更快，而且返回一個(gè)新的數(shù)組。這樣的優(yōu)點(diǎn)在于你可以使用復(fù)合(composition)(map(), filter(), reduce()等組合使用)來玩出更多的花樣。

能用forEach()做到的，map()同樣可以。反過來也是如此。

map()會(huì)分配內(nèi)存空間存儲(chǔ)新數(shù)組并返回，forEach()不會(huì)返回?cái)?shù)據(jù)。

forEach()允許callback更改原始數(shù)組的元素。map()返回新的數(shù)組。

5. for... of

在可迭代對(duì)象（包括 Array，Map，Set，String，TypedArray，arguments 對(duì)象等等）上創(chuàng)建一個(gè)迭代循環(huán)，調(diào)用自定義迭代鉤子，并為每個(gè)不同屬性的值執(zhí)行語句

let arr = [1,2,3,4,5] for (let num of arr){console.log(num) }

對(duì)象遍歷

1. for...in (不適合數(shù)組)

for in 循環(huán)會(huì)遍歷原型鏈上的屬性

可以在for-in循環(huán)的時(shí)候添加 hasOwnProperty()方法來過濾掉非自有屬性

// 創(chuàng)建一個(gè)對(duì)象并指定其原型，bar 為原型上的屬性 const obj = Object.create({bar: 'bar' })// foo 為對(duì)象自身的屬性 obj.foo = 'foo'for (let key in obj) {console.log(obj[key]) // foo, bar }for (let key in obj) {if (obj.hasOwnProperty(key)) {console.log(obj[key]) // foo} }

for...in 語句以任意順序迭代對(duì)象的可枚舉屬性。

2. Object.keys()

Object.keys() 返回一個(gè)數(shù)組,包括對(duì)象自身的(不含繼承的)所有可枚舉屬性(不含Symbol屬性).

for in 循環(huán)和 Object.keys()方法都不會(huì)返回對(duì)象的不可枚舉屬性。

Object.values()和 Object.entries()也都是返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組。

Object.keys(obj).forEach((key) => {console.log(obj[key]) // foo })

3. Object.getOwnPropertyNames()

Object.getOwnPropertyNames() 也是 ES5 新增的一個(gè)對(duì)象方法，該方法返回對(duì)象自身屬性名組成的數(shù)組，包括不可枚舉的屬性。

// 創(chuàng)建一個(gè)對(duì)象并指定其原型，bar 為原型上的屬性 // baz 為對(duì)象自身的屬性并且不可枚舉 const obj = Object.create({bar: 'bar' }, {baz: {value: 'baz',enumerable: false} })obj.foo = 'foo'// 不包括不可枚舉的 baz 屬性 Object.keys(obj).forEach((key) => {console.log(obj[key]) // foo })// 包括不可枚舉的 baz 屬性 Object.getOwnPropertyNames(obj).forEach((key) => {console.log(obj[key]) // baz, foo })

4. Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols()方法返回對(duì)象自身的 Symbol 屬性組成的數(shù)組，不包括字符串屬性

// 給對(duì)象添加一個(gè)不可枚舉的 Symbol 屬性 Object.defineProperties(obj, {[Symbol('baz')]: {value: 'Symbol baz',enumerable: false} })// 給對(duì)象添加一個(gè)可枚舉的 Symbol 屬性 obj[Symbol('foo')] = 'Symbol foo'Object.getOwnPropertySymbols(obj).forEach((key) => {console.log(obj[key]) // Symbol baz, Symbol foo })

5. Reflect.ownKeys()

Reflect.ownKeys()方法是 ES2015 新增的靜態(tài)方法，該方法返回對(duì)象自身所有屬性名組成的數(shù)組，包括不可枚舉的屬性和 Symbol 屬性。

Reflect.ownKeys(obj).forEach((key) => {console.log(obj[key]) // baz, foo, Symbol baz, Symbol foo })

五種方法對(duì)比

總結(jié)

以上是生活随笔為你收集整理的数组的迭代数组里面每个对象添加属性值_JS数组和对象循环遍历的几种实现方式...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。