js的几个牛逼操作
Posted baller
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js的几个牛逼操作相关的知识,希望对你有一定的参考价值。
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]
此技巧适用于包含基本类型的数组:undefined
,null
,boolean
,string
和number
。(如果你有一个包含对象,函数或其他数组的数组,你需要一个不同的方法!)
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
未完待续
以上是关于js的几个牛逼操作的主要内容,如果未能解决你的问题,请参考以下文章