前端开发小技巧记录

290 阅读2分钟

1.使用对象解构将数组项赋值给变量:

const str = "1997,kangkang,boy,23" 

const {1:name,2:sex,0:age} = str.split(',') 

console.log(name,sex,age) //kangkang boy 1997

2.创建一个 100% 的纯对象,这个对象不会继承**Object**的任何属性和方法(比如 **constructor****toString()** 等):

const obj = Object.create(null) console.log(obj)//{}

3.对数组中的所有值求和

var numbers = [3, 5, 7, 2]; var sum = numbers.reduce((x, y) => x + y,0); 

console.log(sum); // returns 17

4.逗号运算符

let x = 1; x = (x++, x); console.log(x); // expected

 output: 2 x = (2, 3); console.log(x); // expected output: 3

5.轻松移除数组中的重复项:

const removeDuplicate = arr=>[...new Set(arr)]

 let result = removeDuplicate([42,42,'11','11',true,true,null,null]) console.log(result)//[42, "11", true, null]

6.使用扩展运算符可以快速扁平化二维数组:

function flattenArray(arr){ 

 const flatArr = [].concat(...arr)

 return flatArr.some(item=>Array.isArray(item))?flattenArray(flatArr):flatArr

 } 

const arr = [1,[2,3],[4,5,[6,7,[8,9]]]]

 console.log(flattenArray(arr))//[1, 2, 3, 4, 5, 6, 7, 8, 9]

7.对象转换为数组

const obj = {0:1,1:1,2:2,3:3}

const menbers = Array.from(obj )

console.log(menbers )// [1,1,2,3]

7获取数组中最大或者最小值

const arr = [1,2,3,4,5,6]

const max = Math.max(...arr)

console.log(max) // 6

8判断两个数组是否相同

export function scalarArrayEquals(array1, array2) { 

 return array1.length === array2.length && array1.every(function(v, i) { 

return v ===array2[i]})

 }

9javaScript空值合并操作符(??)

只有当左侧为nullundefined时,才会返回右侧的数

  • 空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。

  • 与逻辑或操作符(||)不同,逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说,如果使用 || 来为某些变量设置默认值,可能会遇到意料之外的行为。比如为假值(例如,'' 或 0)时。

10.javaScript可选链操作符( ?. )

 可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值

使用可选链操作符( ?. )浏览器不会出现报错!

**函数调用:**let result = someOne.customMethod?.();

**可选链与表达式:**let nestedProp = obj?.['prop' + 'Name'];

**可选链访问数组:**let arrayItem = arr?.[42];