认识达内从这里开始

认真做教育专心促就业

告诉你一些教程中不常被提及的 JavaScript 小技巧

发布：潍坊达内
来源：潍坊达内
时间：2019-04-25 14:47

潍坊达内的小编总结，有一些在日常工作中经常出现却容易被忽略的JavaScript小技巧，作者从中选取了11个教程中不常被提及的案例，供大家一起学习！
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、转换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”
3、转换String型
我们可以通过+连接运算符将一个number类型的变量转换成string类型。
const val = 1 + “”;
console.log（val）； // Result: “1”
console.log（typeof val）； // Result: “string”
4、转换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”
5、快速求幂
从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
6、类中自动绑定
我们可以在类中通过使用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>
</>
）
}

};

潍坊达内

7、截取数组
如果您想从数组的末尾删除值，有比使用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]
8、获取数组中的最后的元素
数组方法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]
以上就是潍坊达内给大家做的内容详解，更多关于IT知识的学习，请继续关注潍坊达内

< 上一篇：学习Linux云计算后选择什么样的工作好呢？

下一篇：想要渗透测试成功这8个关键点你抓住了吗？ >