JavaScript 技巧

1.Replace All

string.Replace()函数只会替换第一个项目。
可以在这个正则表达式的末尾添加/g来替换所有内容。

var example = "potato potato";
console.log(example.replace(/pot/, "tom"));
// "tomato potato"

console.log(example.replace(/pot/g, "tom"));
// "tomato tomato"

2.提取唯一值

var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries = [...new Set(entries)];
console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]

3.随机排列数组中的元素

var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(my_list.sort(function() {
    return Math.random() - 0.5
}));
// [4, 8, 2, 9, 1, 3, 6, 5, 7]

4.展平多维数组

var entries = [1, [2, 5], [6, 7], 9];
var flat_entries = [].concat(...entries);
// [1, 2, 5, 6, 7, 9]

5.短路条件

// 优化前
if (available) {
    addToCart();
}

// 优化后
available && addToCart()

6.动态属性名称

const dynamic = 'flavour';
var item = {
    // name是静态的
    name: 'Coke',
    // dynamic是动态的
    [dynamic]: 'Cherry'
}
console.log(item);
// { name: "Coke", flavour: "Cherry" }

7.使用 length 调整大小 / 清空数组

var entries = [1, 2, 3, 4, 5, 6, 7];
console.log(entries.length);
// 7
entries.length = 4;
console.log(entries.length);
// 4
console.log(entries);
// [1, 2, 3, 4]

如果我们要清空数组：

var entries = [1, 2, 3, 4, 5, 6, 7];
console.log(entries.length);
// 7
entries.length = 0;
console.log(entries.length);
// 0
console.log(entries);
// []

8.多条件检查

对于多个值匹配，我们可以将所有的值放到数组中，然后使用indexOf()或includes()方法。

// 优化前
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
     // Execute some code
}
// 优化后 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
    // Execute some code
}
// 优化后 2
if ([1, 'one', 2, 'two'].includes(value)) {
    // Execute some code
}

9.找出数组中的最大和最小数字

我们可以使用 for 循环来遍历数组中的每一个值，然后找出最大或最小值。
我们还可以使用 Array.reduce() 方法来找出数组中的最大和最小数字。
但是使用扩展符号，我们一行就可以实现。

const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2

10.For 循环

为了遍历一个数组，我们一般使用传统的for循环。
我们可以使用for...of来遍历数组。
为了获取每个值的索引，我们可以使用for...in循环。

let arr = [10, 20, 30, 40];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

for (const val of arr) {
  console.log(val);
}

for (const index in arr) {
  console.log(arr[index]);
}

我们还可以使用for…in循环来遍历对象属性。

let obj = {x: 20, y: 50};
for (const key in obj) {
  console.log(obj[key]);
}

11.数组的合并

let arr1 = [20, 30];
// 数组合并
let arr2 = arr1.concat([60, 80]);
// [20, 30, 60, 80]

// 数组合并
let arr2 = [...arr1, 60, 80];
// [20, 30, 60, 80]

12.获取字符串中的字符

let str = 'jscurious.com';
// 传统方法
str.charAt(2); // c

// 新方法
str[2]; // c