3 分钟看 3 个 JS 小把戏

2022 年 8 月 15 日
广东
本文字数：1173 字
阅读完需：约 4 分钟

众所周知，JS 有很多小把戏（tricks），虽然有些基本用的很少，但是偶然遇到了，至少要能读懂吧~

话不多说，直接开冲~

trick 1 : 两组逻辑与或

来看以下代码片段：

let a="one",b="two",c="three";
let d = a && b && c; 
console.log(d)

复制代码

输出什么？

是 true 吗? 还是 one/two/three 的其中一个？

正确答案是：

// "three"

复制代码

再来：

let a = "",b="two",c="three";
let d = a && b && c; 
console.log(d)

复制代码

输出什么？

是 false 吗？还是 “”/two/three 的其中一个？

答案是：

 // ""

复制代码

且慢，先别着急下结论，看完“与运算”，再来看看“或运算”：

let a="one",b="two",c="three";
let d = a || b || c; 
console.log(d)

复制代码

输出还是 three 吗？

错，结果是：

 // "one"

复制代码

再看：

let a = "",b="two",c="three"; 
let d = a || b || c;
console.log(d)

复制代码

输出是：

  // "two"

复制代码

噢噢~看到这里，想必已经有大聪明猜到了其中的道理~~

AND (&&)

两组逻辑与 ( && ) 运算符表示：

当其中每一个值都为“真”时，取最后一个值；

当其中存在值为“假”时，取第一个为“假”的值；

OR (||)

两组逻辑或 ( || ) 运算符表示：

当其中存在值为“真”时，取第一个为“真”的值；

当其中每一个值都为“假”时，取最后一个值；

trick 2 : 将变量设为 key

有时候会碰到这样的需求：一个对象的 key 是一个变量；那我们该如何去设置？

这样？

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

复制代码

输出，并没有达到预期的效果。

“trick 登场” ！

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

复制代码

将对象中 key 用 [ ] 包住，则可将 key 设为动态键；

trick 3 : 数据和对象转换

这个常见，但也确实重要且好用~

数组转成对象：

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}

复制代码

对象转成数组：

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"] ]

复制代码

<hr>

对于本瓜来说，第一个 trick 还是不错滴，平常用的少，可以加强理解；

OK，以上便是本篇分享，希望能有所帮助~

觉得不错，给个三连吧 👍👍👍

我是掘金安东尼，输出暴露输入，技术洞见生活。

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/64624475c28e3078f871ddcc0】。文章转载请联系作者。

掘金安东尼

关注

安东尼陪你度过漫长编程岁月~ 2022.07.14 加入

社会我瓜哥，人狠话不多😎 微信 anthony1453，加我交个朋友😎 正联合【机械工业出版社】出版《程序员成长手册》，敬请期待😎 真正的大师，永远怀着一颗学徒的心（易）😎

发布

暂无评论

创作场景

3 分钟看 3 个 JS 小把戏

trick 1 : 两组逻辑与或

trick 2 : 将变量设为 key

trick 3 : 数据和对象转换

掘金安东尼

评论