JavaScript 技巧收藏

pkhope 发布于2019-08-23 18:27 / 999人阅读

摘要：对象通过方法强制转化为数字，通过方法强制转换为字符串过滤数组中的所有假植中有一些假值过滤这些假值，可以使用构造函数来进行一次转换双位运算符可以使用双位操作符来代替。双否定位操作符的优势在于它执行相同的操作运行速度更快。

JavaScript 小技巧 1.类型转换

string -> number

"32" * 1       // 32
"abc" * 1      // NaN
 null * 1      // 0
 undefined * 1 // NaN
 { valueOf: () => "3"} * 1  //3

常用： 也可以使用 + 来转化字符串为数字

+ "32"  // 32
+ "abc" // NaN
+ ""    // 0
+ null  // 0
+ undefined // NaN
+ { valueOf: () => "3" } // 3

object -> string
可以使用字符串+Object 的方式来转化对象为字符串（实际上是调用 .toString() 的方法)

    "the Math object:"+ Math  // "the Math object:[object Match]" 
    "the JSON object:"+ JSON  // "the JSON object:[object JSON]"

当然也可以覆盖对象的 toString 和 valueOf 方法来自定义

    2 * { valueOf: () => "3" }  // 6
   "A" + { toString: () => "B" } // "AB"

当 + 用在连接字符串时，当一个对象既有 toString 方法又有 valueOf 方法时候，  
JS 通过盲目使用 valueOf 方法来解决这种含糊。对象通过 valueOf 方法强制转化  
为数字，通过toString 方法强制转换为字符串

    "" + { toString: () => "S", valueOf: () => "J" }  // J

boolean 过滤数组中的所有假植
JS 中有一些假值: false, null, 0, "", undefined, NaN, 过滤这些假值，可以
使用 Boolean 构造函数来进行一次转换

  const compact = arr => arr.filter(Boolean)
  
  compact([ 0, 1, false, 2, "", 3, "a", "b" * 23, NaN, "s", 23 ])  

  //  [1, 2, 3, "a", "s", 23]

双位运算符 ~~
可以使用双位操作符来代替 Math.floor()。双否定位操作符的优势在于它执行相同的
操作运行速度更快。

    Math.floor(3.8) === 3  // true
    ~~3.8 === 3  // true

注意： ～～对整数有效，对负数不相同

短路运算符
逻辑与 && 与逻辑或 || 是短路运算符，短路运算符就是从左到右的运算中前者满足要求，
就不再执行后者了；可以理解为：

&&  为取假运算，从左到右一次判断，遇假值就返回假值，以后不再执行，否则返回最后
一个真值。   
||  为取真运算，从左到右依次判断，遇真值就返回真值，以后不再执行，否则返回最后   
一个假值

    let param1 = expr1 && expr2
    let param2 = expr1 || expr2

|运算符|示例|说明|
|:-------: | :-----------------------: | :------------------:|
|&&| expr1 && expr2| 如果expr1 能转换成 false 则返回 expr1，否则返回 expr2
因此，Boolean环境中使用时，
两个操作结果都为 true 时返回 true 否则返回 false|
| || | expr1 || expr2 | 如果 expr1 能转换成 true 则返回 expr1，否者返回 expr2,
因此在Boolean 环境中使用时，
有一个结果为 true 时返回 true，两个结果都为false 返回 false|

因此可以用来做很多有意思的事，给变量赋初始值和判断

    // init v
    let variable1;
    let variable2 = variable1 || "foo";
  
    // check param
    let varibale = param && param.id;

取整 |0
对一个数字 |0 可以取整，负数也同样适用， num|0

    1.3 | 0    // 1

- 判断奇偶数

#### 2.函数相关
- 函数默认值
- 强制参数
- 隐式返回值
- 惰性载入函数
- 一次性函数
#### 3.代码复用
- Object [key]
####4.数字字面量
- 进制表示法
- 精确到指定位数的小数
#### 5.数组相关
- reduce 方法同时实现 map 和 filter
- 统计数组中相同项的个数
- 使用解构来交换参数数值
- 接收函数返回的多个结果
- 将数组平铺到指定深度
- 数组的对象解构
#### 6.对象相关
- 使用解构删除不必要的属性

海外云主机私有云 JAVASCRIPT技巧 javascript七大技巧 javascript调试技巧 Javascript注入技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105249.html

CSS技巧 - 收藏集 - 掘金

摘要：笔者作为一位，将工作以来用到的各种优秀资料神器及框架整理在此，毕竟好记性不如烂键盘，此前端知识点大百科全书前端掘金，，不定期更新技巧前端掘金技巧，偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案，还有一些是在css-tricks看到的。记录一下，以后会用到。会持续更新… 一、...

Jonathan Shieber 2019-08-29 12:33 评论0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：笔者作为一位，将工作以来用到的各种优秀资料神器及框架整理在此，毕竟好记性不如烂键盘，此前端知识点大百科全书前端掘金，，不定期更新技巧前端掘金技巧，偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案，还有一些是在css-tricks看到的。记录一下，以后会用到。会持续更新… 一、...

SHERlocked93 2019-08-22 11:04 评论0 收藏0
值得收藏 7 个有用JavaScript技巧

摘要：值得收藏个有用技巧像其它语言一样中也可以通过一些技巧来完成一些复杂的操作接下来我们学习吧数组去重数组和布尔有时我们需要过滤数组中值为的值例如你可能不知道这样的技巧是不是很简单只需要传入一个函数即可创建一个空对象有时我们需要创建一个纯净的对象值得收藏 7 个有用JavaScript技巧像其它语言一样,JavaScript中也可以通过一些技巧来完成一些复杂的操作. 接下来我们学习吧数...

layman 2019-08-23 18:29 评论0 收藏0
优秀博文收藏（不定期更新）

摘要：我的书签我的书签谨慎导入，小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧，让你少写不必要的，代码更优雅一劳永我的书签我的书签（谨慎导入，小心覆盖）工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

sunsmell 2019-08-26 13:54 评论0 收藏0
优秀博文收藏（不定期更新）

摘要：我的书签我的书签谨慎导入，小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧，让你少写不必要的，代码更优雅一劳永我的书签我的书签（谨慎导入，小心覆盖）工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

zhangfaliang 2019-08-30 10:57 评论0 收藏0