资讯专栏INFORMATION COLUMN

JS 中经常使用的小技巧,助你更简短的实现一些功能

ChristmasBoy / 526人阅读

摘要:第二个问题非基础类型则不好处理,其实像这种比较的方法,往往不是用于处理普遍情况的,往往是在特殊场景发挥奇效的。没有最好的方案,只有最合适的方案。这样才能使得正数和负数的表示统一起来,具体可以参阅补码的历史,这里不过多展开了。

原文: https://github.com/HCThink/h-...

github 首页(star+watch,一手动态直达): https://github.com/HCThink/h-blog

掘金 link , 掘金 专栏

segmentfault 主页

原创禁止私自转载

广告

部门长期招收大量研发岗位【前端,后端,算法】,欢迎各位大神投递,踊跃尝试。

坐标: 头条,大量招人,难度有降低,大多能拿到很不错的涨幅,未上市,offer 给力!欢迎骚扰邮箱!

戳我: 戳我: hooper.echo@gmail.com

How to do 快速获取毫秒数
const now = +new Date();
平铺多维数组
// 仅仅适用于二维数组。不过,通过递归,我们可以平铺任意维度的嵌套数组。
const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]

// flat 法
[1,2, [1, [2, [3]]]].flat()
// (4) [1, 2, 1, Array(2)]

// 提供另一种场景化很强的思路。

// 其实有更简单的. 任意维度数组都可以搞定,
arr.join().split(",")

// 但是存在风险: 类型会变。我们可以提供 转换回调。
// 平铺数字数组 + 转换回调
[1,2, [1, [2, 1+ 2 +1, Number(true)]]].join().split(",").map((index) => Number(index))  // (6) [1, 2, 1, 2, 4, 1]

// 对于通式
Arr.join().split(",").map(fn)

这个方法可能限制很多,比如数组元素类型不一致, 比如非基础类型等

第一个问题: 我们不妨想想,一个数组中既有 number,又有 string 是合理么?实际上这种数组在逻辑,潜在风险和处理上存在非常多的问题。大多数情况下是一个不好的设计。
但是如果在 Typescript 中往往有比较好的场景。

第二个问题:非基础类型则不好处理, 其实像这种比较 Hacker 的方法, 往往不是用于处理普遍情况的,往往是在特殊场景发挥奇效的。没有最好的方案,只有最合适的方案。

仅仅是另一种思路。

快速取整
// api
Math.floor(10.8222)
// 双位移
console.log(~~47.11) // -> 47
console.log(~~-12.88) // -> -12
console.log(~~1.9999) // -> 1
console.log(~~3) // -> 3
//失败的情况
console.log(~~[]) // -> 0
console.log(~~NaN) // -> 0
console.log(~~null) // -> 0
//大于32位整数则失败
console.log(~~(2147483647 + 1) === (2147483647 + 1)) // -> 0
格式化输出
const obj = {
    foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: "Hello" } }
};
// The third parameter is the number of spaces used to
// beautify the JSON output.
JSON.stringify(obj, null, 4);
// "{
//     "foo": {
//         "bar": [
//             11,
//             22,
//             33,
//             44
//         ],
//         "baz": {
//             "bing": true,
//             "boom": "Hello"
//         }
//     }
// }"
大致测试一个JavaScript代码块性能的技巧
console.time("Array initialize");
const arr = new Array(100);
const len = arr.length;
for (let i = 0; i < len; i++) {
    arr[i] = new Object();
};
console.timeEnd("Array initialize");
您可以创建一个 100% 纯对象,它不会从 Object 继承任何属性或方法(例如,constructor,toString() 等)
const pureObject = Object.create(null);
console.log(pureObject); //=> {}
console.log(pureObject.constructor); //=> undefined
console.log(pureObject.toString); //=> undefined
console.log(pureObject.hasOwnProperty); //=> undefined
普通必传参数校验
const require = function( message ){
    throw new Error( message );
}
const getSum = (a = _err("a is not defined"), b = _err("b is not defined")) => a + b
getSum( 10 ) // throws Error, b is not defined
getSum( undefined, 10 ) // throws Error, a is not defined
装饰器用作必传参数校验

如下为主要代码, 完整代码需要 Typescript 环境。

装饰器校验必传参数

装饰器

Typescript

@validate
greet(p1, p2, p3, @required name: string, p5) {
    // p1-5 仅仅用于占位, 用来测试 required 的第四个参数。
    return "Hello " + name + ", " + this.greeting;
}

// output
// throw (constructors.name + "." + String(method_1) + "[u5B9Eu9645u4E0Au662FuFF1A" + constructors.name + ".prototype." + String(method_1) + "]u7B2C " +(index + 1) + " u4E2Au53C2u6570u662Fu5FC5u4F20u53C2u6570uFF0Cu8BF7u63D0u4F9Bu3002");
                        ^
// Greeter.greet[ Greeter.prototype.greet ] 第 4 个参数是必传参数,请提供。
解构 arguments 转数组
+function fn() {
    console.log([...arguments]);            // (4) [1, 2, 3, 4]
    console.log(Array.prototype.slice.call(arguments));
}(1,2,3,4)
库的非 new 调用

通常库遇到的问题往往是,用户不按照你想要的方式调用,特别是 new 的问题,很多代码中会存在一谢逻辑去校验用户是否是 new 调用。诸如:

传统式

var _ = function(obj) {
    if (obj instanceof _)
        return obj;
    if (!(this instanceof _))
        return new _(obj);
    this._wrapped = obj;
};

class 式

class Fn{}

// TypeError: Class constructor Fn cannot be invoked without "new"
Fn();

船新 api: new.target

function Foo() {
    if (!new.target) throw "Foo() must be called with new";
    console.log("Foo instantiated with new");
}

new Foo(); // logs "Foo instantiated with new"
Foo(); // throws "Foo() must be called with new"


// new.target 在构造中
class A {
    constructor() {
        console.log(new.target.name);
    }
}

new A();        // A
小数取整 && 强转 boolean
~~2.8   // 2
!! 0    // false
铺垫知识 [建议细看]

首先要明确的一点是,计算机内部在做数学运算时(也就是计算机的0和1的运算),都是以补码为标准的,说白了 计算机中就一种码那就是补码,而现实社会中的编码规则,例如原码、反码都是我们自定义的,为了和计算机中的补码形成转换关系。所以说在我们手工计算这类由计算机计算的01运算,要站在计算机的角度。因此首先就要将我们的原码反码什么的全都先转为补码,再来计算^_^。这样才能使得正数和负数的表示统一起来,具体可以参阅【补码的历史】,这里不过多展开了。
接着来看那个问题,从问题入手,解决了实际问题,概念也就自然了然于心了。^_^

5 的补码是它本身(ps:正数的原、反、补码都是它本身;负数的原码最高为为1开头,反码是最高符号位不变,其余位在原码的基础上取反,补码是在反码的基础上+1即可得到)
5的补码:00000101

~5 (也就是5按位取反运算,下面涉及的是补码运算):
00000101按位取反,这里需要将原始01串完全反转过来,不存在最高符号位的概念,取反结果为: 11111010

注意这里的结果是用补码表示的,毕竟这还是机器表示形式,转化为自然语言的编码,把结果(补码)转化为原码就是:

补码-1转为反码: 11111010 - 1 = 11111001

反码再取反转为原码:11111001 = 10000110

原码转为十进制,答案就是-6

看看 [ ~ -6 = 5 ] 的计算过程, 假设有符号六位

~(100110 > 111001 > 111010)(-6 的原码转补码才能参与运算)

000101 (运算结果是补码)

000101 > 000101 -> 5(转换为原码[正数原码是自身])

按位取反的快捷运算公式 -(x+1). 【~~x -> -( -(x + 1) + 1) -> -( -x - 1 + 1) -> --x -> x】

ps: 以下内容属于广告,选看

一二线大厂,可内推,急招人(50% 涨幅轻轻松松, 面试较难),研发最好,有兴趣: hooper.echo@gmail.com 邮件私聊。

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

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

相关文章

  • 15种编写自我文档化JavaScript方式

    摘要:我故意保持示例简单,以说明公共接口是如何自我文档化的。这种类型的函数产生更多的自我文档化代码的另一个原因是你可以信任他们的输出。 在代码里面找到一个完全没有地方或没有用的注释是不是很有趣? 这是一个很容易犯的错误:你改变了一些代码,但忘记删除或更新注释。坏的注释不会破坏你的代码,但你可以想象一下调试时会发生什么。你读了注释,但代码却在做另一件事,也许最终你浪费了一些时间来弄懂它,甚至最...

    tianlai 评论0 收藏0
  • CSS及布局

    摘要:经过半年的打磨,正式发布,主要是新增了一些常用组件,并使用命名,为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看...

    jaysun 评论0 收藏0
  • 让你代码更简短,更整洁,更易读ES6小技巧

    摘要:让你的代码更简短,更整洁,更易读的小技巧写在文章前面这篇文章翻译自文章就代码整洁方面对进行了总结。如果你正在使用的代码使用的语法,这个是你需要注意的事情。更多还提供了我们很多很多其他的方式来使我们的代码更简洁,更易读,以及更稳定。 让你的代码更简短,更整洁,更易读的ES6小技巧 写在文章前面 这篇文章翻译自ES6 tips and tricks to make your code cl...

    wpw 评论0 收藏0
  • 你可能不知道 npm 实用技巧

    摘要:但这并不意味着依赖版本是锁死的。黄色表示不符合指定的语义化版本范围,比如大版本升级,升级可能会遇到兼容性问题。文件可以列出不想打包的文件,避免把一些无关的文件发布到上。 作者: LeanCloud weakish 分享一些 npm 包管理工具的实用小窍门,希望能够略微提高下前端、Node.js 开发者的生活质量。 绝大多数前端和 Node.js 开发者每天的日常工作都离不开 npm,不...

    NickZhou 评论0 收藏0

发表评论

0条评论

ChristmasBoy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<