17 个你不知道的JavaScript 专业技巧

学习一些适用的JavaScript 技巧，可以帮助我们提升工作效率，节省时间，最重要的是少代码多干活。

现在，我们就一起来看一下这17个JavaScript技巧，如果你已经知道了的话，你就当做复习，如果你还不知道的话，你就自行学习一下。

(资料图)

现在，我们就开始吧。

01、三元运算符

菜鸟：

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

专业人士：

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

02、数字转字符串/字符串转数字

菜鸟：

let num = 15; let s = num.toString(); // number to stringlet n = Number(s); // string to number

专业人士：

let num = 15;let s = num + ""; // number to stringlet n = +s; // string to number

03、填充数组

菜鸟：

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

专业人士：

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

04、对象的动态属性

菜鸟：

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

专业人士：

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

05、删除重复项

菜鸟：

let array = [100, 23, 23, 23, 23, 67, 45]; let outputArray = [];let flag = false; for (j = 0; < array.length; j++) {   for (k = 0; k < outputArray.length; k++) {      if (array[j] == outputArray[k]) {         flag = true;       }    }    if (flag == false) {      outputArray.push(array[j]);     }     flag = false;}//outputArray = [100, 23, 67, 45]

专业人士：

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

06、数组转对象

菜鸟：

let arr = ["value1", "value2", "value3"]; let arrObject = {};for (let i = 0; i < arr.length; ++i) {   if (arr[i] !== undefined) {     arrObject[i] = arr[i];   }}

专业人士：

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

07、对象转数组

菜鸟：

let number = {  one: 1,   two: 2,};let keys = []; for (let numbers in numbers) {  if (number.hasOwnProperty(number)) {     keys.push(number);    }}// key = [ "one", "two" ]

专业人士：

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

08、短路条件

菜鸟：

if (docs) {    goToDocs();}

专业人士：

docs && goToDocs()

09、使用 ^ 检查数字是否不相等

if(a!=123) // before // NOOBSif(a^123) // after // PRO

10、循环对象

const age = {   Rahul: 20,     max: 16};// Solution 1 - Get "keys" and loop overconst keys = Object.keys(age); keys.forEach(key => age[key]++);console.log(age); // { Rahul: 21, max: 16 }// Solution 2 - for ..in loopfor(let key in age){   age[key]++;}console.log(age); // { Rahul: 22, max: 18 }

11、对象键按插入顺序存储

cosnt obj = {  name: "Rahul",   age: 16,   address: "Earth",   profession: "Developer", }; console.log(Object.keys(obj)); // name, age, address, profession

12、检查值是否是数组

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

13、初始化一个大小为 n 的数组并用默认值填充

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

14、真实与错误的价值观

假值 => false、0、""（空字符串）、null、未定义、&NaN。

真值 => "Values", "0", {}（空对象），&[]（空数组）

15、双等号和三等号的区别

// Double equal - Converts both the operands to the same type and then comaparesconsole.log(0 == "o"); // true// Triple Equal - Does not convert t same typeconsole.log(0 === "0"); // false

16、接受论点的更好方法

function downloadData(url, resourceId, searchTest, pageNo, limit) {}downloadData(...); // need to remember the order

更简单的做法：

function downloadData({ url, resourceId, searchTest, pageNo, limit } = {}) {}downloadData(  { resourceId: 2, url: "/posts", searchText: "WebDev" });

17、null与undefined

null => 它是一个值，而 undefined 不是。

null 就像一个空盒子，未定义它根本不是盒子。

const fn = (x = "default value") => console.log(x);fn(undefined); // default valuefn(); // default valuefn(null); // null

当传递 null 时，不采用默认值。然而，当未定义或未传递任何内容时，将采用默认值。

总结

以上就是我今天想与你分享的JavaScript的技巧，希望这些技巧对你有用。

标签：