前端字符串和数组的常用方法（基础知识回顾）

2018-03-13 本文已影响0人 JOKER_HAN

回顾一下基础知识。有些方法时间长不用都忘了...

字符串的常用方法

var str = 'abc';

charAt 返回指定索引处的字符

console.log(str.charAt(1));
//'b'

charCodeAt 返回指定索引处的unicode字符

console.log(str.charCodeAt(1));
//98

indexof 判断传入的字符第一次出现在字符串当值出现的位置，如果包含返回它的索引，反之返回-1

console.log(str.indexOf('b'));
//1

concat 拼接两个字符串，返回一个新字符串

  var str1='123';
  var str2=str.concat(str1);
   console.log(str2);
   //"123abc"

substr(n,m) 从n开始截取m个字符，将截取的字符返回，对原字符串没有任何改变。

console.log(str.substr(1,2));
//'bc'

substring(n,m) 从索引n开始，截取到索引m,不包括m.将截取的字符返回,对原字符串没有任何改变.

console.log(str.substring(1,2));
//'b'

slice(n,m) 从索引n开始截取到m, 如果只有一个参数截取到字符串末尾，原字符串保持不变。

console.log(str.slice(1,2));
//'b'
console.log(str.slice(1));
//'bc'

split 用指定字符分割字符串，返回一个数组，原字符串保持不变

console.log(str.split(''));
//[ 'a', 'b', 'c' ]

replace(n,m) 使用m字符替换指定字符n，一般搭配正则使用,改变原字符串

console.log(str.replace(reg,1));
//'1bc'

match() 在字符串内检测指定的值，找到一个或多个正则表达式的匹配，把找到的字符串放在一个数组里，返回数组。

console.log(str.match(reg));
//['a']

includes('a') 传入指定字符，返回布尔值，匹配到返回true 第二个参数表示开始搜索的位置

console.log(str.includes('a'));
//true

startsWith() 传入字符是否存在原字符串的开始位置，匹配到返回true 第二个参数表示开始搜索的位置

console.log(str.startsWith('b'));
//false
console.log(str.startsWith('b',1)); 
//true

endsWith() 传入字符是否存在原字符串的末尾位置，匹配到返回true 第二个参数表示开始搜索的位置

console.log(str.endsWith('c'));
//true
console.log(str.endsWith('b',2));
//true

repeat() 方法返回一个新字符串，表示将原字符串重复n次。

console.log(str.repeat(2));
//'abcabc'

padStart()，padEnd()字符串补全长度的功能， padStart()用于头部补全，padEnd()用于尾部补全。
第一个参数表示字符串最小长度，第二个参数是用来补全的字符串。

console.log(':12'.padStart(5,'00'));
//'00:12'
console.log(':12'.padEnd(5,'00'));
//':1200'

如果原字符串加上补齐后的字符串长度大于或等于参数设置的最小长度，窃取超出的部分，返回原字符串长度

console.log('1234'.padEnd(5,'00'));
//'12340'

数组的常用方法

var arr =[1,2,3,4];

转化方法

toString() toLocaleString()
将数组转换成字符串，以逗号分隔

console.log(arr.toLocaleString());
console.log(arr.toString());
//'1,2,3,4,2,4,1'

join()方法通过指定分割符分割返回一个字符串

console.log(arr.join('-'));
//'1-2-3-4'

pop 删除数组最后一项，返回删除那一项，改变原数组
push 向数组末尾添加一项，返回添加那一项，改变原数组

console.log(arr.push(5));
//[ 1, 2, 3, 4, 5 ]
console.log(arr.pop(5));
//[ 1, 2, 3, 4]

shift() 删除数组第一项，返回删除这一项，改变原数组
unshift() 如果不传参数，返回数组的长度，不改变数组，如果传递参数，向数组第一项添加指定参数，改变数组，返回新数组。

console.log(arr.shift(3))
//[ 2, 3, 4 ]
console.log(arr.unshift(11,22),arr);
//6 [ 11, 22, 1, 2, 3, 4 ]

排序方法

reverse() sort() 正序和倒序排列数组，但是会存在问题因为
如果省略参数，数组项会先根据toString()函数将其值转换成字符串在进行比较，是按UNICODE进行比较的。所以一般情况下，使用下面代码进行比较。

//正序
console.log(arr.sort(function (a,b) {
    return a-b
}),arr);
//[ 1, 2, 3, 34, 100, 415 ]
//倒叙
console.log(arr.sort(function (a,b) {
    return b-a
}),arr);
//[ 415, 100, 34, 3, 2, 1 ]

操作方法

concat() 连接两个数组，返回新数组，不变异原数组
slice(satrt,end) start必须从指定索引位置开始读取到结尾，如果是负数，从尾部开始位置-1是最后一个，-2为倒数第一个加上倒数第二个，以此类推。并且原数组不变异。
end 可选，从指定索引位置结束读取。并且不保含指定位置的元素

console.log(arr.slice(2),arr);
//[ 3, 4 ] [ 1, 2, 3, 4 ]
console.log(arr.slice(1,3),arr);
[ 2, 3 ] [ 1, 2, 3, 4 ]

splice() 方法用于插入、删除或替换数组的元素变异原数组
- 删除传递两个参数(start,end) 开始元素的索引和结束元素的索引，包含结束位置，返回删除的数组
```
console.log(arr.splice(1,2),arr);
//[ 2, 3 ] [ 1, 4 ]
```
- 插入三个参数第一个参数开始的索引，第二个参数要删除几项，如果为0，就是不删除，添加。第三个参数要添加的元素。返回删除那一项
```
console.log(arr.splice(1,0,23),arr);
//[] [ 1, 23, 2, 3, 4 ]
console.log(arr.splice(1,2,23),arr);
// [ 2, 3 ] [ 1, 23, 4 ]
```
- 替换
```
console.log(arr.splice(1,1,22),arr);
//[ 2 ] [ 1, 23, 3, 4 ]
```

遍历方法

every
some()
fifter()
reduce()
map()
includes()
find()
以上方法对原数组都不变异

map 映射（将原有数组映射成新数组）

let arr2 = arr.map(function(item){
     return item *= 3
})
//[3,6,9,10]

filter() 返回为true的这一项，并把它放入新数组中。

 var  arr = [1,2,3,4,5] 
 let newArr = arr.filter(function(item){
    return item<5&&item >2
 })   
 console.log(newArr)   
// 3,4

every() 如果一个条件为false,停止遍历，返回false

some() 如果一个条件为true，停止遍历，返回true

includes 查找数组中有没有某值

let arr3 = [1,2,3,4,55];
console.log(arr3.includes(5));
//false

返回false 说明这个方法无法匹配多位的，我们还有一个方法可以解决这个方法的不足

find() 返回为true的这一项，并把它放入新数组中

let result = arr3.find(function(item){
  return item.toString().indexOf(5) >-1
})
console.log(result)
//55