js 中常用字符串、集合函数、date介绍js 开发过程中会碰到很多比较常用的方法，本篇文章主要介绍字符串、集合相关常用

前言

js 开发过程中会碰到很多比较常用的方法，本篇文章主要介绍字符串、集合相关常用的方法，但不是全部哈，这些平时基本上也够用了，对于其他很多方法，太多了就不多介绍了(例如：apply、bind、call)

本文主要介绍字符串、数组、Set、Map、WeakRef、WeakSet、WeakMap 其他的最多小有提及

字符串

函数：split()

split()传入类型为字符串、正则表达式

使用一个指定的分隔符把一个字符串分割存储到数组

var str='jpg|bmp|gif|png' 
var arr=str.split('|');
//arr [ 'jpg', 'bmp', 'gif', 'png' ]

支持正则，也可通过正则匹配多个类型

var str = "jpg，gif、png、bmp";
var arr = str.split(/，|、/g);
//arr [ 'jpg', 'gif', 'png', 'bmp' ]

ps：使用空字符串可以分割所有字符

charAt()

charAt()传入类型为字符串位置数字，返回指定位置的字符。字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length - 1 中，该方法将返回一个空字符串。

var str = "agidovwdkp";
var char1 = str.charAt(1)//结果为g

charCodeAt()

charCodeAt()传入类型为字符串位置数字，返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。

var str = "agidovwdkp";
var charCode = str.charCodeAt(1);//结果为103。即g的Unicode编码为103

slice()

slice(start,end)：用于提取字符串中介于两个指定下标之间的字符(左闭右开)

start:必需。规定从开始的何处选取。如果如果是是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end:可选。规定从结束的何处选取。该参数如果是是数组片段结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
返回一个新的数组，包含从start到end（不包括该元素）的arrayobject中的元素。

var str='ahji3o3s4e6p8a0sdewqdasj' 

console.log(str.slice(2,5)) //结果ji3  

console.log(str.slice(1, 4)); //返回hji

console.log(str.slice(-3, -1)); //返回as

substring()

substring(start,stop)：用于提取字符串中介于两个指定下标之间的字符(左开右闭)

start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop 可选。表示结束位置，开区间(不包括该位置)，如果省略该参数，那么返回的子串会一直到字符串的结尾。
长度为 stop 减 start。说明 substring 方法返回的子串包括 start 处的字符，但不包括 end 处的字符。如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数。如果 start 或 end 为负数，那么它将被替换为 0。

var str = "ahji3o3s4e6p8a0sdewqdasj";
var newStr = str.substring(2, 6); //结果为ji3o

substr()

substr(start，length)：用于返回一个从指定位置开始的指定长度的子字符串。

start 必需。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。 length 可选。在返回的子字符串中应包括的字符个数。说明如果 length 为 0 或负数，将返回一个空字符串。如果没有指定该参数，则子字符串将延续到stringObject的最后。

var str = "ahji3o3s4e6p8a0sdewqdasj";
var newStr = str.substr(2, 6); //结果为ji3o3s

replace()

replace(regexp | substr,replacement)：方法用来进行字符串替换操作，它可以接收两个参数，前者为被替换的子字符串（正则），后者为用来替换的文本。

replace()方法用来进行字符串替换操作，它可以接收两个参数，前者为被替换的子字符串（可以是正则），后者为用来替换的文本或者匹配的回调。
如果第一个参数传入的是子字符串或是没有进行全局匹配的正则表达式，那么replace()方法将只进行一次替换（即替换最前面的），返回经过一次替换后的结果字符串，全局的泽匹配所有
第二个参数如果返回的是函数 (match) => {} ，则是匹配到后同步回调函数，也可以用于解决一些问题

var str = 'abcdeabcde';
//替换第一个出现的
console.log(str.replace('a', 'A')); //Abcdeabcde
console.log(str.replace(/a/, 'A')); //Abcdeabcde
//替换全部
console.log(str.replace(/a/g, 'A')); //AbcdeAbcde

ps：这个也是平时用的比较多的，也同时是用正则最多的，毕竟普通的根本不够用哈

indexOf()

indexOf(searchvalue, fromindex) ：用来检索指定的字符串值在字符串中首次出现的位置。它可以接收两个参数，searchvalue表示要查找的子字符串，fromindex表示查找的开始位置，省略的话则从开始位置进行检索，如果找不到返回-1

var str = 'abcdeabcde';

console.log(str.indexOf('a')); // 返回0
console.log(str.indexOf('a', 3)); // 返回5
console.log(str.indexOf('bc')); // 返回1

lastIndexOf()方法

lastIndexOf(searchvalue, fromindex)：与indexOf()类似，它返回的是一个指定的子字符串值最后出现的位置，其检索顺序是从后向前，如果找不到返回-1

var str = 'abcdeabcde';  

console.log(str.lastIndexOf('a')); // 返回5
console.log(str.lastIndexOf('a', 3)); // 返回0 从第索引3的位置往前检索
console.log(str.lastIndexOf('bc')); // 返回6

search()方法

search(substr | regexp)：用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。它会返回第一个匹配的子字符串的起始位置，如果没有匹配的，则返回-1。

var str = 'abcDEF';

console.log(str.search('c')); //返回2
console.log(str.search('d')); //返回-1
console.log(str.search(/d/)); //返回3

ps：和 replace 类似，这个也是用正则比较多的

match()

match(substr | regexp)：可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

参数中传入的是子字符串或是没有进行全局匹配的正则表达式，那么match()方法会从开始位置执行一次匹配，如果没有匹配到结果，则返回null，否则则会返回一个数组，该数组的第0个元素存放的是匹配文本，除此之外，返回的数组还含有两个对象属性index和input，分别表示匹配文本的起始字符索引和stringObject 的引用(即原字符串)。
如果参数传入的是具有全局匹配的正则表达式，那么match()从开始位置进行多次匹配，直到最后。如果没有匹配到结果，则返回null。否则则会返回一个数组，数组中存放所有符合要求的子字符串，并且没有index和input属性.

不带全局搜索的正则、字符串

var str = '1a2b3c4d5e';

console.log(str.match('h')); //返回null
console.log(str.match('b')); //返回["b", index: 3, input: "1a2b3c4d5e"]
console.log(str.match(/b/)); //返回["b", index: 3, input: "1a2b3c4d5e"]

带全局搜索的正则

var str = '1a2b3c4d5e';

console.log(str.match(/h/g)); //返回null
console.log(str.match(/\d/g)); //返回["1", "2", "3", "4", "5"]

padStart()、padEnd()用于头部补全和于尾部补全

padStart()、padStart():一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串，分别是从前面开始补全、从后面开始补全

ps：如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。

'x'.padStart(5, 'ab') // 'ababx'

'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'

'x'.padEnd(4, 'ab') // 'xaba'

'abc'.padStart(10, '0123456789') // '0123456abc'

trim()

trim(): 用于截取字符串首尾空格的，一般用于搜索引擎

var str = ' 1a2b3c4d5e ';
str.trim() // '1a2b3c4d5e'

toFixed(位数)--不是字符串的

toFixed：这个是number类型的对象方法，返回字符串，写到这里也是因为用的多，似乎小于等于5舍弃大于5入，普不同平台版本可能不一样，有小量误差，可以参考这篇

字符串编解码

encodeURIComponent编码、decodeURIComponent解码

//对url进行解码成正常字符串
decodeURIComponent(encodedURIComponent: string): string

//将普通字符串编码成url类型字符串
encodeURIComponent(uriComponent: string | number | boolean): string;

reg的使用

reg 除了我们常使用的 /reg/ 之类的形式，有时还需要拼接字符串，因此需要用到 RegExp 对象，RegExp 里面的关键字需要额外转义

例如：正常转义加上反斜杠，如 . ，使用字符拼接时(例如RegExp)，需要使用双反斜杠\.

RegExp()一共接收两个参数，第一个为reg，即正则(可以是字符串), 第二个是正则的匹配方式 g全局、i忽略大小写
var reg = new RegExp("0\\.00", 'i')
var reg = /哈哈/gi
str.match(reg)
//reg.exec(str)
//reg.test(str)

数组

数组是JavaScript提供的一个内部对象，它是一个标准的集合，我们可以添加(push)、删除(shift)里面元素，我们还可以通过for循环遍历里面的元素

shift():

删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined

var a = [1,2,3,4,5];   
var b = a.shift(); //a:[2,3,4,5] b:1

unshift():

将参数添加到原数组开头，支持添加多个

var a = [1,2,3,4,5];   

a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5]

pop():

删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined

var a = [1,2,3,4,5];   

var b = a.pop(); //a:[1,2,3,4] b:5

push():

将参数添加到原数组末尾，并返回数组的长度，支持添加多个

var a = [1,2,3,4,5];   

var b = a.push(6,7); //a:[1,2,3,4,5,6,7] b:7

concat():

返回一个新数组，是将参数添加到原数组中构成的

var a = [1,2,3,4,5];   

var b = a.concat(6,7); //a:[1,2,3,4,5] b:[1,2,3,4,5,6,7]  

var b = a.concat(); //copy一个新数组

splice(start,deleteCount,val1,val2,...):

从 start 位置开始删除 deleteCount 项，并从该位置起插入 val1,val2,...

结果返回删除的内容数组

var a = [1,2,3,4,5];   

var b = a.splice(2,2,7,8,9); //a:[1,2,7,8,9,5] b:[3,4]   

var b = a.splice(0,1); //a:[2,3,4,5]  b:[1]

a.splice(0,0,-2,-1); //a: [-1, -1, 1, 2, 3, 4, 5]

reverse():

将数组反转排列

var a = [1,2,3,4,5];   

var b = a.reverse(); //a:[5,4,3,2,1] b:[5,4,3,2,1]

sort(order function):

按指定的参数对数组进行排序

var a = [1,2,3,4,5];   

a.sort(function (a, b) { return a-b });//a-b为升序,b-a为降序

a.sort((a, b) => a-b); //ES6

slice(start,end):

返回从原数组中指定开始下标到结束下标之间的项组成的新数组（左闭右开），超出范围则会只取到最后

var a = [1,2,3,4,5];   

var b = a.slice(2,5); //a:[1,2,3,4,5] b:[3,4,5]

join(separator):

将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符

var a = [1,2,3,4,5];   

var b = a.join("|"); //a:[1,2,3,4,5] b:"1|2|3|4|5"

concat()

将两个数组连接在一起

var arr1=[1,2,3,4]
var arr2=[5,6,7,8]  

var newArr = arr1.concat(arr2) //[1,2,3,4,5,6,7,8]

indexOf()、find()、findIndex()和 lastIndexOf()

indexOf()、findIndex()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的开头（位置 0）开始向后查找。

find()：接收两个参数：要查找的项和（可选的）表示查找起点位置的item内容

lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的末尾开始向前查找。

这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回1。在比较第一个参数与数组中的每一项时，会使用全等操作符。

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2 返回索引
console.log(arr.indexOf("5")); //-1 找不到返回-1
console.log(arr.find(5)); //5,找到了返回原来的
console.log(arr.findIndex(5)); //2 返回索引
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2

some()

some((item, index, array)=>{}): 判断数组中有意向满足条件返回true

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

var res = arr.some(function(item, index) {
    return item < 1;
}); 
//res返回true

every()

every((item, index, array)=>{})：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

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

var arr2 = arr.every(function (item, index) {
    return item < 10;
});
console.log(arr2); //true

var arr3 = arr.every(function (item, index) {
    return item < 3;
});
console.log(arr3); // false

filter()

filter((item, index, array)=>{}): 此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回

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

let newArr = arr.filter(function (item) {
    return item >= 3;
});

forEach()

forEach((item, index, array)=>{}): 此方法是遍历所有元素，不返回接收值

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

arr.forEach(function(item) {
    ...
})

map()

map((item, index, array)=>{}): 此方法是遍历所有元素，闭包函数返回内容组成新的数组

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

let newArr = arr.map(function(item, index) {
    return {
        value: item,
        index: index
    }
})
//此时返回 {value：，index：} 类型的对象数组

sort()

此方法将所有元素进行排序，返回正数元素按照倒序，负数正序，实际按照前后两个数之间的顺序差的结果

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

let newArr = arr.sort(function(a, b) {
    return  a < b   //a<b，a和b排序a应该在b之前出现，如果a>b,b在a之前出现
})

array.sort(function(a, b) { return a- b})  //从小到大  
array.sort(function(a, b) { return b- a})  //从大到小

reduce()

此方法接收一个累加器，遍历数组每个值，从左往右累加，这个用的也是挺多挺杂的

reduce((prev, cur, index, arr)=>{

}, init) 

-   prev:表示上一次调用回调时的返回值，或者初始值init，最后一次返回的就是reduce的结果了
-   cur:表示当前正在处理的数组元素
-   index:表示正在处理的数组元素的索引，若提供init值，则索引为0，否则索引为1
-   arr:返回数组本身
-   init: 表示初始值，默认没有，没有时第一个会为初始值，会少走一次逻辑

function getSum(total,num) {
    return total + num;
}

function test(item) {
    var numbers = [65, 44, 12, 4];
    let total = numbers.reduce(getSum);
    //相当于下面的  
    total = numbers.reduce(function(prev, cur) { return prev + num;})  
}

includes()

从数组中找出是否符合要求的选项，返回bool类型，某些情况比indexOf、findIndex更加直观

[1, 2, 3].includes(2)     // true

[1, 2, 3].includes(4)     // false

[1, 2, NaN].includes(NaN) // true

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

[1, 2, 3].includes(3, 3);  // false

[1, 2, 3].includes(3, -1); // true

flat()

会将多维数组合展开并成一个一维数组(无论有几层，前提里面也得是数组)

let list = [-1, [0, 1], [ 2, 3, [4, 5, [6, 7]]]]

list.flat() // [-1, 0, 1, 2, 3, 4, 5, 6, 7]

at() 索引

获取字符串索引，当参数为自然数时正方向取值，当为负数时从后往前取(数组也一样)

var list = [1, 2, 3]

list[1]     // 1       
list[list.length-1]     // 3

list.at(1)      //1
list.at(-1)     // 3

Array.from() 转化为数组

Array.from(iterable: Iterable<any> | ArrayLike<any>) ：能够将具备枚举特性的 iterable 对象或者 ArrayLike 的对象转化为数组，这样就能进行类似数组的操作了，如果只是遍历，复合 iterable 特性即可

const set = new Set()

const list = Array.from(set)

//es6 直接...也可以
const list = [...set]

Array.isArray() 判断是否是数组

Array.isArray() 这个也是是数组的静态方法，通过类名调用，传递一个对象判断是否是数组，也是最规范的一种判断方法，其他的判定方式基本上都是存在缺陷的，并不通用

let obj = ...  //undefined | null | string | number | array | set
if (Array.isArray(obj)) {
    //是数组
}

ArrayLike

ArrayLike 实际上不是数组，是对象，只不过其数据表示为一个数组，其不具备 Iterator 枚举功能，因此不能直接遍历

通过 Array.from 方法来转化为数组即可，这样就支持枚举遍历了

例如：

let arrayLike = { length: 2, 0: 'a', 1: 'b' };

//因为**不是数组**，不具备正常的枚举功能(结构不对)，所以必能直接使用 for ... of 来进行遍历

//也可以转化为数组遍历
for (let x of Array.from(arrayLike)) {
  console.log(x);
}

JS数组遍历

1，普通for循环，经常用的数组遍历

var arr = [1,2,0,3,9];

for ( var i = 0; i <arr.length; i++){
    console.log(arr[i]);
}

2，优化版for循环:使用变量，将长度缓存起来，避免重复获取长度，数组很大时优化效果明显

for(var j = 0,len = arr.length; j < len; j++){
    console.log(arr[j]);
}

3，forEach，ES5推出的,数组自带的循环，主要功能是遍历数组，实际性能比for还弱

arr.forEach(function(value,i){
　　console.log('forEach遍历:'+i+'--'+value);
})

ps:forEach 这种方法也有一个小缺陷：你不能使用break语句中断循环，也不能使用return语句返回到外层函数。

4，map遍历，

map遍历支持使用return语句，支持return返回值

var temp=arr.map(function(val,index){
  console.log(val);  
  return val*val           
}); 内部return的为单个item，**注意：返回的为与原数组个数一致的新数组不足补空**
console.log(temp);

5，for-of遍历是ES6功能

for( let i of arr){
    console.log(i);
}

for-of 这个方法避开了 for-in 循环的所有缺陷

与forEach()不同的是，它可以正确响应break、continue和return语句

6，for-in遍历

for-in 是为遍历对象而设计的，不适用于遍历数组，遍历数组时，下标index值是数字，for-in遍历的index值"0","1","2"等是字符串**

for (var index in arr){
    console.log(index);
    console.log(arr[index]);
}

Set

哈希表 Set 里面不会保存重复的值

Set 和 Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

var s1 = new Set(); // 空Set

var s2 = new Set([1,2,3]); // 含1, 2, 3

var s3 = new Set(s1); //克隆一份set

重复元素在Set中自动被过滤：

add(key) 方法可以添加元素到Set中，可以重复添加，但不会有效果：

delete(key) 方法可以删除元素：

.size 获取 Set 元素个数

clear() 删除MAP所有元素

has(value) 返回一个布尔值，表示该值在Set中存在与否。

keys() 与 values()方法相同，返回一个新的迭代器对象，该对象包含Set对象中的按插入顺序排列的所有元素的值。

Array.from(set) 可以转化为数组

Map

哈希表键值对， Map 里面的可以不会保存重复的值，对应的 value 允许重复

var map = new Map();

var map2 = new Map(map);//克隆一份

var map3 = new Map([["key1", "value1"], ["key2", "value2"]])

.size 获取Map元素个数

isEmpty() 判断Map是否为空

clear() 删除MAP所有元素

set(key, value) 向MAP中增加元素（key, value)

remove(key) 删除指定KEY的元素，成功返回True，失败返回False

get(key) 获取指定KEY的元素值VALUE，失败返回NULL

element(index) 获取指定索引的元素（使用element.key，element.value获取KEY和VALUE），失败返回NULL相当于一个字典，可以遍历，使用for in最合适，跟对象一样

entries() 返回一个新的 Iterator 对象，它按插入顺序包含了Map对象中每个元素的 [key, value] 数组。

forEach() 按插入顺序，为 Map对象里的每一键值对调用一次callbackFn函数。如果为forEach提供了thisArg，它将在每次回调中作为this值。

keys() 返回一个新的 Iterator对象，它按插入顺序包含了Map对象中每个元素的键。

values() 返回一个新的Iterator对象，它按插入顺序包含了Map对象中每个元素的值。

myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
})

for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}

for (var key of myMap.keys()) {
  console.log(key);
}
// 将会显示两个log。 一个是 "0" 另一个是 "1"

for (var value of myMap.values()) {
  console.log(value);
}

var kvArray = [["key1", "value1"], ["key2", "value2"]];

// 使用常规的Map构造函数可以将一个二维键值对数组转换成一个Map对象
var myMap = new Map(kvArray);

map 能像数组一样被复制：

var merged = new Map([...first, ...second]);

WeakRef

只不过是弱引用一个对象，不会参与垃圾回收的过程，当原对象释放的时候，该指针将不存在(此时可以理解为变成了野指针)

WeakSet

WeakSet和Set类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。（如果是对象，只要不是同一个对象，即地址不一样，就可以继续放），

注意：不可以遍历，不会被引用，其他地方释放，这里也会释放

WeakMap

与 Map 类似，只不过 key 只能以对象作为参数(原始类型不行)，也是不会被引用， key对象释放时，其也会跟着被释放