Js常用函数，包括ES6 —— 持续更新

v:1.0.1

这篇文章主要是提供字符串、数组、对象的常用高频使用的函数，以及一些常用自定义函数

/*---------------字符串类---------------*/

-- tips：如下方法都不会改变原字符串！！！也就是说会返回全新字符串

/*
 * @description 查找某字符串值在某字符串中第一次出现的位置，如果没有则返回 -1
 * @param { string } target_str 目标字符
 * @param { number } start_index 查找的起始位置。如果是-1则是从倒数第一位开始（-1，-2……）
 */
str.indexOf(target_str, start_index)

/*
 * @description 返回所在index位置的字符串，str.length > index >= 0,index表示某个位置，如果超过范围则返回空字符串
 * @param { number } index 查找的位置
 */
target_str.charAt(index)

/*
 * @description 截取并返回新字符串
 * @param { number } start_index 起始位置，有两种值，一种是正值，而对于负值是从-1开始表示倒数第一个字符，-1代表最后一个字符
 * @param { number } how_many 截取的长度，如果不传值，则认为从开始到结束全部截取
 */
target_str.substr(start_index, how_many);
// demo: "abc".substr(-2, 2) ==> "bc"

/*
 * @description 截取并返回新字符串，tips：结束位置并不包含在截取的字符串内
 * @param { number } start_index 起始位置，有两种值，一种是正值，而对于负值是从-1开始即表示倒数第一个字符
 * @param { number } end_index 结束位置，也可以是负值，如果不传值，则认为从开始到结束全部截取
 */
target_str.slice(start_index, end_index)
// demo： "abc".slice(-3, -1);===>"ab"
// demo： "abc".slice(0, 2);===>"ab"

/*
 * @description 将字符串转换为字符串数组
 * @param { string } separator separator不会出现在数组中，它是分割的条件一个字符
 * @param { number } how_many 数组保留多少元素，如果分隔符不存在于原来字符串中则返回“原字符串构成的数组”
 */
str.split(separator, how_many)
// demo 1：'1,2,3'.split('|')=>["1,2,3"]，字符串中没有|，则返回'1,2,3'这个字符串构成的唯一元素数组。
// demo 2：'1,2,3'.split(',')=>['1', '2', '3']，字符串中有","，则返回'1', '2', '3'这个字符串构成的唯一元素数组。

/*
 * @description 将字符串转换为大写，返回新的字符串
 */
str.toUpperCase()

/*
 * @description 将字符串转换转换为小写，返回新的字符串
 */
str.toLowerCase()

/*
 * @description 此方法不是字符串方法，但常常用来判断某字符串是否符合某格式；比如手机号，邮箱等；正则去判断str，如果匹配返回true、否则false，性能较高
 */
reg_obj.test(str)

/*
 * @description 查找str中字符串并替换称相应的字符串，返回被替换后的字符串，原字符串不变
 */
str.replace(正则/字符串, replace_str)

 

 

【ES6】

1、str.includes(target_str,n),返回是否包含某字符串的boolean值【n>=0表示从起始位置n开始到最后进行检索】

2、str.startsWith(target_str,n),返回是否以某字符串为开始的boolean值【n>=0表示从起始位置n开始到最后进行检索】

3、str.endsWith(target_str,n),返回是否以某字符串为结束的boolean值【n>=0表示对前n个字符串进行检索】

4、str.repeat(times);返回str的N次重复的新字符串，如果是0，则返回空字符串

5、拼接字符串：反引号规则——`${ 变量 || 表达式 }`

 

 

【ES6】

1、str.includes(target_str,n),返回是否包含某字符串的boolean值【n>=0表示从起始位置n开始到最后进行检索】

2、str.startsWith(target_str,n),返回是否以某字符串为开始的boolean值【n>=0表示从起始位置n开始到最后进行检索】

3、str.endsWith(target_str,n),返回是否以某字符串为结束的boolean值【n>=0表示对前n个字符串进行检索】

4、str.repeat(times);返回str的N次重复的新字符串，如果是0，则返回空字符串

5、拼接字符串：反引号规则——`${变量、表达式}`

 

 

/*---------------数组类--------------*/

1、array1.indexOf(value)：和str一样

2、array1.slice(start,end)：和str一样，返回新数组

2、array1.concat(arrayX……/values)：将array1和其它arrayX或者新值连接成新的数组并返回，注意（1）原数组不变（2）只能合并一维数组

demo：[1,2].concat(3,4,[5,6])=>[1, 2, 3, 4, 5, 6]

3、array1.join('分隔符号')：将数组依照‘分隔符’拆分为字符串，并返回

demo：[1,2,'d'].join('-') => "1-2-d"

4、array1.reverse()：修改原数组，将其反转[1,2,3].reverse()=>[3,2,1]

5、array1.splice(index,howmany,item1,.....,itemX)：删除并添加新元素，改变原来的数组。index-起始位置；howmany-删除几个(0个则不删除)；最后一个参数是添加的数据。

6、isArray()： 判断某对象是否是数组类型，Array.isArray(array);

7、数组的遍历：

（1）forEach(function(value,index,数组本身){}) 数组.forEach(回调函数)，相当于for

（2）map(function(value,index,数组本身){return ……}) 对每次返回的数据放入新的数组中，并最终返回一个新的数组

（3）filter(function(value,index,数组本身){return boolean}) 过滤数组，value经过运算后如果返回true，则这个数组元素将放入新的数组，否则不放入（注意：此方法会过滤掉稀疏数组的缺少的元素）

（4）every(function(value,index,数组本身){return boolean}) 对所有元素进行判定，只有当所有元素都满足时，返回true

（5）some(function(value,index,数组本身){return boolean}) 同上，只不过它是“只要有一个”满足函数整体即返回true

（6）【ES6】for of：for(var value of array){} 对于数组，得到的是value值，对于对象也是value

【ES6】

扩展运算符‘...’

将数组转换为用逗号分隔的参数序列；在此过程中仅仅是复制了数组内的元素，而不是数组本身

(1)用于传入函数中的参数！

demo：

function x(a,b,c){}

let arr=[1,2,3];

x(...arr);===x(1,2,3);

 

(2)复制数组

let a1=[1,2];

let a2=[...a1];//注意这里永远仅仅是获取了数组的内容，并非通过...而直接获取了数组，此处也是明显的声明了数组；

 

(3)合并数组

let a1=[1,2];

let b1=[2,3];

let c1=[...a1,...b1];

 

(4)和解构联合：注意，如果和解构连用，则...必须放在最后才行

let [a,...b]=[1,2,3]; a==>1,b==>[2,3]

 

Array.from(类数组对象||可遍历对象（Set/Map），?(x)=>{处理，并返回新数组})

返回值是一个新的数组，原来的数据不会发生变化；实际应用中一般是传入dom，返回数组dom，而第二个参数可选

如果参数是一个真正的数组，则返回一模一样的新数组，处理函数是会把每一个数组值进行处理并返回，如例子

例子：

注意：常见的类数组的对象有dom列表和argument对象

注意：原来的数组[1,2,3]没有发生变化

Array.from([1, 2, 3], (x) => x * x)，

// [1, 4, 9]

 

除此之外还有几种方式将类数组转换为数组（之所以可以，是因为类数组对象必须有一个length的属性，否则无法正确转换）

Array.prototype.slice.call(arrayLike);

Array.prototype.splice.call(arrayLike,0);

Array.prototype.concat.apply([],arrayLike）

 

Array.of(传入的值列表)

创建新数组；返回一个对应结构的数组，这个方法主要是为了弥补Array构造器的缺陷。

例子：

Array.of() // []

Array.of(3) // [3]

Array.of(3, 11, 8) // [3, 11, 8]

 

数组.find(function(value,index,this_arr){return 为true的数组元素})

也是遍历处理函数，根据函数（形参依次为：当前值，当前下标，数组本身）找到第一个返回true的值，并返回这个值，第一个例子只传了一个value参数，如果没有找到则返回undefined

例子：

[1, 4, -5, 10].find((n) => n < 0)

// -5

[1, 5, 10, 15].find(function(value, index, arr) {

return value > 9;

}) // 10

 

数组.findIndex(回调函数)

回调函数的参数同上，不同的是，此函数的作用是得到目标值的位置，如果没有找到返回-1；

例子：

[1, 5, 10, 15].findIndex(function(value, index, arr) {

return value > 9;

}) // 2

之所以有这个方法，是弥补了indexOf()方法的不足，因为 “indexOf()” 它识别不了NaN

如：

[NaN].indexOf(NaN)

// -1，无法正确识别

 

数组.includes(值，起始位置-默认0)

返回true/false;如果第二个参数是负数，则意味着倒数第几个开始，如-3，表示从倒数第三个开始向右查找，如果超过范围，则恢复到0开始查找，

很明显，这个方法也是可以判断NaN的。

例子：

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

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

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

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

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

 

/*---------------对象--------------*/

Object.assign(targetObj,otherObjs……)：将otherObjs合并到targetObj，改变并返回targetObj，实际项目中经常目标为{}，用来合并对象（克隆）