js 对一个字段去重_JS常见汇总集合

1.1. new Set():用来对数组进行去重

const arr = [3,4,4,5,4,6,5,7];

console.log(new Set(arr)); // {3,4,5,6,7}

const a = Array.from(new Set(arr)) // [3, 4, 5, 6, 7] 去重后再转换为数组

1.2. sort()对数组元素进行排序(改变原数组)

const arr = [3,4,4,5,4,6,5,7];

//默认是从小到大排序

console.log(arr.sort()) // [3, 4, 4, 4, 5, 5, 6, 7]

//从小到大

arr.sort(function(a,b){

return a - b;

})

//从大到小

arr.sort(function(a,b){

return b - a;

})

1.3 reverse():反转原来数组的元素的顺序(改变原数组)

const arr = [3,4,4,5,4,6,5,7];

conosle.log(arr.reverse()); // [7, 6, 5, 5, 4, 4, 4, 3]

1.4 delete:删除一个数组成员,会形成空位,并不会影响length属性;删除对象属性时,直接删除属性字段,改变对象的结构. 删除数组元素后,会留下一个empty的字段来占据此位置,除非重新赋值

//数组

const arr = [3,4,4,5,4,6,5,7];

delete arr[1];

conosle.log(arr); // [3, empty, 4, 5, 4, 6, 5, 7]

//对象

const obj = {name: 'pboebe',age: '23',sex: '女'};

delete obj.sex;

console.log(obj); // {name: "pboebe", age: "23"}

1.5 shift():把数组的第一个元素删除,并返回删除的值(改变原数组)

const arr = [3,4,4,5,4,6,5,7];

const a = arr.shift(); // 3

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

1.6 unshift():向数组开头添加一个或多个元素,并返回添加之后的数组长度(改变原数组)

const arr = [3,4,4,5,4,6,5,7];

const a = arr.unshift(8);

console.log(a); // 9(a为返回的数组的新长度)

console.log(arr); // [8, 3, 4, 4, 5, 4, 6, 5, 7]

console.log(arr.unshift(2,1));//[2,1,8, 3, 4, 4, 5, 4, 6, 5, 7]

1.7 push():在数组的末尾添加一个或者多个元素,并返回添加后的数组的长度(改变原数组)

const arr = [3,4,4,5,4,6,5,7];

const a = arr.push(8,9);

console.log(a); // 10(a为返回的数组的新长度)

console.log(arr); // [3, 4, 4, 5, 4, 6, 5, 7, 8, 9]

1.8 pop():把数组末尾的最后一个元素去除,并返回此去除值(改变原数组)

const arr = [3,4,4,5,4,6,5,7];

const a = arr.pop();

console.log(a);//7

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

1.9 valueOf():返回数组本省

const arr = [3,4,4,5,4,6,5,7];

console.log(arr.valueOf()); // [3,4,4,5,4,6,5,7]

1.10 toString():把数组转换成字符串

const arr = [3,4,4,5,4,6,5,7];

console.log(arr.toString()); // '3,4,4,5,4,6,5,7'

1.11 concat():在原数组尾部添加另一个数组,返回一个新的数组

//数组

const a = [1,2,3];

const b = [4,5];

const c = a.concat(b); // [1, 2, 3, 4, 5]

//字符串

const x = 'abc';

const y = 'def';

const z = x.concat(y); // abcdef

1.12 join():以参数作为分隔符,将数组的各个元素组成一个字符串(默认是以逗号隔开,跟toString()返回的结果一样)

const arr = [3,4,4,5,4,6,5,7];

console.log(arr.join('-')); // 3-4-4-5-4-6-5-7

console.log(arr.join(""); // '34454657'

console.log(arr.join(" "); // '3 4 4 5 4 6 5 7'

1.13 slice(start,end):截取数组的一部分,从开始索引到结束索引(不包含结束),返回一个新的数组,原数组不改变.....用数学区间表示为:[start,end)

//数组

const arr = [3,4,4,5,4,6,5,7];

const a = arr.slice(2, 5); // [4, 5, 4]

//字符串

const x = 'abcdefgh';

const y = x.slice(3, 6); // def

1.14 splice(start,num,parms,...):用于删除从start索引开始的num个数组元素,并在此索引处插入新的一个或多个元素,返回值是被删除的num个元素的数组

const arr = [3,4,4,5,4,6,5,7];

const a = arr.splice(3, 2, 12); // [5, 4]

console.log(arr); // [3, 4, 4, 12, 6, 5, 7]

1.15 map():依次遍历数组,并对每个元素做相同的操作,返回一个新的数组,不改变原来的数组.

const arr = [3,4,4,5,4,6,5,7];

const a = arr.map(item => item*2;) // [6, 8, 8, 10, 8, 12, 10, 14]把原来的每一个元素扩大两倍

1.16 forEach():遍历数组,无返回值

const arr = [3,4,4,5,4,6,5,7];

arr.forEach(function(value,index,arr){console.log(value)}))

1.17 for in():遍历对象或者数组

// 对象

const obj = {a: 123, b: 12, c: 2 };

for (let a in obj) {

console.log(a)

}

// a b c 返回的是key

//数组

const arr = [3,4,4,5];

for(let a in arr) {

console.log(a)

}

// 0 1 2 3 返回的是索引

1.18 filter():过滤器,参数是一个函数,对所有成员依次执行该函数,返回结果为true的成员组成的一个新的数组(不改变原数组)

const arr = [3,4,4,5,4,6,5,7];

const a = arr.filter(item => item % 3 > 1);

console.log(a); // [5, 5]

1.19 some()& every():这两个方法类似于“断言”( assert )，用来判断数组成员是否符合某种条件。

const arr = [3,4,4,5,4,6,5,7];

console.log( arr.some( function( item, index, array ){

console.log( 'item=' + item + ',index='+index+',array='+array );

return item > 3;

}));

// item=3,index=0,array=3,4,4,5,4,6,5,7

// item=4,index=1,array=3,4,4,5,4,6,5,7

// true

console.log( arr.every( function( item, index, array ){

console.log( 'item=' + item + ',index='+index+',array='+array );

return item > 3;

}));

// item=3,index=0,array=3,4,4,5,4,6,5,7

//false

1.20 reduce():依次处理数组的每个成员，最终累计成一个值。

//简单用法

const arr = [3,4,4,5,4,6,5,7];

const a = arr.reduce((pre, cur) => {return pre+cur})

// 逗号写法

const a = arr.reduce((pre, cur) => (sum= pre+cur, sum))

console.log(a) // 38

//高级用法(举个数组去重和数组扁平化栗子)

const b = arr.reduce((pre, cur) => {

if(!pre.includes(cur)) {

return pre.concat(cur)

} else {

return pre

}

}, [])

// [3, 4, 5, 6, 7]

const arrs = [[2,3,2], [3,4,5]]

const c = arr.reduce((pre, cur) => {

return pre.concat(cur)

}, [])

// [2, 3, 2, 3, 4, 5]

1.21 indexOf():返回指定元素在数组中第一次出现的位置,如果没有就返回-1;

//数组

const arr = [3,4,4,5,4,6,5,7];

console.log(arr.indexOf(4)) // 1

console.log(arr.indexOf('4')) // -1

//字符串

conststring = 'asdfghj';

console.log(string.indexOf('a')) // 0

1.22 lastIndexOf():返回给定元素在数组中最后一次出现的位置索引,如果没有则返回-1;

const arr = [3,4,4,5,4,6,5,7];

console.log(arr.lastIndexOf(4)) // 4(从左到右数最后出现的位置，字符串同理)

1.23 groupBy():把对象集合的元素按照key归类,key由传入的参数返回.

const arr = [

{name: '小孙', age: 18, score: 60, weight: 60},

{name: '小王', age: 19, score: 70, weight: 55},

{name: '小李', age: 18, score: 60, weight: 70},

{name: '小刘', age: 20, score: 70, weight: 65},

{name: '小赵', age: 18, score: 60, weight: 60},

{name: '小钱', age: 19, score: 70, weight: 55},

{name: '小周', age: 20, score: 60, weight: 50},

];

const example = (data, key) => {

return data.reduce(function(prev, cur) {

//cur是一个对象,cur[key]获取对象属性的值,

//通过prev[cur[kry]]来判断是否有该属性,没有就赋给[],有就直接push;

(prev[cur[key]] = prev[cur[key]] || []).push(cur);

return prev;

}, {});

};

console.log(example(arr, 'age'));

//返回的结果

// object: {18: Array(3), 19: Array(2), 20: Array(2)}

18: Array(3)

0: {name: "小孙", age: 18, score: 60, weight: 60}

1: {name: "小李", age: 18, score: 60, weight: 70}

2: {name: "小赵", age: 18, score: 60, weight: 60}

19: Array(2)

0: {name: "小王", age: 19, score: 70, weight: 55}

1: {name: "小钱", age: 19, score: 70, weight: 55}

20: Array(2)

0: {name: "小刘", age: 20, score: 70, weight: 65}

1: {name: "小周", age: 20, score: 60, weight: 50}

1.24 shuffle():用洗牌算法随机打乱一个数组

const arr = [1,2,3,4,5,6,7,8,9,10];

const shuffle = ([...arr]) => {

let m = arr.length;

while (m) {

const i = Math.floor(Math.random() * m--);

//解构

[arr[m], arr[i]] = [arr[i], arr[m]];

}

return arr;

};

console.log(shuffle(arr))

// [10, 9, 7, 5, 6, 4, 1, 2, 8, 3]

1.25 flatten():简写为flat(),接收一个数组,无论这个数组里面嵌套了多少个数组,flatten都会将其变成一个一维数组(扁平化).

const arr = [[1,2,3],[4,5,[6,7]]];

const a = arr.flatten(3);

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

1.26 Array.isArray():用来判断数据是否是数组,返回值为true或false

const arr = [3,4,4,5,4,6,5,7];

console.log(Array.isArray(arr)) // true

1.27 find():从数组中找到第一个符合条件的元素,并返回这个元素;如果没有找到就返回undefined

const arr = [3, 4, 4, 5, 4, 6, 5, 7];

const a = arr.find(item => item > 4);

console.log(a); //4(find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。)

const b = arr.find(item => item == 0);

console.log(b); //undefined(如果没有符合条件的元素返回 undefined)

2.1 charAt():用于返回索引位置的字符,如果索引超过指定字符串长度,则返回空字符

const str = 'hello guys';

console.log(str.charAt(3)) // l

2.2 charCodeAt():用于返回指定索引位置的字符的Unicode编码

const str = 'hello guys';

console.log(str.charCodeAt(3)) // 111

console.log(str.charCodeAt(100)) //NaN

2.3 match():用于在字符串内检索指定的值或找到一个或多个正则表达式的匹配,返回的是值而不是值的位置.

const str = 'hello guys';

console.log(str.match('guys')) // ["guys"]

// 使用正则匹配字符串

const strs = '1.hello guys, 2.are you ok?';

console.log(strs.match(/\d+/g)) // ["1", "2"]

2.4 replace():替换匹配到的字符串,默认只替换一次

const str = 'hello guys hello guys hello guys hello guys hello guys';

//只替换一次

console.log(str.replace('guys', 'man')) //hello man hello guys hello guys hello guys hello guys

//替换所有的

console.log(str.replace(/guys/g, 'man')) //hello man hello man hello man hello man hello man

2.5 search():用于检索与字符串匹配的字串,返回的是匹配到的字串的索引,若没有匹配到,就返回-1;和indexOf()的区别在于,search()是强制正则搜索,而indexOf是按字符串匹配的

const str = 'hello guys';

console.log(str.search('guys')) // 6

console.log(str.indexOf('guys')) // 6

// 区别

conststring = 'abcdefg.1234';

console.log(string.search(/\./)) // 7(转译之后可以匹配到 . 的位置)

console.log(string.indexOf(/\./)) // -1 (相当于匹配/\./，找不到则返回-1,只能匹配字符串)

2.6 split():按指定的格式将字符串分割成指定长度的数组

格式:split(格式,长度)

const str = 'hello guys';

console.log(str.split('')) // ["h", "e", "l", "l", "o", " ", "g", "u", "y", "s"]

console.log(str.split('', 3)) // ["h", "e", "l"]

2.7 toLocaleLowerCase(), toLowerCase(),toLocaleUpperCase(), toUpperCase():转换大小写

const str = 'HELLO GUYS';

console.log(str.toLocaleLowerCase()) // hello guys

console.log(str.toLowerCase()) // hello guys

const str1 = 'hello guys';

console.log(str1.toLocaleUpperCase()) // HELLO GUYS

console.log(str1.toUpperCase()) // HELLO GUYS

2.8 substr():用于截取从指定位置开始指定长度的字符串,返回一个新的字符串;最多截取到末尾,支持负数

const str = 'hello guys';

console.log(str.substr(2)) // llo guys

console.log(str.substring(2, 7)) // llo g

console.log(str.substr(-1, 70)) // s

2.9 substring():用于提取两个索引之间的字符串.(跟slice和substr不同的是,substring不接收负的参数)

const str = 'hello guys';

console.log(str.substring(2)) // llo guys

console.log(str.substring(2, 7)) // llo g

2.10 trim():去掉字符串两端的空格;

const str = ' hello guys ';

console.log(str.trim()) // hello guys(不会改变原数组)

3.1 JSON.parse():把JSON字符串转换为js对象

const str = '{"name": "phoebe", "age": 20}';

const obj = JSON.parse(str) // {name: "phoebe", age: 20}(object类型)

3.2 JSON.stringfy():把对象转换为字符串

const obj = {"name": "Tins", "age": 22};

const str = JSON.stringify(obj) // {"name":"Tins","age":22}(string类型)

4.2 Object.Prototype.valueOf():返回当前对象的值.