了方便例子講解,現有數組和字面量對象如下
var demoArr=['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
var demoObj={
aaa: 'Javascript',
bbb: 'Gulp',
ccc: 'CSS3',
ddd: 'Grunt',
eee: 'jQuery',
fff: 'angular'
};
可以直接看示例,用得太多了,很簡單
(function () {
for (var i=0, len=demoArr.length; i < len; i++) {
if (i==2) {
// return; // 函數執行被終止
// break; // 循環被終止
continue; // 循環被跳過
};
console.log('demo1Arr[' + i + ']:' + demo1Arr[i]);
}
})();
關于for循環,有以下幾點需要注意
var i=0, len=demo1Arr.length;
for(; i<len; i++) {};
for(var item in arr|obj){} 可以用于遍歷數組和對象
(function () {
for (var i in demoArr) {
if (i==2) {
return; // 函數執行被終止
// break; // 循環被終止
// continue; // 循環被跳過
};
console.log('demoArr[' + i + ']:' + demoArr[i]);
}
console.log('-------------');
})();
for in 本質上遍歷的是對象,之所以能遍歷數組,是因為數組也是一個對象。
var arr=['react', 'vue', 'angular'];
// 等價于
var arr={
0: 'react',
1: 'vue',
2: 'angular'
}
關于for in,有以下幾點需要注意:
function res() {
var demoArr=['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
for (var item in demoArr) {
if (item==2) {
return;
};
console.log(item, demoArr[item]);
}
console.log('desc', 'function res'); //不會執行
}
因為 for in 的目的是為了遍歷對象,因此在遍歷時,會同時搜索該對象構造函數上的屬性以及原型上的屬性,因此 for in 循環相對來說消耗會更大一點。因此,如果有其他更好的選擇,則盡量避免考慮使用 for in 循環來遍歷數據。
demoArr.forEach(function(arg) {})
參數arg表示數組每一項的元素,實例如下
demoArr.forEach(function (val, index) {
if (e=='CSS3') {
return; // 循環被跳過
// break; // 報錯
// continue;// 報錯
};
console.log(val, index);
})
具體有以下需要注意的地方
ES5中新增的幾個數組方法,forEach, map, filter, reduce等,可以理解為依次對數組的每一個子項進行一個處理(回調函數中的操作),他們是對簡單循環的更高一層封裝,因此與單純的循環在本質上有一些不同,所以才會導致 return, continue, break 的不同。
最重要的一點,可以添加第二參數,為一個數組,而且回調函數中的this會指向這個數組。而如果沒有第二參數,則this會指向window。
var newArr=[];
demoArr.forEach(function(val, index) {
this.push(val); // 這里的this指向newArr
}, newArr)
雖然在原生中 forEach 循環的局限性很多,但是了解他的必要性在于,很多第三方庫會擴展他的方法,使其能夠應用在很多地方,比如 angular 的工具方法中,也有 forEach 方法,其使用與原生的基本沒有差別,只是沒有了局限性,可以在IE下使用,也可以遍歷對象
var result=[];
angular.forEach(demoArr, function(val, index) {
this.push(val);
}, result);
函數具體的實現方式如下,不過有一點值得注意的是,當使用 continue時,如果你將 i++ 放在了后面,那么 i++ 的值將一直不會改變,最后陷入死循環。因此使用do/while一定要小心謹慎一點。
// 直接使用while
(function () {
var i=0,
len=demoArr.length;
while (i < len) {
if (i==2) {
// return; // 函數執行被終止
// break; // 循環被終止
// continue; // 循環將被跳過,因為后邊的代碼無法執行,i的值沒有改變,因此循環會一直卡在這里,慎用!!
};
console.log('demoArr[' + i + ']:' + demoArr[i]);
i++;
}
console.log('------------------------');
})();
// do while
(function () {
var i=0,
len=demo3Arr.length;
do {
if (i==2) {
break; // 循環被終止
};
console.log('demo2Arr[' + i + ']:' + demo3Arr[i]);
i++;
} while (i < len);
})();
不建議使用do/while的方式來遍歷數組
$.each(demoArr|demoObj, function(e, ele))
可以用來遍歷數組和對象,其中e表示索引值或者key值,ele表示value值
$.each(demoArr, function(e, ele) {
console.log(e, ele);
})
輸出為
0 "Javascript"
1 "Gulp"
2 "CSS3"
3 "Grunt"
4 "jQuery"
5 "angular"
這里有很多需要注意的地方
console.log(this);
//String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"}
console.log(this==ele);
// true
$.each(this, function(e, ele) {
console.log(e, ele);
})
// 0 c
// 1 s
// 2 s
// 4 3
為什么 length 和 [[PrimitiveValue]]沒有遍歷出來?突然靈光一動,在《javascript高級編程》中找到了答案,大概意思就是javascript的內部屬性中,將對象數據屬性中的 Enumerable 設置為了false
// 查看length的內部屬性
console.log(Object.getOwnPropertyDescriptor(this, 'length'));
// Object {value: 4, writable: false, enumerable: false, configurable: false}
(this)` 與this有所不同,不過遍歷結果卻是一樣,你可以在測試代碼中打印出來看看
專門用來遍歷DOMList
$('.list li').each(function (i, ele) {
console.log(i, ele);
// console.log(this==ele); // true
$(this).html(i);
if ($(this).attr('data-item')=='do') {
$(this).html('data-item: do');
};
})
因為domList并非數組,而是一個對象,只是因為其key值為0,1,2... 而感覺與數組類似,但是直接遍歷的結果如下
var domList=document.getElementsByClassName('its');
for(var item in domList) {
console.log(item, ':' + domList[item]);
}
// 0: <li></li>
// 1: <li></li>
// ...
// length: 5
// item: function item() {}
// namedItem: function namedItem() {}
因此我們在使用for in 遍歷domList時,需要將domList轉換為數組
var res=[].slice.call(domList);
for(var item in res) {}
類似這樣的對象還有函數的屬性 arguments 對象,當然字符串也是可以遍歷的,但是因為字符串其他屬性的 enumerable 被設置成了false,因此遍歷出來的結果跟數組是一樣的,也就不用擔心這個問題了.
for of 用于遍歷可迭代對象「Iterator」。在 JS 中,數組 Array,字符串 String, Map,Set 等,都是可迭代對象。
對象中包含 Symbol.iterator 屬性的,都被稱為可迭代對象。
var arr=[1, 2, 3];
arr[Symbol.iterator]
// ? values() { [native code] }
簡單案例。
const iterable=['react', 'vue', 'angular'];
for (const value of iterable) {
console.log(value);
}
如果你發現有些人寫函數這樣搞,不要驚慌,也不要覺得他高大上鳥不起
+function(ROOT, Struct, undefined) {
...
}(window, function() {
function Person() {}
})
()(), !function() {}() +function() {}() 三種函數自執行的方式
學習是一個艱苦的過程,當然如果能把技術學成,最后也一定可以獲得高薪工作。掌握一個好的學習方法,跟對一個學習的人非常重要。今后要是大家有啥問題,可以隨時來問我,能幫助別人學習解決問題,對于自己也是一個提升的過程。自己整理了一份2020最全面前端學習資料,從最基礎的HTML+CSS+JS到HTML5的項目實戰的學習資料都有整理web前端學習干貨,各種框架都有整理,送給每一位前端小伙伴,想要獲取的可以關注我的頭條號并在后臺私信我:前端,即可免費獲取
JavaScript 作為 Web 開發的核心語言之一,在前端領域發揮著至關重要的作用。數組作為 JavaScript 中最常用的數據結構之一,掌握其遍歷方法對于任何前端開發者都是必不可少的技能。本文旨在介紹幾種常見的數組遍歷方式,并通過實例演示它們的應用場景和最佳實踐。
數組遍歷是指按照一定的順序訪問數組中的每一個元素的過程。JavaScript 提供了多種方法來遍歷數組,包括傳統的 for 循環、forEach 方法、map、filter 等高階函數。
const numbers=[1, 2, 3, 4, 5];
// 使用 for 循環
for (let i=0; i < numbers.length; i++) {
console.log(numbers[i]);
}
// 使用 forEach
numbers.forEach(function(number) {
console.log(number);
});
// 使用 map
const doubled=numbers.map(function(number) {
return number * 2;
});
console.log(doubled);
// 使用 filter
const evenNumbers=numbers.filter(function(number) {
return number % 2===0;
});
console.log(evenNumbers);
數組遍歷的基本原理是按照一定的順序訪問數組中的每個元素。不同的遍歷方法內部實現有所不同,但最終目的是相同的。
假設我們需要從一個數組中找出所有的偶數,并計算這些偶數的平方。
問題: 如何高效地找到所有偶數并計算它們的平方?
解決方案: 使用 filter 方法篩選出偶數,再使用 map 方法計算平方。
const numbers=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 使用 filter 和 map
const evenSquares=numbers
.filter(number=> number % 2===0)
.map(number=> number * number);
console.log(evenSquares); // 輸出: [4, 16, 36, 64, 100]
// 緩存結果
const cache={};
function getEvenSquares(numbers) {
if (cache[numbers]) {
return cache[numbers];
}
const result=numbers
.filter(number=> number % 2===0)
.map(number=> number * number);
cache[numbers]=result;
return result;
}
問題: 如何在 forEach 中中斷循環?
解決方案: 使用 for 循環或 Array.prototype.some() 方法。
// 使用 some
const numbers=[1, 2, 3, 4, 5];
let found=false;
numbers.some(function(number) {
if (number > 3) {
found=true;
return true; // 終止循環
}
});
console.log(found); // 輸出: true
通過本文的學習,我們了解了 JavaScript 數組遍歷的多種方法及其應用場景。每種方法都有其特點和適用場合,合理選擇可以提高代碼的效率和可讀性。隨著 JavaScript 語言的發展,新的遍歷方法和優化技巧會不斷出現,我們期待未來能有更多實用高效的工具和技術出現,以進一步提升前端開發的效率和質量。
希望本文能為你在實際開發中遇到的問題提供一些解決方案和思路,同時也鼓勵你不斷學習新的技術和方法,以應對日益復雜的前端開發挑戰。
、for...in 語句
1.1 遍歷對象屬性名稱
for...in 語句常用于遍歷特定對象的屬性,包括字段名稱屬性及函數名稱屬性。在JavaScript語言中,它們均稱為屬性 (property)。
let obj={
name: 'obj',
showName() {
console.log(this.name);
}
};
for (const propName in obj) {
console.log(propName, typeof(obj[propName]));
}
顯示:
name – "string"
showName – "function"
利用這一點,可方便地查看特定對象的所有屬性或方法名稱。下面語句打印出console對象所有的屬性:
for (const propName in console) {
console.log(propName, typeof(console[propName]));
}
顯示:
debug – "function"
error – "function"
log – "function"
info – "function"
warn – "function"
clear – "function"
...
可以看出,這些屬性全部均是console的函數名稱,因為console沒有屬性名稱。
1.2 遍歷數組索引值
for...in 用于數組中,則遍歷數組索引值。
let array=['a', 'b', 'c'];
for (const index in array) {
console.log(index, array[index]);
}
顯示:
0 – "a"
1 – "b"
2 – "c"
1.3 遍歷字符串索引值
由于字符串是由字符組成的數組,因此 for...in 也可用于遍歷字符串的索引值。
let str="abc";
for (const index in str) {
console.log(index, str[index]);
}
顯示:
0 – "a"
1 – "b"
2 – "c"
2、for...of 語句
for...of 語句用于遍歷可遍歷對象 (iterable objects)的元素。這些可遍歷對象包括字符串、數組、以及類似于數組的對象,這些對象都帶有length屬性。
2.1 不能用于遍歷對象屬性名稱
for...of 語句不能用于遍歷對象的屬性名稱。因此,下面的代碼是錯誤的:
let obj={
name: 'obj',
showName() {
console.log(this.name);
}
};
for (const propName of obj) {
console.log(propName);
}
顯示:
TypeError: undefined is not a function (near '...propName of obj...')
意為,將 for...of 語句用于對象上面,無法提取具體的數值。
2.2 遍歷數組元素
for...of 語句經常用于遍歷數組中各元素的數值。
let arr=[2, 4, 6, 8, 10];
for (const value of arr) {
console.log(value);
}
顯示:
2
4
6
8
10
2.3 遍歷字符串中的字符
由于字符串是由字符組成的數組,因此 for...of 也可用于遍歷字符串的字符。
let str="abc";
for (const letter of str) {
console.log(letter);
}
顯示:
a
b
c
2.4 解包
數組元素如果是帶有特定屬性名稱的對象,可利用解包性質來快速遍歷這些屬性值。看下面例子。
function Point(x, y) {
return {x:x, y:y};
}
let points=[Point(1, 2), Point(2, 3), Point(4, 5)];
for (const point of points) {
console.log(point.x, point.y);
}
可將Point視為一個構造器 (constructor),每次調用Point(x, y)都會創建并返回該類的一個對象,且含有x及y的屬性名稱。points則是一個含有多個Point對象的數組。上面的代碼遍歷出每個Point對象后,賦值于point變量,然后打印出它們的x值及y值。
如果我們不希望每次都通過引用對象屬性的方式來訪問x及y值,則可編寫代碼如下:
for (const point of points) {
let x=point.x;
let y=point.y;
console.log(x, y);
}
這一步可利用ES6的const解包特性予以簡化:
for (const point of points) {
const {x, y}=point;
console.log(x, y);
}
更進一步,我們可以直接解包:
for (const {x, y} of points) {
console.log(x, y);
}
2.5 遍歷Map
let scoreMap=new Map([
['Mike', 75],
['Tom', 80],
['Smith', 90]
]);
for (const [key, value] of scoreMap) {
console.log(key, value);
}
與上一節不同的是,Map需要使用 [key, value] 的方式來解包。
3、forEach 方法
3.1 forEach 常見調用方式
for...in,for...of 均是語句,與它們不同的是,forEach是數組的內嵌方法。這意味著我們可以直接在數組對象上面直接調用該方法。
let arr=[1, 3, 5, 7, 9];
arr.forEach((element)=> {
console.log(element);
});
作為數組方法,forEach有一個參數,該參數的類型是函數,稱為回調函數 (callback function)。所謂回調函數,是指一旦程序員提供了這樣的函數,JavaScript引擎將負責調用此函數。
回調函數的價值在于回調函數可能存在多個參數,而這些參數將由JavaScript引擎自動提供。在回調函數中,我們可對JavaScript引擎所自動提供的參數進行進一步加工。
在上面的回調函數中,element是由JavaScript引擎自動提供的,代表每個數組元素。
上面的代碼采用了lambda匿名表達式。它等同于:
let arr=[1, 3, 5, 7, 9];
function callback(element) {
console.log(element);
}
arr.forEach(callback);
可見,lambda表達式更加簡練。
3.2 forEach 的參數
forEach共有3個參數 (上面例子只用了第1個),它們的排列順序如下:
arr.forEach((element, index, array)=> {
console.log(element);
console.log(index);
console.log(array);
});
參數element是數組元素,參數index是數組元素所在數組中的索引值,參數array是整個數組。
一般情況下,我們僅需用到element及index參數就足夠了。由于是每次迭代,因此,forEach方法中的array參數較少用到。
index每次遍歷時都會加1,且每次都會與array的長度比較。一旦超出array的界限,就會終止遍歷。如果遍歷過程中,修改了array的長度,則需特別注意這一點。
3.2 forEach 遍歷的終止
如何中止forEach的遍歷?JavaScript并未提供這樣的機制,但我們可以用一個雙重嵌套的異常來終止遍歷。
let arr=[1, 3, 5, 7, 9];
try {
arr.forEach((element, index, array)=> {
try {
console.log(index);
if (index >=3) {
throw new Error('forEach termination signal');
}
} catch (error) {
throw error;
}
});
} catch (e) {
if (e.message==='forEach termination signal') {
console.log('forEach terminated.');
}
}
console.log('This line of code should be executed.');
顯示:
0
1
2
3
forEach terminated.
This line of code should be executed.
我們設定,當index的值大于等于3時,需要終止遍歷。這樣,在第7行,當此條件滿足時,即拋出"forEach termination signal"的異常。
此時,程序流程轉入到第10行至第12行最內層的異常捕獲處理代碼:
} catch (error) {
throw error;
}
捕獲異常后,如果我們不重新拋出異常,JavaScript引擎則會認為我們已正確地處理了異常,因此會恢復中斷的遍歷進程,繼續處理下一個數組元素,這不是我們想要的。因此,我們在此重新拋出該異常,以切實終止遍歷。
這時,forEach的遍歷因異常而終止,從而達到了我們的最初的目標。但因為有異常,如果我們未作任何處理,則該異常會導致整個程序都終止運行。只有在我們處理了異常后,程序才能往下走。這就是第14行至18行最外層異常捕獲代碼的作用:
} catch (e) {
if (e.message==='forEach termination signal') {
console.log('forEach terminated');
}
}
先判斷它是不是"forEach termination signal"。如果是,則簡單地打印一行消息。由于這里未再拋出新的異常,因此JavaScript引擎認為我們已經正確地處理了異常,則繼續執行后面的代碼。這樣,最后一行第20行語句將被執行并打印出"This line of code should be executed."的文本。
一般來講,如果我們需要在數組的遍歷過程中終止遍歷,不要使用 forEach 語句,使用最傳統的方式即可:
let arr=[1, 3, 5, 7, 9];
for (let i=0; i < arr.length; i++) {
console.log(i, arr[i]);
if (i >=3) {
break;
}
}
console.log('This line of code should be executed.');
這樣即可在遍歷中訪問數組的索引值與數組元素,又可以極為方便地隨時終止遍歷。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。