美文网首页常用工具箱
Javascript 小技巧

Javascript 小技巧

作者: 想溜了的蜗牛 | 来源:发表于2020-12-21 11:39 被阅读0次

常用的小技巧网上很多了,只记些自己偶尔用到的。

1. 深度 copy 一个 string:

var string_copy = (' ' + original_string).slice(1);

refer stackoverflow

2. 获取一个数组对像的脚标

let a = [{1: 'x'}, {1: 'y'}, {1: 'z'}]
let b = Array.from(a.keys())
console.log(b)

refer stackeoverflow

3. copy 一个数组

// 方法一 ES6的Array.from()
var arr = [1,2,3];
var arr2 = Array.from(arr);
// 方法二  ES6的扩展运算符(...)
var arr = [1,2,3];
var arr2 = [...arr];

4. 判断对像是否为空

const obj = {}
let isObjEmpty= Object.keys(obj).length? true:false
console.log('isObjEmpty', isObjEmpty)

5. 判断变量是否是数组

var arr = [];
console.log(Array.isArray(arr));//true

refer: JS-判断变量是否为数组

6. 动态属性名称

const dynamic = 'flavour';
var item = {
    name: 'Coke',
    [dynamic]: 'Cherry'
}
console.log(item);
// { name: "Coke", flavour: "Cherry" }

refer: 9 个极其强大的 JavaScript 技巧

7. 创建模块或单例

很多时候,你需要在加载时初始化某些内容,设置它需要的各种事物,然后就可以在应用程序中到处使用它,而无需再做什么补充工作。你可以使用 IIFE 函数来做到这一点,这个函数太好用了。这种模块模式用来隔离事物非常好用,它可以只暴露需要交互的内容。

image.png

refer: 你应该了解的25个JS技巧 & 原文

8. 创建模块或单例用函数扩展类

这是个类似组合生成类的方法,即将几组不同的属性,合并在一个类中。

我经常对别人讲,JavaScript 类只是构造函数和底层的原型,不是像 Java 中那样的真实概念。一个证据是,你可以只使用一个构造函数来扩展一个类。在私有内容里这个很好用,在类里“#”这些看着很奇怪,并且用于 babel 或 WebPack 时,编译出来的代码更少。

image.png

refer: 你应该了解的25个JS技巧 & 原文

9. 轮询数据

可以结合这个流水帐客户端轮询后台接口

如果你需要持续检查数据更新,但系统中没有 WebSocket,则可以使用这个工具来执行操作。它非常适合上传文件时,想要持续检查文件是否已完成处理的情况,或者使用第三方 API(例如 dropbox 或 uber)并且想要持续检查过程是否完成或骑手是否到达目的地的情况。

image.png

10.随机 ID 生成器

有时你只是需要一些 ID?除非你要的是更复杂的 ID 生成器(例如 UUID),否则用不着为此安装什么新库,下面这个选项足够了。你可以从当前时间(以毫秒为单位)或特定的整数和增量开始生成,也可以从字母生成 ID。

image.png

11. 不同概率做不同操作

int foo = Math.random() * 100;
if (foo < 80) // 0-79
    sendMessage("hi");
else if (foo < 85) // 80-84
    sendMessage("bye");
else // 85-99
    sendMessage("test");

refer: percentage-chance-of-saying-something

12. 生成指定范围内的随机数值

function randomIntFromInterval(min, max) { // min and max included 
  return Math.floor(Math.random() * (max - min + 1) + min);
}

refer: # Generate random number between two numbers in JavaScript

and next one is on the road

相关文章

网友评论

    本文标题:Javascript 小技巧

    本文链接:https://www.haomeiwen.com/subject/xolrnktx.html