JavaScript


避免高频率调用

1
2
3
4
5
6
function throttle(method, context) {
  if (method.tId) clearTimeout(method.tId);
  method.tId = setTimeout(function () {
    method.call(context);
  }, 200);
}

ES6新语法--扩展运算符(三个点)

第二个参数以及之后的任意多个参数都会被放到values数组中

1
2
3
4
5
6
7
8
function a(arr, ...values){
  console.log(arr,values)
}

a(['a','b'],1,2,3);

// ["a", "b"]
// [1, 2, 3]

合并数组

1
2
3
4
5
6
// ES5 的合并数组
arr1.concat(arr2, arr3);

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]

与解构赋值结合

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
list = [111,222,333,444]

// ES5
a = list[0], rest = list.slice(1)
//a 111
//b [111,222,333,444]

// ES6
[a, ...rest] = list
//a 111
//b [111,222,333,444]

js正则

制表符tab \t
换行符 \r
汉字 \S
任意 .
小写字母 [a-z]

数组排序

1
2
3
4
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});

数组的every方法

every方法可以中断循环

1
2
3
4
5
6
7
contentList.every((content, index) => {
  if (element.id === content.id) {
    contentList.splice(index, 1);
    return false;
  }
  return true;
});

事件

// 取消默认行为:
e.preventDefault()
// 停止冒泡:
e.stopPropagation();  

将promise改装成await

将一个element UI库的confirm改装成await:这个confirm方法原来返回的是promise,resolve在try中return,reject在catch中return。

1
2
3
4
5
6
7
public async confirm_async(message: string, title: string) {
  try {
    return await this.vue.$confirm(message, title);
  } catch (error) {
    return undefined;
  }
}

调用confirm_async方法:

1
2
const isConfirm = await this.ed_showConfirm_async('xx','xx');
if(isConfirm === undefined) return;

这两个语句所在方法或函数,必须是一个async的函数或方法。这样就不需要把后续的操作都写在一个then方法中了。

Array reduce,数组的reduce方法

1
2
3
4
5
6
Object.keys(obj).reduce((memo, key) => {
    if (hooks.indexOf(key) > -1) {
      memo[key] = obj[key];
    }
    return memo;
  }, {});

严格模式

"use strict";
  1. 禁止this关键字指向全局对象
updatedupdated2020-10-122020-10-12