新手前端,哪些技巧可以优化代码?

53 阅读2分钟

三元运算符

新手:

let hungry = true;
let eat;
if (hungry === true) {
    eat = 'yes';
} else {
    eat = 'no'; 
}

大师:

let hungry = true;
let eat = hungry === true ? 'yes' : 'no';

数值转字符串/字符串转数值

新手:

let num = 15;
let s = num.toString(); // 数值转字符串
let n = Number(s); // 字符串转数值

大师:

let num = 15; 
let s = num + ""; // 数值转字符串
let n = +s; // 字符串转数值

填充数组

新手:

for(let i=0; i < arraySize; i++){
    filledArray[i] = {'hello' : 'goodbye'}; 
}

大师:

let filledArray = new Array(arraysize).fill(null).map(() => ({'hello' : 'goodbye'}));

对象中的动态属性

新手:

let dynamic = "value";
let user = {
    id: 1
};
user[dynamic] = "other value"; 

大师:

let dynamic = "value";
let user = {
    id: 1,
    [dynamic]: "other value"
};

删除重复项

新手:

// 代码略...

大师:

let array = [100, 23, 23, 23, 23, 67, 45];
let outputArray = Array.from(new Set(array));

数组转对象

新手:

// 代码略...

大师:

let arr = ["value1", "value2", "value3"];
let arrObject = {...arr}; 

对象转数组

新手:

// 代码略...

大师:

let numbers = {
  one: 1,
  two: 2   
};
let key = Object.keys(numbers); 
let value = Object.values(numbers);
let entry = Object.entries(numbers);

短路条件语句

新手:

if (docs) {
    goToDocs();
}

大师:

docs && goToDocs()

使用 ^ 检查两个数是否不相等

if(a!=123) // 以前的代码 

if(a^123) // 大师级代码

遍历对象

// 代码略...

对象键以插入顺序存储

const obj = {
  name: "Rahul",
  age: 16,
  address: "Earth",
  profession: "Developer" 
};

console.log(Object.keys(obj)); // insertion order

检查值是否为数组

const arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true

初始化大小为n的数组,使用默认值填充

const size = 5; 
const defaultValue = 0;
const arr = Array(size).fill(defaultValue); 
console.log(arr); // [0, 0, 0, 0, 0]

真值和假值

假值:false、0、""(空字符串)、null、undefined 和 NaN

真值:"值"、"0"、{}(空对象)和

双等号和三等号的区别

// 双等号 - 把两个操作数转换为相同类型然后比较
console.log(0 == '0'); // true  

// 三等号 - 不转换类型
console.log(0 === '0'); // false

更好的方式来接收参数

function downloadData(/* 多个参数 */) {} 

downloadData(...); // 需要记住参数顺序

更简单的方式:

function downloadData({参数}) {}

downloadData({选定参数}); 

null 和 undefined 的区别

null是一个值,undefined不是。

null像一个空盒子,undefined根本不是一个盒子。

const fn = (x = '默认值') => console.log(x); 

fn(undefined); // 默认值
fn(); // 默认值

fn(null); // null

当传入null时,不取默认值。当传入undefined或没有传入值时,取默认值。