利用Aspose轉換office成PDF API程式

阿新 • • 發佈：2021-01-07

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資料型別文中JSON.stringif比較物件是簡寫方法，完整的物件比較請看技巧24.物件是否相等

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, 6, 7]

陣列物件

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 }]

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 result = [];
 arr.forEach(item=>{
    !result.some(v => JSON.stringify(v) === JSON.stringify(item)) && result.push(item)
 })
 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 =[].concat.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 mapTag = '[object Map]';
const setTag = '[object Set]';
const arrayTag = '[object Array]';
const objectTag = '[object Object]';
const argsTag = '[object Arguments]';

const boolTag = '[object Boolean]';
const dateTag = '[object Date]';
const numberTag = '[object Number]';
const stringTag = '[object String]';
const symbolTag = '[object Symbol]';
const errorTag = '[object Error]';
const regexpTag = '[object RegExp]';
const funcTag = '[object Function]';

const deepTag = [mapTag, setTag, arrayTag, objectTag, argsTag];


function forEach(array, iteratee) {
  let index = -1;
  const length = array.length;
  while (++index < length) {
    iteratee(array[index], index);
  }
  return array;
}

function isObject(target) {
  const type = typeof target;
  return target !== null && (type === 'object' || type === 'function');
}

function getType(target) {
  return Object.prototype.toString.call(target);
}

function getInit(target) {
  const Ctor = target.constructor;
  return new Ctor();
}

function cloneSymbol(targe) {
  return Object(Symbol.prototype.valueOf.call(targe));
}

function cloneReg(targe) {
  const reFlags = /\w*$/;
  const result = new targe.constructor(targe.source, reFlags.exec(targe));
  result.lastIndex = targe.lastIndex;
  return result;
}

function cloneFunction(func) {
  const bodyReg = /(?<={)(.|\n)+(?=})/m;
  const paramReg = /(?<=\().+(?=\)\s+{)/;
  const funcString = func.toString();
  if (func.prototype) {
    const param = paramReg.exec(funcString);
    const body = bodyReg.exec(funcString);
    if (body) {
      if (param) {
        const paramArr = param[0].split(',');
        return new Function(...paramArr, body[0]);
      } else {
        return new Function(body[0]);
      }
    } else {
      return null;
    }
  } else {
    return eval(funcString);
  }
}

function cloneOtherType(targe, type) {
  const Ctor = targe.constructor;
  switch (type) {
    case boolTag:
    case numberTag:
    case stringTag:
    case errorTag:
    case dateTag:
      return new Ctor(targe);
    case regexpTag:
      return cloneReg(targe);
    case symbolTag:
      return cloneSymbol(targe);
    case funcTag:
      return cloneFunction(targe);
    default:
      return null;
  }
}

function clone(target, map = new WeakMap()) {

  // 克隆原始型別
  if (!isObject(target)) {
    return target;
  }

  // 初始化
  const type = getType(target);
  let cloneTarget;
  if (deepTag.includes(type)) {
    cloneTarget = getInit(target, type);
  } else {
    return cloneOtherType(target, type);
  }

  // 防止迴圈引用
  if (map.get(target)) {
    return map.get(target);
  }
  map.set(target, cloneTarget);

  // 克隆set
  if (type === setTag) {
    target.forEach(value => {
      cloneTarget.add(clone(value, map));
    });
    return cloneTarget;
  }

  // 克隆map
  if (type === mapTag) {
    target.forEach((value, key) => {
      cloneTarget.set(key, clone(value, map));
    });
    return cloneTarget;
  }

  // 克隆物件和陣列
  const keys = type === arrayTag ? undefined : Object.keys(target);
  forEach(keys || target, (value, key) => {
    if (keys) {
      key = value;
    }
    cloneTarget[key] = clone(target[key], map);
  });

  return cloneTarget;
}

console.log(clone({
  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)); // "321recuder"

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"

方法二

console.log('1234567890'.replace(/\B(?=(\d{3})+(?!\d))/g, ","))
console.log((1234567890).toLocaleString())

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['張三'])

利用Aspose轉換office成PDF API程式

1.陣列交集

2.陣列並集

3.陣列差集

4.陣列補集

5.陣列去重

6.陣列排序

7.最大值

8.陣列求和

9.數組合並

10.陣列是否包含值

11.陣列每一項都滿足

12.陣列有一項滿足

13.版本號排序

14. 物件轉陣列

15.陣列轉物件

16.陣列解構

Object

17.物件變數屬性

18.物件多餘屬性刪除

19.物件巢狀屬性解構

20.解構物件屬性別名

21.解構物件屬性預設值

22.攔截物件

23.物件深度拷貝

24.物件是否相等

25.物件轉化為字串

Function

26.函式隱式返回值

27.函式自執行

28.函式非同步執行

String

29.字串翻轉

30.url引數序列化

31.url引數反序列化

32.轉化為字串

Number

33.數字千分位

34.字串轉數字

35.判斷小數是否相等

36.雙位運算子

37.取整和奇偶性判斷

Boolean

38.判斷資料型別

39.使用Boolean過濾陣列假值

40.短路運算

41.switch 簡寫

相關推薦