数组方法及应用

1. forEach

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

arr.forEach(value =>{
    console.log(value);
})

原数组的元素被遍历传入Iteration Function并执行。

2. map

原数组的元素被遍历传入Iteration Function并执行，执行的结果被返回并存入新数组。

与forEach最大的区别在于，map会把执行后的结果返回。forEach只是遍历，并不会产生结果。

渲染数据列表

const players = [
    {model:"Kovacic",price:"cheaper"},
    {model:"Rodríguez",price:"expensive"}
];
const playerList = document.createElement("ul");
const aboutPlayer = players.map(player=>{
    return `<li>${player.model} is ${player.price}<li>`
});
aboutPlayer.forEach(player=>{
    playerList.innerHTML += player;
})
document.body.innerHTML = "";
document.body.appendChild(playerList);

3. filter

从数组中筛选出符合条件的项，并且返回他们组成的新数组。

const products = [
  { name: 'cucumber', type: 'vegetable', quantity: 10, price: 1 },
  { name: 'banana', type: 'fruit', quantity: 8, price: 15 },
  { name: 'cucumber', type: 'vegetable', quantity: 25, price: 12 },
  { name: 'orange', type: 'fruit', quantity: 30, price: 8 },
];
// 不使用filter实现
// 筛选出类型为水果的产品
let filteredProducts = [];
for(var i = 0; i < products.length; i++){
  if(products[i].type === 'fruit'){
    filteredProducts.push(products[i])
  }
}
console.table(filteredProducts);

const fruit = products.filter(product => product.type === 'fruit');
console.table(fruit);

console.table将数组以表格的形式显示在控制台中, 可读性更强.

4. find and findIndex

1. find
   原数组的内容传入Iteration Function，该函数返回值的类型为布尔值，返回第一个值为true的原数组中的项。

2. findIndex
   根据筛选的条件，返回原数组中第一个满足该条件的项。

5. every and some

1. every
   根据筛选的条件判断，如果每一项都满足条件。则返回true，其中一项不符合，则返回false。

2. some
   只要有一项是true，则返回的结果为true。

6. sort

sort排序的原顺序是Unicode顺序进行排序。而不是数学中的大小排序。

const nums = [3,4,29,4,9];
const nums = [3,4,29,4,9];
nums.sort((a,b) => a - b);
console.log(nums);

7. reduce

第一个参数是Iteration Function，该函数接收四个参数，前一个值，当前值，项的索引以及数组对象。这个函数返回的任何值，都会作为第一个参数传递给下一项。第一次迭代发生在数组的第二项，以此类推。

let values = [2,4,6,8,10];
var sum = values.reduce(function(prev,cur,index,array){
    return prev + cur;
});
console.log(sum);