Javascript高阶奇淫巧技【数组篇】

本文主要是介绍Javascript高阶奇淫巧技【数组篇】，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Javascript高阶奇淫巧技【数组篇】

1、最快生成[1,2,3, … ,n] 的列表

利用列表的下标index来生成数是非常快的.

Array(10).fill(true).map((x,i)=>i+1);
> (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

还可以看出, 快速构建一个长度为n的列表可以使用Array(n).fill(1);
同理, 构造奇数偶数序列也可以通过这种方式, 还有很多基于自然数的有规律序列都可以这样生成.

2、打乱列表

利用sort方法快速排序的时候引入一个随机量…嘿嘿

const list = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];

list.sort(()=>Math.random()-0.5)
> (8) [120, 122205, 458, 400, 5, -215, -85411, 228]

3、列表聚合

Array.prototype.reduce是一个对列表进行摘要的算法(输入多个元素, 输出一个值), 比如数值列表求和:

list.reduce((sum, curr)=>sum+curr,0)

4、列表遍历取代循环语句

函数式编程中可以利用Array的forEach, map, filter, some, every, find来取代传统的for循环, while循环, 不仅更优雅, 而且提升了一定效率；

5、最快构造一个循环链表

每次执行一下list.push(list.shift());然后访问list[0], 无需额外代码, 最直接实现循环链表, 帅!

const list = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];

list.push(list.shift());
list[0];
> 458
list.push(list.shift());
list[0];
> 120
list.push(list.shift());
list[0];
> -215

重此以后再也不用判断index到头然后改成0了…

6、字典的键值对取代switch语句

使用字典取代switch和if else语句也是函数式编程的理念之一.

const day = 'Monday';
({
  'Monday':()=>{},
  'Wednesday':()=>{},
  'Friday':()=>{},
  'default':()=>{},
})[ day || 'default' ];

7、ES6,7,8,9,10,11一吨的语法糖

不说了, ecmascript有太多够骚的语法糖, 也许这就是前端社区钟爱JS的原因, 自己去MDN上寻找吧.

8、JS自以为是的Truthy和Falsy

Truthy (真值)指的是在布尔值上下文中转换后的值为真的值。
所有值都是真值，除非它们被定义为 falsy (即除了 false，0，""，null，undefined 和 NaN 外)。
JS 中的真值示例如下（将被转换为 true，if 后的代码段将被执行）：

if (true)
if ({})
if ([])
if (42)
if ("foo")
if (new Date())
if (-42)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)

falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值。
在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值，比如：在条件语句或者循环语句中
JavaScript中falsy值的例子 (通过 if 代码段将falsy值转换为false):

if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")
if (document.all)

然而我不推荐在生产环境下利用逻辑或和逻辑与来判断truthy和falsy, 因为有时候人认为0是有意义的, 而[]是无意义的, 然而在JS里面, 对0和[]的真值判断是相反的.

9、利用Set对列表去重

[...new Set([42, 'foo', 42, 'foo', true, true])]
> (3) [42, "foo", true]

10、自定义toJSON方法(fuck原型)

将标准库的一些构造函数给他们赋予toJSON方法, 这样在JSON.stringify的时候就可以生成定制的json,而不是空的了, 这在http传输的时候会非常有用.

Date.prototype.toJSON = function () {
  return this.getTime();
}
Function.prototype.toJSON = function () {
  return this.toString();
}
RegExp.prototype.toJSON = function () {
  return this.toString();
}
JSON.stringify([new Date(),Array, /.*/]);
> "[1559795757062,"function Array() { [native code] }","/.*/"]"

11、使用getter和setter实现dom数据绑定

传送门: getter, setter；

12、使用模板字符串实现html和css的模板引擎

const unfold = list => list.map(li => `
  <li>${li.name}</li>`).join('');
// 导出模块
module.exports = data => `
  <html lang="en">
    <head>
      <title>${data.title}</title>
    </head>
    <body>
      <h1>${data.h1}</h1>
      <ul>${unfold(data.list)}</ul>
    </body>
  </html> `;

上面的node模块就是HTML的模板引擎, 可以完美的替代市面上的各种产品包括ejs,php,jsp以及Vue脚手架等, 最开心的是不用去学习他们的语法, 利用ES6
的模板字符串就可以定制自己喜欢的语法.

同理, CSS和其他类型的标记语言, 都可以通过这种方式而不需要依赖于第三方包.

这篇关于Javascript高阶奇淫巧技【数组篇】的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程