一些现代 Javascript 技巧

当我在学习 JavaScript 时，我曾经列出一个可以节省时间的技巧列表。我从其他人的代码、编程网站以及我用来学习的教程之外的任何地方获取了这些列表。我将分享该列表中的一些技巧，我发现这些技巧在现代 JavaScript 中非常有用，它对处于学习初级阶段和中级阶段的人非常有用。

另外，你也可以在留言区跟我分享你的一下学习技巧与相关问题，我们一起学习讨论进步。

史蒂夫乔布斯说，这个国家的每个人都应该学习编程计算机，因为它教你如何思考。

下面提到的一些技巧没有特定的顺序。

处理变量赋值的逻辑运算符

1. AND (&&)

当且仅当所有操作数都为true时，一组布尔操作数的逻辑与 (&&) 运算符才会为true。否则会是false的。

一般地，运算符返回第一个 falsy 的值。

和变量的用例

let a="one",b="two",c="three";


let d = a && b && c;  // "three"


/*In above the case , the first two input should have some values, then only 
I can access the last one, otherwise it will return the falsy value*/


let a = "",b="two",c="three";


let d = a && b && c;  // ""

2. OR (||)

当且仅当其一个或多个操作数为true时，一组操作数的逻辑 OR (||) 运算符为true。如果它的任何参数为true，则返回true，否则返回false。

例子：

使用上述示例，以便比较

/**input1*/
let a="one",b="two",c="three";


let d = a || b || c;  // "one"




/**input2*/
let a = "",b="two",c="three"; 


let d = a || b || c;  // "two"




/**input3*/
let a = "",b="",c="";


let d = a || b || c;  // ""

03.对象中的动态属性名称

在现代 javascript 中，使用动态键设置对象很简单。使用“[‘key’]”可以添加属性。

例子：

var stu_address = 'address';
var student = {
    name:'mick',
    age : 10,
    stu_address : 'chennai'    


}
// {name:'mick', age : 10, stu_address : 'chennai'}


/*Using notations you can change the key dynamically*/


var stu_address = 'address';
var student = {
    name:'mick',
    age : 10,
    [stu_address] : 'chennai'    


}


//{name: 'mick', age: 10, address: 'chennai'}

04.数组到对象，对象到数组

在现代 javascript 世界中，我们可以将数组转换为对象或将对象转换为数组是最简单的方法。我想你知道扩展运算符，你可能用过很多地方，就像我们将在这里使用它的那样。

例子：

数组到对象

let arr = [1,2,3,4,5,6,7,8,9]


const convert_obj = {...arr}; 
// {"0": 1, "1": 2, "2": 3, "3": 4, "4": 5, "5": 6, "6": 7, "7": 8, "8": 9,"9": 10}

对象到数组

我们有 3 种类型将对象转换为数组

1).Object.Keys ：使用此方法，将获取所有键作为数组

2). Object.values：使用该方法将获取所有值作为一个数组

3). Object.entries：将获取数组中的键和值

let obj = {
            one : 'a',
            two : 'b',
            three : 'c'
        };


/*1. Object.keys*/


         const keys = Object.keys(obj) //['one', 'two', 'three']


/*2. Object.values*/             


           const values = Object.values(obj) // ['a', 'b', 'c']


/*3. Object.entries*/


             const entries = Object.entries(obj) // [ ["one", "a"], ["two", "b"], ["three","c"] ]

05.解构赋值

解构赋值是一种特殊的语法，它允许我们将数组或对象“解包”成一堆变量，因为有时这样更方便。

ES6 中引入的解构赋值使得将数组值和对象属性分配给不同的变量变得很容易，大多数人在 react、angular 等 javascript 框架中使用了这个特性。

const student = {
    name : 'mick',
    age : 10,
    gender : 'male'
}


/*Before ES6 : */
 student.name // "mick"
 student.age //10
 student.gender // "male"   


/*From ES6 (using this feature) : */


const {name,age,gender} = student;
 name // "mick"
 age // 10
 gender // "male"

注意：在解构对象时，应该为变量使用与对应对象键相同的名称。

const {name1,age,gender} = student;


name1 // undefined


/*if you want to assign different variable names, you can use key and pair*/


const {name : name1,age : age1 , gender: gender2} = student;


name1 // "mick"


/*and you can assign default values */


const {name,age,gender,score=70} = student;


score // 70

如果键不是那样，将分配默认值。

在数组中：

const num = [11,12,13,14,15,16,17,18,19];
    const [firstElement, secondElement, thirdElement] = num;
    firstElement // 11
    secondElement // 12
    thirdElement // 13


// is equivalent to:
const firstElement = num[0];
const seco
ndElement = num[1];


let [a, b, c] = "mick"; // ["m", "i", "c"]

总结

以上就是我在这篇文章中，与你分享的一些关于Javascript的技巧，希望你能从中学到一些有用的东西。

一些现代 Javascript 技巧

猜你喜欢