JS数组和字符串方法总结

一、数组方法总结

数组属性和方法

1.indexOf()和lastIndexOf()

搜索整个数组中具有给定值的位子，返回找到第一个元素的索引，如果没有找到就返回-1；indexOf()是从头找到尾，lastIndexOf()正好相反
参数：第一个参数：规定需检索的字符串值。第二个参数：规定在字符串中开始检索的位置，可以是负数，表示相对数组末尾的偏移量。

var a1 = [1,2,3,9,3,4,'10',3,4,5]
console.log(a1.indexOf(3))     // 2, 第一个3的索引是2
console.log(a1.indexOf(10))    // -1, 元素10没有找到，返回-1
console.log(a1.indexOf('10'))  // 6, 元素'10'的索引为6
console.log(a1.indexOf(3,3))   // 4, 从索引3开始找到的第一个3的索引是4
console.log(a1.indexOf(3,-3))  //7，从倒数第3个开始找到的第一个3的索引是7
console.log(a1.indexOf(3,-8))  //2，从倒数第8个开始找到的第一个3的索引是2

console.log(a1.lastIndexOf(3))    //7，从后向前找到的第一个3的索引是7
console.log(a1.lastIndexOf(3,2))  //2，从索引2开始往前找到的第一个3的索引是2
console.log(a1.lastIndexOf(3,-3)) //7，从倒数第三个开始往前找到的第一个3的索引是7

2.push()和pop()

push在数组的末尾添加一个或者多个元素，返回新数组的长度。pop删除数组的最后一个元素，返回它删除的值元素。
会改变原数组

var a2 = [1,2,3]
var arr2 = a2.push(4,5)
console.log(arr2)      //5，返回的是新数组的长度
console.log(a2)        //[1, 2, 3, 4, 5]，会改变原数组

var t2 = [1,2,3]
var test2 = t2.pop()
console.log(test2)   // 3，返回删除的元素
console.log(t2)      // [1, 2]，会改变原数组

3.unshift()和shift()

unshift是在数组头部添加一个或多个元素。如果一次性传入多个参数，多个参数按照按照原先的位置直接加到数组中。返回新数组的新数组的长度。
shift:删除数组的第一个元素，并返回删除的元素
会改变原数组

var a3 = [1,2,3]
var arr3 = a3.unshift(4,5)
console.log(arr3) // 5,返回的是新数组的长度
console.log(a3)   // [4, 5, 1, 2, 3]

var t3 = [1,2,3]
var test3 = t3.shift()
console.log(test3) //1，返回删除的元素
console.log(t3)    //[2, 3]

4.sort()

对数组的元素按照字符编码的顺序进行排序。
会改变原数组

var a4 = ['c','b',undefined,'a','z',6];
console.log(a4.sort()) //[6, "a", "b", "c", "z", undefined],undefined被排到最后
console.log(a4)        //[6, "a", "b", "c", "z", undefined],会改变原数组

var t4 = [33,4,1111,2222];
// console.log(t4.sort())           //[1111, 2222, 33, 4] 
// console.log(t4.sort((a,b)=>a-b)) //[4, 33, 1111, 2222]，升序排序
console.log(t4.sort((a,b)=>b-a))    //[2222, 1111, 33, 4]，降序排序

// 对象数组排序
var s4 = [
    { name:'a',age:18 },
    { name:'b',age:10 },
    { name:'c',age:20 },
    { name:'d',age:19 },
]
// console.log(s4.sort((a,b)=>a.age-b.age)) //按照age的大小升序排序
console.log(s4.sort((a,b)=>b.age-a.age))    //按照age的大小降序排序

// 日期排序
var date4 = ["2015-03-25", "2015-02-01", "2015-01-03", "2015-02-02"];
console.log(date4.sort((a,b)=>new Date(a)-new Date(b))) //日期升序排序 
// [“2015–01–03”、”2015–02–01”、”2015–02–02”、”2015–03–25”]
console.log(date4.sort((a,b)=>new Date(b)-new Date(a))) //日期降序排序 
// [“2015–03–25”、”2015–02–02”、”2015–02–01”、”2015–01–03”]

5.reverse()

颠倒数组中元素的顺序。
会改变原数组

var a5 = [1,2,3]
console.log(a5.reverse())  //[3,2,1]
console.log(a5)            //[3,2,1]原数组被修改
console.log(a5.reverse()); //[1,2,3] 因为原数组又被修改了

6.concat()

用于连接两个或多个数组。把当前的Array和另一个Array连接起来，并返回一个新的Array。新数组由原数组和concat()里面的参数组成。
不改变原数组

var a6 = [1,2,3]
console.log(a6.concat(4))           //[1,2,3,4]
console.log(a6)                     //[1,2,3]  //原数组不改变
console.log(a6.concat([4,5]))       //[1, 2, 3, 4, 5]
console.log(a6.concat([4,5,[6,7]])) //[1, 2, 3, 4, 5,[6,7]] //只能扁平化一维

7.slice()

截取数组的部分元素，然后返回一个新的数组。两个参数分别指是片段的开始和结束位置（不包含结束的位置）。
不改变原数组

var a7 = [1,2,3,4,5]
console.log(a7.slice(1,3));   //[2,3]  //索引从1到3但包括3的子数组
console.log(a7);              //[1,2,3,4,5]  //原数组不改变
console.log(a7.slice(1));     //[2,3,4,5] 只有一个参数，则从该参数位置到末尾
console.log(a7.slice(1,-1));  //[2,3,4] 参数为-1指向最后一个元素，但不包括它
console.log(a7.slice(-2,-1))  //[4] 从倒数第2个数到倒数第一个数，但不包括倒数第一个数

8.splice()

在数组中输入和删除元素的通用方法。可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素。
参数一：规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。参数二：要删除的项目数量。后面所有参数：向数组添加的新项目。
会改变原数组

var a8 = [1,2,3,4,5]
var arr8 = a8.splice(2)
console.log(arr8)  //[3,4,5]   返回原数组从索引为2的元素到结尾被删除的部分
console.log(a8)    //[1,2]     原数组是被修改之后的数组

var t8 = [1,2,3,4,5]
var test8 = t8.splice(1,2)
console.log(test8)  //[2, 3],从索引为1的元素开始删除2个元素,返回删除的部分
console.log(t8)     // [1, 4, 5],原数组是被删除之后剩余的数组

var s8 = [1,2,3,4,5]
var ss8 = s8.splice(1,2,111,222)
console.log(ss8)  //[2, 3],从索引为1的元素开始删除2个元素,返回删除的部分
console.log(s8)   // [1, 111, 222, 4, 5]，从索引1删除两个元素再添加111和222，原数组是删除添加完之后的数组

9.join()

把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串
不改变原数组

var a9 = [1,2,3]
console.log(a9.join());    //1,2,3 默认使用逗号分隔
console.log(a9.join(""));  //123   转化为字符串的常用方法
console.log(a9.join("-")); //1-2-3 自定义分隔符
console.log(a9);           //[1,2,3]  不修改原素组
var b = new Array(5);
console.log(b.join('*'));  //****  4个连字号组成字符串

数组迭代方法

1.forEach()

该方法从头到尾遍历数组，为某个元素调用指定的函数。传递函数包括三个参数（数组元素、元素索引、数组本身），如果只关心数组元素的值，可以只传一个参数。

var data1 = [1,2,3];
var sum1 = 0;
data1.forEach((value)=>{
    sum1 += value;
});
console.log(sum1);  //6

var data2 = [10,20,30];
data2.forEach((value,index,array)=>{
    array[index] = value*2;
});
console.log(data2) //[20, 40, 60]

2.map()

通过对每个数组元素执行函数来创建新数组，不会改变原来的数组
不改变原数组

var b2 = [45, 4, 9, 16, 25]
var bb2 = b2.map((value,index,array)=>{
    return value * 2;
})
console.log(b2)  // [45, 4, 9, 16, 25]，不改变原数组
console.log(bb2) // [90, 8, 18, 32, 50]

3.filter()

创建一个包含通过测试的数组元素的新数组，不会改变原来的数组
不改变原数组

var b3 = [45, 4, 9, 16, 25]
var bb3 = b3.filter((value,index,array)=>{
    return value > 18
})
console.log(b3)  // [45, 4, 9, 16, 25]，不改变原数组
console.log(bb3) // [45, 25]

var data3 = [45, 4, 9, 16, 25]
var data33 = data3.filter((value,index,array)=>{
    return index%2
})
console.log(data3)  //[45, 4, 9, 16, 25]，不改变原数组
console.log(data33) //[4, 16]，返回索引为奇数的元素组成的数组

4.every() 和some()

every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。every从迭代开始，一旦有一个不符合条件，则不会继续迭代下去。
some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。some一直在找符合条件的值，一旦找到，则不会继续迭代下去。
不改变原数组

var b4 = [1,2,3,4,5,6]
var bb4 = b4.every((value,index,array)=>{
    console.log( 'value=' + value + ',index='+index+',array='+array ); 
    return value > 3; 
})
// 循环打印的数据----一旦有一个不符合条件，则不会继续迭代下去
// value=1,index=0,array=1,2,3,4,5,6
console.log(b4)  //[1, 2, 3, 4, 5, 6]，不改变原数组
console.log(bb4) //false

var data4 = [1,2,3,4,5,6]
var data44 = data4.some((value,index,array)=>{
    console.log( 'value=' + value + ',index='+index+',array='+array ); 
    return value > 3; 
})
// 循环打印的数据----一旦找到符合条件的值，则不会继续迭代下去
// value=1,index=0,array=1,2,3,4,5,6
// value=2,index=1,array=1,2,3,4,5,6
// value=3,index=2,array=1,2,3,4,5,6
// value=4,index=3,array=1,2,3,4,5,6
console.log(data4)  // [1, 2, 3, 4, 5, 6]，不改变原数组
console.log(data44) // true

5.reduce()

使用指定的函数将数组元素进行组合，生成一个单值。
参数说明：
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
initialValue 可选。传递给函数的初始值
不改变原数组

var data5 = [1,2,3];
var sum5 = data5.reduce((total,currentValue)=>{
    return  total+currentValue;
},0);
console.log(data5) //[1, 2, 3]，不改变原数组
console.log(sum5);  //6

var product5 = data5.reduce((total,currentValue)=>{
    return  total*currentValue;
},100);
console.log(product5);  //600

// 利用ruduce求出总和，最大值，最小值
const arr = [5,4,7,8,9,2]
// 求和
const sum = arr.reduce((a,b)=>a+b)
console.log(sum) //35
// 最大值
const maxNum = arr.reduce((a,b)=>a>b?a:b)
console.log(maxNum) //9
// 最小值
const minNum = arr.reduce((a,b)=>a<b?a:b)
console.log(minNum) //2

6.ES6新增：find()

返回通过测试函数的第一个数组元素的值，不会改变原来的数组
不改变原数组

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find((value, index, array)=> {
    return value > 18;
});
console.log(first) // 25

7.ES6新增：findIndex()

返回通过测试函数的第一个数组元素的索引
不改变原数组

var numberss = [4, 9, 16, 25, 29];
var firsts = numberss.findIndex((value, index, array)=> {
    return value > 18;
});
console.log(numberss) //[4, 9, 16, 25, 29]，不改变原数组
console.log(firsts) // 3

8.ES6新增：fill()

使用给定的值，填充到数组中，类似于替换
fill(要填充数组的值,填充开始的位置（默认值是0）,填充结束的位置（默认值是this.length）)
会改变原数组

var arr8 = ["a","b","c"];
console.log(arr8.fill(7));//[7, 7, 7]---start和end都为0，默认填充所有元素
console.log(arr8);//[7, 7, 7]---原数组改变
var arr9 = ["a","b","c","d","e","f"];
console.log(arr9.fill(7, 1, 4));//["a", 7, 7, 7, "e", "f"]---将索引1到4的元素填充为7
console.log(arr9);//["a", 7, 7, 7, "e", "f"]---原数组改变

数组去重方法

参考链接：https://segmentfault.com/a/1190000016418021

1.将数组的每一个元素依次与其他元素做比较，发现重复元素，利用数组方法splice()删除重复元素

var arrs = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5];
function norepeat(arrs) {
    for(var i = 0; i < arrs.length-1; i++){
        for(var j = i+1; j < arrs.length; j++){
            if(arrs[i]==arrs[j]){
                arrs.splice(j,1); 
                j--;
            }
        }
    }
    return arrs;
}
var arrs1 = norepeat(arrs);
console.log(arrs1);    //[1, 23, 3, 5, 6, 7, 9, 8]

2.创建一个新数组 通过indexOf方判断当前元素在数组中的索引如果与循环的下标相等则添加到新数组中

var arrs3 = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];
console.log(arrs3);
function norepeat(arrs3){
    var temp=[];
    for(var i=0;i<arrs3.length;i++){
        if(arrs3.indexOf(arrs3[i]) == i){
            temp.push(arrs3[i]);
        }
    }
    return temp;
}
var arrs2=norepeat(arrs3);
console.log(arrs2);    //[1, 23, 3, 5, 6, 7, 9, 8]

3.利用数组中的filter方法,创建一个包含所有通过测试元素的新数组

var arrs4 = ["apple","banana","pear","apple","orange","orange"];
console.log(arrs4);
var arrs5 =arrs4.filter(function(value,index,self){
    return self.indexOf(value) ===index;
});
console.log(arrs5);   //["apple", "banana", "pear", "orange"]

4.利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。

var arrs6 = [1,4,8,7,1,15,3,5,8,15];
arrs6 = arrs6.sort()
var arrry= [arrs6[0]];
for (var i = 1; i < arrs6.length; i++) {
    if (arrs6[i] !== arrs6[i-1]) {
        arrry.push(arrs6[i]);
    }
}
console.log(arrry) // [1, 15, 3, 4, 5, 7, 8]

5.利用ES6 Set去重

function unique (arr) {
  return Array.from(new Set(arr))
}
var arrs7 = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arrs7))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

6.[…new Set(arr)]

var arrs8 = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]
console.log([...new Set(arrs8)])
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

数组排序方法

function bubbleSort(arr) {  
    for(let i = 0;i<arr.length-1;i++) {
        for(let j = i+1;j<arr.length;j++) { 
            if(arr[i]>arr[j]) {
                let tem = arr[i];
                arr[i] = arr[j];
                arr[j] = tem;
            }
        }
    }
    return arr;
}
console.log(bubbleSort([1,4,5,2,4,1,6,2,8])) // [1, 1, 2, 2, 4, 4, 5, 6, 8]

二、字符串方法总结

1.indexOf()和lastIndexOf()

可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到就返回-1；indexOf()是从头找到尾，lastIndexOf()正好相反。第一个参数：规定需检索的字符串值。第二个参数：规定在字符串中开始检索的位置
indexOf()和lastIndexOf() 方法对大小写敏感！

var s1 = 'Hello world! Hello world!'
console.log(s1.indexOf("Hello"))  //0
console.log(s1.indexOf("World"))  //-1
console.log(s1.indexOf("world"))  //6，第一个world的索引值是6
console.log(s1.indexOf("world",10))  //19，索引10之后遇到的第一个world的索引是19

console.log(s1.lastIndexOf("Hello"))  //13，从后往前找到的第一个Hello的索引是13
console.log(s1.lastIndexOf("world",10)) //6，从索引10往前找到的第一个world的索引是10

2.search()

用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。返回第一个与 regexp 相匹配的子串的起始位置。如果没有找到任何匹配的子串，则返回 -1。
search() 对大小写敏感

var s2 = 'Hello world! Hello world!'
console.log(s2.search(/world/)) //6
console.log(s2.search('Hello')) //0

3.match()

可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。返回的是匹配到的值。
如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。
match() 方法将检索字符串 stringObject，以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。
如果 regexp 没有标志 g，返回的数组还含有两个对象属性:index,input。

var s3 = 'Hello world! Hello world!'
console.log(s3.match("world")) //["world", index: 6, input: "Hello world! Hello world!"]
console.log(s3.match("World")) //null
console.log(s3.match(/world/)) //["world", index: 6, input: "Hello world! Hello world!"]
console.log(s3.match(/world/g)) //["world","world"]

4.slice()

提取字符串的某个部分，并以新的字符串返回被提取的部分。两个参数分别指是片段的开始和结束位置（不包含结束的位置）。

var s4 = 'Hello world! Hello world!'
console.log(s4.slice(5)) // world! Hello world!
console.log(s4) //Hello world! Hello world!---- 原字符串没有改变
console.log(s4.slice(0,10)) //Hello worl  不包含结束位置
console.log(s4.slice(0,-7)) //Hello world! Hello
console.log(s4.slice(-12,-7)) //Hello

5.split()

用于把一个字符串分割成字符串数组。
第一个参数：字符串或正则表达式，从该参数指定的地方分割 stringObject。第二个参数：该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

var s5 = "How are you doing today?"
console.log(s5.split(" "))  //["How", "are", "you", "doing", "today?"]
console.log(s5.split(""))   //["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", " ", "t", "o", "d", "a", "y", "?"]
console.log(s5.split(" ",3))  //["How", "are", "you"]----限制返回的数组长度为3

6.substring()

用于提取字符串中介于两个指定下标之间的字符。(不包含结束位置)
与 slice() 和 substr() 方法不同的是，substring() 不接受负的参数。

var s6 = "Hello world!"
console.log(s6.substring(3))  //lo world!
console.log(s6.substring(3,7))  //lo w

7.substr()

在字符串中抽取从 start 下标开始的指定数目的字符。
第一个参数：要抽取的子串的起始下标，可为负数。第二个参数：length，子串中的字符数。必须是数值。

var s7 = "Hello world!"
console.log(s7.substr(3))  //lo world!
console.log(s7.substr(3,7))  //lo worl，从索引3开始，提取长度为7的字符串

8.replace()

用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
第一个参数：regexp/substr，规定子字符串或要替换的模式的 RegExp 对象。
第二个参数：一个字符串值。规定了替换文本或生成替换文本的函数。

var s8 = "Hello world! Hello world!"
console.log(s8.replace("world","WORLD"))  // Hello WORLD! Hello world!
console.log(s8.replace(/world/,"WORLD"))  // Hello WORLD! Hello world!
console.log(s8.replace(/world/g,"WORLD"))  // Hello WORLD! Hello WORLD!

9.toUpperCase()和toLowerCase()

toUpperCase() 方法用于把字符串转换为大写。
toLowerCase() 方法用于把字符串转换为小写。

var s9="Hello World!"
console.log(s9.toUpperCase())  //HELLO WORLD!
console.log(s9.toLowerCase())  //hello world!

10.concat()

concat() 方法用于连接两个或多个字符串。

var s10 = 'hello '
var ss10 = 'world'
console.log(s10.concat(ss10))  //hello world

11.trim()

删除字符串两端的空白符。

var s11 = "       Hello World!        ";
console.log(s11.trim())

12.charAt()

可返回指定位置的字符。参数为索引值。

var s12="Hello world!"
console.log(s12.charAt(1)) // e