MK体系课吃透前端工程化,大厂级实战项目以战带练分享

178 阅读2分钟

1. 声明和初始化数组

下载这门课程ZY-》https://www.97yrbl.com/t-1383.html

我们可以使用默认值(如""、null或 )初始化特定大小的数组0。您可能已经将这些用于一维数组,但如何初始化二维数组/矩阵呢?

const array = Array(5).fill(''); 
// 输出
(5) ["", "", "", "", ""]

const matrix = Array(5).fill(0).map(()=>Array(5).fill(0)); 
// 输出
(5) [Array(5), Array(5), Array(5), Array(5), Array(5)]
0: (5) [0, 0, 0, 0, 0]
1: (5) [0, 0, 0, 0, 0]
2: (5) [0, 0, 0, 0, 0]
3: (5) [0, 0, 0, 0, 0]
4: (5) [0, 0, 0, 0, 0]
length: 5
复制代码

2. 找出总和、最小值和最大值

我们应该利用reduce方法来快速找到基本的数学运算。

const array  = [5,4,7,8,9,2];
复制代码
array.reduce((a,b) => a+b);
// 输出: 35
复制代码
  • 最大限度
array.reduce((a,b) => a>b?a:b);
// 输出: 9
复制代码
  • 最小
array.reduce((a,b) => a<b?a:b);
// 输出: 2
复制代码

3. 对字符串、数字或对象数组进行排序

我们有内置的方法sort()reverse()用于对字符串进行排序,但是数字或对象数组呢?

让我们看看数字和对象的升序和降序排序技巧。

  • 排序字符串数组
const stringArr = ["Joe", "Kapil", "Steve", "Musk"]
stringArr.sort();
// 输出
(4) ["Joe", "Kapil", "Musk", "Steve"]

stringArr.reverse();
// 输出
(4) ["Steve", "Musk", "Kapil", "Joe"]
复制代码
  • 排序数字数组
const array  = [40, 100, 1, 5, 25, 10];
array.sort((a,b) => a-b);
// 输出
(6) [1, 5, 10, 25, 40, 100]

array.sort((a,b) => b-a);
// 输出
(6) [100, 40, 25, 10, 5, 1]
复制代码
  • 对象数组排序
const objectArr = [     { first_name: 'Lazslo', last_name: 'Jamf'     },    { first_name: 'Pig',    last_name: 'Bodine'   },    { first_name: 'Pirate', last_name: 'Prentice' }];
objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
// 输出
(3) [{…}, {…}, {…}]
0: {first_name: "Pig", last_name: "Bodine"}
1: {first_name: "Lazslo", last_name: "Jamf"}
2: {first_name: "Pirate", last_name: "Prentice"}
length: 3
复制代码

4. 从数组中过滤出虚假值

Falsy值喜欢0undefinednullfalse""''可以很容易地通过以下方法省略

const array = [3, 0, 6, 7, '', false];
array.filter(Boolean);
// 输出
(3) [3, 6, 7]
复制代码

5. 对各种条件使用逻辑运算符

如果你想减少嵌套 if…else 或 switch case,你可以简单地使用基本的逻辑运算符AND/OR

function doSomething(arg1){ 
    arg1 = arg1 || 10; 
// 如果尚未设置,则将 arg1 设置为 10 作为默认值
return arg1;
}

let foo = 10;  
foo === 10 && doSomething(); 
// is the same thing as if (foo == 10) then doSomething();
// 输出: 10

foo === 5 || doSomething();
// is the same thing as if (foo != 5) then doSomething();
// 输出: 10
复制代码

6. 删除重复值

您可能已经将 indexOf() 与 for 循环一起使用,该循环返回第一个找到的索引或较新的 includes() 从数组中返回布尔值 true/false 以找出/删除重复项。 这是我们有两种更快的方法。

const array  = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
// or
const nonUnique = [...new Set(array)];
// 输出: [5, 4, 7, 8, 9, 2]