您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關JavaScript中 for、for in、for of、forEach怎么用的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。
在JavaScript中,我們經(jīng)常需要去循環(huán)迭代方法操作數(shù)組對象等,常見等循環(huán)方法有 for、for in、for of、forEach等。
1.for循環(huán)
for循環(huán)是最基礎常見的一種循環(huán),圓括號中需要三個表達式,由分號分隔,最后面是一個花括號的塊語句。
for (var i = 0; i <10; i++){ if (i === 5) { continue; //跳出當前循環(huán) } else if (i === 8) { break; //結束循環(huán) } console.log(i); }
for循環(huán)中的語句
continue 語句用來跳出本次循環(huán),但會繼續(xù)執(zhí)行后面的循環(huán)。
break 語句用來結束循環(huán),后面的循環(huán)不會再執(zhí)行。
return 并不能用來跳出for循環(huán),return語句只能出現(xiàn)在函數(shù)體內(nèi),它會終止函數(shù)的執(zhí)行,并返回一個指定的值。
使用for循環(huán)中遇到的問題
你可能會遇到在for循環(huán)使用一個異步操作,這也是一個很常見的面試題。在如下場景,你需要將一批id從0到9的用戶名數(shù)據(jù)請求回來,并將id做為key,name為value塞到一個對象里,代碼可能會是這樣的
var users = {}; for (var i = 0; i < 10; i++) { ajax.get(`/api/userName/${i}`).then(res => { users[i] = res.name; }); }
最后users對象的數(shù)據(jù)結果并非我們所想的那樣,而是{10: '最后一個請求回來的用戶名'}
。這是因為異步請求的原因,由于事件隊列機制,for循環(huán)會先全部執(zhí)行完成,而異步請求會在后面的不定時間內(nèi)完成,并且調(diào)用then方法被事件隊列排在了后面,而此時在任意一個then方法內(nèi)i
變量已經(jīng)在最后一次循環(huán)中被遞增到等于10,在不停的調(diào)用then方法時,users
對象key為10的value會被一直改寫直到最后一個請求結束。
var users = {}; for (let i = 0; i < 10; i++) { ajax.get(`/api/userName/${i}`).then(res => { users[i] = res.name; }); }
將遞增變量i使用let
聲明即可解決,let 語句聲明一個塊級作用域的本地變量,花括號里是一個塊,每次循環(huán)都使用該塊級作用域中的變量,可以看作每次循環(huán)的塊都是相互隔離的,變量只會在該作用域內(nèi)生效。
var users = {}; for (var i = 0; i < 10; i++) { (function () { var j = i; ajax.get(`/api/user/${j}`).then(res => { users[j] = res.name; }); }()); }
我們將異步方法包在一個立即執(zhí)行函數(shù)里面,通過var j
聲明的變量去承接在該函數(shù)內(nèi)i
變量的值,由于立即執(zhí)行函數(shù)形成了一個閉包作用域,變量j
在每一個作用域內(nèi)都是單獨存在的。
var users = {}; for (var i = 0; i < 10; i++) { (function (value) { ajax.get(`/api/user/${value}`).then(res => { users[value] = res.name; }); }(i)); }
將變量i
作為立即執(zhí)行函數(shù)的參數(shù)傳遞進來,參數(shù)也具有各自的作用域,函數(shù)參數(shù)只在函數(shù)內(nèi)起作用,是局部變量。
for...in語句以任意順序遍歷一個對象的可枚舉屬性,遍歷的順序可能因瀏覽器實現(xiàn)方式有所不同。所遍歷的內(nèi)容可以是一個對象、數(shù)組、字符串、arguments等。使用Object.defineProperty
方法可以為對象屬性定義是否可以枚舉。
在JavaScript中,對象的屬性分為可枚舉和不可枚舉之分,它們是由屬性的enumerable
值決定的??擅杜e性決定了這個屬性能否被for…in查找遍歷到。對象的propertyIsEnumerable
方法可以判斷此對象是否包含某個屬性,并且返回這個屬性是否可枚舉。
Object, Array, Number等內(nèi)置的方法和屬性都是不可枚舉的
const obj = {}; Object.defineProperty(obj, 'city', {value: '北京', enumerable: false}); const isEnumerable = obj.propertyIsEnumerable('city'); console.log(obj); // {city: "北京"} console.log(isEnumerable); //false
const obj = {a:1, b:2, c:3}; Object.defineProperty(obj, 'd', {value: 4, enumerable: false}) obj.__proto__ = {name: 'ricky', age: '25'} console.log(obj) console.log('=====for in=======') for (var prop in obj) { console.log(prop, obj[prop]); } console.log('=====Object.keys=======') console.log(Object.keys(obj)) console.log('=====Object.getOwnPropertyNames=======') console.log(Object.getOwnPropertyNames(obj)) console.log('=====Object.values=======') console.log(Object.values(obj)) console.log('=====Object.entries=======') console.log(Object.entries(obj))
輸出結果
我們先使用對象字面量的方式定義量一個obj,然后使用Object.defineProperty方法定義key為d的一個不可枚舉屬性,然后修改原型鏈__proto__,為其賦值了name, age兩個屬性。
for in遍歷出除屬性名為d
以外的所有可枚舉屬性,包括其原型鏈上的屬性
Object.keys方法會返回一個由對象的自身可枚舉屬性名(key)組成的數(shù)組,其原型鏈上的屬性沒有被包含
Object.getOwnPropertyNames方法會返回一個由對象的自身所有屬性名(key)組成的數(shù)組,包括可枚舉和不可枚舉的屬性
Object.values方法會返回一個由對象的自身可枚舉屬性的值(value)組成的數(shù)組
Object.entries方法會返回一個由對象的自身可枚舉屬性的鍵值對(key和value)組成的數(shù)組
for in會循環(huán)所有可枚舉的屬性,包括對象原型鏈上的屬性,循環(huán)會輸出循環(huán)對象的key,如果循環(huán)的是一個數(shù)組則會輸出下標索引(index)。
in 運算符測試一個對象其自身和原型鏈中是否存在該屬性。
const obj = {name: 'ricky'}; Object.defineProperty(obj, 'city', {value: '北京', enumerable: false}) obj.__proto__ = {age: '25'} console.log('name' in obj); // true console.log('city' in obj); // true console.log('age' in obj); // true console.log('sex' in obj); // false
for of循環(huán)可迭代對象(包括 Array,Map,Set,String,TypedArray,類數(shù)組的對象(比如arguments對象、DOM NodeList 對象)、以及Generator生成器對象等)。
const array = [{a: 1}, {b: 2}, {c: 3}]; array.name = 'ricky'; console.log(array) console.log('=====for of=======') for (var prop of array) { console.log(prop); } console.log('=====for in=======') for (var prop in array) { console.log(prop); }
與for in不同的是,for of不能循環(huán)普通對象({key: value})
for of不會將循環(huán)對象中自定義的屬性內(nèi)容循環(huán)出來
for in 是遍歷鍵名(key或index),而for of是遍歷鍵值(value)。
forEach() 方法對數(shù)組的每個元素執(zhí)行一次提供的函數(shù),其中函數(shù)有三個參數(shù),依次為:當前循環(huán)項的內(nèi)容、當前循環(huán)的索引、循環(huán)的數(shù)組。
const array = ['a', 'b', 'c']; array.forEach(function(value, index, data) { console.log(value, index, data); }); // 輸出 // a 0 ["a", "b", "c"] // b 1 ["a", "b", "c"] // c 2 ["a", "b", "c"]
map() 方法會依次循環(huán)每一項,并且返回結果映射組成一個新的數(shù)組。
const array = [1, 2, 3]; const newArray = array.map(function(value, index, data) { return value * 2; }); console.log(newArray); //輸出 [2, 4, 6]
使用forEach、map不能中斷循環(huán),方法會將每項內(nèi)容都執(zhí)行完成才會結束循環(huán)。
every循環(huán)當返回false時循環(huán)即會結束, some方法在循環(huán)返回true時結束循環(huán),利用這個特性使用every和some方法都可以跳出循環(huán)。
const arr = [1, 2, 3, 4, 5]; arr.every(function(value){ console.log(value); if(value === 3) { //every 循環(huán)當返回false時結束循環(huán) return false; } return true //every 循環(huán)需要返回true,沒有返回值循環(huán)也會結束 }); arr.some(function(value){ console.log(value); if(value === 3) { //some 循環(huán)當返回true時結束循環(huán) return true; } });
感謝各位的閱讀!關于JavaScript中 for、for in、for of、forEach怎么用就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。