11个教程中不常被提及的JavaScript小技巧(推荐)


Posted in Javascript onApril 17, 2019

1、过滤唯一值

Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的,没有重复的值。结合扩展运算符(...)我们可以创建一个新的数组,达到过滤原数组重复值的功能。

const array = [1, 2, 3, 3, 5, 5, 1];
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // [1, 2, 3, 5]

在ES6之前,我们如果想要实现这个功能的话,需要的处理代码要多很多。
这个技巧的适用范围是数组中的数值的类型为:undefined, null, boolean, string, number。当包涵object, function, array时,则不适用。

2、短路求值(Short-Circuit Evaluation)

三目运算符是一个很方便快捷的书写一些简单的逻辑语句的方式,

x > 100 ? 'Above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

但是有些时候当逻辑复杂之后,三目运算符书写起来可读性也会很难。这个时候,我们就可以使用逻辑与(&&)和逻辑或(||)运算符来改写我们的表达式。

逻辑与和逻辑或操作符总是先计算其做操作数,只有在仅靠左操作数的值无法确定该逻辑表达式的结果时,才会求解其右操作数。这被称为“短路求值(Short-Circuit Evaluation)”

工作原理

与(&&)运算符将会返回第一个false/‘falsy'的值。当所有的操作数都是true时,将返回最后一个表达式的结果。

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3

console.log(0 && null); // Result: 0

或(||)运算符将返回第一个true/‘truthy'的值。当所有的操作数都是false时,将返回最后一个表达式的结果。

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1

console.log(0 || null); // Result: null

场景举例

当我们从服务器端请求数据的过程中,我们在另一个位置来使用这个数据,但是获取数据的状态并不知道,如我们访问this.state的data属性。按照常规的方式我们会先去判断这个this.state.data的有效性,之后根据有效性情况分别进行区分处理。

if (this.state.data) {
 return this.state.data;
} else {
 return 'Fetching Data';
}

但是我们可以通过上面的方式来简写这个逻辑处理

return (this.state.data || 'Fetching Data');

对比发现这个方式更加的简洁方便。

3、转换Boolean型

常规的boolean型值只有 true 和 false,但是在JavaScript中我们可以将其他的值认为是 ‘truthy' 或者 ‘falsy'的。

除了0, “”, null, undefined, NaN 和 false,其他的我们都可以认为是‘truthy'的。

我们可以通过负运算符!将一系列的变量转换成“boolean”型。

const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;

console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"

 4、转换String型

我们可以通过+连接运算符将一个number类型的变量转换成string类型。

const val = 1 + "";

console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

5、转换Number类型

和上面对应的,我们可以通过加法运算符+将一个string类型的变量转回为number 类型的

let int = "15";
int = +int;

console.log(int); // Result: 15
console.log(typeof int); Result: "number"

在某些上下文中,+将被解释为连接操作符,而不是加法操作符。当这种情况发生时(您希望返回一个整数,而不是浮点数),您可以使用两个波浪号:~~。(需要注意为英文格式)

一个波浪号~,被称为“按位不运算符”,等价于 - n - 1。所以~15 = -16.

使用两个~~可以有效的否定运算。这是因为 - (- n - 1) - 1 = n + 1 - 1 = n。也就是说 ~-16 = 15

const int = ~~"15"

console.log(int); // Result: 15
console.log(typeof int); Result: "number"

6、快速求幂

从ES7开始,我们可以使用幂运算符 ** 作为求幂的简写,相对之前的Math.pow(2, 3) 更加快捷。这是一个很简单实用的点,但是大部分的教程并不会专门介绍它。

console.log(2 ** 3); // Result: 8

这不应该与 ^ 符号混淆,^ 符号通常用于表示指数,但在JavaScript中是位XOR操作符。

在ES7之前,幂的简写主要依靠的是位左移位操作符 <<,几种写法的区别

// 下面几种写法是等价的

Math.pow(2, n);
2 << (n - 1);
2**n;

其中需要注意的是 2 << 3 = 16 等价于 2 ** 4 = 16

7、快速Float转Integer

我们平时可以使用Math.floor(), Math.ceil()和Math.round()将float类型转换成integer类型。

但是还有一种更快的方法可以使用|(位或运算符)将浮点数截断为整数。

console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23

| 的行为取决于处理的是正数还是负数,所以最好只在确定的情况下使用这个快捷方式。

如果n是正数的,则 n | 0 有效地向下舍入。如果n是负数的,它则有效地向上取整。更准确地说,该操作结果是直接删除小数点后的内容,将浮点数截断为整数,和上面提到的其他几个方法是有所区别的。

您还可以使用 ~~ 来获得相同的舍入效果,如上所述,实际上任何位操作符都会强制浮点数为整数。这些特殊操作之所以有效,是因为一旦强制为整数,值就保持不变。

使用场景

位或运算符可以用于从整数的末尾删除任意数量的数字。这意味着我们不必使用这样的代码在类型之间进行转换

let str = "1553"; 
Number(str.substring(0, str.length - 1));

而是可以使用下面的方式来实现我们的功能

console.log(1553 / 10  | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1

8、类中自动绑定

我们可以在类中通过使用ES6增加的箭头函数的方式来实现隐形绑定作用域。而按照之前的处理,我们需要显式的去为我们写的方法进行绑定,类似于 this.myMethod = this.myMethod.bind(this)这样。当我们的类中有很多方法时,会增加大量的绑定的代码的书写。现在我们就可以通过箭头函数的方式来简化这个过程。

import React, { Component } from React;
export default class App extends Compononent {
 constructor(props) {
  super(props);
  this.state = {};
 }
 myMethod = () => {
  // 隐式绑定
 }
 render() {
  return (
   <>
    <div>
     {this.myMethod()}
    </div>
   </>
  )
 }
};

9、截取数组

如果您想从数组的末尾删除值,有比使用splice()更快的替代方法。

例如,如果你知道原始数组的长度,就可以通过重新定义它的length属性来实现截取

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]

这是一个特别简洁的解决方案。但是,slice()方法的运行时更快。如果速度是你的主要目标,考虑使用下面的方式

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);

console.log(array); // Result: [0, 1, 2, 3]

10、获取数组中的最后的元素

数组方法slice()可以接受负整数,如果提供它,它将从数组的末尾开始截取数值,而不是开头

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

11、格式化JSON代码

我们可能在处理一些JSON相关的处理时很多时候都会使用到JSON.stringify,但是你是否意识到它可以帮助缩进JSON呢?

stringify()方法接受两个可选参数:一个replacer函数和一个space值,replacer函数可以用来过滤显示的JSON。

space值接受一个整数,表示需要的空格数或一个字符串(如'\t'来插入制表符),它可以使读取获取的JSON数据变得容易得多。

总的来说,我希望当您看到这些技巧时能够和我第一次看到它们一样觉得有用。如果您有自己发现的小技巧,也希望能够留言中写下,我们一起来分享。

以上所述是小编给大家介绍的11个教程中不常被提及的JavaScript小技巧详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
解决elementui表格操作列自适应列宽
Dec 28 Javascript
vue模式history下在iis中配置流程
Apr 17 #Javascript
详解Vue 全局变量,局部变量
Apr 17 #Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 #Javascript
Angular Excel 导入与导出的实现代码
Apr 17 #Javascript
详解Vue路由自动注入实践
Apr 17 #Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 #Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 #Javascript
You might like
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
PHP写日志的实现方法
2014/11/05 PHP
PHP可变函数学习小结
2015/11/29 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
ie focus bug 解决方法
2009/09/03 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
如何选择使用结构还是类
2014/05/30 面试题
可口可乐广告词
2014/03/20 职场文书
气象学专业个人求职信
2014/04/22 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
房产协议书范本2014
2014/09/30 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
Mysql文件存储图文详解
2021/06/01 MySQL
python中的sys模块和os模块
2022/03/20 Python
Docker安装MySql8并远程访问的实现
2022/07/07 Servers