1.jpeg

循環(huán)是每個語言都必不可少的方法,javaScript也一樣,隨著javaScript的發(fā)展,我們用于循環(huán)的方法也在不斷改進,也越來越精簡,但是用好循環(huán)卻不是那么容易的事,在這里總結一下javaScript中常用的幾種循環(huán)方式,便于記憶和以后使用。

for

for也是最原始的循環(huán),自JavaScript誕生起,我們就一直使用這個方法;其可以用了遍歷數(shù)組或者字符串

for (var i = 0; i < arr.length; i++) {
    console.log(i, arr[i])
}

for-in(es5)

for-in循環(huán)主要是用來遍歷對象的;

var person = {
    name: 'zhangsan',
    age: 23
}
for (var key in person) {
    console.log(key, person[key])
}
得到結果:
// name 'zhangsan'
// age 23

這里循環(huán)的key是對象內鍵值對的key;雖然for-in也可以用了循環(huán)數(shù)組,但是建議不要這做,因為使用for-in遍歷數(shù)組,遍歷出來的key是字符串類型的;for-in不光遍歷數(shù)組元素,還會遍歷數(shù)組的自定義屬性;另外,遍歷出來的元素順序可能是亂序的

for-of(es6)

在es6中,遍歷數(shù)組我們有更強大的方法;

var arr = [1, 2, 3]
for (var item of arr) {
    consoel.log(item)
}
結果:
// 1
// 2
// 3

for-of優(yōu)點:

• 最簡潔、最直接的遍歷數(shù)組的方法
• 避免forEach不能響應break,continue的問題
• 避免for-in遍歷數(shù)組的所有缺陷

es5中數(shù)組遍歷方法

forEach

array.forEach(function(item, index, arr), thisValue)

forEach參數(shù)有兩個,第一個參數(shù)是必填的回調函數(shù),回調函數(shù)中有三個參數(shù),分別是:數(shù)組的某一項,數(shù)組的index,數(shù)組本身;第二個參數(shù)是可選的上下文參數(shù)(也就是this的指向)

這個例子我們看第一個參數(shù)

[1, 2, 3].forEach(function(item, index, arr) {
    consoel.log(item, index, arr)
})
結果:
// 1 0 [1, 2, 3]
// 2 1 [1, 2, 3]
// 3 2 [1, 2, 3]

這個例子解釋第二個參數(shù)

var arr = []
[1, 2, 3].forEach(function(item) {
  this.push(item * item);
}, arr)
arr:
arr // [1, 4, 9]

如果這個參數(shù)不指定,則使用全局對象代替(在瀏覽器是為window),嚴格模式下甚至是undefine

map

array.map(function(item, index, arr), thisValue)

map的用法和forEach幾乎一樣,只不過,map的callback必須有return值,如果沒有return,得到的結果都為undefined;forEach方法一般不返回值，只用來操作數(shù)據(jù);因此在實際使用的時候，我們更多是的利用map方法去獲得對象數(shù)組中的特定屬性值們.

例如下例中的對比:

var group = [
    {id: 1, name: '張三', star: 23},
    {id: 2, name: '李四', star: 63}
]
想要獲取name的值的數(shù)組,更適合用map
group.map(function(item){
    return item.name
})
結果:
// ['張三', '李四']


如果想要得到star的總數(shù),就更適合用forEach
var sum = 0
group.forEach(function(item){
    sum += item.star
})
結果:
// sum 86

filter

filter: 過濾,篩選的意思;所有數(shù)組成員依次執(zhí)行參數(shù)中的回調函數(shù)，返回結果為true的成員組成一個新數(shù)組并返回。該方法不會改變原數(shù)組。;用法和map相似.

array.filter(callback,[ thisObject])

[1, 2, 3, 4, 5, 6].filter(function (item) {
  return (item 4 3)
})
// [5, 6]

some

接受一個函數(shù)作為參數(shù)，所有數(shù)組成員依次執(zhí)行該函數(shù)，返回一個布爾值;寫法跟上面的filter幾乎一樣,但是返回的結果,這里是布爾值,也就是說是否滿足條件,filter返回的是滿足條件后的結果;
some方法是只要有一個數(shù)組成員的返回值是true，則整個some方法的返回值就是true，否則false。

array.some(callback(item, index, arr){})

var arr = [1, 2, 3, 4, 5, 6]
arr.some(function (item) {
  return item >= 4
})
// true
// 這里只要有一個元素'>=4'的就返回true

every

every與some是相對的,就好比'&' 與 '||';every方法則是所有數(shù)組成員的返回值都是true，才返回true，否則false。

array.every(callback(item, index, arr){})

var arr = [1, 2, 3, 4, 5, 6]
arr.every(function (item) {
  return item >= 4
})
// false
// 這里是有所有的元素都'>=4'的話才會返回true

可能總結的不夠完善,后續(xù)改進