JS常见汇总集合

1. Array方法集:

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():依次处理数组的每个成员,最终累计成一个值。

reduce(a, b, x, y)a:必填,累计变量;b:必填,当前变量;x: 可选,当前位置;y:可选,原数组。

//简单用法
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. String

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. JSON

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. Object 实例对象的方法主要有以下六个

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容