2020最新JavaScript開發必須知道的41個技巧，你會幾個？

来源:https://www.cnblogs.com/chengxuyuanaa/archive/2020/07/21/13354659.html
-Advertisement-
Play Games

前言 JS是前端的核心，但有些使用技巧你還不一定知道；本文梳理了JS的41個技巧，幫助大家提高JS的使用技巧；文章有點長，可以clone下源碼，直接擼，源碼地址請戳全部源碼，原創不易，歡迎star；序列文章：Vue 開發必須知道的 36 個技巧React 開發必須知道的 34 個技巧 Array 1 ...


前言

JS是前端的核心，但有些使用技巧你還不一定知道；
本文梳理了JS的41個技巧，幫助大家提高JS的使用技巧；
文章有點長，可以clone下源碼，直接擼，源碼地址請戳全部源碼，原創不易，歡迎star；
序列文章：
Vue 開發必須知道的 36 個技巧
React 開發必須知道的 34 個技巧

Array

1.數組交集

普通數組

const arr1 = [1, 2, 3, 4, 5 , 8 ,9],arr2 = [5, 6, 7, 8, 9];

const intersection = arr1.filter(function (val) { return arr2.indexOf(val) > -1 })
console.log(intersection) //[5, 8, 9]
複製代碼

數組對象
數組對象目前僅針對value值為簡單的Number，String，Boolan數據類型

const arr1 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }, { name: 'name5', id: 5 }];
const arr2 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }, { name: 'name4', id: 4 }, { name: 'name5', id: 5 }];
const result = arr2.filter(function (v) {
  return arr1.some(n => JSON.stringify(n) === JSON.stringify(v))
})
console.log(result); // [{ name: 'name1', id: 1 },{ name: 'name2', id: 2 },{ name: 'name3', id: 3 },{ name: 'name5', id: 5 }]
複製代碼

2.數組並集

普通數組

const arr1 = [1, 2, 3, 4, 5, 8, 9]
const arr2 = [5, 6, 7, 8, 9];
const result = arr1.concat(arr2.filter(v => !arr1.includes(v)))
console.log(result) //[1, 2, 3, 4,5, 8, 9]
複製代碼

數組對象

const arr1 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }];
const arr2 = [{ name: 'name1', id: 1 }, { name: 'name4', id: 4 }, { name: 'name5', id: 5 }];
let arr3 = arr1.concat(arr2);
let result = [];
let obj = [];
result = arr3.reduce(function (prev, cur, index, arr) {
  obj[cur.id] ? '' : obj[cur.id] = true && prev.push(cur);
  return prev;
}, []);
console.log(result); //[{ name: 'name1', id: 1 },{ name: 'name2', id: 2 },{ name: 'name3', id: 3 },{ name: 'name4', id: 4 },{ name: 'name5', id: 5 }]

另外要註意：技術是不斷更新的。要跟上步伐，在此贈送2020最新企業級別Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！

 

3.數組差集

數組arr1相對於arr2所沒有的
普通數組

const arr1 = [1, 2, 3, 4, 5, 8, 9]
const arr2 = [5, 6, 7, 8, 9];
const diff = arr1.filter(item => !new Set(arr2).has(item))
console.log(diff) //[ 1, 2, 3, 4 ]
複製代碼

數組對象

// 對象數組
let arr1 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }];
let arr2 = [{ name: 'name1', id: 1 }, { name: 'name4', id: 4 }, { name: 'name5', id: 5 }];
let result = arr1.filter(function (v) {
  return arr2.every(n => JSON.stringify(n) !== JSON.stringify(v))
})
console.log(result); // [ { name: 'name2', id: 2 }, { name: 'name3', id: 3 } ]
複製代碼

4.數組補集

兩個數組各自沒有的集合
普通數組

const arr1 = [1, 2, 3, 4, 5, 8, 9]
const arr2 = [5, 6, 7, 8, 9];
const difference = Array.from(new Set(arr1.concat(arr2).filter(v => !new Set(arr1).has(v) || !new Set(arr2).has(v)))) 
console.log(difference) //[ 1, 2, 3, 4, 6, 7 ]
複製代碼

數組對象

let arr1 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }];
let arr2 = [{ name: 'name1', id: 1 }, { name: 'name4', id: 4 }, { name: 'name5', id: 5 }];
let arr3 = arr1.concat(arr2);
let result = arr3.filter(function (v) {
  return arr1.every(n => JSON.stringify(n) !== JSON.stringify(v)) || arr2.every(n => JSON.stringify(n) !== JSON.stringify(v))
})
console.log(result); // [{ name: 'name2', id: 2 },{ name: 'name3', id: 3 },{ name: 'name4', id: 4 },{ name: 'name5', id: 5 }]
複製代碼

總結一下，差集就是數組arr1相對於arr2所沒有的集合，補集是兩個數組各自沒有的集合

5.數組去重

普通數組

console.log(Array.from(new Set([1, 2, 3, 3, 4, 4]))) //[1,2,3,4]
console.log([...new Set([1, 2, 3, 3, 4, 4])]) //[1,2,3,4]
複製代碼

數組對象

const arr = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }, { name: 'name1', id: 1 }, { name: 'name4', id: 4 }, { name: 'name5', id: 5 }];
const obj = [];
const result = arr.reduce(function (prev, cur, index, arr) {
  obj[cur.id] ? '' : obj[cur.id] = true && prev.push(cur);
  return prev;
}, []);
console.log(result) //[{ name: 'name1', id: 1 },{ name: 'name2', id: 2 },{ name: 'name3', id: 3 },{ name: 'name4', id: 4 },{ name: 'name5', id: 5 }]
複製代碼

6.數組排序

普通數組

console.log([1, 2, 3, 4].sort((a, b) => a - b)); // [1, 2,3,4] 升序
console.log([1, 2, 3, 4].sort((a, b) => b - a)); // [4,3,2,1] 降序
複製代碼

數組對象

const arr1 = [{ name: "Rom", age: 12 }, { name: "Bob", age: 22 }].sort((a, b) => { return a.age - b.age })//升序
const arr2 = [{ name: "Rom", age: 12 }, { name: "Bob", age: 22 }].sort((a, b) => { return -a.age + b.age })//降序
console.log(arr2) // [{ name: 'Bob', age:22 }, { name: 'Rom', age: 12 }]
console.log(arr1) // [ { name: 'Rom', age: 12 }, { name: 'Bob', age: 22 } ]
複製代碼

兩個種類型數組都可以使用sort排序，sort是瀏覽器內置方法；
預設是升序排序，預設返回一個函數，有兩個參數：
(a, b) => a - b 是升序；
(a, b) => b - a 是降序。

7.最大值

普通數組

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
複製代碼

取數組對象中id的最大值

const arr = [{ id: 1, name: 'jack' },{ id: 2, name: 'may' },{ id: 3, name: 'shawn' },{ id: 4, name: 'tony' }]
const arr1 = Math.max.apply(Math, arr.map(item => { return item.id }))
const arr2 = arr.sort((a, b) => { return b.id - a.id })[0].id
console.log(arr1) // 4
console.log(arr2) // 4
複製代碼

8.數組求和

普通數組

[1, 2, 3, 4].reduce(function (prev, cur) {
  return prev + cur;
}, 0) //10 
複製代碼

數組對象

const sum = [{age:1},{age:2}].reduce(function (prev, cur) {
  return prev + cur.age;
}, 0) //3
console.log(sum)
複製代碼

9.數組合併

普通數組

const arr1 =[1, 2, 3, 4].concat([5, 6]) //[1,2,3,4,5,6]
const arr2 =[...[1, 2, 3, 4],...[4, 5]] //[1,2,3,4,5,6]
const arrA = [1, 2], arrB = [3, 4]
const arr3 =Array.prototype.push.apply(arrA, arrB)//arrA值為[1,2,3,4]
複製代碼

數組對象

const arr4 = [{ age: 1 }].concat([{ age: 2 }])
const arr5 = [...[{ age: 1 }],...[{ age: 2 }]]
console.log(arr4) //[ { age: 1 }, { age: 2 } ]
console.log(arr5) // [ { age: 1 }, { age: 2 } ]
複製代碼

10.數組是否包含值

普通數組

console.log([1, 2, 3].includes(4)) //false
console.log([1, 2, 3].indexOf(4)) //-1 如果存在換回索引
console.log([1, 2, 3].find((item) => item === 3)) //3 如果數組中無值返回undefined
console.log([1, 2, 3].findIndex((item) => item === 3)) //2 如果數組中無值返回-1
複製代碼

數組對象

const flag = [{age:1},{age:2}].some(v=>JSON.stringify(v)===JSON.stringify({age:2}))
console.log(flag)
複製代碼

11.數組每一項都滿足

普通數組

[1, 2, 3].every(item => { return item > 2 })
複製代碼

數組對象

const arr = [{ age: 3 }, { age: 4 }, { age: 5 }]
arr.every(item => { return item.age > 2 }) // true
複製代碼

12.數組有一項滿足

普通數組

[1, 2, 3].some(item => { return item > 2 })
複製代碼

數組對象

const arr = [{ age: 3 }, { age: 4 }, { age: 5 }]
arr.some(item => { return item.age < 4 }) // true
複製代碼

13.版本號排序

方法一

function sortNumber(a, b) {
  return a - b
}
const b = [1,2,3,7,5,6]
const a = ["1.5", "1.5", "1.40", "1.25", "1.1000", "1.1"];

console.log(a.sort(sortNumber)); // [ 1, 2, 3, 5, 6, 7 ]
console.log(b.sort(sortNumber)); //[ '1.1000', '1.1', '1.25', '1.40', '1.5', '1.5' ]
複製代碼

可見sort排序對整數可以，類似版本號這個格式就不適用了，因為sort函數在比較字元串的時候，是比較字元串的Unicode進行排序的。

方法二

//假定字元串的每節數都在5位以下
//去除數組空值||空格
if (!Array.prototype.trim) {
  Array.prototype.trim = function () {
    let arr = []; this.forEach(function (e) {
      if (e.match(/\S+/)) arr.push(e);
    })
    return arr;
  }
}

//提取數字部分
function toNum(a) {
  let d = a.toString();
  let c = d.split(/\D/).trim();
  let num_place = ["", "0", "00", "000", "0000"], r = num_place.reverse();
  for (let i = 0; i < c.length; i++) {
    let len = c[i].length;
    c[i] = r[len] + c[i];
  }
  let res = c.join('');
  return res;
}

//提取字元
function toChar(a) {
  let d = a.toString();
  let c = d.split(/\.|\d/).join('');
  return c;
}

function sortVersions(a, b) {

  let _a1 = toNum(a), _b1 = toNum(b);
  if (_a1 !== _b1) return _a1 - _b1;
  else {
    _a2 = toChar(a).charCodeAt(0).toString(16);
    _b2 = toChar(b).charCodeAt(0).toString(16);
    return _a2 - _b2;
  }
}

let arr1 = ["10", "5", "40", "25", "1000", "1"];
let arr2 = ["1.10", "1.5", "1.40", "1.25", "1.1000", "1.1"];
let arr3 = ["1.10c", "1.10b", "1.10C", "1.25", "1.1000", "1.10A"];
console.log(arr1.sort(sortVersions)) //[ '1', '5', '10', '25', '40', '1000' ]
console.log(arr2.sort(sortVersions)) //[ '1.1', '1.5', '1.10', '1.25', '1.40', '1.1000' ]
console.log(arr3.sort(sortVersions)) // [ '1.10A', '1.10C', '1.10b', '1.10c', '1.25', '1.1000' ]

複製代碼

可以看出這個函數均相容整數，非整數，字母；
字母排序是根據Unicode排序的，所以1.10b在1.10C的後面

14. 對象轉數組

將數組的key和value轉化成數組

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輸出{name:'張三',age:14}
複製代碼

15.數組轉對象

將數組的值轉化為對象的value

const arrName = ['張三', '李四', '王五']
const arrAge=['20','30','40']
const arrDec = ['描述1', '描述2', '描述3']
const obj = arrName.map((item,index)=>{
  return { name: item, age: arrAge[index],dec:arrDec[index]}
})

console.log(obj) // [{ name: '張三', age: '20', dec: '描述1' },{ name: '李四', age: '30', dec: '描述2' },{ name: '王五', age: '40', dec: '描述3' }]
複製代碼

16.數組解構

const arr=[1,2]; //後面一定要加分號，因為不加解釋器會認為在讀數組
[arr[1], arr[0]] = [arr[0], arr[1]]; // [2,1]
複製代碼

Object

17.對象變數屬性

const flag = true;
const obj = {
    a: 0,
    [flag ? "c" : "d"]: 2
};
// obj => { a: 0, c: 2 }
複製代碼

18.對象多餘屬性刪除

const { name, age, ...obj } = { name: '張三', age: 13, dec: '描述1', info: '信息' }
console.log(name)  // 張三
console.log(age)  // 13
console.log(obj)  // {dec: '描述1', info: '信息' }
複製代碼

19.對象嵌套屬性解構

const { info:{ dec} } = { name: '張三', age: 13, info:{dec: '描述1', info: '信息' }}
console.log(dec) // 描述1
複製代碼

20.解構對象屬性別名

const { name:newName } = { name: '張三', age: 13 }
console.log(newName)  // 張三
複製代碼

21.解構對象屬性預設值

const { dec='這是預設dec值' } = { name: '張三', age: 13 }
console.log(dec) //這是預設dec值
複製代碼

22.攔截對象

利用Object.defineProperty攔截對象
無法攔截數組的值

let obj = { name: '', age: '', sex: '' },
  defaultName = ["這是姓名預設值1", "這是年齡預設值1", "這是性別預設值1"];
Object.keys(obj).forEach(key => {
  Object.defineProperty(obj, key, { // 攔截整個object 對象，並通過get獲取值，set設置值，vue 2.x的核心就是這個來監聽
    get() {
      return defaultName;
    },
    set(value) {
      defaultName = value;
    }
  });
});

console.log(obj.name); // [ '這是姓名預設值1', '這是年齡預設值1', '這是性別預設值1' ]
console.log(obj.age); // [ '這是姓名預設值1', '這是年齡預設值1', '這是性別預設值1' ]
console.log(obj.sex); // [ '這是姓名預設值1', '這是年齡預設值1', '這是性別預設值1' ]
obj.name = "這是改變值1";
console.log(obj.name); // 這是改變值1
console.log(obj.age);  // 這是改變值1
console.log(obj.sex); // 這是改變值1

let objOne = {}, defaultNameOne = "這是預設值2";
Object.defineProperty(obj, 'name', {
  get() {
    return defaultNameOne;
  },
  set(value) {
    defaultNameOne = value;
  }
});
console.log(objOne.name); // undefined
objOne.name = "這是改變值2";
console.log(objOne.name); // 這是改變值2
複製代碼

利用proxy攔截對象

let obj = { name: '', age: '', sex: '' }
let handler = {
  get(target, key, receiver) {
    console.log("get", key); 
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log("set", key, value); // set name 李四  // set age 24
    return Reflect.set(target, key, value, receiver);
  }
};
let proxy = new Proxy(obj, handler);
proxy.name = "李四";
proxy.age = 24;
複製代碼

defineProterty和proxy的對比：
1.defineProterty是es5的標準,proxy是es6的標準;
2.proxy可以監聽到數組索引賦值,改變數組長度的變化;
3.proxy是監聽對象,不用深層遍歷,defineProterty是監聽屬性;
4.利用defineProterty實現雙向數據綁定(vue2.x採用的核心)

23.對象深度拷貝

JSON.stringify深度克隆對象;
1.無法對函數 、RegExp等特殊對象的克隆;
2.會拋棄對象的constructor,所有的構造函數會指向Object;
3.對象有迴圈引用,會報錯

const objDeepClone = obj => {
  return clone(obj)
}

const isType = (obj, type) => {
  if (typeof obj !== 'object') return false;
  // 判斷數據類型的經典方法：
  const typeString = Object.prototype.toString.call(obj);
  let flag;
  switch (type) {
    case 'Array':
      flag = typeString === '[object Array]';
      break;
    case 'Date':
      flag = typeString === '[object Date]';
      break;
    case 'RegExp':
      flag = typeString === '[object RegExp]';
      break;
    default:
      flag = false;
  }
  return flag;
};

/**
* deep clone
* @param  {[type]} parent object 需要進行克隆的對象
* @return {[type]}        深克隆後的對象
*/
const clone = parent => {
  // 維護兩個儲存迴圈引用的數組
  const parents = []
  const children = []

  const _clone = parent => {
    if (parent === null) return null
    if (typeof parent !== 'object') return parent

    let child, proto

    if (isType(parent, 'Array')) {
      // 對數組做特殊處理
      child = []
    } else if (isType(parent, 'RegExp')) {
      // 對正則對象做特殊處理
      child = new RegExp(parent.source, getRegExp(parent))
      if (parent.lastIndex) child.lastIndex = parent.lastIndex
    } else if (isType(parent, 'Date')) {
      // 對Date對象做特殊處理
      child = new Date(parent.getTime())
    } else {
      // 處理對象原型
      proto = Object.getPrototypeOf(parent)
      // 利用Object.create切斷原型鏈
      child = Object.create(proto)
    }

    // 處理迴圈引用
    const index = parents.indexOf(parent)

    if (index !== -1) {
      // 如果父數組存在本對象,說明之前已經被引用過,直接返回此對象
      return children[index]
    }
    parents.push(parent)
    children.push(child)

    for (const i in parent) {
      // 遞歸
      child[i] = _clone(parent[i])
    }

    return child
  }
  return _clone(parent)
}

console.log(objDeepClone({ 
  name: '張三', age: 23, 
  obj: { name: '李四', age: 46},
  arr:[1,2,3]
})) // { name: '張三', age: 23, obj: { name: '李四', age: 46 }, arr: [ 1, 2, 3 ] }
複製代碼

對象深度克隆實際上就是要相容Array，RegExp，Date，Function類型；
克隆函數可以用正則取出函數體和參數，再定義一個函數將取出來的值賦值進去
詳細請戳對象深度拷貝

24.對象是否相等

如果用JSON.stringify轉化屬性順序不同，也不相等；
而且不支持無法對函數 、RegExp等特殊對象的克隆


function deepCompare(x, y) {
  var i, l, leftChain, rightChain;

  function compare2Objects(x, y) {
    var p;

    // remember that NaN === NaN returns false
    // and isNaN(undefined) returns true
    if (isNaN(x) && isNaN(y) && typeof x === 'number' && typeof y === 'number') {
      return true;
    }

    // Compare primitives and functions.     
    // Check if both arguments link to the same object.
    // Especially useful on the step where we compare prototypes
    if (x === y) {
      return true;
    }

    // Works in case when functions are created in constructor.
    // Comparing dates is a common scenario. Another built-ins?
    // We can even handle functions passed across iframes
    if ((typeof x === 'function' && typeof y === 'function') ||
      (x instanceof Date && y instanceof Date) ||
      (x instanceof RegExp && y instanceof RegExp) ||
      (x instanceof String && y instanceof String) ||
      (x instanceof Number && y instanceof Number)) {
      return x.toString() === y.toString();
    }

    // At last checking prototypes as good as we can
    if (!(x instanceof Object && y instanceof Object)) {
      return false;
    }

    if (x.isPrototypeOf(y) || y.isPrototypeOf(x)) {
      return false;
    }

    if (x.constructor !== y.constructor) {
      return false;
    }

    if (x.prototype !== y.prototype) {
      return false;
    }

    // Check for infinitive linking loops
    if (leftChain.indexOf(x) > -1 || rightChain.indexOf(y) > -1) {
      return false;
    }

    // Quick checking of one object being a subset of another.
    // todo: cache the structure of arguments[0] for performance
    for (p in y) {
      if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) {
        return false;
      } else if (typeof y[p] !== typeof x[p]) {
        return false;
      }
    }

    for (p in x) {
      if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) {
        return false;
      } else if (typeof y[p] !== typeof x[p]) {
        return false;
      }

      switch (typeof (x[p])) {
        case 'object':
        case 'function':

          leftChain.push(x);
          rightChain.push(y);

          if (!compare2Objects(x[p], y[p])) {
            return false;
          }

          leftChain.pop();
          rightChain.pop();
          break;

        default:
          if (x[p] !== y[p]) {
            return false;
          }
          break;
      }
    }

    return true;
  }

  if (arguments.length < 1) {
    return true; 
  }

  for (i = 1, l = arguments.length; i < l; i++) {

    leftChain = []; //Todo: this can be cached
    rightChain = [];

    if (!compare2Objects(arguments[0], arguments[i])) {
      return false;
    }
  }

  return true;
}

const obj1 = { 
  name: '張三', age: 23, 
  obj: { name: '李四', age: 46 }, 
  arr: [1, 2, 3],
  date:new Date(23),
  reg: new RegExp('abc'),
  fun: ()=>{}
 }
const obj2 = { 
  name: '張三', age: 23, 
  obj: { name: '李四', age: 46 }, 
  arr: [1, 2, 3],
  date: new Date(23),
  reg: new RegExp('abc'),
  fun: ()=>{}
 }

console.log(deepCompare(obj1,obj2)) // true

複製代碼

判斷對象是否相等，實際上就是要處理Array，Date，RegExp，Object，Function的特殊類型是否相等

25.對象轉化為字元串

通過字元串+Object 的方式來轉化對象為字元串(實際上是調用 .toString() 方法)

'the Math object:' + Math.ceil(3.4)                // "the Math object:4"
'the JSON object:' + {name:'曹操'}              // "the JSON object:[object Object]"
複製代碼

覆蓋對象的toString和valueOf方法來自定義對象的類型轉換

2  * { valueOf: ()=>'4' }                // 8
'J' + { toString: ()=>'ava' }                // "Java"
複製代碼

當+用在連接字元串時，當一個對象既有toString方法又有valueOf方法時候，JS通過盲目使用valueOf方法來解決這種含糊;
對象通過valueOf方法強制轉換為數字，通過toString方法強制轉換為字元串

'' + {toString:()=>'S',valueOf:()=>'J'}  //J
複製代碼

Function

26.函數隱式返回值

(()=>3)()  //3
(()=>(
   3
))()
複製代碼

函數省略大括弧，或者將大括弧改成小括弧可以確保代碼以單個語句的形式進行求值

27.函數自執行

const Func = function() {}(); // 常用

(function() {})(); // 常用
(function() {}()); // 常用
[function() {}()];

new function() {};
new function() {}();
void function() {}();
typeof function() {}();
delete function() {}();

+ function() {}();
- function() {}();
~ function() {}();
! function() {}();
複製代碼

28.函數非同步執行

Promise

Promise.reject('這是第二個 reject 值').then((data)=>{
  console.log(data)
}).catch(data=>{
  console.log(data) //這是第二個 reject 值
})
複製代碼

Generator

function* gen(x) {
  const y = yield x + 6;
  return y;
}

// yield 如果用在另外一個表達式中,要放在()裡面
// 像上面如果是在=右邊就不用加()
function* genOne(x) {
  const y = `這是第一個 yield 執行:${yield x + 1}`;
  return y;
}

const g = gen(1);
//執行 Generator 會返回一個Object,而不是像普通函數返回return 後面的值
g.next() // { value: 7, done: false }
//調用指針的 next 方法,會從函數的頭部或上一次停下來的地方開始執行，直到遇到下一個 yield 表達式或return語句暫停,也就是執行yield 這一行
// 執行完成會返回一個 Object,
// value 就是執行 yield 後面的值,done 表示函數是否執行完畢
g.next() // { value: undefined, done: true }
// 因為最後一行 return y 被執行完成,所以done 為 true
複製代碼

Async/Await

function getSomething() {
    return "something";
}
async function testAsync() {
    return Promise.resolve("hello async");
}
async function test() {
    const v1 = await getSomething();
    const v2 = await testAsync();
    console.log(v1, v2); //something 和 hello async
}
test();
複製代碼

String

29.字元串翻轉

function reverseStr(str = "") {
  return str.split("").reduceRight((t, v) => t + v);
}

const str = "reduce123";
console.log(reverseStr(str)); // "123recuder"
複製代碼

30.url參數序列化

將對象序列化成url參數傳遞

function stringifyUrl(search = {}) {
  return Object.entries(search).reduce(
    (t, v) => `${t}${v[0]}=${encodeURIComponent(v[1])}&`,
    Object.keys(search).length ? "?" : ""
  ).replace(/&$/, "");
}

console.log(stringifyUrl({ age: 27, name: "YZW" })); // "?age=27&name=YZW"
複製代碼

31.url參數反序列化

一般會通過location.search拿到路由傳遞的參數，併進行反序列化得到對象

function parseUrlSearch() {
  const search = '?age=25&name=TYJ'
  return search.replace(/(^\?)|(&$)/g, "").split("&").reduce((t, v) => {
    const [key, val] = v.split("=");
    t[key] = decodeURIComponent(val);
    return t;
  }, {});
}

console.log(parseUrlSearch()); // { age: "25", name: "TYJ" }
複製代碼

32.轉化為字元串

const val = 1 + ""; // 通過+ ''空字元串轉化
console.log(val); // "1"
console.log(typeof val); // "string"

const val1 = String(1);
console.log(val1); // "1"
console.log(typeof val1); // "string"
複製代碼

Number

33.數字千分位

function thousandNum(num = 0) {
  const str = (+num).toString().split(".");
  const int = nums => nums.split("").reverse().reduceRight((t, v, i) => t + (i % 3 ? v : `${v},`), "").replace(/^,|,$/g, "");
  const dec = nums => nums.split("").reduce((t, v, i) => t + ((i + 1) % 3 ? v : `${v},`), "").replace(/^,|,$/g, "");
  return str.length > 1 ? `${int(str[0])}.${dec(str[1])}` : int(str[0]);
}

thousandNum(1234); // "1,234"
thousandNum(1234.00); // "1,234"
thousandNum(0.1234); // "0.123,4"
console.log(thousandNum(1234.5678)); // "1,234.567,8"
複製代碼

34.字元串轉數字

方法一
用*1來轉化為數字,實際上是調用.valueOf方法

'32' * 1            // 32
'ds' * 1            // NaN
null * 1            // 0
undefined * 1    // NaN
1  * { valueOf: ()=>'3' }        // 3
複製代碼

方法二

+ '123'            // 123
+ 'ds'               // NaN
+ ''                    // 0
+ null              // 0
+ undefined    // NaN
+ { valueOf: ()=>'3' }    // 3
複製代碼

35.判斷小數是否相等

肯定有人會說這還不簡單，直接用'==='比較；
實際上0.1+0.2 !==0.3，因為電腦不能精確表示0.1， 0.2這樣的浮點數，所以相加就不是0.3了

Number.EPSILON=(function(){   //解決相容性問題
    return Number.EPSILON?Number.EPSILON:Math.pow(2,-52);
})();
//上面是一個自調用函數，當JS文件剛載入到記憶體中，就會去判斷並返回一個結果
function numbersequal(a,b){ 
    return Math.abs(a-b)<Number.EPSILON;
  }
//接下來再判斷   
const a=0.1+0.2, b=0.3;
console.log(numbersequal(a,b)); //這裡就為true了
複製代碼

36.雙位運算符

雙位運算符比Math.floor(),Math.ceil()速度快

~~7.5                // 7
Math.ceil(7.5)       // 8
Math.floor(7.5)      // 7


~~-7.5        		// -7
Math.floor(-7.5)     // -8
Math.ceil(-7.5)      // -7
複製代碼

所以負數時，雙位運算符和Math.ceil結果一致，正數時和Math.floor結果一致

37.取整和奇偶性判斷

取整

3.3 | 0         // 3
-3.9 | 0        // -3

parseInt(3.3)  // 3
parseInt(-3.3) // -3

// 四捨五入取整
Math.round(3.3) // 3
Math.round(-3.3) // -3

// 向上取整
Math.ceil(3.3) // 4
Math.ceil(-3.3) // -3

// 向下取整
Math.floor(3.3) // 3
Math.floor(-3.3) // -4
複製代碼

判斷奇偶數

const num=5;
!!(num & 1) // true
!!(num % 2) // true
複製代碼

Boolean

38.判斷數據類型

function dataTypeJudge(val, type) {
  const dataType = Object.prototype.toString.call(val).replace(/\[object (\w+)\]/, "$1").toLowerCase();
  return type ? dataType === type : dataType;
}
console.log(dataTypeJudge("young")); // "string"
console.log(dataTypeJudge(20190214)); // "number"
console.log(dataTypeJudge(true)); // "boolean"
console.log(dataTypeJudge([], "array")); // true
console.log(dataTypeJudge({}, "array")); // false
複製代碼

可判斷類型：undefined、null、string、number、boolean、array、object、symbol、date、regexp、function、asyncfunction、arguments、set、map、weakset、weakmap

39.使用Boolean過濾數組假值

const compact = arr => arr.filter(Boolean)
compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34])  //[ 1, 2, 3, 'a', 's', 34 ]
複製代碼

40.短路運算

||（或）

const flag = false || true //true
// 某個值為假時可以給預設值
const arr = false || []
複製代碼

&&（與）

const flag1 = false && true //false
const flag2 = true && true //true
複製代碼

41.switch 簡寫

可以用對象替代switch，提高代碼可讀性

switch(a) {
  case '張三':
    return 'age是12'
  case '李四':
    return 'age是120'
}

// 使用對象替換後
const obj ={
  '張三': 'age12',
  '李四': 'age120',
}
console.log(obj['張三'])
複製代碼

結語：技術是不斷更新的。要跟上步伐，在此贈送2020最新企業級別Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！

本文的文字及圖片來源於網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 4.1函數的name屬性
    關於函數name屬性，不同聲明方式有所差異，沒有規律只能硬記 ...
  • WEB前端第十課——CSS字體、文本、列表屬性
    1.字體屬性 color，規定文本的顏色，如 div{color:red;} font-style，規定文本顯示方式，如 p.normal {font-style: normal;} ，有normal（正常顯示）、italic（斜體顯示，字體結構有一定變化）、oblique（傾斜顯示，僅僅是文本的傾 ...
  • 前端快速生成 parent_id 關聯的樹結構數據
    如果想直接看結論，可直接跳轉到 快速生成方法在ToB的項目裡面，總免不了處理樹相關的數據，比如多級部門列表，比如多級分銷列表等等，凡是有上下級關聯的級聯數據，總免不了生成樹結構的數據。樹結構的數據在後端有很多種存儲方法，最常見的就是parent_id這種上下級關聯表。當然還有其它的例如左右值樹表等存... ...
  • 4.函數-函數的5種聲明方式
    我們在聲明一個變數 var a = 1 實際分為兩步 var a //先聲明一個變數a a = 1 // 給a賦值 1. 具名函數 格式： function 函數名(input1，input2){ return //（返回結果） } 列如 function sum(a , b){ return a ...
  • vue如何使用excel導出後臺數據
    let params = { // 請求參數 要下載Excel的id 'id':this.excelId }; //導入的介面名 api_excel_exportExcel().then(res => { console.log(res); var blob = new Blob([res], {t ...
  • CSS畫圖
    一、畫三角形 參考資料：https://www.cnblogs.com/wangjiachen666/p/9462837.html 思路：div的寬高設為0，線寬設為一個較大的數，邊框顏色分開設置，把不需要的塊背景色設為透明，就可以了。 <!DOCTYPE html> <html> <head> < ...
  • 你離黑客的距離，就差這20個神器了
    在不少電影電視劇中，主角的身邊都有這麼一位電腦高手：他們分分鐘可以黑進反派的網路，攻破安全防線，破解口令密碼，拿到重要文件。他們的電腦屏幕上都是一些看不懂的圖形和數字，你能看懂的就只有那個進度條，伴隨著緊張的BGM，慢慢的向100%靠近······ 上面的場景和套路是不是很眼熟？ 影視作品中的黑客當 ...
  • vue使用select間相互綁定
    讓這兩個select相互綁定，讓roleOptions選取值後，worklist彈出得是roleOptions值 <el-select v-model="postForm.projectName" placeholder="請選擇" @change="getList(postForm)"> <el- ...
一周排行
    -Advertisement-
    Play Games
  • gRPC入門學習之旅（六）
    JWT（JSON Web Token）是一種用於在網路應用之間傳遞信息的開放標準（RFC 7519）。它使用 JSON 對象在安全可靠的方式下傳遞信息，通常用於身份驗證和信息交換。 在Web API中，JWT通常用於對用戶進行身份驗證和授權。當用戶登錄成功後，伺服器會生成一個Token並返回給客戶端 ...
  • [譯] .NET 8 中的硬體內在函數（支持 Wasm 和 AVX-512）
    老周在幾個世紀前曾寫過樹莓派相關的 iOT 水文，之所以沒寫 Nano Framework 相關的內容，是因為那時候這貨還不成熟，可玩性不高。不過，這貨現在已經相對完善，老周都把它用在項目上了——第一個是自製的智能插座，這個某寶上50多塊可以買到，搜“esp32 插座”就能找到。一種是 86 型盒子 ...
  • 實戰指南：使用 xUnit.DependencyInjection 在單元測試中實現依賴註入【完整教程】
    引言 上一篇我們創建了一個Sample.Api項目和Sample.Repository，並且帶大家熟悉了一下Moq的概念，這一章我們來實戰一下在xUnit項目使用依賴註入。 Xunit.DependencyInjection Xunit.DependencyInjection 是一個用於 xUnit ...
  • Avalonia 中的樣式和控制項主題
    在 Avalonia 中，樣式是定義控制項外觀的一種方式，而控制項主題則是一組樣式和資源，用於定義應用程式的整體外觀和感覺。本文將深入探討這些概念，並提供示例代碼以幫助您更好地理解它們。 樣式是什麼？ 樣式是一組屬性，用於定義控制項的外觀。它們可以包括背景色、邊框、字體樣式等。在 Avalonia 中，樣 ...
  • C# 凍結Excel視窗以鎖定行列、或解除凍結
    在處理大型Excel工作簿時，有時候我們需要在工作表中凍結窗格，這樣可以在滾動查看數據的同時保持某些行或列固定不動。凍結窗格可以幫助我們更容易地導航和理解複雜的數據集。相反，當你不需要凍結窗格時，你可能需要解凍它們以獲得完整的視野。 下麵將介紹如何使用免費.NET庫通過C#實現凍結Excel視窗以鎖 ...
  • .NET Core 8 部署在 IIS 的簡單三步
    .NET 部署 IIS 的簡單步驟一： 下載 dotnet-hosting-x.y.z-win.exe ，下載地址：.NET Downloads (Linux, macOS, and Windows) (microsoft.com) .NET 部署 IIS 的簡單步驟二： 選擇對應的版本，點擊進入詳 ...
  • PowerDesigner 業務流程/數據建模軟體和元數據管理解決方案
    拓展閱讀 資料庫設計工具-08-概覽 資料庫設計工具-08-powerdesigner 資料庫設計工具-09-mysql workbench 資料庫設計工具-10-dbdesign 資料庫設計工具-11-dbeaver 資料庫設計工具-12-pgmodeler 資料庫設計工具-13-erdplus ...
  • STL筆記 之 vector
    初識STL STL，(Standard Template Library)，即"標準模板庫"，由惠普實驗室開發，STL中提供了非常多對信息學奧賽很有用的東西。 vector vetor是STL中的一個容器，可以看作一個不定長的數組，其基本形式為: vector<數據類型> 名字; 如: vector ...
  • Flask 生產環境部署（Falsk + uWSGI + nginx）
    前言 最近自己做了個 Falsk 小項目，在部署上伺服器的時候，發現雖然不乏相關教程，但大多都是將自己項目代碼複製出來，不講核心邏輯，不太簡潔，於是將自己部署的經驗寫成內容分享出來。 uWSGI 簡介 uWSGI: 一種實現了多種協議（包括 uwsgi、http）並能提供伺服器搭建功能的 Pytho ...
  • 技術周刊的轉變：如何平衡熱愛與現實？
    1 文本Embedding 將整個文本轉化為實數向量的技術。 Embedding優點是可將離散的詞語或句子轉化為連續的向量，就可用數學方法來處理詞語或句子，捕捉到文本的語義信息，文本和文本的關係信息。 ◉ 優質的Embedding通常會讓語義相似的文本在空間中彼此接近 ◉ 優質的Embedding相 ...
所有分類