JS中String对象和Array对象的常用方法

JS中String对象和Array对象的常用方法

两个对象的方法可以从增、删、改、查、截取和其他方法这几个角度去理解和记忆，有些方法的名字和功能是相同的。

1 String对象

1、字符串是不可变的，每次改变内容其实是改变的地址，是新开辟的一个内存空间
2、由于字符串的不可变性，字符串所有的方法返回的是一个新字符串

1.1 增（拼接）

对于字符串来说，可以将“增”理解为字符串拼接

方法名	说明
concat(str1, str2, str3, …)	用于字符串拼接，将传入的字符串拼接到调用这个方法的字符串上，等效于+

var str = 'abc'
var str1 = 'd'
var str2 = 'ef'
console.log(str.concat(str1, str2)); // abcdef

1.2 删

因为字符串的不可变性，字符串没有特定的删除操作，一般使用replace()方法将要删除的内容替换为空

1.3 改（替换）

方法名	说明
replace(str1, str2)	将str1替换成str2

var str = 'abcdefa'
var newStr = str.replace('a', '!')
console.log(newStr); // !bcdefa

该方法只能替换一次，如果要将字符串中符合条件的都替换就要进行循环来匹配

1.4 查

方法名	说明
charAt(index)	获取index位置的字符并返回
charCodeAt(index)	获取index位置上字符的Unicode码并返回
str[index]	获取字符串str中index位置上的字符，与charAt()等效
indexOf(str, index)	从index处向后找，找到第一个与str匹配的字符，返回其在字符串中的位置，找不到就返回-1
lastIndexOf(str, index)	从index处向前找，找到第一个与str匹配的字符，返回其在字符串中的位置，找不到就返回-1

var str = 'hello'
console.log(str.charAt(1))  // e
console.log(str.charCodeAt(1))  // 101(e的ASCII码)
console.log(str[1])  // e

console.log(str.indexOf('l'))  // 2
console.log(str.indexOf('h', 2))  // -1

console.log(str.lastIndexOf('l')) // 3
console.log(str.lastIndexOf('l', 3)) // 2

1.5 截取

方法名	说明
slice(start, end)	从start开始，截取到end位置的字符
substr(start, length)	从start开始截取length长度的字符
substring(start, end)	从start开始，截取到end位置的字符，和slice()相同，但是不能取负值

var str1 = 'hello'
var str2 = 'world'
console.log(str1.slice(1, 3))  // el
console.log(str1.slice(1, -1))  // ell
console.log(str1.substr(1, 2))  // el
console.log(str1.substring(1, 2))  // e

1.6 String对象中的其他方法

• 转换大小写

方法名	说明
toUpperCase()	将调用这个方法的字符串转换成大写
toLowerCase()	将调用这个方法的字符串转换成小写

var str = 'HELLO';
console.log(str.toLowerCase()); // hello
var str = 'hello';
console.log(str.toUpperCase()); // HELLO

• 切割字符串

方法名	说明
split()	将字符串按照传入的参数切割，注意：使用split切割完字符串后返回的是一个新数组

var str = 'a,b,c,d';
console.log(str.split(',')); //返回的是一个数组 [a, b, c, d]

2 Array对象

2.1 增

方法名	说明
concat(arr1, arr2, …)	将传入的数组拼接到调用这个方法的数组上，返回新数组
push()	在调用这个方法的数组后面添加一个或多个元素，并返回新长度
unshift()	在调用这个方法的数组开头添加一个或多个元素，并返回新的长度

var arr = ['pink', 'deeppink', 'hotpink'];
console.log(arr.push('lightpink')); //  返回数组长度  4
console.log(arr); //  ['pink', 'deeppink', 'hotpink', 'linghtpink']

var arr = ['pink', 'deeppink', 'hotpink'];
console.log(arr.unshift('lightpink')); //  返回数组长度  4
console.log(arr); //  ['linghtpink','pink', 'deeppink', 'hotpink']

2.2 删

方法名	说明
splice(index, num)	从第index个开始删除num数量的元素，返回删除后的新数组，这个方法会修改原数组
pop()	删除数组的最后一个元素，数组长度减一，无参数，返回删除元素的值 ，这个方法会修改原数组
shift()	删除数组的第一个元素，数组长度减一，无参数，返回删除元素的值 ，这个方法会修改原数组

// splice
var arr = ['red', 'green', 'blue', 'pink'];
console.log(arr.splice(2, 1)); // ["blue"]
console.log(arr); // ["red", "green", "pink"]

// pop
var arr = ['pink', 'deeppink', 'hotpink'];
console.log(arr.pop()); // hotpink
console.log(arr); // ["pink", "deeppink"]

// shift 
var arr = ['pink', 'deeppink', 'hotpink'];
console.log(arr.shift()); // pink
console.log(arr); // ["deeppink", "hotpink"]

2.3 改（排序）

数组的修改一般通过索引值直接进行修改，博主在这里将“改”理解成数组排序

方法名	说明
reverse()	翻转数组中元素的顺序，无参数，返回翻转后的数组
sort()	对数组中的元素进行排序

// reverse
var arr = ['red', 'andy'];
console.log(arr.reverse()); // ['andy', 'red']

// sort 如果不传入参数，则按照字符编码的顺序进行排序
var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {
    return b - a; // 降序
    // return a - b;   升序
});
console.log(arr);

2.4 查

方法名	说明
indexOf(‘查找内容’, index)	从index处向后找，找到第一个匹配的元素，返回其索引值，找不到就返回-1
lastIndexOf(‘查找内容’, index)	从index处向前找，找到第一个匹配的元素，返回其索引值，找不到就返回-1

2.5 截取

方法名	说明
slice()	数组元素截取，返回截取的数组

var arr = ['red', 'green', 'blue', 'pink'];
console.log(arr.slice()); // 默认截取整个数组
console.log(arr.slice(0)); // 从第0个截取到最后
console.log(arr.slice(0, 3)); // 从第0个截取  截取 索引号是3的但是不包含3

2.6 Array对象中的其他方法

• 连接数组

方法名	说明
join(‘分隔符’)	使用分隔符连接数组中的元素并转换成字符串，返回一个字符串，不传入参数默认使用“,”进行连接

split()方法和join()方法常配合使用，进行字符串和数组之间的转换

var arr = ['red', 'green', 'blue', 'pink'];
console.log(arr.join()); // red,green,blue,pink
console.log(arr.join('-')); //red-green-blue-pink

• 迭代方法

方法名	说明
filter()	按照条件筛选数组
forEach()	按照条件筛选数组