你不知道的几个JavaScript 高阶技巧

忠于所爱

三元运算符

基础：

1. let hungry = true;
2. let eat;
3. if (hungry === true) {
4.        eat = 'yes';
5. } else {
6.        eat = 'no';
7. }

复制代码

高阶：

1. let hungry = true;
2. let eat = hungry === true ? 'yes' : 'no';

复制代码

数字到字符串，字符串到数字

基础：

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

复制代码

高阶：

1. let num = 15;
2. let s = num + ""; // number to string
3. let n = +s; // string to number

复制代码

填充数组

基础：

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

复制代码

高阶：

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

复制代码

对象中的动态属性

基础：

1. let dynamic = "value";
2. let user = {
3.      id: 1,
4. };
5. user[dynamic] = "other value";

复制代码

高阶：

1. let dynamic = "value";
2. let user = {
3.     id: 1,
4.     [dynamic]: "other value"
5. };

复制代码

删除重复项

基础：

1. let array = [100, 23, 23, 23, 23, 67, 45];
2. let outputArray = [];
3. let flag = false;
4. for (j = 0; < array.length; j++) {
5.    for (k = 0; k < outputArray.length; k++) {
6.       if (array[j] == outputArray[k]) {
7.          flag = true;
8.        }
9.     }
10.     if (flag == false) {
11.       outputArray.push(array[j]);
12.      }
13.      flag = false;
14. }
15. //outputArray = [100, 23, 67, 45]

复制代码

高阶：

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

复制代码

数组转对象

基础：

1. let arr = ["value1", "value2", "value3"];
2. let arrObject = {};
3. for (let i = 0; i < arr.length; ++i) {
4.    if (arr[i] !== undefined) {
5.      arrObject[i] = arr[i];
6.    }
7. }

复制代码

高阶：

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

复制代码

对象转数组

基础:

1. let number = {
2.   one: 1,
3.   two: 2,
4. };
5. let keys = [];
6. for (let numbers in numbers) {
7.   if (number.hasOwnProperty(number)) {
8.      keys.push(number);
9.     }
10. }
11. // key = [ 'one', 'two' ]

复制代码

高阶:

1. let numbers = {
2.   one: 1,
3.   two: 2,
4. };
5. let key = Object.keys(numbers); // key = [ 'one', 'two' ]
6. let value = Object.values(numbers);  // value = [ 1, 2 ]
7. let entry = Object.entries(numbers); // entry = [['one' : 1], ['two' : 2]]

复制代码

条件短路

基础

1. if (docs) {
2.     goToDocs();
3. }

复制代码

高阶

1. docs && goToDocs()

复制代码

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

1. //基础
2. if(a!=123)
3.   
4. //高阶
5. if(a^123)

复制代码

循环访问对象

1. const age = {
2.    Rahul: 20,  
3.    max: 16
4. };
6. // Solution 1 - Get 'keys' and loop over
7. const keys = Object.keys(age);
8. keys.forEach(key => age[key]++);
9. con

复制代码

1. sole.log(age); // { Rahul: 21, max: 17 }
2. // Solution 2 - for ..in loop
3. for(let key in age){
4.    age[key]++;
5. }
6. console.log(age); // { Rahul: 22, max: 18 }

复制代码

Object keys 按插入顺序存储

1. const obj = {
2.   name: "Rahul",
3.   age: 16,
4.   address: "Earth",
5.   profession: "Developer",
6. };
7. console.log(Object.keys(obj)); // name, age, address, profession

复制代码

检查值是数组

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

复制代码

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

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

复制代码

双等和三等的区别

1. //双等号（==）只比较值是否相等。
2. //它本质上是做类型转换。这意味着在比较数值之前，它将变量的类型转换为相互匹配。
3. console.log(0 == '0'); // true
5. // 另一方面，三等号（===）不执行类型转换。
6. // 它将验证被比较的变量是否具有相同的值和相同的类型。
7. console.log(0 === '0'); // false

复制代码

接收更好的传参方式

1. function downloadData(url, resourceId, searchTest, pageNo, limit) {}
3. downloadData(...); // 需要记住传参顺序

复制代码

更简单的方法：

1. function downloadData(
2. { url, resourceId, searchTest, pageNo, limit } = {}
3. ) {}
5. downloadData(
6.   { resourceId: 2, url: "/posts", searchText: "WebDev" }
7. );

复制代码

null 和 undefined

null 是一个 value，然而 undefined 不是.
null 像一个空盒子，但 undefined 不是.

1. const fn = (x = 'default value') => console.log(x);
3. fn(undefined); // default value
4. fn(); // default value
6. fn(null); // null

复制代码

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

来源:https://www.cnblogs.com/rjf1979/p/17767714.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！