GGbond : 一些JavaScript容易被忽略的用法

一些js的用法,持续添加 , 记录一下 GGboy 一年多的成长 , 避免忘记

1. 使用解构赋值提取对象或数组中的数据

ES6中引入的一种新的语法,它可以让你方便地从对象或数组中提取数据,并赋值给变量。例如:

// 使用普通赋值  
let person = {  
name: 'GGboy',  
age: 25,  
gender: 'male'  
};  
let name = person.name;  
let age = person.age;  
let gender = person.gender;  
console.log(name, age, gender); // GGboy 25 male  
  
// 使用解构赋值  
let person = {  
name: 'GGboy',  
age: 25,  
gender: 'male'  
};  
let {name, age, gender} = person;  
console.log(name, age, gender); // GGboy 25 male  

你还可以给变量设置默认值,或者使用别名,例如:

// 设置默认值  
let {name, age, gender = 'female'} = {name: 'Alice', age: 23};  
console.log(name, age, gender); // Alice 23 female  
  
// 使用别名  
let {name: n, age: a, gender: g} = {name: 'Bob', age: 25, gender: 'male'};  
console.log(n, a, g); // Bob 25 male  

2. 你可以使用双问号运算符(??)来实现空值合并,

let name = null;  
let greeting = name || "Hi"; // Hi  
let farewell = name ?? "Bye"; // Bye  

即如果左侧的操作数为null或undefined,就返回右侧的操作数,否则返回左侧的操作数

3. 你可以使用可选链运算符(?.)来访问对象的属性或方法

let person = {  
name: "Alice",  
age: 25,  
address: {  
city: "New York",  
zip: 10001  
}  
};  
  
console.log(person.name); // Alice  
console.log(person.address.city); // New York  
console.log(person.phone?.number); // undefined  
console.log(person.hobbies?.[0]); // undefined  

4. 使用数组方法来处理字符串

如果你想对一个字符串进行一些操作,比如反转,排序,过滤等,你可能会先把字符串转换成数组,然后使用数组的方法来处理,最后再把数组转换回字符串。比如:

let str = 'hello';  
let arr = str.split(''); // ['h', 'e', 'l', 'l', 'o']  
arr.reverse(); // ['o', 'l', 'l', 'e', 'h']  
str = arr.join(''); // 'olleh'  

但是,其实可以用一些简单的技巧来省略掉转换的步骤,直接在字符串上使用数组方法。具体来说,你可以用扩展运算符(...)来把字符串展开成数组,并用方括号 ([]) 来把数组包裹起来。然后你就可以在方括号里面使用任何数组方法了。比如:

let str = 'hello';  
str = [...str].reverse().join(''); // 'olleh'  

5. 方便的与对象进行操作和转换

你可以使用Object.fromEntries()方法来将一个键值对数组转换为一个对象,反之可以使用Object.entries()方法来将一个对象转换为一个键值对数组。

let entries = [["name", "Alice"], ["age", 25], ["gender", "female"]];  
let obj = Object.fromEntries(entries);  
console.log(obj); // {name: "Alice", age: 25, gender: "female"}  
  
let obj2 = {  
color: "red",  
shape: "circle",  
size: "large"  
};  
let entries2 = Object.entries(obj2);  
console.log(entries2); // [["color", "red"], ["shape", "circle"], ["size", "large"]]  

6. 使用BigInt类型来表示任意精度的整数,而不需要担心数字溢出或精度丢失。

BigInt类型的值需要在数字后面加上n后缀,或者使用BigInt()函数来创建。BigInt类型的值可以与普通的数字类型进行比较,但不能与之进行算术运算,需要使用专门的方法或运算符。例如:

let bigNum = 1234567890123456789012345678901234567890n;  
let smallNum = 42;  
console.log(bigNum > smallNum); // true  
console.log(bigNum + smallNum); // TypeError: Cannot mix BigInt and other types  
console.log(bigNum + BigInt(smallNum)); // 1234567890123456789012345678901234567932n  
console.log(bigNum ** 2n); // 15241578780673678546105778281054720515622620750190521n  

7. 使用双波浪号~~进行取整

如果你想把一个浮点数转换成整数,你可能会使用Math.floor()或者Math.round()等内置函数。但是,你知道吗,你也可以使用双波浪号~~来实现同样的效果:

console.log(~~3.14); // 3  
console.log(~~-2.9); // -2  
console.log(~~NaN); // 0  

如果你有任何建议,请在评论区留言,我会尽快回复你。谢谢!