流程控制、迴圈

for 語句 (拆開一層陣列)

多個表達式也是可以的

for (let count = 0, total = 30 ; 
count < 10 && total > 20 ; 
count++, total--){
    console.log(count, total)
}

//較差的寫法
for (let i=0 ; i < aArray.length ; i++) {
  //statment
}

//較好的寫法
for (let i=0, len = aArray.length ; i < len; i++) {
  //statment
}

for...in 語句(單物件內部屬性使用)

let person = {fname:"John", lname:"Doe", age:25}

//x 是 key
for (let x in person) {
    console.log(person[x])
}
// John
// Doe
// 25

for...of 語句(陣列內是物件)

for...of語句是新的ES6語句，可以用於可迭代物件上，取出其中的值，可迭代物件包含陣列、字串、Map物件、Set物件等等。

//用於陣列
let aArray = [1, 2, 3]

for (let value of aArray) {
  console.log(value)
}

//用於字串
let aString = "abcd";

for (let value of aString) {
  console.log(value);
}

// 用 Object.entries 將單一物件內的多筆資料轉陣列
const object1 = {
  a: 'somestring',
  b: 42
};

for (let [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}
// "a: somestring"
// "b: 42"


//搭配解構賦值
const people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith'
    },
    age: 35
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
    },
    age: 25
  }
];

for (let {name: n, family: { father: f } } of people) {
    console.log('Name: ' + n + ', Father: ' + f)
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

forEach

用於陣列，且可使用 value, index, array 參數。無回傳值。

const aArray = [1, 2, 3, 4, 5]
aArray.forEach(function(value, index, array){
    // 對陣列元素作某些事
    console.log(index, value)
})


// jquery 是用 $.each
$.each(陣列,function(index,value){
    //...針對元素處理
})

用Object.keys取物件的key值轉為陣列，然後加上使用 forEach 方法

Object.keys(obj).forEach(function(key){
    console.log(obj[key])
});

map (映射)

是比較常被使用的迭代方法，由於它並不會改變輸入陣列(呼叫map的陣列)的成員值，所以並不會產生副作用，最後回傳符合條件的新陣列。

var aArray = [1, 2, 3, 4];
var newArray = aArray.map(function (value, index, array) {
    return value + 100
})

//原陣列不會被修改
console.log(aArray) // [1, 2, 3, 4]
console.log(newArray) // [101, 102, 103, 104]

reduce (歸納)

藉由一個回調(callback)函式，來作前後值兩相運算，然後不斷縮減陣列中的成員數量，最終回傳一個值。 參數包含以下：

• accumulator: 前一個參數，如果是第一個陣列的話，值是以另外傳入或初始化的值

• currentValue: 當前變數

• currentIndex: 當前索引

• array: 全部陣列

const aArray = [0, 1, 2, 3, 4]
//pValue是上次迴圈的暫存值
const total = aArray.reduce(
function(pValue, value, index, array){
    console.log('pValue = ', pValue, 
    ' value = ', value, ' index = ', index)
    return pValue + value
})

console.log(aArray) // [0, 1, 2, 3, 4]
console.log(total) // 10

//下面給定初始值10，注意它放的地方是在回調函式之後的參數中
const total2 = aArray.reduce(
function(pValue, value, index, array){
    console.log('pValue = ', pValue, ' 
    value = ', value, ' index = ', index)
    return pValue + value
}, 10)

console.log(total2) // 20

過濾與搜尋 filter 與 find/findIndex

filter(過濾)將陣列值進行過濾，最後回傳符合條件的新陣列。

const aArray = [1, 3, 5, 7, 10, 22]

const bArray = aArray.filter(function (value, index, array){
        return value > 6
    })

console.log(aArray) //[1, 3, 5, 7, 10, 22]
console.log(bArray) //[7, 10, 22]

find與findIndex方法都是在搜尋陣列值用的， find在尋找到符合條件時會回傳值(value) findIndex則是回傳符合條件的索引值(index)

const aArray = [1, 3, 5, 7, 10, 22]
const bValue = aArray.find(function (value, index, array){
        return value > 6
    })
const cIndex = aArray.findIndex(function (value, index, array){
        return value > 6
    })

console.log(aArray) //[1, 3, 5, 7, 10, 22]
console.log(bValue) //7
console.log(cIndex) //3

Array.prototype.find()

find() 與 filter() 很像，但 find() 只會回傳一次值，且是第一次為 true 的值。

常用於查詢是否有此值在陣列中

var people = [
  {
    name: 'Casper',
    like: '鍋燒意麵',
    age: 18
  },
  {
    name: 'Wang',
    like: '炒麵',
    age: 24
  },
  {
    name: 'Bobo',
    like: '蘿蔔泥',
    age: 1
  },
  {
    name: '滷蛋',
    like: '蘿蔔泥',
    age: 3
  }
];

var findAgeThan5 = people.find(function(item, index, array){
  return item.age > 5;           
  // 取得大於五歲的
});
console.log(findAgeThan5);       
// 雖然答案有兩個，但只會回傳 Casper 這一個物件

Array.prototype.every()

every() 可以檢查陣列是否符合所有條件，這僅會回傳一個值 true or false，可以用來檢查陣列中的內容是否符合特定條件。

var array = [
  {
    name: 'Casper',
    like: '鍋燒意麵',
    age: 18
  },
  {
    name: 'Wang',
    like: '炒麵',
    age: 24
  },
  {
    name: 'Bobo',
    like: '蘿蔔泥',
    age: 1
  },
  {
    name: '滷蛋',
    like: '蘿蔔泥',
    age: 3
  }
];

var ans = array.every(function(item, index, array){
  console.log(item, index, array); 
  // 物件, 索引, 全部陣列
  return item.age > 10 
  // 當全部 age 大於 10 才能回傳 true
});
console.log(ans); 
// false: 只要有部分不符合，則為 false

var ans2 = array.every(function(item, index, array){
  return item.age < 25
});
console.log(ans2); 
// true: 全部 age 都小於 25

Array.prototype.some()

some() 與 every() 非常接近，都是回傳 true or false，差異僅在 every() 需完全符合，some() 僅需要部分符合。

var ans = people.some(function(item, index, array){
  return item.age > 10
});
console.log(ans);  
// true: 只要有部分符合，則為 true

var ans2 = people.some(function(item, index, array){
  return item.age < 25
});
console.log(ans2); 
// true: 只要有部分符合，則為 true  

var ans2 = people.some(function(item, index, array){
  return item.age > 25
});
console.log(ans2); 
// false: 全部都不符合則為 false