js 对一个字段去重_JS方法速查

🔥前言

首先这个文章是一个不断维护的项目，励志，如果各位朋友有更好的解决方法，欢迎在下方评论，我也会第一时间感谢和更新文章内容的，拜谢!!!

GitHub地址：项目地址

查看更多速查：notes网址

更新记录(只显示最近5条)

优化其他部分 - 常用正则速查表现形式(增加了示例等)(2019.7.4)快速跳转

其他部分 增加了 Math函数的一些应用 和 常用正则速查 (2019.7.2)

数组部分增加一些方法(2019.7.1)

数组部分增加了注释，和一些示例，整体上优化了很多，感谢大家的反馈(2019.6.25)

致谢：A、让你一眼就看到我。| 大湿胸。| Adaer | 你的宇哥哥 | jNane | Felix_俊锴

🌲数组

1.数组去重

let arrs = [1,2,2,3,3,6,5,5];

// ES6

[...new Set(arr)] // [1,2,3,6,5]

// 此方法也能去除数组中重复的项：[...new Set('ababbc')].join('') // abc

// 其他方法

function uniq(array){

let temp = [];

let l = array.length;

for(let i = 0; i < l; i++) {

for(let j = i + 1; j < l; j++){

if (array[i] === array[j]){

i++;

j = i;

}

}

temp.push(array[i]);

}

return temp;

}

console.log(uniq(arrs)); // [1,2,3,6,5]

数组去重拓展(传参数 指定去除哪个重复的，未完成)

2.数组合并

let arr1 = [1,2,3]

let arr2 = [4,5,6]

// ES6

[...arr1, ...arr2] // [1, 2, 3, 4, 5, 6]

// 方法2：concat方法(挂载Array原型链上)

let c = a.concat(b);

console.log(c); // [1, 2, 3, 4, 5, 6]

console.log(a); // [1, 2, 3] 不改变本身

// 备注：看似concat似乎是 数组对象的深拷贝，其实，concat 只是对数组的第一层进行深拷贝

// 方法3：apply方法

Array.prototype.push.apply(a, b);

console.log(a); // [1, 2, 3, 4, 5, 6] 改变原目标数组

console.log(b); // [4, 5, 6]

3.获得数组最大最小值

// 使用 Math 中的 max/min 方法

let arr = [22,13,6,55,30];

// ES6

Math.max(...arr); // 55

Math.min(...arr); // 6

// ES5

Math.max.apply(null, arr); // 55

Math.min.apply(null, arr); // 6

4.获取数组交集

// ES6 写法

const similarity = (arr1, arr2) => arr1.filter(v => arr2.includes(v));

similarity([1, 2, 3], [1, 2, 4]); // [1,2]

// ES5 写法

// function similarity(arr1, arr2) {

// return arr2.filter(function(v) {

// return arr1.includes(v)

// })

// }

5.多维数组转一维数组(数组降纬)

let arr = [1, [2], [[3], 4], 5];

// ES6 数组的flat()

arr.flat() // [1, 2, Array(1), 4, 5] 如果这样写的话只能展开二维数组，但是可以加参数Infinity，就是能展开多维数组

arr.flat(Infinity) // [1, 2, 3, 4, 5] 注意如果原数组有空位，flat()方法会跳过空位

// 其他方法

const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));

deepFlatten(arr); // [1,2,3,4,5]

// 执行效率验证(拓展)

// let start = new Date().getTime();

// console.log('reduceDimension: ', deepFlatten([1, [2], [[3], 4], 5]);

// console.log('耗时: ', new Date().getTime() - start); // *ms

// ES6 数组的flatMap() 方法大家可以自行查阅一下，拓展下自己的知识面

6.过滤数组对象(拿取JSON数组中的特定项)

const data = [

{ id: 1, name: 'john', age: 24 },

{ id: 2, name: 'zkp', age: 21 },

{ id: 3, name: 'mike', age: 50 }

];

// ES6

const reducedFilter = (data, keys, fn) => data.filter(fn).map(el => keys.reduce((acc, key) => {acc[key] = el[key];return acc;}, {}));

// 参数一 必填 数组对象(一般都JSON那种数组对象)

// 参数二 必填 数组，里面传的是你需要返回的字段(看下面的示例就明白了)

// 参数三 必填 过滤的条件(看下面示例就明白了)

reducedFilter(data, ['id', 'name'], item => item.age > 25); // [{ id: 3, name: 'mike'}]

// 注：最后返回结果，不会改变原数组

// 这个在 RESTful API 模式下返回JSON数据的时候还是很常用的，会节省你forEach的的过程

7.数组对象去重

let arr = [

{id: 1, name: 'Jhon1'},

{id: 2, name: 'sss'},

{id: 3, name: 'Jhon2'},

{id: 4, name: 'Jhon3'}

]

// ES6

const uniqueElementsBy = (arr, fn) =>arr.reduce((acc, v) => {if (!acc.some(x => fn(v, x))) acc.push(v);return acc;}, []);

// 下面的示例表示，去重依据是 id ，就是 id一样的，只留下一个

uniqueElementsBy(arr, (a, b) => a.id === b.id) // [{id: 1, name: 'Jhon1'}, {id: 2, name: 'sss'}]

8.数组排序(sort)

let objArr = [

{name: 'test1', age: 20},

{name: 'test1', age: 22},

{name: 'test1', age: 21}

]

// 第一参数a， 第二参数b ---> a-b升序(从小到大);b-a降序(从大到小)，原理就是 两数计算，如果返回的是负数，就保留前者(我可能说的不对，欢迎纠正)

objArr.sort((a, b) => {

return a.age - b.age

})

// 结果会按照年龄从小到大的顺序排列

8.数组乱序

function shuffle(arr) {

let array = arr

let index = array.length

while (index) {

index -= 1

let randomInedx = Math.floor(Math.random() * index)

let middleware = array[index]

array[index] = array[randomInedx]

array[randomInedx] = middleware

}

return array

}

let arr = [1,2,3,4,5]

shuffle(arr) // [3, 4, 2, 5, 1] 结果不定

还有更简单的方式，欢迎来撩

10.检查数组中某元素出现的次数

function countOccurrences(arr, value) {

return arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);

}

let arr = [1,2,3,4,1,2,4]

countOccurrences(arr, 1) // 2

11.在数组第一位插入项

let arr1 = [2,3,4,5]

let arr2 = [1]

// ES6

console.log([...arr2, ...arr1]) // [1,2,3,4,5]

注：这种是数组合并的思路，一定有其他方式，等待你的补充

12.数组过滤(filter)

// filter()

// 1.方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

// 2.不会改变原始数组

let arr = [

{ id: 1, text: 'aa', done: true },

{ id: 2, text: 'bb', done: false }

]

// 如果返回的结果是 true，那么这个项就符合，就会保存下来

arr.filter(item => item.done) // [{ id: 1, text: 'aa', done: true }]

arr.filter(item => item.text === 'bb') // [{ id: 2, text: 'bb', done: false }]

13.判断数组中的项是否满足于某个条件

let arr = [4, 2, 3]

// ES6 some方法(有符合)

arr.some( item => item > 1) // true

arr.some( item => item > 3) // true

// ES5 every(全符合)

arr.every(item => item > 1) // true

arr.every(item => item > 3) // false

// 注意：上面两个有不同哦，一个是有符合的判定，一个是全符合的判定

14.检查数组中的所有元素是否相等

const allEqual = arr => arr.every(val => val === arr[0]);

// 示例

allEqual([1, 2, 3, 4, 5, 6]); // false

allEqual([1, 1, 1, 1]); // true

15.获取数组对象中，某一列的值，拼成一个数组

var potatos = [

{ id: '1001', weight: 50 },

{ id: '1002', weight: 80 },

{ id: '1003', weight: 120 },

{ id: '1004', weight: 40 }

]

// ES6写法

const fn = (arr, key) => arr.map(arr => arr[key])

fn(potatos, 'id') // ["1001", "1002", "1003", "1004"]

fn(potatos, 'weight') // [50, 80, 120, 40]

16.数组对象，求某一列属性的总和

var potatos = [

{ id: '1001', weight: 50 },

{ id: '1002', weight: 80 },

{ id: '1003', weight: 120 },

{ id: '1004', weight: 40 }

]

// ES6写法

const fn = (arr, key) => arr.reduce((sum, p) => { return p[key] + sum },0)

fn(potatos, 'weight') // 290

fn(potatos, 'id') // "10041003100210010" 字符串相加就是这个结果，如果有各自的需求，可以自己加上

🕰时间

1.一个时间戳格式的数字，是多少 天小时分钟秒毫秒

const formatDuration = ms => {

if (ms < 0) ms = -ms;

const time = {

day: Math.floor(ms / 86400000),

hour: Math.floor(ms / 3600000) % 24,

minute: Math.floor(ms / 60000) % 60,

second: Math.floor(ms / 1000) % 60,

millisecond: Math.floor(ms) % 1000

};

return Object.entries(time)

.filter(val => val[1] !== 0)

.map(([key, val]) => `${val}${key}${val !== 1 ? 's' : ''}`)

.join(', ');

};

formatDuration(3161012); // 52 minutes, 41 seconds, 12 milliseconds

2.一个数组中，有时间，需要将这个数组按照时间进行排序

let data = [

{

id: 1,

publishTime: "2019-05-14 18:10:29"

},

{

id: 2,

publishTime: "2019-05-14 18:17:29"

},

{

id: 3,

publishTime: "2019-05-14 15:09:25"

}]

data.sort((a, b) => b.publishTime> a.publishTime ? 1 : -1);

// 0: {id: 2, publishTime: "2019-05-14 18:17:29"}

// 1: {id: 1, publishTime: "2019-05-14 18:10:29"}

// 2: {id: 3, publishTime: "2019-05-14 15:09:25"}

3.格林尼治时间 转 北京时间(可传格林尼治时间 或者 时间戳)

function myTimeToLocal(inputTime){

if(!inputTime && typeof inputTime !== 'number'){

return '';

}

let localTime = '';

inputTime = new Date(inputTime).getTime();

const offset = (new Date()).getTimezoneOffset();

localTime = (new Date(inputTime - offset * 60000)).toISOString();

localTime = localTime.substr(0, localTime.lastIndexOf('.'));

localTime = localTime.replace('T', ' ');

return localTime;

}

console.log(myTimeToLocal(1530540726443)); // 2018-07-02 22:12:06

console.log(myTimeToLocal('2017-11-16T05:23:20.000Z')); // 2017-11-16 13:23:20

4.获取两个日期相差天数

const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24);

getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9

👫对象

1.对象合并

ES6方法

let obj1 = {

a:1,

b:{

b1:2

}

}

let obj2 = {

c:3,

d:4

}

console.log({...obj1, ...obj2}) // {a: 1, b: {…}, c: 3, d: 4}

// 支持无限制合并，但如果对象之间存在相同属性，则后面属性会覆盖前面属性。*请注意，这仅适用于浅层合并。

方法一：Obj.assign()：可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象

let o1 = { a: 1 };

let o2 = { b: 2 };

let obj = Object.assign(o1, o2);

console.log(obj); // { a: 1, b: 2 }

console.log(o1); // { a: 1, b: 2 }, 且 **目标对象** 自身也会改变(也就是assign第一个对象)

console.log(o2); // { b: 2 } 不改变

// 备注：Object.assign() 拷贝的是属性值。假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值

// 备注：数组合并用 concat() 方法

方法二：$.extend()(抽时间看一下实现原理)

2.浅拷贝，深拷贝

方法一：浅拷贝：意思就是只复制引用(指针)，而未复制真正的值

// 最简单的利用 = 赋值操作符实现了一个浅拷贝

let obj1 = {

name: '朱昆鹏'

}

let obj2 = obj1; // 完成了浅拷贝

方法二：深拷贝：目标的完全拷贝(只要进行了深拷贝，它们老死不相往来，谁也不会影响谁)

// 目前实现深拷贝的方法不多，主要是两种：

// 01：利用递归来实现每一层都重新创建对象并赋值(推荐使用)

// 02：利用 JSON 对象中的 parse 和 stringify(有些属性会被忽略，所以不能使用)

// 01递归方法案例：对每一层的数据都实现一次 创建对象->对象赋值 的操作

function deepClone(source){

const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象

for(let keys in source){ // 遍历目标

if(source.hasOwnProperty(keys)){

if(source[keys] && typeof source[keys] === 'object'){ // 如果值是对象，就递归一下

targetObj[keys] = source[keys].constructor === Array ? [] : {};

targetObj[keys] = deepClone(source[keys]);

}else{ // 如果不是，就直接赋值

targetObj[keys] = source[keys];

}

}

}

return targetObj;

}

const obj1 = {

name:'axuebin',

sayHello:function(){

console.log('Hello World');

}

}

const obj2 = deepClone(obj1);

console.log(obj2); // {name: "axuebin", sayHello: ƒ}

console.log(obj1 === obj2); // false

// 02方法示例

const obj3 = {

name:'axuebin',

sayHello:function(){

console.log('Hello World');

}

}

console.log(JSON.parse(JSON.stringify(obj3)); // {name: "axuebin"} ???

// undefined、function、symbol 会在转换过程中被忽略，所以就不能用这个方法进行深拷贝

3.拓展：首层浅拷贝

function shallowClone(source) {

const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象

for (let keys in source) { // 遍历目标

if (source.hasOwnProperty(keys)) {

targetObj[keys] = source[keys];

}

}

return targetObj;

}

const originObj = {

a:'a',

b:'b',

c:[1, 2, 3],

d:{ dd: 'dd' }

};

const cloneObj = shallowClone(originObj);

console.log(cloneObj === originObj); // false

cloneObj.a = 'aa';

cloneObj.c = [1, 1, 1];

cloneObj.d.dd = 'surprise';

console.log(cloneObj); // {a:'aa',b:'b',c:[1,1,1],d:{dd:'surprise'}}

console.log(originObj); // {a:'a',b:'b',c:[1,2,3],d:{dd:'surprise'}}

4.判断对象是否为空对象

// 参考：https://www.cnblogs.com/HKCC/p/6083575.html

if (JSON.stringify(对象) === '{}') {

console.log('空');

}

5.判断对象中属性的个数

let obj = {name: '朱昆鹏', age: 21}

// ES6

Object.keys(obj).length // 2

// ES5

let attributeCount = obj => {

let count = 0;

for(let i in obj) {

if(obj.hasOwnProperty(i)) { // 建议加上判断,如果没有扩展对象属性可以不加

count++;

}

}

return count;

}

attributeCount(obj) // 2

6.JS 对象转 url 查询字符串

const objectToQueryString = (obj) => Object.keys(obj).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');

objectToQueryString({name: 'Jhon', age: 18, address: 'beijing'})

// name=Jhon&age=18&address=beijing

7.对象遍历

let objs = {

1: {

name: '朱昆鹏'

},

2: {

name: '林雨桐'

}

}

Object.keys(objs).forEach( ket => {

console.log(key,objs[key])

})

// 1 {name: '朱昆鹏'} 2 {nama:'林雨桐'}

🌴DOM

1.判断当前位置是否为页面底部

function bottomVisible() {

return document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight)

}

bottomVisible() // 返回值为true/false

2.全屏

1.进入全屏

function launchFullscreen(element) {

if (element.requestFullscreen) {

element.requestFullscreen()

} else if (element.mozRequestFullScreen) {

element.mozRequestFullScreen()

} else if (element.msRequestFullscreen) {

element.msRequestFullscreen()

} else if (element.webkitRequestFullscreen) {

element.webkitRequestFullScreen()

}

}

launchFullscreen(document.documentElement) // 整个页面进入全屏

launchFullscreen(document.getElementById("id")) //某个元素进入全屏

退出全屏

function exitFullscreen() {

if (document.exitFullscreen) {

document.exitFullscreen()

} else if (document.msExitFullscreen) {

document.msExitFullscreen()

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen()

} else if (document.webkitExitFullscreen) {

document.webkitExitFullscreen()

}

}

exitFullscreen()

全屏事件

document.addEventListener("fullscreenchange", function (e) {

if (document.fullscreenElement) {

console.log('进入全屏')

} else {

console.log('退出全屏')

}

})

3.判断dom元素是否具有某个className

方法一：使用HTML5新增classList 来操作类名

Document

console.log(div.classList.contains("te")) // true

拓展：

classList.add(newClassName)；添加新的类名，如已经存在，取消添加

classList.contains(oldClassName)：确定元素中是否包含指定的类名，返回值为true，false

classList.remove(oldClassName)：移除已经存在的类名;

classList.toggle(className)：如果classList中存在给定的值，删除它，否则，添加它；

🦀感谢掘金用户tjNane分享此方法

方法二：

const hasClass = (el, className) => new RegExp(`(^|\\s)${className}(\\s|$)`).test(el.className);

🌱BOM

1.返回当前网页地址

function currentURL() {

return window.location.href

}

currentURL() // "https://juejin.im/timeline"

2.获取滚动条位置

function getScrollPosition(el = window) {

return {

x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft,

y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop

}

}

getScrollPosition() // {x: 0, y: 692}

3.获取url中的参数

function getURLParameters(url) {

const params = url.match(/([^?=&]+)(=([^&]*))/g)

return params?params.reduce(

(a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}

):[]

}

getURLParameters('http://www.baidu.com/index?name=tyler') // {name: "tyler"}

4.检测设备类型

const detectDeviceType = () =>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop';

detectDeviceType() // "Desktop"

💍处理JS原生具有的一些问题

1.加减法精度缺失问题

// 加法函数(因为JS小数计算 丢失精度)

function add(arg1, arg2) {

let r1, r2, m;

try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }

try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }

m = Math.pow(10, Math.max(r1, r2))

return (arg1 * m + arg2 * m) / m

}

// 减法函数(因为JS小数计算 丢失精度)

function sub(arg1, arg2) {

let r1, r2, m, n;

try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }

try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }

m = Math.pow(10, Math.max(r1, r2));

n = (r1 >= r2) ? r1 : r2;

return Number(((arg1 * m - arg2 * m) / m).toFixed(n));

}

2.递归优化(尾递归)

// 尾递归函数 摘自阮一峰ES6 | 自己懒得写了

function tco(f) {

let value;

let active = false;

let accumulated = [];

return function accumulator() {

accumulated.push(arguments);

if (!active) {

active = true;

while (accumulated.length) {

value = f.apply(this, accumulated.shift());

}

active = false;

return value;

}

};

}

// 使用

新的函数 = tco(递归函数)

🙏其他

1.Math函数的一些应用

parseInt(5.12) // 5 | 只保留整数部分(丢弃小数部分)

Math.floor(5.12) // 5 | 向下取整(效果和parseInt一样)

Math.ceil(5.12) // 6 | 向上取整(有小数，整数就+1)

Math.round(5.499) // 5 | 四舍五入

Math.round(5.501) // 6 | 四舍五入

Math.abs(-5) // 5 | 绝对值

Math.max(5, 6) // 6 | 返回两者中较大的数

Math.min(5, 6) // 5 | 返回两者中较小的数

Math.random() // 随机数 (0-1)

2.常用正则速查

消除字符串首尾两端的空格(替换)

let reg = /^\s+|\s+$/g;

let str = ' #id div.class ';

str.replace(reg, '') // "#id div.class"

*把手机号码替换成 (替换)

var reg = /1[24578]\d{9}/;

var str = '姓名：朱昆鹏 手机：15932638907'; // 手记号瞎写的

str.replace(reg, '***') //"姓名：朱昆鹏 手机：***"

替换敏感字(替换)

let str = '中国中国人民解放军中华人民共和国';

let r = str.replace(/中国|军/g, input => {

let t = '';

for (let i = 0; i

t += '*';

}

return t;

})

console.log(r); //**人民解放*中华人民共和国

千位分隔符(替换)

let reg = /(\d)(?=(?:\d{3})+$)/g

let str = '100002003232322';

let r = str.replace(, '$1,'); //100,002,003,232,322

匹配网页标签(匹配)

var reg = /.+/;

var str = '朱昆鹏

2707509@.qq.com

朱昆鹏';

str.match(reg); // ["

2707509@.qq.com

"]

验证手记号(验证)

let reg = /^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/;

reg.test('15932539095'); //true

reg.test('234554568997'); //false

验证邮箱地址(验证)

let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

reg.test('2775033@hotmail.com'); //true

reg.test('abc@'); //false

验证身份证(验证)

let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

reg.test('31210119651230518X'); //true 自己瞎写的

reg.test('2101196523s230518X'); //false 自己瞎写的

验证中国邮箱编码(验证)

let reg = /^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/

reg.test('065900'); //true

reg.test('999999'); //false

验证ipv4地址正则(验证)

let reg = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/

reg.test('192.168.1.192'); //true

reg.test('127.0.0.1s'); //false

验证银行卡号(16或19位)

let reg = /^([1-9]{1})(\d{15}|\d{18})$/

reg.test('6222026006705354218') // true

验证中文姓名(验证)

let reg = /^([\u4e00-\u9fa5\·]{2,10})$/

reg.test('朱昆鹏'); //true

reg.test('Zhu Kunpeng'); //false

3.变换变量

// [letA，letB] = [letB，letA];

let a = 1;

let b = 2;

[a, b] = [b, a] // a = 2 b = 1

4.格式化对象为JSON代码

const formatted = JSON.stringify({name: 'Jhon', age: 18, address: 'sz'}, null, 4);

/*

{

"name": "Jhon",

"age": 18,

"address": "sz"

}

*/

// 该字符串化命令有三个参数。第一个是Javascript对象。第二个是可选函数，可用于在JSON进行字符串化时对其执行操作。最后一个参数指示要添加多少空格作为缩进以格式化JSON。省略最后一个参数，JSON将返回一个长行。如果myObj中存在循环引用，则会格式失败。

5.随机生成六位数字验证码

const code = Math.floor(Math.random() * 1000000).toString().padStart(6, "0") // 942377

6.生成随机整数

function randomNum(min, max) {

switch (arguments.length) {

case 1:

return parseInt(Math.random() * min + 1, 10)

case 2:

return parseInt(Math.random() * (max - min + 1) + min, 10)

default:

return 0

}

}

randomNum(1,10) // 随机 [1,10]的整数

7.RGB 颜色转 16进制颜色

const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');

RGBToHex(255, 165, 1); // 'ffa501'

📚参考列表