本文共 5262 字,大约阅读时间需要 17 分钟。
英文 | https://medium.com/geekculture/20-javascript-snippets-to-code-like-a-pro-86f5fda5598e
翻译 | 杨小二
我收集了一份我喜欢使用的 JavaScript 速记片段列表,我认为你也应该知道如何使用它们,我希望你喜欢它,也希望这些对你有用。
这是许多编程语言的共同特征。你可以使用三元运算符用一行代码编写整个语句,而不是在多行上编写 if-else。
例如:
const age = 12;let ageGroup;// LONG FORMif (age > 18) { ageGroup = "An adult";} else { ageGroup = "A child";}// SHORTHANDageGroup = age > 18 ? "An adult" : "A child";
但是,不要过度使用它。它会使你的代码更加冗长。明智的做法是仅用此替换简单的表达式以提高可读性并减少代码行数。
在 JavaScript 中,Set 是一个集合,它允许你仅存储唯一值。这意味着删除任何重复的值。
因此,要从数组中删除重复项,你可以将其转换为集合,然后再转换回数组。
const numbers = [1, 1, 20, 3, 3, 3, 9, 9];const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]
困惑吗?让我解释一下它是如何工作的:
1)、new Set(numbers)从数字列表中创建一个集合。创建集合会自动删除所有重复值。
2)、展开运算符...将任何可迭代对象转换为数组。这意味着将集合转换回数组。[...new Set(numbers)]
这也是 if-else 的简写。
你可以使用看涨合并,而不是使用 if-else 构造来检查值是否为空。该nullish合并操作 ??,如果没有定义左侧返回右侧。如果是,则返回左侧:
let maybeSomething;// LONG FORMif(maybeSomething){ console.log(maybeSomething)} else { console.log("Nothing found")}//SHORTHANDconsole.log(maybeSomething ?? "Nothing found")
如果访问未定义的属性,则会产生错误。这就是可选链的用武之地。
在未定义属性时使用可选链运算符,undefined将返回而不是错误。这可以防止你的代码崩溃。
例如:
const student = { name: "Matt", age: 27, address: { state: "New York" },};// LONG FORMconsole.log(student && student.address && student.address.ZIPCode); // Doesn't exist - Returns undefined// SHORTHANDconsole.log(student?.address?.ZIPCode); // Doesn't exist - Returns undefined
在 JavaScript 中,你可以使用解构从数组中拆分值。这可以应用于交换两个变量而无需第三个:
let x = 1;let y = 2;// LONGER FORMlet temp = x;x = y;y = temp;// SHORTHAND[x, y] = [y, x];
在 JavaScript 中,你可以使用 !! 在 JS 中将任何内容转换为布尔值。
例如,这里有一些例子:
!!true // true!!2 // true!![] // true!!"Test" // true!!false // false!!0 // false!!"" // false
使用扩展运算符组合两个数组...:
const nums1 = [1, 2, 3];const nums2 = [4, 5, 6];// LONG FORMlet newArray = nums1.concat(nums2);// SHORTHANDnewArray = [...nums1, ...nums2];
也可以使用此语法代替将值推送到数组:
let numbers = [1, 2, 3];// LONGER FORMnumbers.push(4);numbers.push(5);// SHORTHANDnumbers = [...numbers, 4, 5];
使用扩展运算符将剩余元素分配给变量:
const student = { name: "Matt", age: 23, city: "Helsinki", state: "Finland",};// LONGER FORMconst name = student.name;const age = student.age;const address = { city: student.city, state: student.state };// SHORTHANDconst { name, age, ...address } = student;
不必用if语句检查某事是否为真,你可以使用&&运算符:
var isReady = true;function doSomething(){ console.log("Yay!");}// LONGER FORMif(isReady){ doSomething();}// SHORTHANDisReady && doSomething();
通过将字符串包装在反引号内并${}用于嵌入值,从而在字符串之间插入变量。
例如:
const age = 41;const sentence = `I'm ${age} years old`;// result: I'm 41 years old
使用find()方法查找匹配特定条件的元素:
const fruits = [ { type: "Banana", color: "Yellow" }, { type: "Apple", color: "Green" }];// LONGER FORMlet yellowFruit;for (let i = 0; i < fruits.length; ++i) { if (fruits[i].color === "Yellow") { yellowFruit = fruits[i]; }}// SHORTHANDyellowFruit = fruits.find((fruit) => fruit.color === "Yellow");
你是否希望对象键与值具有相同的名称?你可以省略对象文字来执行此操作:
const name = "Luis", city = "Paris", age = 43, favoriteFood = "Spaghetti";// LONGER FORMconst person = { name: name, city: city, age: age, favoriteFood: favoriteFood};// SHORTHANDconst person = { name, city, age, favoriteFood };
使用内置forEach()方法通过一行代码循环遍历数组:
const numbers = [1, 2, 3, 4, 5];// LONGER FORMfor(let i = 0; i < numbers.length; i++){ console.log(numbers[i]);}// SHORTHANDnumbers.forEach(number => console.log(number));
你可以为函数参数提供默认值:
// LONG FORMfunction pickUp(fruit) { if(fruit === undefined){ console.log("I picked up a Banana"); } else { console.log(`I picked up a ${fruit}`); }}// SHORTHANDfunction pickUp(fruit = "Banana") { console.log(`I picked up a ${fruit}`)}pickUp("Mango"); // -> I picked up a MangopickUp(); // -> I picked up a Banana
用于Object.values()将对象的所有值收集到一个新数组中:
const info = { name: "Matt", country: "Finland", age: 35 };// LONGER FORMlet data = [];for (let key in info) { data.push(info[key]);}// SHORTHANDconst data = Object.values(info);
这不一定是速记,因为你几乎不会保存几个字符。 但这是一种更清洁的方法。
你可以使用 includes() 方法,而不是使用 indexOf() 方法来检查元素是否在数组中。 这使你的意图非常明确:
let numbers = [1, 2, 3];// LONGER FORMconst hasNumber1 = numbers.indexOf(1) > -1 // -> True// SHORTHAND/CLEANER APPROACHconst hasNumber1 = numbers.includes(1) // -> True
避免使用长|| 检查多个条件链,你可以使用你刚刚在上一个技巧中学到的东西——即,使用 includes() 方法:
const num = 1;// LONGER FORMif(num == 1 || num == 2 || num == 3){ console.log("Yay");}// SHORTHANDif([1,2,3].includes(num)){ console.log("Yay");}
你Math.pow()习惯把一个数字提高到一个幂吗?你知道你也可以使用**运算符吗?
// LONGER FORMMath.pow(4,2); // 16Math.pow(2,3); // 8// SHORTHAND4**2 // 162**3 // 8
四舍五入Math.floor()并不是什么新鲜事。但是你知道你也可以使用~~运算符吗?
例如:
// LONG FORMMath.floor(5.25) // -> 5.0// SHORTHAND~~5.25 // -> 5.0
使用解构语法在一行中分配多个值:
let num1, num2;// LONGER FORMnum1 = 10;num2 = 100;// SHORTHAND[num1, num2] = [10, 100];
这也适用于使用 JavaScript 对象:
student = { name: "Matt", age: 29,};// LONGER FORMlet name = student.name;let age = student.age;// SHORTHANDlet { name, age } = student;
我希望你喜欢它并学到了一些新东西。
感谢你的阅读,编程快乐!
学习更多技能
请点击下方公众号
转载地址:http://hgbpi.baihongyu.com/