# 20+个超级实用的 JavaScript 开发技巧

·  阅读 12966

### 1. 初始化数组

``````const array = Array(6).fill('');
// ['', '', '', '', '', '']

``````const matrix = Array(6).fill(0).map(() => Array(5).fill(0));
// [[0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0]]

### 2. 数组求和、求最大值、最小值

``````const array  = [5,4,7,8,9,2];

``````array.reduce((a,b) => a+b);

``````array.reduce((a,b) => a > b ? a : b);

Math.max(...array)

``````array.reduce((a,b) => a < b ? a : b);

Math.min(...array)

### 3. 过滤错误值

``````const array = [1, 0, undefined, 6, 7, '', false];

array.filter(Boolean);
// [1, 6, 7]

### 4. 使用逻辑运算符

``````if(a > 10) {
doSomething(a)
}

``````a > 10 && doSomething(a)

### 5. 判断简化

``````if(a === undefined || a === 10 || a=== 15 || a === null) {
//...
}

``````if([undefined, 10, 15, null].includes(a)) {
//...
}

### 6. 清空数组

``````let array = ["A", "B", "C", "D", "E", "F"]
array.length = 0
console.log(array)  // []

### 7. 计算代码性能

``````const startTime = performance.now();
// 某些程序
for(let i = 0; i < 1000; i++) {
console.log(i)
}
const endTime = performance.now();
const totaltime = endTime - startTime;
console.log(totaltime); // 30.299999952316284

### 8. 拼接数组

``````const start = [1, 2]
const end = [5, 6, 7]
const numbers = [9, ...start, ...end, 8] // [9, 1, 2, 5, 6, 7 , 8]

``````const start = [1, 2, 3, 4]
const end = [5, 6, 7]
start.concat(end); // [1, 2, 3, 4, 5, 6, 7]

``````Array.prototype.push.apply(start, end)

### 9. 对象验证方式

``````const parent = {
child: {
child1: {
child2: {
key: 10
}
}
}
}

``````parent && parent.child && parent.child.child1 && parent.child.child1.child2

``````parent?.child?.child1?.child2

``````const array = [1, 2, 3];
array?.[5]

### 10. 验证undefined和null

``````if(a === null || a === undefined) {
doSomething()
}

``````a ?? doSomething()

### 11. 数组元素转化为数字

``````const array = ['12', '1', '3.1415', '-10.01'];
array.map(Number);  // [12, 1, 3.1415, -10.01]

### 12. 类数组转为数组

``````Array.prototype.slice.call(arguments);

``````[...arguments]

### 13. 对象动态声明属性

``````const dynamic = 'color';
var item = {
brand: 'Ford',
[dynamic]: 'Blue'
}
console.log(item);
// { brand: "Ford", color: "Blue" }

### 14. 缩短console.log()

``````const c = console.log.bind(document)
c(996)
c("hello world")

### 15. 获取查询参数

``````window.location.search

``````let type = new URLSearchParams(location.search).get('type');

### 16. 数字取整

``````~~3.1415926  // 3

• 如果是数字类型的字符串，就会转化为纯数字；
• 如果字符串包含数字之外的值，就会转化为0；
• 如果是布尔类型，true会返回1，false会返回0；

``````23.9 | 0   // 23
-23.9 | 0   // -23

### 17. 删除数组元素

``````const array = ["a", "b", "c", "d"]
array.splice(0, 2) // ["a", "b"]

### 18. 检查对象是否为空

``````Object.keys({}).length  // 0
Object.keys({key: 1}).length  // 1

Object.keys()方法用于获取对象的 key，会返回一个包含这些key值的数组。如果返回的数组长度为0，那对象肯定为空了。

### 19. 使用 switch case 替换 if/else

switch case 相对于 if/else 执行性能更高，代码看起来会更加清晰。

``````if (1 == month) {days = 31;}
else if (2 == month) {days = IsLeapYear(year) ? 29 : 28;}
else if (3 == month) {days = 31;}
else if (4 == month) {days = 30;}
else if (5 == month) {days = 31;}
else if (6 == month) {days = 30;}
else if (7 == month) {days = 31;}
else if (8 == month) {days = 31;}
else if (9 == month) {days = 30;}
else if (10 == month) {days = 31;}
else if (11 == month) {days = 30;}
else if (12 == month) {days = 31;}

``````switch(month) {
case 1: days = 31; break;
case 2: days = IsLeapYear(year) ? 29 : 28; break;
case 3: days = 31; break;
case 4: days = 30; break;
case 5: days = 31; break;
case 6: days = 30; break;
case 7: days = 31; break;
case 8: days = 31; break;
case 9: days = 30; break;
case 10: days = 31; break;
case 11: days = 30; break;
case 12: days = 31; break;
default: break;
}

### 20. 获取数组中的最后一项

``````const arr = [1, 2, 3, 4, 5];
arr[arr.length - 1]  // 5

``````arr.slice(-1)

### 21. 值转为布尔值

• undefined
• null
• 0
• -0
• NaN
• ""

``````!!undefined // false
!!"996"     // true
!!null      // false
!!NaN       // false

### 22. 格式化 JSON 代码

``````JSON.stringify(value, replacer, space)

• value：将要序列化成 一个 JSON 字符串的值。
• replacer 可选：如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。
• space 可选：指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；如果该参数没有提供（或者为 null），将没有空格。

``````console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));

### 23. 避免使用eval()和with()

• with() 会在全局范围内插入一个变量。因此，如果另一个变量具有相同的名称，则可能会导致混淆并覆盖该值。
• eval() 是比较昂贵的操作，每次调用它时，脚本引擎都必须将源代码转换为可执行代码。

### 24. 函数参数使用对象而不是参数列表

``````function getItem(price, quantity, name, description) {}

getItem(15, undefined, 'bananas', 'fruit')

``````function getItem(args) {
const {price, quantity, name, description} = args
}

getItem({
name: 'bananas',
price: 10,
quantity: 1,
description: 'fruit'
})