常用的 Javascript 方法

Posted by Peter Dong on March 28, 2022

平时在工作中有些时候需要使用 JS 显示数据列表,并且希望对数据进行分类,过滤,搜索,修改或更新。或者你想进行快速计算,如求和,乘法等等。实现这一目标的最佳方式是什么?今天将会介绍几种常用的方法帮助提高数据处理效率.

1. Spread operator

可以在函数调用/数组构造时,将数组表达式或者 string 在语法层面展开; 还可以在构造字面量对象时,将对象表达式按 key-value 的方式展开。

示例: 你想在不创建循环函数的情况下显示一个最喜欢的食物列表。可以使用 Spread operator.

1
2
  const favoriteFood = ['Pizza', 'Fries', 'Apple'];
  console.log(...favoriteFood); // Pizza Fries Apple

2. for…of

for…of 语句用于遍历可迭代对象的元素,并为你提供修改特定项目的能力。它取代了传统的 for-loop 方式。

示例:

1
2
3
4
5
6
7
  const toolBox = ['Hammer', 'Screwdrtver', 'Ruler']
  for(const item of toolBox){
    console.log(item)
  }
  // Hammer
  // Screwdrtver
  // Ruler

3. Includes()

includes() 方法是用来检查一个特定的字符串是否存在于一个集合中,并返回 true 或 false. 请记住,它是区分大小写的:如果集合里面的项目是 APEX, 而你搜索的是 Apex, 它将返回 false.

示例: 由于某种原因,你不知道你的车库里有哪些汽车,你需要一个系统来检查你想要的汽车是否存在。

1
2
3
4
5
6
const garage = ['BMW', 'AUDI', 'VOLVO']; 
 
const findCar = garage.includes('BMW'); 

console.log(findCar);
// true

4. Some()

some() 方法检查一个数组中是否存在某些元素,并返回真或假。这有点类似于 includes() 方法,只不过参数是一个函数而不是一个字符串。

示例:

ES5:

1
2
3
4
5
6
7
8
const age = [16, 14, 18];

age.some( function(person){

  return person >= 18;

});
// Output: true

ES6:

1
2
3
4
const age = [16, 14, 18];

age.some((person) => person >= 18);
// true

5. Every()

every() 方法在数组中循环检查每个项目,并返回真或假。与 some() 的概念相同。除了每个项目都必须满足条件语句,否则,它将返回 false.

示例:

ES5:

1
2
3
4
5
6
7
8
const age = [15, 20, 19];

age.every( function(person){

  return person >= 18;

});
// Output: false

ES6:

1
2
3
4
const age = [15, 20, 19];

age.every((person) => person >= 18);
// false

6. Filter()

filter() 方法会用所有通过条件的元素创建一个新数组。

示例:

ES5:

1
2
3
4
5
6
7
8
9
// array
const prices = [25, 30, 15, 55, 40, 10];

prices.filter(function(price){ 

  return price >= 30;

});
// Output:[ 30, 55, 40 ]

ES6:

1
2
3
4
const prices = [25, 30, 15, 55 40, 10]; 

prices.filter((price) => price >= 30);
// [30, 55,40]

7. Map()

map() 方法与 filter() 方法类似,都是返回一个新的数组。然而,唯一的区别是,它是用来修改项目的。

示例:

ES5:

1
2
3
4
5
6
7
8
const productPriceList = [200, 350, 1500, 5000]; 

productPriceList.map(function(item){

  return item * 0.75;

});
// [ 150, 262.5, 1125, 3750 ]

ES6:

1
2
3
4
const productPriceList = [200, 350, 1500, 5000]; 

productPriceList.map(( item ) => item * 0.75);
// [ 150, 262.5, 1125, 3750 ]

8. Reduce()

reduce() 方法可以用来将一个数组转化为其他东西,可以是一个 integer, 一个 object, chain promises 等等。一个简单的用例是对一个整数列表求和。简而言之,它将整个数组 “还原 “为一个值。

示例:

ES5:

1
2
3
4
5
6
const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350];

weeklyExpenses.reduce(function(first, last){
  return first + last;
});
// 8530

ES6:

1
2
3
const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350];
weeklyExpenses.reduce((first, last) => first + last);
// 8530

Buy Me a Coffee