【面试题】前端应该了解的个JavaScript技巧有什么？(1)

地址：前端面试题库

【国庆头像】- 国庆爱国 程序员头像！总有一款适合你！

简介

如果你用这些技巧优化你的js码，它可以帮助你编写更干净、整洁、易维护的代码，为你节省编程时间。

1、灵活使用 && 或 || 代替if

在一些简单的情况下，你可以使用逻辑运算符&& 或 || 代替if。
代码列子1：

    // 繁琐的
    if (isGetData) {
      this.getData();
    }

    // 好的
    isGetData && this.getData();

代码列子2：

     // 繁琐的
    if (res.data) {
      return res.data;
    } else {
      return [];
    }

    // 好的
    return res.data || [];

2、~~运算符取整

~是按位取反运算，~~是取反两次，在这里~~的作用是去掉小数部分
因为位运算的操作值要求是整数，其结果也是整数，所以经过位运算的都会自动变成整数
道理与用！运算符把任意类型转化为 Boolean 类似
代码列子1：

    let a = 1;
    // 利用!!将a转换成 Boolean 值
    a = !!a; // true
    a = 0;
    a = !!a; // false
    a = {}
    a = !!a; // true

代码列子2：使用 ~~ 代替 Math.floor(）

    // 取整
    Math.floor(Math.random() * 50);

    // 取整
    ~~(Math.random() * 50);
    ~~'1.11111'; // 1
    ~~'whitedress1'; // 0
    ~~NaN; // 0

3、灵活使用 array.length 调整数组长度或清空数组

有时你需要调整数组长度或清空数组。最有效的方法是使用Array.length

代码列子：

    const array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];

    console.log(array.length); // 10

    // 调整数组大小
    array.length = 4;

    console.log(array.length); // 4
    console.log(array); // ['a', 'b', 'c', 'd']

    // 清空数组
    array.length = 0;
    console.log(array.length); // 0
    console.log(array); // []

4、如何高效处理数组合并

合并数组时，可能会对浏览器造成严重的压力，尤其是在处理大量数据时。想要保持简单和高效，请使用Array.concat() 和 Array.push.apply(arr1, arr2) 函数。

处理较小的数组，建议使用Array.concat()。
代码列子：

let list1 = ['a', 'b'];
let list2 = ['c', 'd'];

console.log(list1.concat(list2)); // ['a', 'b', 'c', 'd']

在较大数组时，它会在创建新数组时消耗大量内存。要解决性能下降问题，建议使用Array.push.apply(arr1, arr2)
代码列子：

let list1 = ['a', 'b', 'c', 'd', 'e'];
let list2 = ['f', 'g', 'h', 'i', 'j'];

console.log(list1.push.apply(list1, list2)); // 10
console.log(list1); // returns ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

5、数组过滤使用 filter()

filter()在筛选数组非常有用。在这种情况下，你可以根据数组的特征来排除数据。

代码列子：

let ages = [32, 33, 16, 40];
ages = ages.filter(age => age >= 18);
console.log(ages); // 32,33,40

6、快速去重 ...new Set(arr)

假设你有一个重复值的数组，你需要去重。可以使用扩展语法和对象类型的组合来实现。此方法适用于String和Number。

最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。