百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

数组方法forEach, map, filter, sort

作者张冰瑜课程任务二:零基础JavaScript编码(二)3327次浏览312017-03-03 13:05

解题思路:

  1. 使用filter方法获取空气质量指数大于60的城市;
  2. 使用sort方法将空气质量指数大于60的几个城市进行排序;
  3. 使用map方法对排好序的数组添加相应格式和相关文字,名次顺序可以使用数组的indexOf方法获得;
  4. 使用forEach方法将数组元素遍历添加到<ul>的innerHTML中。

forEach

示例:

const colors = ['red', 'green', 'blue'];

// 不使用forEach
// 遍历数组

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

// 使用forEach

colors.forEach(color => {
  console.log(color);
});

forEach

原数组的元素被遍历传入Iterator Function并执行.

更实际的应用:

forEach1

const numbers = [1, 2, 3, 4];
let sum = 0;

numbers.forEach(number => {
  sum += number;
});

console.log(sum);

map

示例:

const numbers = [1, 2, 3, 4];
// 将原数组中各个元素X2输出

// 不使用map实现

let doubledNumbers = []; // 创建一个新数组来存储数据, 为了不改变原数组 (avoid mutating)
for(var i = 0; i < numbers.length; i++){
  doubledNumbers.push(numbers[i] * 2)
}
console.log(doubledNumbers); // [2, 4, 6, 8]

// 使用map实现

let doubledMap = numbers.map(number => number * 2)
console.log(doubledMap); // [2, 4, 6, 8]

map

原数组的元素被遍历传入Iterator Function并执行, 执行后的结果被返回并存入新数组.

map可以用于汇总数组内各个元素的属性值, 并输出相关信息. 例子:

const cars = [
  {model: 'Buick', price: 'cheap'},
  {model: 'Camaro', price: 'expensive'}
];

const model = cars.map(car => {
  return car.model;
});
console.log(model); // ['Buick', 'Camaro']

const price = cars.map(car => {
  return car.price;
});
console.log(price); // ['cheap', 'expensive']

渲染数据列表:

可在浏览器控制台输入以下代码片段查看效果

const cars = [
  {model: 'Buick', price: 'cheap'},
  {model: 'Camaro', price: 'expensive'}
];  
const carsList = document.createElement('ul');

 const aboutCars = cars.map(car => {
   return `<li>${car.model} is ${car.price}</li>`;
 });

aboutCars.forEach(car => {
  carsList.innerHTML += car;
})
document.body.innerHTML = '';
document.body.appendChild(carsList);

更实际的应用:

map-practical

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);

// 使用filter实现
// 筛选出类型为水果的产品

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

// 筛选出类型为蔬菜, 且数量大于0, 且价格小于10的产品

const veg = products.filter(product => product.type === 'vegetable' && product.quantity > 0 && product.price < 10);
console.table(veg);

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

filter

原数组的元素被遍历传入Iterator Function, Iterator Function返回值的类型为布尔值, 如果返回true, 则该元素被存入结果数组.

更实际的应用:

筛选出指定post的comment内容:

filter-practical

const post = { id: 4, title: 'New Post'};

const comments = [
  { postId: 4, content: 'Awesome Post'},
  { postId: 3, content: 'It was ok'},
  { postId: 4, content: 'neat'}
];

function commentsForPost(post, comments){
  return comments.filter(comment => comment.postId === post.id);
}

const filteredComments = commentsForPost(post, comments);
console.table(filteredComments);


## sort

```js
function compareFunction(a, b){
  // return -1, a出现在b之前
  // return 1,  a出现在b之后
  // return 0, 顺序不变
}
arr.sort(compareFunction);

示例:

var numbers = [4, 20, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers); // [1, 3, 4, 5, 20]

如果没有comparisonFunction, 先将数列中的内容转化成字符串再根据Unicode顺序排序.

var scores = [1, 10, 21, 2];
scores.sort();
console.log(scores); // [1, 10, 2, 21]
// 10在 2之前,
// 因为在Unicode码中'10'在'2'之前
const inventors = [
  { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
  { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
  { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
  { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
  { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
  { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }
];

// 生辰从早到晚

inventors.sort((a, b) => a.year - b.year ? 1 : -1);

console.table(inventors);

// 活得长的发明家排在后

inventors.sort((a, b) => {
  return (a.passed - a.year) - (b.passed - b.year);
});

console.table(inventors);
10条评论