js的几个牛逼操作(代码片段)

baller baller     2022-12-02     351

关键词:

 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

 

未完待续

这7个牛逼项目,不来看看~~(代码片段)

...还顺利嘛~~照例,小妹花时间把2022年10月分享过的七个牛逼开源项目整理了一下,方便大家进行查看和收藏!1、AnimeGANv2:一个基于tensorflow使用python开发的一款开源图片转漫画的一个项目ÿ 查看详情

倾力推荐我的几个朋友,看完直呼牛逼!

...麦,先在这里祝大家中秋节快乐。这次给大家推荐我的几个牛逼朋友,他们的公众号有C/C++,算法,Linux等内容,如果有你喜欢的,赶紧关注一下吧。袁厨的算法小屋一个上过trending世界榜榜首的仓库... 查看详情

10个牛逼的单行代码编程技巧,你会用吗?(代码片段)

本文列举了十个使用一行代码即可独立完成(不依赖其他代码)的业务逻辑,主要依赖的是Java8中的Lambda和Stream等新特性以及try-with-resources、JAXB等。1、对列表/数组中的每个元素都乘以2//Range是半开区间int[]ia=range(1,10).map(i->i*2).toAr... 查看详情

5个牛逼的算法设计思想,你知道几个?

分治法概念:将一个难以直接解决的大问题,分割成一些规模较小的相同问题,以便各个击破,分而治之。思想策略:对于一个规模为n的问题,若该问题可以容易地解决(比如说规模n较小)则直接解决,否则将其分解为k个规模... 查看详情

为了甩锅,我写了个牛逼的日志切面!(代码片段)

点击上方关注“终端研发部”设为“星标”,和你一起掌握更多数据库知识最近项目进入联调阶段,服务层的接口需要和协议层进行交互,协议层需要将入参[json字符串]组装成服务层所需的json字符串,组装的过程... 查看详情

为了甩锅,我写了个牛逼的日志切面!(代码片段)

点击上方关注“终端研发部”设为“星标”,和你一起掌握更多数据库知识最近项目进入联调阶段,服务层的接口需要和协议层进行交互,协议层需要将入参[json字符串]组装成服务层所需的json字符串,组装的过程... 查看详情

js面试之数组的几个不low操作(代码片段)

1、扁平化n维数组    1、终极篇[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)   Array.fla 查看详情

几个牛x的js开发技巧(代码片段)

1.确保数组值使用grid,需要重新创建原始数据,并且每行的列长度可能不匹配,为了确保不匹配行之间的长度相等,可以使用Array.fill方法。letarray=Array(5).fill(‘‘);console.log(array);//outputs(5)["","","","",""]2.获取数组唯一值ES6提供了从... 查看详情

推荐14个牛逼的代码编辑网站

今天我将跟大家分享一些可以展示你代码的网站,它们都提供在线预览功能,所以别人可以看到你的代码如何运行。它们有时候也被称作“代码广场”。它们不仅仅提供简单的代码展示功能,还提供很多代码协作和实... 查看详情

推荐14个牛逼的代码编辑网站

今天我将跟大家分享一些可以展示你代码的网站,它们都提供在线预览功能,所以别人可以看到你的代码如何运行。它们有时候也被称作“代码广场”。它们不仅仅提供简单的代码展示功能,还提供很多代码协作和实... 查看详情

有人说低代码是:几个牛的人让一群人失业,真是这样?

🥔一、什么是低代码?有人说低代码是:几个牛逼的程序员让一群程序员失业,真的是这样吗?西红柿将带着大家盘点低代码行业现状,并解答以下几个核心问题。什么是低代码?低代码能做什么࿱... 查看详情

常见的几个算法(代码片段)

...态。管他呢,我就按照自己low的来吧。进入正题,我要说的几种算法就是二分法查找,冒泡排序和选择排序。以数组为例,谈谈它们在Java中的实现。二分法查找,举个例子说明一下,我们在玩猜数字游戏的时候经常会用到 查看详情

djangoorm操作的几个细节(代码片段)

1.__gte:大于等于Book.objects.filter(price__gt=100)#查询price大于等于100的记录2.__range:顾头也顾尾,相当于between...and...Book.objects.filter(price__range=[100,200])#查询price在100和200之间的记录  查看详情

关于ip操作的几个实用函数(代码片段)

获取请求ip首先是获取客户端请求的ip。/***获取请求ip**@return客户端ip*/publicStringgetIp() Stringip=getHeader("x-forwarded-for"); if(!"unknown".equalsIgnoreCase(ip)&&ip!=null&&ip.l 查看详情

python之列表操作的几个函数(代码片段)

Python中的列表是可变的,这是它却别于元组和字符串最重要的特点,元组和字符串的元素不可修改。列举一些常用的列表操作的函数和方法。1,list.append(x),将x追加到列表list末尾:1stack=[3,4,5]#定义列表2print(id(stack))#打印列表的i... 查看详情

php操作数据库的几个简单语句(代码片段)

数据存储文件介绍.frm是描述了表的结构.MYD保存了表的数据记录.MYI则是表的索引windows命令:window+R->cmd打开命令窗口配置path环境变量mysql-uroot-p/mysql-uroot-ppassword;用户名和密码mysqlmydb-uroot-p/mysqlmydb-uroot-pnewpassword修改密码数据库... 查看详情

几个牛逼的公众号

强烈推荐以下公众号,里面内容你绝对用的上。1  半佛仙人ID:banfoSB从风控和黑产的角度思考互联网的时事,毒鸡汤毁灭者,社会达尔文主义硬核玩家,每一篇文章都是直击灵魂且暴躁的硬核文章,并且每一... 查看详情

springboot中有用的几个有用aware以及bean操作和数据源操作(代码片段)

本文参考了:https://blog.csdn.net/derrantcm/article/details/76652951https://blog.csdn.net/derrantcm/article/details/73456550通过以上可以获得springboot的许多知识。本文只是列出本人常用的两个aware.闲话少叙,直接上代码BeanFactoryAware 帮助获取各种b 查看详情