文档章节

js的几个牛逼操作

o
 osc_7fjpxbdo
发布于 07/01 16:31
字数 829
阅读 16
收藏 0

精选30+云产品,助力企业轻松上云!>>>

 1.条件语句的优化

// 根据颜色找出对应的水果

// bad
function test(color) {
  switch (color) {
    case 'red':
      return ['apple', 'strawberry'];
    case 'yellow':
      return ['banana', 'pineapple'];
    case 'purple':
      return ['grape', 'plum'];
    default:
      return [];
  }
}

test('yellow'); // ['banana', 'pineapple']
// good
const fruitColor = {
  red: ['apple', 'strawberry'],
  yellow: ['banana', 'pineapple'],
  purple: ['grape', 'plum']
};

function test(color) {
  return fruitColor[color] || [];
}
// better
const fruitColor = new Map()
  .set('red', ['apple', 'strawberry'])
  .set('yellow', ['banana', 'pineapple'])
  .set('purple', ['grape', 'plum']);

function test(color) {
  return fruitColor.get(color) || [];
}

2.浮点数转整数

如果希望将浮点数转换为整数,可以使用Math.floor()Math.ceil()Math.round()。但是还有一种更快的方法可以使用|(位或运算符)将浮点数截断为整数。

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

|的行为取决于处理的是正数还是负数,所以最好只在确定的情况下使用这个快捷方式。

如果n为正,则n | 0有效地向下舍入。如果n为负数,则有效地向上舍入。更准确地说,此操作将删除小数点后面的任何内容,将浮点数截断为整数。

你可以使用~~来获得相同的舍入效果,如上所述,实际上任何位操作符都会强制浮点数为整数。这些特殊操作之所以有效,是因为一旦强制为整数,值就保持不变。

3.es6数组去重

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]

此技巧适用于包含基本类型的数组:undefinednullbooleanstringnumber。(如果你有一个包含对象,函数或其他数组的数组,你需要一个不同的方法!)

4.扁平化n维数组

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

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

[1,[2,3,[4,5]]].toString()  //'1,2,3,4,5'

[1[2,3,[4,5[...]].flat(Infinity) //[1,2,3,4...n]

Array.flat(n)是ES10扁平数组的api,n表示维度,n值为Infinity时维度为无限大

5.排序

[1,2,3,4].sort((a, b) => a - b); // [1, 2,3,4],默认是升序

[1,2,3,4].sort((a, b) => b - a); // [4,3,2,1] 降序

sort是js内置的排序方法,参数为一个函数

最大值

Math.max(...[1,2,3,4]) //4

Math.max.apply(this,[1,2,3,4]) //4

[1,2,3,4].reduce( (prev, cur,curIndex,arr)=> {

 return Math.max(prev,cur);

},0) //4
  • Math.max()Math对象内置的方法,参数是字符串;
  • reduce是ES5的数组api,参数有函数和默认初始值;
  • 函数有四个参数,pre(上一次的返回值),cur(当前值),curIndex(当前值索引),arr(当前数组)

求和

[1,2,3,4].reduce(function (prev, cur) {

   return prev + cur;

 },0) //10

合并

[1,2,3,4].concat([5,6]) //[1,2,3,4,5,6]

[...[1,2,3,4],...[4,5]] //[1,2,3,4,5,6]

[1,2,3,4].push.apply([1,2,3,4],[5,6]) //[1,2,3,4,5,6]

判断是否包含值

[1,2,3].includes(4) //false

[1,2,3].indexOf(4) //-1 如果存在换回索引

[1, 2, 3].find((item)=>item===3)) //3 如果数组中无值返回undefined

[1, 2, 3].findIndex((item)=>item===3)) //2 如果数组中无值返回-1

includes(),find(),findIndex()是ES6的api

类数组转化

Array.prototype.slice.call(arguments) //arguments是类数组(伪数组)

Array.prototype.slice.apply(arguments)

Array.from(arguments)

[...arguments]
  • 类数组:表示有length属性,但是不具备数组的方法
  • call,apply:是改变slice里面的this指向arguments,所以arguments也可调用数组的方法
  • Array.from是将类似数组或可迭代对象创建为数组
  • ...是将类数组扩展为字符串,再定义为数组

对象和数组转化

Object.keys({name:'张三',age:14}) //['name','age']

Object.values({name:'张三',age:14}) //['张三',14]

Object.entries({name:'张三',age:14}) //[[name,'张三'],[age,14]]

Object.fromEntries([name,'张三'],[age,14]) //ES10的api,Chrome不支持 , firebox

 

未完待续
o
粉丝 0
博文 55
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Base PyQt4, Simple Web APP Framwork

长时间以来,一直针对Linux 服务器开发后台程序,每天面对的是黑框框,输出只有日志文件。偶尔需要模拟客户端测试,要么是写几行php代码,在浏览器上点一点,要么是写个小Python脚本在shell...

晨曦之光
2012/06/07
604
0
此时此刻我想,没有人比我牛逼了,这是挑战么

最近的工作是把java代码改成javascript代码!牛逼不,牛逼个屁,苦酒啊,我这是穿越了,各种你想不到的坎,就那个js的回掉来处理java同步调别的方法,日,回掉里写回掉,回掉里再写回掉,我再...

快速开发师
2017/05/27
185
1
如何学习Javascript

如何学习Javascript 作者: chaomao 发布时间: 2013-10-30 11:07 阅读: 15117 次 推荐: 154 原文链接 [收藏]   首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门。   ...

Easy Programing, Easy Life...
2015/03/26
0
0
转:如何学习javascript

ps:每过一段时间就会发觉自己懂的越来越少,打开编辑器的时候不知道从何入手。兴许是过于急于求成,总没有系统地去对这门语言进行学习,囫囵吞枣,只想着能够解决工作需求。是时候让自己重新...

沫鱼
2013/11/01
0
0
如何学习Javascript?你是入门,还是精通?

首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门。   谈不上经验,都是一些教训。   这个时候有人要说,“靠,你丫半桶水,凭啥教我们”。您先别急着骂,先听我说。...

coffeescript
2014/07/23
635
0

没有更多内容

加载失败,请刷新页面

加载更多

锁消除

锁消除 锁消除的意思是说虚拟机在运行时,虽然代码进行了同步,但是如果虚拟机检测到不存在数据竞争时,虚拟机就会自动把锁进行消除。锁消除主要的判定依据是如果堆上的所有数据都不会被其它...

米带网络科技有限公司
2019/07/05
0
0
【Paper】CTC Introduce

Connectionist Temporal Classification, an algorithm used to train deep neural networks in speech recognition, handwriting recognition and other sequence problems. 1. Problem don......

osc_cpolwgcv
6分钟前
0
0
CSRF攻击防御原理

Leafo老师基于Moonscript语言开发的WEB框架Lapis,框架中有一段针对CSRF(Cross—Site Request Forgery)的防护代码, 是一种基于围绕时间戳和签名验证的CSRF防护设计,后来Leafo老师还更新了...

糖果JAM
01/02
0
0
深入理解Linux VFS和Page Cache

戳蓝字「TopCoder」关注我们哦! 编者注:在分析完 Linux inode 基础概念 之后,让我们看下inode在内存中对应的文件系统抽象VFS,然后分析下关于 磁盘操作 中Page Cache的回写策略。 VFS(虚...

luoxn28
04/15
0
0
微风正在与我赛跑

阳光暖暖的抚摸着草儿 天空温柔的轻吻着云儿 微风正在与我赛跑 在草地上打几个滚 踢几脚球,赛几趟跑,捉几回迷藏 风轻悄悄的,草软绵绵的 是你让我体会到了大自然的美妙 回到家 是你教我 学...

瑾123
7分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部