前端队长の技术博客

  1. js字符串/数组常用方法
    1. 字符串
      1. charAt
      2. startsWith, endsWith
      3. includes
      4. indexOf
      5. lastIndexOf
      6. match
      7. padStart, padEnd
      8. replace
      9. split
      10. search
      11. substring
      12. slice
      13. toUpperCase, toLowerCase
      14. trim, trimStart, trimEnd
      15. valueOf(), toString
    2. 数组
      1. isArray
      2. of
      3. from
      4. forEach
      5. map
      6. every
      7. some
      8. filter
      9. splice
      10. fill
      11. find, findIndex
      12. pop,push,shift,unshift
      13. sort
      14. flat
    3. 字符串&数组共有
      1. concat
      2. includes
      3. indexOf

js字符串/数组常用方法

字符串

MDN_String

charAt

str.charAt(index); 从一个字符串中获取索引为index的字符。

startsWith, endsWith

str.endsWith(searchString[, length]) 

length 可选。作为 str 的长度。默认值为 str.length。

endsWith()方法用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的,根据判断结果返回 true 或 false。

includes

str.includes(searchString[, position]) 

position 可选。从str字符串的哪个索引位置开始搜寻子字符串,默认为0。

用于判断一个字符串是否包含在另一个字符串中,返回 true 或 false。

indexOf

语法:str.indexOf(searchValue[, fromIndex]) 说明:从fromIndex索引开始(可省略。默认为0 )从前往后查找,第一次出现searchValue的索引值。如果没有找到返回 -1.

lastIndexOf

语法:str.lastIndexOf(searchValue[, fromIndex]) 说明:从fromIndex索引开始(可省略。默认为0 )从前往后查找,最后一次出现searchValue的索引值。如果没有找到返回 -1.

match

语法:str.match(regexp);

regexp:一个正则表达式对象。如果传入一个非正则表达式对象,则会隐式地使用 new RegExp(obj) 将其转换为一个 RegExp 。如果你未提供任何参数,直接使用 match() ,那么你会得到一个包含空字符串的 Array :[””] 。

说明:返回一个根据正则表达式regexp查找str的所有匹配的字符串,然后将匹配的字符串集合以数组形式返回。

如果使用g标志,则将返回与完整正则表达式匹配的所有结果; 如果未使用g标志,则仅返回第一个完整匹配及其相关的捕获组

捕获组:

groups: 一个捕获组数组 或 undefined(如果没有定义命名捕获组)。 index: 匹配的结果的开始位置 input: 搜索的字符串.

image.png

padStart, padEnd

str.padStart(targetLength [, padString]) 

padString 填充字符串。默认为空字符串。

用另一个字符串填充当前字符串(重复,如果需要的话),以便产生的字符串达到给定的长度。

replace

语法:str.replace(regexp|substr, newSubStr|function) 说明:返回一个由替换值替换一些或所有匹配的模式后的新字符串。他不会改变原字符串。 regexp|substr:将要被替换的字符串或者正则表达式 newSubStr|function:新的字符串或者一个用来创建新子字符串的函数。

只会替换第一个匹配到的字符串,除非用正则+g的形式。

split

语法:str.split([separator[, limit]]) 说明:以separator为分割标志,分割出limit个数的字符串。没有limit的话,全部分割。

str.search(str/regexp)  返回字符串/正则表达式在字符串中首次匹配项的索引,否则返回 -1。

'aaababcc'.search('abc') // 4

PS:如果传入一个非正则表达式对象,则会使用 new RegExp(obj) 隐式地将其转换为正则表达式对象。

substring

语法:str.substring(indexStart[, indexEnd]) 说明:返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。

slice

语法:str.slice(beginSlice[, endSlice])

beginSlice :从该索引(以 0 为基数)处开始提取原字符串中的字符。如果值为负数,会被当做 strLength + beginIndex 看待,这里的strLength 是字符串的长度(例如, 如果 beginIndex 是 -3 则看作是:strLength - 3) endSlice :可选。在该索引(以 0 为基数)处结束提取字符串。如果省略该参数,slice() 会一直提取到字符串末尾。如果该参数为负数,则被看作是 strLength + endIndex,这里的 strLength 就是字符串的长度(例如,如果 endIndex 是 -3,则是, strLength - 3)。

说明:提取一个字符串的一部分,并返回一新的字符串,且不会改动原字符串。 **

toUpperCase, toLowerCase

trim, trimStart, trimEnd

语法:str.trim() 说明:去除str两端空格。trim() 方法并不影响原字符串本身,它返回的是一个新的字符串。

相应的: str.trimLeft(); // 去除str左边空格 str.trimRight(); // 去除str右边空格

valueOf(), toString

str.valueOf()  str.toString()  返回指定字符串对象的字符串形式。

数组

MDN_Array

isArray

Array.isArray(obj)  检测参数是不是数组对象Array。

of

创建一个具有可变参数数量的新数组。

Array.of(1);         // [1]
Array.of(1, 2, 3);   // [1, 2, 3]
Array.of(undefined); // [undefined]

from

Array.from() 方法对一个类似数组(伪数组,比如dom等)或可迭代对象创建一个新的,浅拷贝的数组实例。

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

forEach

特点:无返回值,纯遍历数组中的元素。

注意:不能使用element直接修改数组的元素,可以使用arr[index]来修改。

var arr = ["关长","张飞","赵子龙","马超","黄忠"];
var str = "";

// function (element,index,array)
// element:数组元素的值
// index:索引
// array:调用这个方法的整个数组对象(一般不用)

arr.forEach(function (ele,index,array) {
    str+=ele;
});
console.log(str); // 关长张飞赵子龙马超黄忠

注意: 只写一个参数就是 element; 写两个参数就是 element 和 index 写三个参数就是: element 和 index 和 array本身。

map

map有返回值,返回什么都添加到新数组中。

注意:map可以直接使用ele修改数组里面的值。这是与forEach的区别, 还有一个区别是map有返回值,而forEach没有。

特点:遍历数组使用。

var arr = ["关长","张飞","赵子龙","马超","黄忠"];
var arr2 = arr.map(function (ele,index,array) {
    return ele+"你好";
})

console.log(arr2); // (5) ["关长你好", "张飞你好", "赵子龙你好", "马超你好", "黄忠你好"]

every

测试一个数组内的所有元素是否都能通过某个指定函数的测试。返回值是一个 boolean 类型值。而参数是一个回调函数。 参数有三个。名字随便起,但是表示的意思还是这样顺序的。 特点:只要有一个不满足条件,就返回false。

var arr = ["青花瓷", "一路向北", "轨迹"];
var flag = arr.every(function (ele, index) { // 只要有一个没满足条件,就返回false
    return ele.length > 2;
}); 

console.log(flag); // false

some

特点:如果函数结果有一个是true,那么some方法结果也是true。

var arr = ["关长","张飞","赵子龙","马超","黄忠"];
var flag = arr.some(function (ele,index,array) {
    if(ele.length>2){
        return true;
    }
    return false;
})

console.log(flag); // true    

filter

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 

var arr = ["关长","张飞","赵子龙","马超","黄忠"];
var arr1 = arr.filter(function (ele,index,array) {
    return ele.length > 2;
});

console.log(arr1); // ["赵子龙"]   

splice

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

返回值 由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。

fill

arr.fill(value[, start[, end]]) 

value:用来填充数组元素的值。 start 可选,起始索引,默认值为0。

end 可选,终止索引,默认值为 this.length。

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

find, findIndex

arr.find(function(item, index, arr) {})  返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

pop,push,shift,unshift

sort

sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的. 由于它取决于具体实现,因此无法保证排序的时间和空间复杂性。

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

flat

var newArray = arr.flat([depth]) 

depth:要提取嵌套数组的结构深度,默认值为 1。

扁平化数组。

var arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]

//使用 Infinity,可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

一张图总结数组方法: eccb0f63c1577da7289d920bd2acf42c

字符串&数组共有

concat

字符串: str.concat(string2, string3[, ..., stringN]) 将一个或多个字符串与原字符串连接合并,形成一个新的字符串并返回。**它不影响原字符串。

数组: var new_array = old_array.concat(value1[, value2[, ...[, valueN]]]) 用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

includes

判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。

indexOf

(完)