JS 十个开发技巧 - 让你的代码更简洁

-redux-

已于 2023-01-09 15:36:49 修改

阅读量343

点赞数 1

分类专栏： JS基础文章标签：前端 javascript

于 2022-09-07 18:26:53 首次发布

本文链接：https://blog.csdn.net/qq_45883508/article/details/126749839

版权

JS基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

9、Number.MAX_SAFE_INTEGER

10、Location

11、+

1、按位或 |

只要有一位为 1，则该位为 1。否则，该位为 0


// 用于取整
1.23 | 0 // 1

// parseInt取整：太小的数字会产生bug
parseInt(10.256);  // 10
parseInt(0.00000000454);  // 4

2、按位与 &

两位同时为1，则该位为 1，否则，该位为 0

具有强制转换的功能，把false,true转换成0和1进行比较。偶尔可以当做逻辑与来使用。


1 & 1           // 1
1 & 0           // 0
1 & false         // 0

// 偶尔可当 逻辑与|| 使用（不建议）
1 & true          // 1
0 & true          // 0

1.23 & 1.456    // 1

3、按位取反 ~

取补码 - 取反（包括符号位）- 取补码

知识储备：

二进制数在内存中是以补码的形式存放的
正数原码最高位为0（符号位），正数的补码、反码都是其本身
负数原码最高位为1（符号位），负数反码符号位不变，其余各位求反，补码：反码末位+1

结论（可自行推导）：

1) 所有正整数的按位取反是其本身 +1 的负数
2) 所有负整数的按位取反是其本身+1 的绝对值
3) 零的按位取反是 -1（0既不是正数也不是负数）


~1              // -2
~1.234          // -2

// 用法
～arr.indexOf(1) // 存在，等效于 > -1
!~arr.indexOf(1) // 不存在，等效于 === -1

// 类型转换，转换成数字
~~false === 0          ~~true === 1
~~undefined === 0      ~~!undefined === 1
~~null === 0           ~~!null === 1　　
~~"" === 0             ~~!"" === 1

4、按位异或 ^=

两位相同取0，不同取1

// 两个整数交换

// ^=：不常用
var a = 10, b=20;
a ^= b; b ^= a; a ^= b;　// a:20 b:10

// 解构赋值：常用（推荐）
var a = 2,b = 'c';
[a,b] = [b,a] // a:c b:2

以上四种位运算运算时均会去掉浮点数小数点后的数字

5、!!

类型转换，转换成Boolean值


!!false  // flase
!!undefined  // flase
!!null // flase
!!"" // false
!!0 // flase

!!其他 // true

6、toString()

返回一个表示该对象的字符串

扩展：

当Object类型对象调用toString()时会返回[object Object]

基于此方法，其他类型对象都可以通过 Object.prototype.toString() 来检测对象类型

配合call或apply传入要检查的对象，例：
Object.prototype.toString.call(new Date); // [object Date]
Object.prototype.toString.call(new String); // [object String]
Object.prototype.toString.call(Math); // [object Math]

Object.prototype.toString.call(undefined); // [object Undefined]
Object.prototype.toString.call(null); // [object Null]


{}.toString() // [object Object]

[1,2,3].toString() // 1,2,3

(3).toString() // '3'

function sum(a, b) {}
sum.toString() // 'function sum(a, b) {}'

const string = new String('foo');
console.log(string) // String {'foo'}
console.log(string.toString()) // 'foo'


const x = {
  value: 0,
  toString() {
    return ++this.value;
  }
}
x == 1 && x == 2 && x == 3;    // true
x == 1 && x == 2 && x == 1;    // false

7、>=和<=

对象进行===时，比较的是内存地址，而 >= 将比较 隐式转换 toString() 后的值


{} === {} // false

// 会进行隐式转换 toString()
// 即[object Object] 与 [object Object] 进行比较
{} >= {}  // true
{} >= {a: 1} // true

{} <= {}  // true
{} <= {b: 1} // true

8、Number.EPSILON

1 与Number可表示的大于1的最小的浮点数之间的差值


0.3 - 0.2 !== 0.1  // true
0.3 - 0.2 - 0.1 <= Number.EPSILON // true

9、Number.MAX_SAFE_INTEGER

该常量表示在 JavaScript 中最大的安全整数（maxinum safe integer)（2^53 - 1）
数据超过了安全值就变得不安全了


2 ** 53 === 2 ** 53 + 1;     // true

10、Location

Location 对象描述了与一个给定的 Window 对象关联的完整 URL，每个属性都描述了 URL 的不同特性

给 location(不建议)、location.href 赋值可以直接跳转页面


location = 'http://baidu.com'
location.href = 'http://baidu.com'

11、+

+ 作为一元操作符时，返回结果与Number转型函数作用相同


+true  // 1
+false  // 0
+null  // 0
+undefined  // NaN


+''  // 0
+11 // 11
+'11'  // 11
+'001'  // 1
+'0xaf'  // 175（如果字符串为十六进制数，则将其转换为十进制数值）
+'0a1'  // NaN

// 先调用valueOf方法，如果返回值是基本数据类型，则返回该值；
// 否则，在返回值的基础上调用toString方法
+{}  // NaN（返回[object Object]，由于是字符串，因此是NaN）
+['1']  // 1
+[1]  // 1