前端常用JS操作——《前端那些事》_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)
01、取出两个数组相同的值、不同值

相同值

let arr1 =[1,3,5,7,9];
let arr2 = [1,2,3,4,5,6,7];
let arr3 = arr1.filter(item = arr2 .indexOf(item) -1) ; // [1, 3, 5, 7]

不同值

let arr1 =[1,3,5,7,9];
let arr2 = [1,2,3,4,5,6,7];
function getArrDifference(arr1, arr2) {
 return arr1.concat(arr2).filter(function(item, i, arr) {
 return arr.indexOf(item) === arr.lastIndexOf(item);
let arr3 =getArrDifference(arr1,arr12); // [9, 2, 4, 6]

02、数组交集/并集/差集

let a = [1, 2, 3]
let b = [2, 4, 5]
// 并集
let union = a.concat(b.filter((v) = !a.includes(v)))
// [1,2,3,4,5]
// 交集
let intersection = a.filter((v) = b.includes(v))
// [2]
// 差集
let difference = a.concat(b).filter((v) = !a.includes(v) || !b.includes(v))
// [1,3,4,5]

03、判断数据类型

Object.prototype.toString.call()

04、时间戳转时间 yyyy-mm-dd hh:mm:ss

function getyyyyMMdd(data){
 var d = new Date(data*1000);
 var curr_date = d.getDate();
 var curr_month = d.getMonth() + 1;
 var curr_year = d.getFullYear();
 var curr_hour = d.getHours();;
 var curr_minute = d.getMinutes();
 var curr_second = d.getSeconds();
 String(curr_month).length 2 ? (curr_month = "0" + curr_month): curr_month;
 String(curr_date).length 2 ? (curr_date = "0" + curr_date): curr_date;
 String(curr_hour).length 2 ? (curr_hour = "0" + curr_hour): curr_hour;
 String(curr_minute).length 2 ? (curr_minute = "0" + curr_minute): curr_minute;
 String(curr_second).length 2 ? (curr_second = "0" + curr_second): curr_second;
 yyyyMMdd = curr_year + "-" + curr_month +"-"+ curr_date+" "+curr_hour+":"+curr_minute+":"+curr_second;
 return yyyyMMdd;
}

05、获取近7天时间

const arr=[] 
for (let i = 0; i i++) {
 const time = new Date(new Date().setDate(new Date().getDate() + i - 7));
 const year = time.getFullYear();
 const month = `0${time.getMonth() + 1}`.slice(-2);
 const strDate = `0${time.getDate()}`.slice(-2);
 arr.push(`${year}-${month}-${strDate}`);

06、整数变量交换

1
let a = 10;
let b = 50;
a = a ^ b;
b = a ^ b;
a = a ^ b;
console.log(a, b); // 50 10
var a = 2;
var b = 4;
a = a + b;
b = a - b;
a = a - b;
console.log(a, b); // 4 2
let a = 10;
let b = 50;
[a,b]=[b,a]
console.log(a);// 50
console.log(b)// 10

07、数组去重多重方式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]
2. 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]
3. Array.prototype.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]
4.Array.prototype.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. Array.prototype.reduce()
Array.prototype.unique = function() {
 return this.sort().reduce((init, current) = {
 if (init.length === 0 || init[init.length - 1] !== current) {
 init.push(current);
 return init;
 }, []);
var array = [1, 2, 3, 43, 45, 1, 2, 2, 4, 5];
array.unique(); //[1, 2, 3, 43, 45, 4, 5]

08、判断小数是否相等

console.log(0.1 + 0.2 === 0.3); // false
function equal(number1, number2) {
 return Math.abs(number1 - number2) Math.pow(2, -52);
console.log(equal(0.1 + 0.2, 0.3)); //true

09、多维数组降维度

二维数组

let arr = [ [1], [2], [3] ];
arr = Array.prototype.concat.apply([], arr);
console.log(arr);// [1, 2, 3]
let array = [ [1], [2], [3] ];
array = array.flat(2); //es6 新增
console.log(array); // [1, 2, 3]

多维数组

1. 调用ES6中的flat方法
let arrMore = [1, 2, [3], [[4]]];
arr= arrMore.flat(Infinity); //使用 Infinity 作为深度，展开任意深度的嵌套数组
console.log(arr); // [1,2,3,4]
2. replace + split
let arrMore = [1, 2, [3], [[4]]];
let str = JSON.stringify(arrMore);
arr= str.replace(/(\[|\])/g, '').split(',');
3. replace + JSON.parse
let arrMore = [1, 2, [3], [[4]]];
let str = JSON.stringify(arrMore);
str = str.replace(/(\[|\]))/g, '');
str = '[' + str + ']';
arr= JSON.parse(str);
4. 普通递归
let ary= [1, 2, [3], [[4]]];
let result = [];
let fn = function(ary) {
 for(let i = 0; i ary.length; i++) {
 let item = ary[i];
 if (Array.isArray(ary[i])){
 fn(item);
 } else {
 result.push(item);
5. 利用reduce函数迭代
function flatten(ary) {
 return ary.reduce((pre, cur) = {
 return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
 }, []);
let ary= [1, 2, [3], [[4]]];
console.log(flatten(ary))
6. 扩展运算符
//只要有一个元素有数组，那么循环继续
while (ary.some(Array.isArray())) {
 ary = [].concat(...ary);
}

010、快速浮点数转整数

console.log(10.9 | 0); // 10
console.log(-10.9 | 0);// 10
console.log(~~10.9); // 10
console.log(~~-10.9); // 10

11、函数防抖函数节流

函数防抖：在 n 秒内重新触发，会重新开始计算时间
实现：通过 setTimeout 和 clearTimeout 实现
应用场景：按钮点击事件/input事件，防止用户多次重复提交
//简易写法
let timeout;
$(".xx").click(function() {
 clearTimeout(timeout) 
 timeout = setTimeout(() = {
 //在此处写调用的方法，可以实现仅最后一次操作生效
 }, 1000)

本文转自网络，原文链接：https://developer.aliyun.com/article/787117