帮你提高开发效率的JavaScript20个技巧

程序员文章站 2023-12-29 14:43:04

目录7. 创建一个计数器对象或map15. rest & spread 运算符减少代码行数和加快开发的技术!我们在开发中，经常要写一些函数，如排序、搜索、寻找唯一的值、传递参数、交换值等，在这...

1. 申明和初始化数组

可以用默认值来初始化特定大小的数组，如""、null或0。你可能已经把这些用于一维数组，但如何初始化二维数组/矩阵呢？

const array = array(5).fill(''); 
// output 
(5) ["", "", "", "", ""]
const matrix = array(5).fill(0).map(()=>array(5).fill(0)); 
// output
(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);
// output: 35

最大值

array.reduce((a,b) => a>b?a:b);
// output: 9

最小值

array.reduce((a,b) => a<b?a:b);
// output: 2

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

有内置的sort()和reverse()方法来对字符串进行排序，但对数字或对象数组的排序呢？
数字和对象的排序技巧，可以按照递增和递减的顺序进行排序。

字符串排序

const stringarr = ["joe", "kapil", "steve", "musk"]
stringarr.sort();
// output
(4) ["joe", "kapil", "musk", "steve"]
stringarr.reverse();
// output
(4) ["steve", "musk", "kapil", "joe"]

数字排序

const array  = [40, 100, 1, 5, 25, 10];
array.sort((a,b) => a-b);
// output
(6) [1, 5, 10, 25, 40, 100]
array.sort((a,b) => b-a);
// output
(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));
// output
(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. 是否需要从一个数组中过滤掉无用的值？

像0，undefined，null，false，""，''这样的值可以通过下面的技巧轻松过滤。

const array = [3, 0, 6, 7, '', false];
array.filter(boolean);
// output
(3) [3, 6, 7]

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

如果你想减少嵌套，比如if...else或switch，可以使用逻辑运算符and/or。

function dosomething(arg1){ 
    arg1 = arg1 || 10; 
// set arg1 to 10 as a default if it's not already set
return arg1;
}
let foo = 10;  
foo === 10 && dosomething(); 
// is the same thing as if (foo == 10) then dosomething();
// output: 10
foo === 5 || dosomething();
// is the same thing as if (foo != 5) then dosomething();
// output: 10

6. 删除重复的值

你可能已经在for循环中使用了indexof()，它返回第一个找到的索引，或者使用较新的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)];
// output: [5, 4, 7, 8, 9, 2]

7. 创建一个计数器对象或map

很多时候，需要通过创建计数器对象或map来解决问题，该对象以变量为键，以其频率/出现次数为值来跟踪变量。

let string = 'kapilalipak';
const table={}; 
for(let char of string) {
  table[char]=table[char]+1 || 1;
}
// output
{k: 2, a: 3, p: 2, i: 2, l: 2}

和

const countmap = new map();
  for (let i = 0; i < string.length; i++) {
    if (countmap.has(string[i])) {
      countmap.set(string[i], countmap.get(string[i]) + 1);
    } else {
      countmap.set(string[i], 1);
    }
  }
// output
map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}

8. 三元运算符很酷

你可以用三元运算符避免嵌套条件if...elseif...elseif。

function fever(temp) {
    return temp > 97 ? 'visit doctor!'
      : temp < 97 ? 'go out and play!!'
      : temp === 97 ? 'take some rest!';
}
// output
fever(97): "take some rest!" 
fever(100): "visit doctor!"

9. 与传统的once相比，for循环更快。

for 和 for...in 默认会得到索引，但你可以使用 arr[index]。

for...in也接受非数字，所以要避免它。

foreach,for...of可以直接得到元素。

foreach也可以得到索引，但for...of不能。

10. 合并两个对象

在日常工作中，我们经常需要合并多个对象。

const user = { 
 name: 'kapil raghuwanshi', 
 gender: 'male' 
 };
const college = { 
 primary: 'mani primary school', 
 secondary: 'lass secondary school' 
 };
const skills = { 
 programming: 'extreme', 
 swimming: 'average', 
 sleeping: 'pro' 
 };
const summary = {...user, ...college, ...skills};
// output 
gender: "male"
name: "kapil raghuwanshi"
primary: "mani primary school"
programming: "extreme"
secondary: "lass secondary school"
sleeping: "pro"
swimming: "average"

11. 箭头函数

箭头函数表达式是传统函数表达式的一个紧凑的替代方案，但它有局限性，不能在所有情况下使用。因为它们有词法范围（parental scope），没有自己的this和arguments，因此它们指的是它们被定义的环境。

const person = {
name: 'kapil',
sayname() {
    return this.name;
    }
}
person.sayname();
// output
"kapil"

箭头函数改写为：

const person = {
name: 'kapil',
sayname() {
    return this.name;
    }
}
person.sayname();
// output
"kapil"

12. 可选链式

如果在?之前的值是未定义的或空的，可选链式?就会停止评估，并返回未定义。

const user = {
  employee: {
    name: "kapil"
  }
};
user.employee?.name;
// output: "kapil"
user.employ?.name;
// output: undefined
user.employ.name
// output: vm21616:1 uncaught typeerror: cannot read property 'name' of undefined

13. 打乱一个数组

使用内置的math.random()方法。

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
list.sort(() => {
    return math.random() - 0.5;
});
// output
(9) [2, 5, 1, 6, 9, 8, 4, 3, 7]
// call it again
(9) [4, 1, 7, 5, 3, 8, 2, 9, 6]

14. 空值合并运算符

空值合并运算符(??)是一个逻辑运算符，当其左侧的操作数为空或未定义时，返回其右侧的操作数，否则返回其左侧的操作数。

const foo = null ?? 'my school';
// output: "my school"
const baz = 0 ?? 42;
// output: 0

15. rest & spread 运算符

那些神秘的3个点...可以rest或spread！

function myfun(a,  b, ...manymoreargs) {
   return arguments.length;
}
myfun("one", "two", "three", "four", "five", "six");
// output: 6

和

const parts = ['shoulders', 'knees']; 
const lyrics = ['head', ...parts, 'and', 'toes']; 
lyrics;
// output: 
(5) ["head", "shoulders", "knees", "and", "toes"]

16. 缺省参数

const search = (arr, low=0,high=arr.length-1) => {
    return high;
}
search([1,2,3,4,5]);
// output: 4

17. 将十进制转换为二进制或十六进制

我们可以使用一些内置的方法，如.toprecision()或.tofixed()来帮助实现此类问题。

num.tostring(2);
// output: "1010"
num.tostring(16);
// output: "a"
num.tostring(8);
// output: "12"

18. 使用解构简单交换2个值

let a = 5;
let b = 8;
[a,b] = [b,a]
[a,b]
// output
(2) [8, 5]

19. 单行回文检查

function checkpalindrome(str) {
  return str == str.split('').reverse().join('');
}
checkpalindrome('naman');
// output: true

20. 将对象的属性变成一个数组的属性

使用object. entries(),object.key()和object.values()。

const obj = { a: 1, b: 2, c: 3 };
object.entries(obj);
// output
(3) [array(2), array(2), array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
length: 3
object.keys(obj);
(3) ["a", "b", "c"]
object.values(obj);
(3) [1, 2, 3]

总结

我整理的就这些了，希望大家可以关注其他文章！

帮你提高开发效率的JavaScript20个技巧

目录

1. 申明和初始化数组

2.进行求和、最小值和最大值

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

4. 是否需要从一个数组中过滤掉无用的值？

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

6. 删除重复的值

7. 创建一个计数器对象或map

8. 三元运算符很酷

9. 与传统的once相比，for循环更快。

10. 合并两个对象

11. 箭头函数

12. 可选链式

13. 打乱一个数组

14. 空值合并运算符

15. rest & spread 运算符

16. 缺省参数

17. 将十进制转换为二进制或十六进制

18. 使用解构简单交换2个值

19. 单行回文检查

20. 将对象的属性变成一个数组的属性

总结

帮你提高开发效率的JavaScript20个技巧

提高iOS开发效率的小技巧与思路

提高iOS开发效率的小技巧与思路

提高JavaScript执行效率的23个实用技巧

提高MySQL 查询效率的三个技巧第1/2页

Visual Studio 2008开发中提高工作效率的小技巧

Visual Studio 2008开发中提高工作效率的小技巧

提高JavaScript执行效率的23个实用技巧

5个提高Linux开发效率的工具

提高MySQL 查询效率的三个技巧第1/2页