常用的字符串方法汇总(含ES6字符串方法)
目录
- 一、 ES5 中的数组方法
- 1. shift()
- 2. pop()
- 3. splice()
- 4. slice()
- 5. concat()
- 6. every()
- 7. join()
- 8. push()
- 9. unshift()
- 10. reverse()
- 11. sort()
- 12. toString()
- 13. forEach()
- 14. map()
- 15. reduce()
- 二、ES6 中的数组方法
- 1. from()
- 2. of()
- 3. copyWithin()
- 4. find()
- 5. findIndex()
- 6. fill()
- 7. entries()、keys() 、 values()
- 8. includes()
- 9. flat()
- 10. flatMap()
在说这些方法之前,先说一些这些方法的分类,他们可以分为两种:类方法和实例方法。这两种方法在使用时是不一样的。
- 类属性(静态属性):通过类直接访问,不需要声明类的实例来访问
- 类方法(静态方法):通过类直接访问,不需要声明类的实例来访问
- 实例属性(动态属性):不能通过类直接访问,需要通过该类声明的实例才能访问
- 实例方法(动态方法):不能通过类直接访问,需要通过该类声明的实例才能访问
类属性和类方法:
Person = function(){}
Persion.sex = "woman"; //类属性
Person.eat= function(){ //类方法
alert("eat");
}
var person = new Person();
Person.sex;//静态属性
Person.eat();//静态方法
实例属性和实例方法:
Person = function(){}
Person.prototype.age = 10; //实例属性
Person.prototype.dance = function(){ //实例方法
alert("dance");
}
var person = new Person();
person.age; //实例属性
person.dance(); //实例方法
简单来说就是,在原型上定义的方法要实例化对象之后才能调用。
一、 ES5 中的数组方法
首先看看ES5中常用的数组方法有哪些:
方法 | 描述 | 是否改变原数组 |
shift() | 删除并返回数组的第一个元素。 | 是 |
pop() | 删除并返回数组的最后一个元素。 | 是 |
push() | 向数组的末尾添加一个或更多元素,并返回新的长度。 | 是 |
unshift() | 向数组的开头添加一个或更多元素,并返回新的长度。 | 是 |
join() | 把数组的所有元素放入一个字符串。 元素通过指定的分隔符进行分隔 | 否 |
toString() | 把数组转换为字符串,并返回结果。 | 否 |
slice() | 从某个已有的数组返回选定的元素。 | 否 |
splice() | 删除元素,并向数组添加新元素。 | 是 |
concat() | 连接两个或更多的数组,并返回结果。 | 否 |
sort() | 对数组的元素进行排序。 | 是 |
reverse() | 颠倒数组中元素的顺序。 | 是 |
every() | 用于检测数组所有元素是否都符合指定条件。 | 否 |
forEach() | 用于调用数组的每个元素,并将元素传递给回调函数。 | 否 |
map() | 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。 | 否 |
1. shift()
定义: shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
返回值: 该方法返回数组原来的第一个元素的值。如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。
注意: 该方法会改变原数组
2. pop()
定义: pop() 方法用于删除并返回数组的最后一个元素。
返回值: 该方法返回数组原来的最后一个元素的值。如果数组是空的,那么 pop() 方法将不进行任何操作,返回 undefined 值。
注意: 该方法会改变原数组
3. splice()
定义: splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
语法:
arrayObject.splice(index,howmany,item1,.....,itemX)
参数如下:
-
index
:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。 -
howmany
:必需。要删除的项目数量。如果设置为 0,则不会删除项目。 -
item1, ..., itemX
:可选。向数组添加的新项目。
splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
返回值: 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
注意: 该方法会改变原数组
4. slice()
定义: slice() 方法可从已有的数组中返回选定的元素。
语法: arrayObject.slice(start,end)
参数如下:
-
start
:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 -
end
:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素
返回值: 返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。
注意: 该方法并不会修改数组,而是返回一个子数组。
5. concat()
定义: concat() 方法用于连接两个或多个数组。
语法:
arrayObject.concat(arrayX,arrayX,......,arrayX)
其参数如下:
- arrayX:必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个
返回值: 返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。
注意: 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
6. every()
定义: every() 方法用于检测数组所有元素是否都符合指定条件。
语法:
array.every(function(currentValue,index,arr), thisValue)
其参数如下:
-
function(currentValue, index,arr)
:必须。函数,数组中的每个元素都会执行这个函数
函数参数:
-
currentValue
:必须。当前元素的值 -
index
:可选。当前元素的索引值 -
arr
:可选。当前元素属于的数组对象
-
thisValue
:可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”
返回值: 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。如果所有元素都满足条件,则返回 true。
注意: 该方法不会改变原始数组。并且不会对空数组进行检测。
7. join()
定义: join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
语法: arrayObject.join(separator)
其中参数如下:
- separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
返回值: 返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的。
8. push()
定义: push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
返回值: 把指定的值添加到数组后的新长度。
注意: push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。
9. unshift()
定义: unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
返回值: 把指定的值添加到数组前的新长度。
注意: unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。该方法不创建新的创建,而是直接修改原有的数组。
10. reverse()
定义: reverse() 方法用于颠倒数组中元素的顺序。
返回值: 该方法会返回颠倒顺序后的数组
注意: 该方法会改变原来的数组,而不会创建新的数组。
11. sort()
定义: sort() 方法用于对数组的元素进行排序。
语法: arrayObject.sort(sortby)
其中参数如下:
- sortby 可选。规定排序顺序。必须是函数。
如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。
如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
- 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
- 若 a 等于 b,则返回 0。
- 若 a 大于 b,则返回一个大于 0 的值。
返回值: 返回排序后的数组
注意: 数组在原数组上进行排序,不生成副本。
12. toString()
定义: toString()方法可把数组转换为字符串,并返回结果。
返回值: arrayObject 的字符串表示。数组中的元素之间用逗号分隔。返回值与没有参数的 join() 方法返回的字符串相同。
注意: 当数组用于字符串环境时,JavaScript 会调用这一方法将数组自动转换成字符串。但是在某些情况下,需要显式地调用该方法。
13. forEach()
定义: forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
语法:
array.forEach(function(currentValue, index, arr), thisValue)
其参数如下:
-
function(currentValue, index,arr)
:必须。函数,数组中的每个元素都会执行这个函数
函数参数:
-
currentValue
:必须。当前元素的值 -
index
:可选。当前元素的索引值 -
arr
:可选。当前元素属于的数组对象
-
thisValue
:可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”
注意: 该方法没有返回值,不会修改原数组
14. map()
定义: map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
返回值: map() 方法按照原始数组元素顺序依次处理元素。
语法:
array.map(function(currentValue, index, arr), thisValue)
其参数如下:
-
function(currentValue, index,arr)
:必须。函数,数组中的每个元素都会执行这个函数
函数参数:
-
currentValue
:必须。当前元素的值 -
index
:可选。当前元素的索引值 -
arr
:可选。当前元素属于的数组对象
-
thisValue
:可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”
注意: 该方法没有返回值,不会修改原数组
注意: map() 不会对空数组进行检测,并且不会改变原始数组。
15. reduce()
定义: reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。该方法可以作为一个高阶函数,用于函数的 compose。
使用方法: 【JavaScript】数组reduce()方法的妙用
注意: reduce() 对于空数组是不会执行回调函数的。
二、ES6 中的数组方法
再来看看ES6中的数组方法:
方法 | 描述 | 是否改变原数组 |
from() | 将类数组转化为真正的数组 | / |
of() | 用于将一组值,转换为数组 | 否 |
copyWithin() | 当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员) | 是 |
find() | 返回第一个符合条件的数组成员 | 否 |
findIndex() | 返回第一个符合条件的数组成员的位置 | 否 |
fill() | 使用给定值,填充一个数组 | 是 |
entries() | 用于遍历数组,遍历键名 | 否 |
keys() | 用于遍历数组,遍历键值 | 否 |
values() | 用于遍历数组,遍历键值对 | 否 |
includes() | 判断数组中是否包含给定的值 | 否 |
flat() | 数组扁平化 | 否 |
flatMap() | 数组扁平化 | 否 |
1. from()
定义: Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
实际应用中,常见的类似数组的对象是 DOM 操作返回的 NodeList 集合,以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。
// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
return p.textContent.length > 100;
});
// arguments对象
function foo() {
var args = Array.from(arguments);
// ...
}
Array.from()的另一个应用是,将字符串转为数组,然后返回字符串的长度。因为它能正确处理各种 Unicode 字符,可以避免 JavaScript 将大于\uFFFF的 Unicode 字符,算作两个字符的 bug。
function countSymbols(string) {
return Array.from(string).length;
}
注意: 该方法产生的数组是一个拷贝的值,不会改变原类数组对象。
2. of()
定义: Array.of()方法用于将一组值,转换为数组。
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。
Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个长度为7的空数组
返回值: 返回参数值组成的数组。如果没有参数,就返回一个空数组。
注意: 该方法返回的是新的Array实例
3. copyWithin()
定义: 该方法会在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。
语法:
Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三个参数。
- target(必需):从该位置开始替换数据。如果为负值,表示倒数。
- start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
- end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。
// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
// 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}
// 将2号位到数组结束,复制到0号位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]
注意: 该方法会修改当前数组。
4. find()
定义: 该方法用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
[1, 4, -5, 10].find((n) => n < 0)
// -5
语法:
arr.find(callback[, thisArg])
其参数如下:
- callback:在数组每一项上执行的函数,接收 3 个参数:
- element:当前遍历到的元素。
- index:可选,当前遍历到的索引。
- array:可选,数组本身。
- thisArg:可选,执行回调时用作this 的对象。
注意: find方法不会改变数组。
5. findIndex()
定义: 数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
其语法和find()方法一样。
注意: findIndex()方法不会改变数组。
6. fill()
定义: fill方法使用给定值,填充一个数组。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
上面代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。
语法:
arr.fill(value[, start[, end]])
其参数如下:
- value:用来填充数组元素的值。
- start :可选,起始索引,默认值为0。
- end :可选,终止索引,默认值为 this.length。
返回值: 返回修改过的数组
注意: 该方法会修改原数组。
7. entries()、keys() 、 values()
这三个方法都用于遍历数组。它们都返回一个遍历器对象,可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
8. includes()
定义: includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
语法:
arr.includes(searchElement)
arr.includes(searchElement, fromIndex)
其参数如下
- searchElement 必须。需要查找的元素值。
- fromIndex 可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
返回值: 布尔值。如果找到指定值返回 true,否则返回 false。
9. flat()
定义: flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
语法:
var newArray = arr.flat([depth])
其参数如下:
- depth :可选,指定要提取嵌套数组的结构深度,默认值为 1。如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。
[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]
返回值: 一个包含将数组与子数组中所有元素的新数组。
注意: 该方法不会改变原数组
10. flatMap()
定义: flatMap()方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行flat()方法。flatMap()只能展开一层数组。
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
flatMap()方法的参数是一个遍历函数,该函数可以接受三个参数,分别是当前数组成员、当前数组成员的位置(从零开始)、原数组。
arr.flatMap(function callback(currentValue[, index[, array]]) {
// ...
}[, thisArg])
flatMap()方法还可以有第二个参数,用来绑定遍历函数里面的this。
注意: 该方法不会改变原数组