從 js forEach沒法跳出循環開始

走在前端的大道上

[toc]

forEach() 方法對數組的每一個元素執行一次提供的函數。可是沒有辦法停止或者跳出 forEach 循環，除了拋出一個異常，該方法沒有返回值

那...有沒有替代方案？

1.forEach 中 return/return false/return true 只用於跳過本次循環，而不是整個循環

2.使用 Array.every 或 Array.some。

forEach函數使用break或continue 會報錯，若是測試一個數組裏的元素是否符合某條件，且須要返回一個布爾值，那麼可以使用 Array.every 或 Array.some。

every函數

return false跳出整個循環，return true跳出本次循環 繼續循環

some函數

return true跳出整個循環，return false跳出本次循環 繼續循環

3.使用for循環

break 跳出整個循環，continue跳出本次循環，你們對這個應該很熟

可是若是是多層嵌套的for循環呢...

下面就是要介紹的 for循環的命名

注意：break 默認只會終止 緊鄰的循環
若是要終止其餘循環，須要給循環起名字

補充一下

其餘數組的經常使用方法

var aPerson = ['person1', 'person2', 'person3', 'person4', 'person5', 'person6']

slice

如今假設咱們要抽取三我的，咱們可使用slice()方法來選取三我的，以下：

var aP3 = aPerson.slice(1, 4);
console.log(aPerson); // ['person1', 'person2', 'person3', 'person4', 'person5', 'person6']
console.log(aP3); // ["person2", "person3", "person4"]

該方法返回一個從開始到結束（不包括結束）選擇的數組的一部分淺拷貝到一個新數組對象。原數組不會改變。

splice

一樣咱們還可使用splice()方法來選取，以下：

var aPerson = ['person1', 'person2', 'person3', 'person4', 'person5', 'person6']
var aP3 = aPerson.splice(1, 3);
console.log(aPerson); // ["person1", "person5", "person6"]
console.log(aP3); // ["person2", "person3", "person4"]

該方法經過刪除現有元素或添加新元素來更改數組的內容。原數組會改變。

對於 slice 來講，splice 的功能會更強大點，其區別主要在於：

• slice 不改變原數組，而 splice 則會改變
• slice 的第二個參數爲截至的索引值，而 splice 則表示要截取的個數
• splice 還能用於增長元素，slice 則不能夠

includes

includes() 方法用來判斷當前數組是否包含某指定的值，若是是，則返回 true，不然返回 false。

比喻判斷是否有35歲的人，以下：

var ageTest3 = aAge.includes(35);
var ageTest4 = aAge.includes(28);

console.log(ageTest3); // true
console.log(ageTest4); // false

concat

除了從隊伍裏抽出一些人出來，咱們還能夠把另一個隊伍和這個隊伍合併成一個新隊伍，以下：

var aPerson1 = ['person1', 'person2', 'person3', 'person4', 'person5', 'person6']
var aPerson2 = ['person7', 'person8', 'person9'];

var aPerson3 = aPerson1.concat(aPerson2);
console.log(aPerson3); // ["person1", "person2", "person3", "person4", "person5", "person6", "person7", "person8", "person9"]

concat() 方法用於合併兩個或多個數組。此方法不會更改現有數組，而是返回一個新數組。

---

高矮排序

如今咱們以高矮的形式定義一組數據，以下：

var aHeight = ['170', '165', '178', '183', '168', '175', '173'];

reverse

咱們能夠直接使用reverse()方法來實現倒序，以下：

aHeight.reverse();
console.log(aHeight); // ["173", "175", "168", "183", "178", "165", "170"]
該方法很是簡單，沒有任何參數，就是把數組的出現順序調換下，第一個元素會成爲最後一個，最後一個會成爲第一個。通常也不多用到。

sort

比起 reverse() 來講，sort() 方法使用的地方就多了。咱們先來個從矮到高的排序，以下：

aHeight.sort();
console.log(aHeight); // ["165", "168", "170", "173", "175", "178", "183"]

sort() 方法默認的排序是升序，如上代碼可見。可是咱們也能夠傳入一個函數，指定其排序方式，如如今讓其以降序方式排列：

aHeight.sort(function(a, b){
    return b - a;
});
console.log(aHeight); // ["183", "178", "175", "173", "170", "168", "165"]

隨機排序
除了正常的升序降序以外，其實咱們還常用到隨機排序，如咱們的搶紅包，棋牌遊戲中的洗牌都是隨機排序的應用。

在使用隨機排序的時候，咱們得使用到一個隨機函數 Math.random()。
該函數返回一個浮點數, 其數字在範圍[0，1)。

這樣咱們就可使用該隨機生成浮點數與0.5大小進行比較，那樣結果可能大於或小於0，最後就獲得了咱們的隨機排序。

// 第一次運行
aHeight.sort(function(){
    return 0.5 - Math.random();
});
console.log(aHeight); // ["183", "168", "175", "173", "170", "165", "178"]

// 第二次運行
aHeight.sort(function(){
    return 0.5 - Math.random();
});
console.log(aHeight); // ["170", "183", "175", "168", "173", "165", "178"]

由於是隨機的，因此每次運行都會不同，咱們能夠多運行幾回試試。

---

條件篩選

如今咱們以膚色和年齡的的形式定義兩組數據，以下（yellow 表示黃種人，white 表示白人，black 表示黑人）：

var aColor = ['yellow', 'black', 'white', 'white', 'yellow', 'yellow'];
var aAge = [19, 30, 25, 37, 18, 35];

測試是否符合條件

every

every() 方法用於測試數組的全部數據是否都經過了指定函數的測試，若是經過返回 true，不然 false。

比喻判斷是否全部人的年齡都大於20歲，以下：

var ageTest = aAge.every(function(item, index){
    return item > 20;
})

console.log(ageTest); // false

every 須要數組中的每一個數據都知足該條件則返回 true，不然就是 false。

some

對應 every() 方法，還有一個 some() 方法，表示數組中只要有任何一個數據知足條件則返回 ture，若是一個數據都不知足則返回 false。

比喻判斷是否有人的年齡都大於32歲，以下：

var ageTest2 = aAge.some(function(item, index){
    return item > 32;
})

console.log(ageTest2); // true

filter

比喻我要選取全部黃皮膚的人，以下：

var aYellow = aColor.filter(function(item, index) {
    return item === 'yellow';
})

console.log(aYellow); // ["yellow", "yellow", "yellow"]

該方法返回全部知足條件數據組成的數組。

map

map() 方法建立一個新數組，其結果是該數組中的每一個元素調用一個提供的函數。

比喻每一個人的工資都增長 5000元，以下：

// 先構造一份工資數據
var aSalary = [8000, 7000, 1500, 9000, 22000];

var aNewSalary = aSalary.map(function(item, index) {
    return item + 5000;
})

console.log(aNewSalary); // [13000, 12000, 6500, 14000, 27000]