【前端总览】JS 数组、字符串 常用方法复习

Array

转换成字符串

toString

每个元素之间用逗号连接，形成一个完整的string

var colors = ['red','green','blue'];
alert(colors.toString());//red,green,blue

join

用指定符号连接元素，返回字符串

var colors = ['red','blue','green'];
colors.join('||'); //red||blue||green

数组连接/分割

concat

1.一个数组合并另一个或多个数组
arr0=arr1.concat(arr2,arr3,arr4,...) 
	==> [arr1的内容,arr2的内容,arr3,..]
2.一个数组增加一个或多个元素元素
arr0=arr.concat(a,b,c,d,...) ==> [..,a,b,c,d]

• 实例

var colors = ['red','blue','green'];
colors.concat('yello');//["red", "blue", "green", "yello"]
colors.concat({'name':'张三'});//["red", "blue", "green", {…}]
colors.concat({'name':'李四'},['black','brown']);// ["red", "blue", "green", {…}, "black", "brown"]

slice

• 一个参数

一个参数的情况下，返回从该索引处到数组最末端的所有元素组成的数组

var colors = ['red','blue','green','yellow','purple'];
colors.slice(1);//["blue", "green", "yellow", "purple"]

• 两个参数

两个参数的情况下，返回两个参数索引之间的元素，且左闭右开

返回[1,4)之间的元素组成的数组👇

var colors = ['red','blue','green','yellow','purple'];
colors.slice(1,4);// ["blue", "green", "yellow"]

• 负数参数

负数参数即为倒数

var colors = ['red','blue','green','yellow','purple'];
colors.slice(-2,-1);//["yellow"] 
colors.slice(-1,-2);//[]

• 注意事项

（1）若结束位置小于起始位置，则返回空数组[]，如上面例colors.slice(-1,-2);

（2）slice方法不会影响原本的数组

splice

• 删除

第一个参数是开始的位置，第二个参数是删除的个数

不输入第二个参数则删除指定开始位置之后的全部元素

arr=[1,2,3,4,5]
arr1=arr.splice(0,2) //删除前两个元素

arr //[3,4,5]
arr1 //[1,2]

• 插入/替换

从第三个参数开始之后的所有参数都是要插入的新值

var a=['hel','1','wor','ld'];

//插入
var b=a.splice(2,0,'a',[9,8],{name:'fuk'});
console.log(a,'---',b);
//输出：
[ 'hel', '1', 'a', [ 9, 8 ], { name: 'fuk' }, 'wor', 'ld' ] --- []
//替换 
var b=a.splice(0,1,'a',[9,8],{name:'fuk'});
console.log(a,'---',b);
//输出：
[ 'a', [ 9, 8 ], { name: 'fuk' }, '1', 'wor', 'ld' ] --- [ 'hel' ]

• 注意

（1）splice的处理会影响原数组，返回值是一个数组，储存被删除的内容

（2）要单纯的插入则第二个参数为0

（3）和slice不同，splice只会简单地将内容插入，不会将数组合并

位置方法

indexOf 和 lastIndexOf

var numbers=[1,2,3,4,4,5,6,4,3];
console.log(numbers.indexOf(4,5)); //输出 7

var numbers=[1,2,3,4,4,5,6,4,3];
console.log(numbers.lastIndexOf(4,5)); //输出4

• indexOf 从头开始 ；lastIndexOf 从末尾开始

• 第一个参数为要查找的内容，第二个参数为开始查找的位置索引

• 返回值是查找到的第一个匹配的位置索引，没找到返回-1

迭代方法

filter过滤器

• 参数是回调函数，使回调函数返回值为真的元素被保留
• filter传给回调函数3个参数，item，index，array

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
    return (item > 2);
});
alert(filterResult); //[3,4,5,4,3]

map方法

• 参数是回调函数，每个元素都会被传入该回调函数，保存传入后的返回值

• 传给回调函数3个参数，item，index，array

• 原数组不受影响

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.map(function(item, index, array){
    return item * 2;
});
alert(filterResult); //[2,4,6,8,10,8,6,4,2]

forEach方法

• 参数是回调函数，每个元素都会被传入该回调函数

• 传给回调函数3个参数，item，index，array

• 与map不同，没有返回值（即使给回调函数加上return也没有）

• 对原数组无影响

var num = [1, 2, 3, 4, 5, 6, 4, 5, 3, 1];
var ret=num.forEach((item,index)=>{
    return item=item*index;
})
console.log(ret,'-------------',num);

输出：
undefined ------------- [
  1, 2, 3, 4, 5,
  6, 4, 5, 3, 1
]

String

字符方法

• charAt()

var stringValue = "hello world"; 
alert(stringValue.charAt(1));   //"e"

​ 获取指定位置的字符，返回string类型的结果

• charCodeAt()

var stringValue = "hello world";
alert(stringValue.charCodeAt(1)); //输出"101"

​ 返回指定位置的字符编码

• 索引方式访问

var stringValue = "hello world";
alert(stringValue[1]);   //"e"

字符串操作

concat()方法 字符串拼接

• 功能

拼接字符串，返回一个新字符串，不影响原本的字符串

var stringValue = "hello ";
var result = stringValue.concat("world"); 
alert(result); //"hello world"  
//alert(stringValue); "hello"  原字符串不变

• 参数

可以有多个参数，按顺序依次拼接

var stringValue = "hello ";
var result = stringValue.concat("world", "!");
alert(result); //"hello world!" 
alert(stringValue); //"hello"

• 替代

//实际应用中，更多使用 “+” 来拼接字符串

var str1="hello";
var str2="world";
var str3="!";
var str4=" ";
var result= str1 + str4 + str2 + str4 + str3;
//result => hello world !

字符串切割

• 共同点

（1）不影响原字符串，返回新字符串

slice()方法

• 参数

（1）第一个参数是开始位置，不填参数则返回整个字符串

（2）第二个参数是结束位置的下一个位置，不填则默认到末尾

（3）若参数是负数则将其与字符串长度相加

var stringValue = "hello world";
console.log(1,stringValue.slice(0)); 
console.log(2,stringValue.slice(3,7));
console.log(3,stringValue.slice(-3)); 
console.log(4,stringValue.slice(3,-4)); 

//1 hello world
//2 lo w
//3 rld  => 11+(-3)=8 =>从第8个开始 slice(8)
//4 lo w => 11+(-4)=7 => 相当于slice(3,7)

（4）若第一个参数 大于 第二个参数，则返回空字符串

var stringValue = "hello world";
console.log(stringValue.slice(1,3)); 

// ""

substring()方法

• 参数

（1）不输入参数时，返回空字符串

（2）输入一个参数时，参数表示开始的位置

（3）输入两个参数时，分别表示 开始的位置和结束位置的下一个位置

var stringValue = "hello world";
console.log(1,stringValue.substring());
console.log(2,stringValue.substring(3));
console.log(3,stringValue.substring(3,7));

//1 ""
//2 lo world
//3 lo w

（4）输入两个参数时，以较小的那个为开始，较大的那个为结束的下一个位置

（5）参数为负数时，视为0

var stringValue = "hello world";
console.log(1,stringValue.substring(3,0));
console.log(2,stringValue.substring(-3));
console.log(3,stringValue.substring(3,-4));

//1 hel  相当于substring(0,3)
//2 hello world  相当于substring(0);
//3 hel	 相当于substring(3,0) => 相当于substring(0,3)

substr()方法

• 参数

（1）第一个参数指定字符串的开始位置

（2）第二个参数指定返回的字符个数，默认到末尾

（3）不填参数则返回整个字符串

var stringValue = "hello world";
console.log(1,stringValue.substr());
console.log(2,stringValue.substr(1));
console.log(3,stringValue.substr(1,3));

//1 hello world
//2 ello world
//3 ell

（4）若第一个参数是负数，则等同于字符串长度加该参数

（5）若第二个参数是负数，则等同于0

因为第二个参数是个数(长度)，所以允许第一个参数大于第二个参数

var stringValue = "hello world";
console.log(1,stringValue.substr(-2));
console.log(2,stringValue.substr(-2，-3));

//1 lo  11+(-2)=9 => 相当于substr(9)
//2 ""  因为第二个字符串为负数，相当于0 => 长度为0 => 空字符串

字符串定位

• 方法

**indexOf：**从头开始查找

**lastIndexOf：**从尾部开始反向查找

• 参数

（1）第一个参数是要查找的字符串

（2）第二个参数是开始查找的位置

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