处理字符串

1、js把字符串处理成数组的两种方式

const string = 'abc'
console.log(string.split('')) //[a,b,c]
console.log(Array.from(string)) //[a,b,c]

2、截取指定长度字符串

1) substr() 和 substring()

substr()

它包含两个参数,第一个参数表示准备截取的子字符串起始下标,第二个参数表示截取的长度

示例
在下面示例中使用 lastIndexOf() 获取字符串的最后一个点号的下标位置,然后从其后的位置开始截取 4 个字符。

var s = "http://c.biancheng.net/index.html";
var b = s.substr(s.lastIndexOf(".") + 1,4);  //截取最后一个点号后4个字符
console.log(b);  //返回子字符串“html”

如果第一个参数为负值,则表示从字符串的尾部开始计算下标位置,即 -1表示最后一个字符,-2 表示倒数第二个字符,以此类推。这对于左侧字符长度不固定时非常有用。

ECMAScript 不再建议使用该方法,推荐使用 slice() 和 substring() 方法。

substring()

用于提取字符串中介于两个指定下标之间的字符。 substring() 方法返回的子[包括 开始 处的字符,但不包括 结束 处的字符。

var str="Hello world!";
str.substring(3); // lo world!
str.substring(3,7));//lo w

substr()和substring()的相同点和不同点

相同点:如果只是写一个参数,两者的作用都一样:都是是截取字符串从当前下标以后直到字符串最后的字符串片段。

示例

var str = '123456789';
console.log(str.substr(2));    //  "3456789"
console.log(str.substring(2)) ;//  "3456789"

不同点:第二个参数
substr(startIndex,lenth): 第二个参数是截取字符串的长度(从起始点截取某个长度的字符串);
substring(startIndex, endIndex): 第二个参数是截取字符串最终的下标 (截取2个位置之间的字符串,‘含头不含尾’)。

示例

var string = "urdhfvdsw";
a.substr(3,5); //hfvds
a.substring(3,5);//hf 含头不含尾

2)slice

slice() 方法可提取字符串或数组的某个部分,并以新的字符串/数组返回被提取的部分。
返回值:
一个新的字符串。包括字符串 stringObject 从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。
详细理解:

当slice方法的参数为负数时,则其先加上字符串/数组的长度
1.若start或者end为负数,则其对应的索引是这个参数加上字符串的长度
2.当负数参数都加上字符串长度变为正数后,若start大于等于end,则取不到任何字符或数组,返回空字符串 “” / 空数组 []

示例1

"123456789".slice(2,-3); //"3456"
"abc def".slice(-2,-1) //e
"abc def".slice(-1,-2) //""
"abc def".slice(0,-2) // abc d
"abc def".slice(-3) //def
"abc def".slice(-6) // bc def
"abc def".slice(-7) //abc def
"abc def".slice(-8) //abc def
/*简易理解 负参数  slice()会将负的参数加上字符串的长度
也可以这样理解后面的负数,如-3,则到倒数第四个位置截止,不包括倒数第三个位置。*/

示例2

var c3 = ["a","b","c","d","e","f"]
var c4 = c3.slice(-2,-4)//相当于(4,2)
console.log(c4) // ""
var c5 = c3.slice(-4,4) //相当于(2,4)
console.log(c5) // ["c","d"]
var c6 = c3.slice(-4)//相当于(2,最后一个字符)
console.log(c5) // ['c', 'd', 'e', 'f']

3、将字符串分割成子字符串数组

1)split

提示: 如果把空字符串 (“”) 用作 separator,那么 stringObject 中的每个字符之间都会被分割。
注意: split() 方法不改变原始字符串。

示例

var str="How are you doing today?";
//分割每个字符,包括空格
str.split(" "); //['How', 'are', 'you', 'doing', 'today?']
//使用 limit 参数
str.split(" ",3); //[How,are,you]
//使用一个字符作为分隔符
str.split("o"); //[H,w are y,u d,ing t,day?]

4、组合字符串/数组,返回一个新的字符串/数组

1)concat

ar a = "hello";
var b = ",world";
var c = a.concat(b); // hello,world

5、某个指定的字符串值在字符串中首次出现的位置。

1) indexOf()

从前向后查找字符串,若没有找到该字符串则返回-1

参数描述
searchvalue必需,规定需检索的字符串值
start可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length - 1。如省略该参数,则将从字符串的首字符开始检索。

示例

var str="Hello world, welcome to the universe.";
str.indexOf("e",5); //14
str.indexOf("e"); // 1
str.indexOf("World"); // -1

2)lastIndexOf()

从字符串尾向前开始搜索子字符串,若没有找到该字符串则返回-1
示例1

var stringVal = "hrello world"
alert(stringVal.indexOf("r"));//1
alert(stringVal.lastIndexOf("r"));  // 9 //由后向前数,但返回的是从前到后的索引

示例2

var stringValue = "hello world";
alert(stringValue.indexof("o",6)); //7
alert(stringValue.lastIndexOf("o",6));//4

处理数组

1、添加或删除数组中的元素

1) splice()

删除:array.splice(index,num),返回值为删除元素,array为结果值。
添加:array.splice(index,num,insertValue),返回值为删除元素,array为结果值。
num规定应该删除多少元素。必须是数字,可以是 “0”,如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
注意:这种方法会改变原始数组。

示例

//删除
let colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); 
console.log(removed ); //删除第一项 ["red"]
console.log(colors);  //["green", "blue"]

var removeds = colors.splice(2,0); 
console.log(removeds) //删除0个 返回[]

//替换并添加元素
//移除数组的第三个元素,并在数组第三个位置添加新元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
console.log(fruits) // ['Banana', 'Orange', 'Lemon', 'Kiwi', 'Mango']

//从第三个位置开始删除数组后的两个元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);
console.log(fruits) //['Banana', 'Orange']

2、数组中的所有元素转换为一个字符串

1) join()

把数组中的所有元素转换为一个字符串

示例

var arr = ["a", "b", "c", "d"];
arr.join(); // a,b,c,d
arr.join("|") // a|b|c|d

2) toSring()

1、把数字转成字符串
2、数组转成字符串然后通过逗号隔开

let a = [2,3,4]
console.log(a.toString()) // 2,3,4

3、从已有的数组中返回指定的元素

1) slice

上面有介绍

4、移除最后一个数组元素

1) pop()

注意:修改原数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var end = fruits.pop();
console.log(fruits) // ['Banana', 'Orange', 'Apple']
console.log(end) // Mango

5、删除并返回第一个元素

1) shift()

注意:修改原数组
如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。

var a = ["2","3","4","5"]
console.log(a.shift()) // 2 
console.log(a) // ['3', '4', '5']

var b = []
console.log(b.shift()) //undefined

6、向数组的开头添加一个或更多元素,并返回新的长度

  1. unshift()

注意: 该方法将改变数组的数目。
提示: 将新项添加到数组末尾,请使用 push() 方法。

var arr=[1,2,3];
var newarr= arr.unshift(3)
console.log(newarr) //4 数组长度
console.log(arr) //[3,1,2,3]

7、数组排序

)sort()

排序顺序可以是字母或数字,并按升序或降序。
默认排序顺序为按字母升序。
改变原数组

//数字排序
var points = [40,100,1,5,25,10];
//升序
points.sort(function(a,b){return a-b}); //[1,5,10,25,40,100]
//降序
points.sort(function(a,b){return b-a}); // [100,40,25,10,5,1]

//字母排序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits) // ['Apple', 'Banana', 'Mango', 'Orange']

8、数组翻转

1) reverse()

reverse() 方法用于颠倒数组中元素的顺序。

9、检测数组所有元素是否符合指定条件

1) every()

  • 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
  • 如果所有元素都满足条件,则返回 true。
  • 注意: every() 不会对空数组进行检测。
  • 注意: every() 不会改变原始数组。
var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}
//输出结果为false

var arr = [1000, 2000, 3000]
var flag = arr.every(function (item) {
    return item > 2000;
})
console.log(flag)   //false

2) some()

  • some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
  • some() 方法会依次执行数组的每个元素:
  • 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
    如果没有满足条件的元素,则返回false。
    注意: some() 不会对空数组进行检测。
    注意: some() 不会改变原始数组。

some()参数说明

function(currentValue, index,arr){
	// currentValue	必须。当前元素的值
	// index	可选。当前元素的索引值
	// arr	可选。当前元素属于的数组对象
    // 布尔值。如果所有元素都通过检测返回 true,否则返回 false。
	}
var arr = [1000, 2000, 3000]
var flag = arr.some(function (item) {
    return item > 2000;
})
console.log(flag)   //true

3) filter()

  • filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
    注意: filter() 不会对空数组进行检测。
    注意: filter() 不会改变原始数组。

10、通过字符串创建一个数组

1) from()

这里是引用

示例1

// 返回集合中包含的对象数组
var setObj = new Set(["a", "b", "c"]);
var objArr = Array.from(setObj);
objArr[1] == "b";  // true
// 使用箭头语法和映射函数更改元素的值
var arr = Array.from([1, 2, 3], x => x * 10); //[10,20,30]

示例2

//去重
let arr = Array.from(new Set([1, 2, 1, 2]))
console.log(arr) //[1, 2]

11、判断一个数组是否包含一个指定的值,

1)includes()

如果是返回 true,否则false。

示例1
fromIndex 大于等于数组长度
如果fromIndex 大于等于数组长度 ,则返回 false 。该数组不会被搜索:

var arr = ['a', 'b', 'c'];
arr.includes('c', 3);   //false
arr.includes('c', 100); // false

示例2
如果 fromIndex 为负值,计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0,则整个数组都会被搜索。

// 数组长度是3
// fromIndex 是 -100
// computed index 是 3 + (-100) = -97
 
var arr = ['a', 'b', 'c'];
arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐