在精不在多,3 分钟看 3 个 JS 小把戏

简介: 众所周知,JS 有很多小把戏(tricks),虽然有些基本用的很少,但是偶然遇到了,至少要能读懂吧~话不多说,直接开冲~

image.png

众所周知,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 (&&)

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

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

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

image.png


  • OR (||)

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

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

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

image.png


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


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

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

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



相关文章
|
6月前
|
JavaScript 前端开发
前端 JS 经典:动态执行 JS
前端 JS 经典:动态执行 JS
66 0
|
8月前
|
JavaScript 容器
js的一些注意事项
js的一些注意事项
|
Web App开发 JSON JavaScript
JS常见的报错类型
JS常见的报错类型
|
JavaScript
js常用处理数组的几种方式
js常用处理数组的几种方式
60 0
|
JavaScript 前端开发 索引
js常见的9种报错记录一下
js常见的9种报错记录一下
190 0
|
Web App开发 消息中间件 监控
V8如何处理JS
Chromium本身就是一个浏览器 Chrome浏览器一般选择Chromium的稳定版本作为它的基础 浏览器大战,其实就是渲染引擎之争 v8是「JS虚拟机」的一种 源代码对 V8 来说只是「一堆字符串」 执行JS代码核心流程 1. 先编译 2. 后执行 V8采用「JIT」(Just In Time)技术提升效率
128 0
V8如何处理JS
|
Web App开发 JavaScript
【分享】本地js文件替换源网页js文件的方法
【分享】本地js文件替换源网页js文件的方法
1566 1
【分享】本地js文件替换源网页js文件的方法
|
JavaScript 前端开发
【最全最详细】publiccmsCSS和JS引入无效的解决方法
【最全最详细】publiccmsCSS和JS引入无效的解决方法
107 0
|
JavaScript
js数组修改后会互相影响
js数组修改后会互相影响
js数组修改后会互相影响

热门文章

最新文章