项目中、js使用小技巧

1、解构赋值小技巧

实例1

let all = ['11', '22', {
        nums: 999,
        name: ['zhuzhu', 'zzz']
    }]
    let [q, w, { nums, name: [e, r] }] = all
    console.log(q, w, nums, e, r)
    //  '11','22'，999，'zhuzhu'，'zzz'

实例2

let ll = {
        age: ['11', '22', { num: 33 }
        ]
    }
    let { age: [x, y, { num }] } = ll
    console.log(x, y, num)
    // '11','22','33'

2、Optional Chaining

解析： 在javaScript中，对象的属性链访问，很容易因为某一个属性不存在出现 Cannot read property 'xxx' of undefined的问题，那么Optional Chaining就添加了?.操作符，它会先判断前面的值，如果undefined或者null，就结束后面的调用，直接返回undefined;

实例1

let obj ={
name:'zhuzhu',
age:22,
friend:{
name:'ruru',
age:22
}
const name1 = obj?.name
const friendName=obj.friend?.name
const name2 = obj?.names

    console.log(name1, friendName, name2)
    //  'zhuzhu','ruru'，'undefined'

实例2

const obj = { foo: { bar: { baz: 66, }, }, };
const baz = obj?.foo?.bar?.baz; 
const safe = obj?.qux?.baz; 

    console.log(baz, safe)
    //  '66','undefined'

3、数组降维度

二维数组

let array = [ [1], [2], [3] ]; 
Array = array.flat();  //不产参数默认是一层
console.log(Array); // [1, 2, 3]

多维数组

let arrMore = [1, 2, [3], [[4]]];
arrMore = arrMore.flat(Infinity); // Infinity代表你降为几层
console.log(arrMore);

4、 数组去重多种方法

Set(最常用)

Array.prototype.unique = function() { 
return [...new Set(this)]; 
} 
var array = [1, 2, 3, 43, 45, 1, 2, 2, 4, 5]; 
array.unique();
// 1, 2, 3, 43, 45, 4, 5

Map

Array.prototype.unique = function() { 
const tmp = new Map(); 
return this.filter(item => {
 return !tmp.has(item) && tmp.set(item, 1);
})
}
var array = [1, 2, 3, 43, 45, 1, 2, 2, 4, 5]; 
array.unique();
// 1, 2, 3, 43, 45, 4, 5

indexOf()

Array.prototype.unique = function() {
  return this.filter((item, index) => {
     return this.indexOf(item) === index; })
  } 
 var array = [1, 2, 3, 43, 45, 1, 2, 2, 4, 5]; 
 array.unique();

// 1, 2, 3, 43, 45, 4, 5

includes()

Array.prototype.unique = function() {
const newArray = []; 
   this.forEach(item => { 
   if (!newArray.includes(item)){ newArray.push(item); } }); 
   return newArray; 
   }
   var array = [1, 2, 3, 43, 45, 1, 2, 2, 4, 5];
   array.unique();

// 1, 2, 3, 43, 45, 4, 5

5、默认参数

function fn (name = '朱朱', age = 18) { 
console.log(name, age)
} fn() 
// 朱朱 18 
fn('ruru', 22) // ruru 22

6、扩展运算符

const arr1 = [1, 2, 4]
const arr2 = [4, 5, 7] 
const arr3 = [7, 8, 9] 
const arr = [...arr1, ...arr2, ...arr3] 
console.log(arr);
// [ 1, 2, 4, 4, 5, 7, 7, 8, 9 ]

7、?. 和 ??

  先说说`?.`，中文名为`可选链`
  const list = null // do something 
  if (list && list.length) {
  // do something 
  } // 使用可选链
  const list = null // do something if 
  (list?.length) {
  // do something
  }



再说说`??`，中文名为`空位合并运算符` 请看以下代码，咱们使用`||`运算符，只要左边是`假值`，就会返回右边的数据
const a = 0 ?? '林三心' // 0 
const b = '' ?? '林三心' // ''
const c = false ?? '林三心' // false 
const d = undefined ?? '林三心' // 林三心 
const e = null ?? '林三心' // 林三心 

7、||= 和 &&=

或等于(||=)   a ||= b 等同于 a || (a = b); 
且等于(&&=)   a &&= b 等同于 a && (a = b);