JavaScript中的字符串与数组方法大全

JavaScript中的字符串与数组方法大全

字符串与数组算是JavaScript基础中的一大难点，同样也是重点，今天就总结一下常用的字符串与数组方法。
字符串的大部分方法都不会对原字符串产生影响属性，而是返回一个新值。这点需要注意。

一、字符串方法

1.length:获取字符串的长度

 // 创建一个字符串
    var str = 'hello atguigu';
    console.log(str.length);//13
    console.log(str[5]);//' ' 空格也被当作一个字符被保存

2.charAt():返回指定位置的字符

 // 超出范围时返回空字符串 '' (看不见)
    var str = 'hello atguigu';
    var result = str.charAt(0);
    console.log(result);//h 根据索引来获取，从0开始 

3.charCodeAt():返回指定字符的Unicode编码

   result = str.charCodeAt(0);
    console.log(result);//104

4.formCode():根据字符的Unicode编码来获取字符

result = String.fromCharCode(20025);
console.log(result);//丹

5.concat():连接多个字符串

 result = str.concat('你好','再见');
    console.log(result);//你好再见  作用与连字符+类似

6.indexOf():该方法可以检索一个字符串中是否有指定内容

参数一：指定检索的字符
参数二：开始检索的位置

 str = 'hello atguigu';
    result = str.indexOf('h');
    console.log(result);//0 如果字符串中有改内容则会返回第一次出现的索引位置，如果没有该字符则会返回-1
    // 可以指定从第几个索引位置开始查看
    result = str.indexOf('l',2);
    console.log(result);//2

7.lastIndexOf(): 该方法用法与indexOf一样，不同的是它从后往前找，也可以指定开始查找位置

参数一：指定字符
参数二：指定字符位置，从指定位置从后往前查看

 str = 'hello atlguligu';
    result = str.lastIndexOf('l');
    console.log(result);//11
    str = 'hello atlguligu';
    result = str.lastIndexOf('l',3);
    console.log(result);//3

8.slice():可以从字符串中截取指定的内容，不会影响原字符串，而是将截取到的内容返回。

参数一：开始位置的索引，包括开始位置
参数二：结束位置的索引，不包括结束位置
如果省略了第二个参数，则会截取第一个参数之后的所有内容
也可以截取一个负数作为参数，负数将会从后面倒数第一个开始计算

    str = 'abcdefghijk';
    result = str.slice(0,2);
    console.log(result);//ab
    result = str.slice(-5);
    console.log(result);//ghijk 负数是从最后面开始算，然后再向右截取
    result = str.slice(1,-5);
    console.log(result);//bcdef

9.substring():用来截取一个字符串，与slice()类似

参数一：开始截取位置的索引（包括）
参数二：结束位置的索引（不包括结束位置）
不同的是这个方法不能接受负值，负值默认看作0，而且会自动调整参数的位置，如果第二个参数小于第一个，则自动调换位置

result = str.substring(0,2);
console.log(result);//ab

10.substr():截取字符串

参数一：开始截取位置的索引（包括）
参数二：截取的长度
注意：ECMAscript没有对该方法进行标准化

    str = "abcdefg";
    result = str.substr(2,3);
    console.log(result);//ced

11.split():将一个字符串拆分为一个数组

参数1：需要一个字符作为参数，再根据该字符拆分数组
参数2：第二个参数为返回的数组的长度
注意：差分后该字符将会被,代替
如果参数为一个空串，则会将每个字符都拆分为数组中的一个元素再返回

    str = 'abc,bcd,cdf,dfe';
    result = str.split(',');
    console.log(result);//["abc", "bcd", "cdf", "dfe"]
    
    result = str.split('d');
    console.log(result);//["abc,bc", ",c", "f,", "fe"]

    result = str.split('');
    console.log(result);//["a", "b", "c", ",", "b", "c", "d", ",", "c", "d", "f", ",", "d", "f", "e"]
    
    result = str.split('',5);//
    console.log(result);//["a", "b", "c", ",", "b"]
    
    // 检查是否为数组
    console.log(Array.isArray(result));//true

12.toUppercase():将字符串转换成大写并返回

    str = "abcdefg";
    result = str.toUpperCase();
    console.log(result);//ABCDEFG

13.toLowercase():将字符串转换成小写并返回

    str = 'ABCDEFG';
    result = str.toLowerCase();
    console.log(result);//abcdefg

14.endsWith():用于判断字符串是否以指定字符结尾，是返回true，不是返回false

参数一：指定的字符串
参数二：从指定索引位置之前检查，不包括指定位置

    var str = '天气很热的南京';
    result = str.endsWith('的',5);
    console.log(result);//true

15.startsWith():用于判断字符串是否以指定字符开头，是返回true，不是返回false

参数一：指定的字符串
参数二：从指定索引位置之前检查，不包括指定位置

    var str = '天气很热的南京';
    result = str.startsWith('气',1);
    console.log(result);//true

16.includes():用于判断字符串中是否包含指定字符串

  var str = '天气很热的南京';
    result = str.includes('的');
    console.log(result);//true

17.repeat(n):重复指定字符n次

console.log('*'.repeat(30));//重复该字符30次
console.log('******************************'.length)//30

18.replace(‘原字符’,‘新字符’)

注意：只能替换一次，替换不改变原字符串而是生成一个新的字符串，若有多个指定原字符串，则替换第一个。

var str = "今天是晴天";
result = str.replace('晴天','雨天');
console.log(result);//今天是雨天

19.去除字符串之间的空白

trim():去除前后的空格，但不能去中间的空格
trimLeft():去除左边的空格
trimRight():去除右边的空格

 var str = '      javascript   html   ';
    console.log(str +"c");
    //      javascript   html   c
    console.log(str.trim() +"c");
    // javascript   htmlc
    console.log(str.trimLeft() +"c");
    // javascript   html   c
    console.log(str.trimRight() +"c");
    //       javascript   htmlc

20.在ES6中新增了创建模板字符串的方法

 var s = 'hello';
    // 使用两个``包含字符串内容的开始和结束${}替换需要JS变量的内容。相当于拼接
    var s1 = `HTML${s}`;//HTMLhello

二、数组方法

数组操作方法包括：增，删，改，查，循环，拼接等.
首先创建一个数组arr5。

   var arr5 = ['a','b','c',1,2];
    console.log(arr5);// ["a", "b", "c", 1, 2]

1.push() 添加，向数组的末尾添加内容

arr5.push('v',6,'m');
console.log(arr5);// ["a", "b", "c", 1, 2, "v", 6, "m"]

2.unshift() 向数组的开头添加内容

arr5.unshift('n',7);
console.log(arr5);//["n", 7, "a", "b", "c", 1, 2, "v", 6, "m"]

3.pop() 在数组末尾删除，一次只能删除一个，并且返回一个新的元素，新的元素就是被删除的元素

 var n = arr5.pop();
    console.log(n);//m 
    console.log(arr5);//["n", 7, "a", "b", "c", 1, 2, "v", 6]; 

4.shift() 在数组开头删除，一次只能删除一个，并且返回一个新的元素，新的元素就是被删除的元素

 var m = arr5.shift()
    console.log(m);//n
    console.log(arr5);// [7, "a", "b", "c", 1, 2, "v", 6]
    console.log(arr5[50]);//undefined  超出范围

在这里拓展一点关于队列和栈的内容

队列：先进先出
push shift可以构成一个队列
unshift pop可以构成一个队列

栈：先进后出
push pop可以构成一个栈
unshift shift可以构成一个栈

5.reverse() 修改数组排列顺序，反向排序数组，只能使原有的顺序变成反向，不能按大小顺序排列

  var arr6 = [1,7,3,4,8,5,6];
    console.log(arr6.reverse());//[6, 5, 8, 4, 3, 7, 1]

6.sort() 将数组转换成字符串，在根据Unicode编码进行升序排列，但只能对个位数进行排列

  console.log(arr6.sort());
  //[1, 3, 4, 5, 6, 7, 8]

添加方法，使数组内的数值可以按一定顺序排列

var p1 = {
    name:'qwer',
    age:5
}
var p2 = {
    name:'wer',
    age:4
}
var p3 = {
    name:'asdf',
    age:3
}
var p4 = {
    name:'sdf',
    age:1
}
var p5 = {
    name:'ws',
    age:8
}
var arr7 = [p1,p2,p3,p4,p5];
console.log(arr7);//[{…}, {…}, {…}, {…}, {…}]
arr7.sort(function(a,b){
    console.log(a.age + 'aaa');//4aaa 2aaa 1aaa 8aaa
    console.log(b.age + 'bbb');//5bbb 4bbb 2bbb 1bbb
    // return a.age - b.age;//从小到大排序
    return b.age - a.age;//从大到小排序  
})
console.log(arr7);

7.splice() 删除

参数1：删除索引值及之后所有参数
参数2：删除的长度
参数3以及后面的参数：插入删除的参数后面

    var arr8 = [1,2,3,'a','b','c']; 
    arr8.splice(3);
    console.log(arr8); //[1, 2, 3]
    arr8.splice(3,2);
    console.log(arr8);//[1, 2, 3]
    arr8.splice(3,2,'d','e','f');
    console.log(arr8);//[1, 2, 3, "d", "e", "f"];

8.concat() 拼接数组或值

  var arr9 = arr8.concat([5,6,7],4,'r');
    console.log(arr9);//[1, 2, 3, "d", "e", "f", 5, 6, 7, 4, "r"]

9.join() 将数组转换成一个字符串并返回

可以用括号内的参数替换,

var arr10 = ['hello','hey','hey everyone'];
console.log(arr10);//["hello", "hey", "hey everyone"]

连接元素并返回一个字符串

    console.log(arr10.join());
    //hello,hey,hey everyone
    console.log(arr10.join(''));
    //helloheyhey everyone 加''去除原数组里的,逗号
    console.log(arr10.join('-'));
    //hello-hey-hey everyone 
    console.log(arr10.join(null));
    //hellonullheynullhey everyone
    console.log(arr10.join(undefined));
    //hello,hey,hey everyone 参数写undefined不做改变
    console.log(arr10.join(0));
    //hello0hey0hey everyone

10.slice() 截取，从已有数据返回指定元素，参数可以是负值，如果参数不是从小到大就会得到[]

参数一：开始截取位置（保留）
参数二：结束位置（不保留）

   var arr11 = [1,2,'d',3,'a','b','c'];
    console.log(arr11);//[1, 2, "d", 3, "a", "b", "c"]
    console.log(arr11.slice(2));//["d", 3, "a", "b", "c"]
    console.log(arr11.slice(2,5));//["d", 3, "a"]
    console.log(arr11.slice(-4,-2));
    //[3, "a"] 负值从最后一位开始算，同样是参数一保留，参数二不保留
    console.log(arr11.slice(-2,-4));//[]
    console.log(arr11.slice());
    // [1, 2, "d", 3, "a", "b", "c"]  没有参数相当于复制一个新的数组

11.indexOf() 检索指定元素，返回其第一次出现的位置找不到返回-1

参数一：指定检索元素
参数二：开始检索索引值

  console.log(arr11.indexOf('a'));//4

12.lastIndexOf() 从后向前检索，返回数组第一次出现的位置

  var arr12 = [1,2,3,4,'b','y','e','b','a'];
    console.log(arr12.lastIndexOf('b'));//7

13.遍历数组中每一个值

  for(var i =0;i<arr12.length;i++){
        var element = arr12[i];
        console.log(element);
    }

14.forEach() 数组自带的循环方法:参数是一个回调函数

回调函数中的3个参数：
参数一：表示数组中的元素
参数二：表示数组中的索引
参数三：表示数组本身
第一种写法

arr12.forEach(function(element,index,arr){
    console.log(`元素值:${element},索引值:${index},数组本身:${arr}`);
})

第二种方法：ES6的箭头函数

  arr12.forEach((element,index,arr)=>{
        console.log(`元素值:${element},索引值:${index},数组本身:${arr}`);
    })

15.find() 查找符合条件的第一个元素并返回该元素，找不到返回undefined

var arr13 = [1,2,3,'cc','dd',4,5,'cc'];
var newArray = arr12.find((ele,index,arr)=>{
    return ele ==3;
});
console.log(newArray);//3 

16.findIndex() 查找符合条件的第一个元素并返回该元素索引值，找不到返回-1

var newArray1 = arr12.findIndex(function(ele){
    return ele == 3;
});
console.log(newArray1);//2

17.Array.from()

var a = 'abnv';
console.log(a);//abnv

类数组：
1.具有索引属性（数字）
2.具有长度属性length
可迭代对象：可以被循环的对象
数据使用for…in…循环，依次从中拿取数据进行使用，这样的过程叫做迭代或者遍历
从类数组或者可以迭代对象中创建一个新的数组实例，直接将字符串变成数组

  var arr = Array.from(a);
    console.log(arr);// ["a", "b", "n", "v"]

18. document.getElementsByTagName() 获取页面中的指定标签，再以类数组方式返回

var meta = document.getElementsByTagName('meta');
console.log(meta);//HTMLCollection(2) [meta, meta, viewport: meta]

19. Array.of() 将参数转换成数组，功能类似于创造一个数组

var arr14 = Array.of(1,2,'a','b',true,false)
console.log(arr14);// [1, 2, "a", "b", true, false]

20. isArray() 判断是否为数组，是返回true，不是返回false

console.log(Array.isArray(arr14));//true
console.log(Array.isArray(meta));//false

21. toString() 把数组转换成字符串

var str = arr14.toString();
console.log(str);//1,2,a,b,true,false

22. every() 测试数组中的每一个元素，都满足条件时返回true，否则返回false

```javascript
var arr13 = [1,2,3,4,5];
var result = arr13.every(function(ele,index,arr){
    return ele%2 == 0;
})
console.log(result);//false

##### 23.some() 测试数组中的每一个元素，只要有一个满足条件就输出true

```javascript
var result1 = arr13.some((ele,index,arr)=>{
    return ele%2 ==0;
})
console.log(result1);//true

24. filter() 从数组中过滤一部分元素，形成一个新的数组

var result2 = arr13.filter((ele,index,arr)=>{
    return ele%2 ==0;
})
console.log(result2);// [2, 4]

25. map() 每个数组中的元素都会执行函数并返回执行后的结果，形成一个新的数组

var arr4 = [1,2,3,4,5,6,7,8];
var p = {name:'zhangsan'};
// p就是一个函数对象
var result3 = arr4.map(function(ele,index,arr){
    console.log(this.name);//zhangsan
    // this在这里指的是p对象
    return Math.pow(ele,3);
    // 3次方
},p);
// 第二个函数执行回调函数时this的指向{name:'zhangsan'}
console.log(result3);//[1, 8, 27, 64, 125, 216, 343, 512]

26. reduce() 迭代

var result4 = result3.reduce((acc,value,index,arr)=>{
    console.log(acc);//5 6 14 41 105 230 446 789
    // acc 是累加器，如果value有第二个参数，acc第一次执行时等于它的第二个参数
    return acc + value;
},5)
console.log(result4);//1301
// 第一次执行的参数就是value第二个参数

以上是字符串以及数组中常用的方法以及用例，接下来拓展一下字符串与正则相关的方法。

正则表达式的含义及作用：

• 正则表达式用于定义一些字符串规则
• 计算机可以根据正则表达式来检查一个字符串是否符合规则
• 或者将字符串中符合规则内容提取出来

正则语法：

var 变量 = new RegExp(“正则表达式”,“匹配模式”);
使用typeof检查正则对象，会返回object
注意：正则对象严格区分大小写
在构造函数中可以传递一个匹配模式作为第二个参数
- 可以是：
i:忽略大小写
g:全局匹配模式

创建一个正则表达式，检查一个字符串中是否有字母
[] 里的内容也是或的关系 - 表示从前一个到后一个
[ab] == a|b
[a-z] 任意小写字母
[A-Z] 任意大写字母
[A-z] 任意字母
[0-9] 任意的数字
[ ^ ] 除了
量词：通过量词可以设置一个内容出现的次数

• {n}正好出现n次
• 量词只对他前面的内容起作用
• {m,n}出现m-n次
• {m,}出现m次以上

 var reg = /a{3}/;
// var reg = /aaa/;
console.log(reg.test('aaabc'));//true

正则表达式的方法：

1.test():使用这个方法可以用来检查一个字符串是否符合正则表达式的规则

如果符合返回true，不符合返回false

var result = reg.test(str);
console.log(result);//true
var result = reg.test('vfdwf');
console.log(result);//false
var reg = new RegExp('a','i');//i不区分大小写 也要加引号
var result = reg.test('Afdwf');
console.log(result);//true

2.split() 可以将一个字符串拆分为一个数组

根据任意字母来拆分字符串
在参数中加上正则表达式
这个方法默认就是全局匹配

var result = str.split(/[A-z]/);
console.log(result);//["1", "2", "3", "4", "5", "6", "7"]

3.search() 可以搜索字符串中是否有指定内容，返回指定内容第一次出现的索引，如果没有则返回-1

可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
注意：search没有全局匹配模式

 str = 'hello abc hello aec abc';
    result = str.search('abc');
    console.log(result);//6
    result = str.search('fff');
    console.log(result);//-1
    result = str.search(/a[bef]c/);
    console.log(result);//6

4.match() 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来

默认情况下只会返回第一个符合要求的字符，后面的将不会继续返回
可以对其设置正则表达式为全局匹配模式，可设置多个模式，且顺序无所谓
match 会将匹配的内容保存到数组里返回，即使只查询到一个结果

    str = '34sd543a66u63n';
    result = str.match(/[a-z]/);
    console.log(result);//["s", index: 2, input: "34sd543a66u63n", groups: undefined]
    result = str.match(/[a-z]/g);
    console.log(result);//["s", "d", "a", "u", "n"]

5.replace() 可以将字符串中的指定内容替换为新的内容

参数：
1.被替换的内容
2.新的内容
默认只替换第一个，将新的内容写成空串就相当于删除被替换的内容

    str = '3a4sd543a66u63n';
    result = str.replace(/[a-z]/gi,"@_@");
    console.log(result);//3@_@4@_@@_@543@_@66@_@63@_@
    result = str.replace(/[a-z]/gi,"");
    console.log(result);//345436663

以上就是关于字符串以及数组方法的总结，感谢阅读，欢迎留言讨论指正。