javascript中字符串和数组的常用方法
文章目录
前言
主要从增删改查四个方面来讲,字符串需要注意的是一旦字符串被创建了就是不可变的,数组需要注意的是有改变原数组和不改变原数组的两大类方法。
一、字符串
1、增
对字符串来说,增并不是直接增添内容,而是创建一个字符串副本,再进行操作。
除了常见的+以及${}进行字符串拼接之外,还可以通过concat来操作。
// concat用于将一个或者多个字符串拼接成一个新的字符串
let stringValue = "hello ";
let result = stringValue.concat("world");
console.log(result); // "hello world"
console.log(stringValue); // "hello"
2、删
同样,对字符串来说,删也是先创建一个副本字符串,再进行操作。常见的有:
- slice()
- substr()
- substring()
这三个方法都返回第哦啊用他们的字符串的一个子字符串,都接收一个或者两个参数。
let stringValue = "hello world";
// 第一个参数表示从第几个字符开始
console.log(stringValue.slice(3)); // "lo world"
console.log(stringValue.substring(3)); // "lo world"
console.log(stringValue.substr(3)); // "lo world"
// slice()和substring()的第二个参数都表示到第几个字符结束
console.log(stringValue.slice(3, 7)); // "lo w"
console.log(stringValue.substring(3,7)); // "lo w"
// substr()的第二个参数表示子字符串的长度
console.log(stringValue.substr(3, 7)); // "lo worl"
3、改
同理,对副本操作。常见的有:
- trim(),trimLeft(),trimRight()
- repeat()
- padStart(),padEnd()
- toLowerCase(),toUpperCase()
// trim() 删除前和后全部空格后返回新的字符串
let stringValue = " hello world ";
let trimmedStringValue = stringValue.trim();
console.log(stringValue); // " hello world "
console.log(trimmedStringValue); // "hello world"
// repeat() 接收一个整数参数,表示字符串要复制多少次,返回拼接所有副本后的结果
let stringValue = "na ";
let copyResult = stringValue.repeat(2) // na na
// padStart() 复制字符串,如果小于指定长度,则在相应的一边填充相应的字符,直至满足长度条件
let stringValue = "foo";
console.log(stringValue.padStart(6)); // " foo"
console.log(stringValue.padStart(9, ".")); // "......foo"
// 大小写转换
let stringValue = "hello wORLd";
console.log(stringValue.toUpperCase()); // "HELLO WORLD"
console.log(stringValue.toLowerCase()); // "hello world"
4、查
可以通过索引的方式获取字符串的值,还有一下操作:
- chatAt()
- indexOf()
- startWith()
- includes()
// charAt() 接收一个整数参数,返回给定的索引位置的字符
let message = "abcde";
console.log(message.charAt(2)); // "c"
// indexOf() 从字符串开头去搜索传入的字符串,如果找到则返回位置,如果没找到则返回 -1
let stringValue = "hello world";
console.log(stringValue.indexOf("o")); // 4
// startWith(),endWith() 在字符串中搜索传入的字符串,返回的是bool值
let message = "foobarbaz";
console.log(message.startsWith("foo")); // true
console.log(message.startsWith("bar")); // false
console.log(message.includes("bar")); // true
console.log(message.includes("qux")); // false
5、转换方法 split
// 将字符串按照传入的分隔符拆分出子字符串,拆分后返回依次包含这些子字符串的数组
let str = "12+23+34"
let arr = str.split("+") // [12,23,34]
6、模板匹配方法
针对正则表达式,字符串有几个方法:
- match()
- search()
- replace()
// match() 接收一个参数,可以是正则表达式也可以是RegExp对象,返回一个数组,没有找到返回null
let text = "cat, bat, sat, fat";
let pattern = /.at/;
let matches = text.match(pattern);
console.log(matches[0]); // "cat"
// search() 接收一个参数,可以是正则表达式也可以是RegExp对象,返回匹配索引,没有找到则返回-1
let text = "cat, bat, sat, fat";
let pos = text.search(/at/);
console.log(pos); // 1
// replace() 接收两个参数,第一个参数是匹配的内容,第二个参数是替换的元素(可以用函数)
let text = "cat, bat, sat, fat";
let result = text.replace("at", "ond");
console.log(result); // "cond, bat, sat, fat"
二、数组
1、增
改变原数组的方法:
- push()
- unshift()
- splice()
不改变原数组:
- concat()
// push() 接收任意数量的参数,并将其添加到数组的末尾,返回数组的最新长度
let colors = []; // 原数组
let count = colors.push("red", "green"); // 在末尾增加两项
console.log(count) // 2
// unshift() 在数组开头添加任意数量的值,返回的是新数组的长度
let colors = new Array();
let count = colors.unshift("red", "green");
alert(count); // 2
// spice() 接收三个参数,第一个是起始位置,第二个是要删除的元素数量,之后的参数是要插入的元素列表,返回的是被删除的数组,如果没有则返回空数组
let colors = ["red", "green", "blue"];
let removed = colors.splice(1, 0, "yellow", "orange")
console.log(colors) // red,yellow,orange,green,blue
console.log(removed) // []
// concat() 创建一个当前数组的副本,将接受的参数添加到副本的末尾位置,返回的是这个新创建的副本数组,不会改变原数组。
let colors = ["red", "green", "blue"];
let colors2 = colors.concat("yellow", ["black", "brown"]);
console.log(colors); // ["red", "green","blue"]
console.log(colors2); // ["red", "green", "blue", "yellow", "black", "brown"]
2、删
改变原数组:
- pop()
- shift()
- splice()
不改变原数组:
- slice()
// pop() 删除数组的最后一项,返回的是被删除的项
let colors = ["red", "green"]
let item = colors.pop(); // 返回的是被删除的项
console.log(item) // green
console.log(colors.length) // 1
// shift() 删除数组的第一项,返回的是被删除的项
let colors = ["red", "green"]
let item = colors.shift();
console.log(item) // red
console.log(colors.length) // 1
// splice() 接收两个参数,第一个是起始位置,第二个是需要删除的元素的数量,返回的是包含被删除的元素的数组
let colors = ["red", "green", "blue"];
let removed = colors.splice(0,1);
console.log(colors); // ["green", "blue"]
console.log(removed); // ["red"]
// slice() 接收两个参数,第一个是起始位置,第二个是结束位置,如果没有指定该参数,那么切分的数组包含从第一个参数开始到数组结束的所有元素。返回的是包含这些项的一个新的数组,不会改变原数组。
let colors = ["red", "green", "blue", "yellow", "purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1, 4);
console.log(colors) // red,green,blue,yellow,purple
concole.log(colors2); // green,blue,yellow,purple
concole.log(colors3); // green,blue,yellow
3、改
改变原数组:
- splice()
// splice() 接收三个参数,第一个是起始位置,第二个是要删除的元素的数量,之后是要插入的元素的列表,返回的是被删除的数组
let colors = ["red", "green", "blue"];
let removed = colors.splice(1, 1, "red", "purple");
console.log(colors); // red,red,purple,blue
console.log(removed); // green
4、查
查找元素,返回坐标或者元素值,方法:
- indexOf()
- includes()
- find()
// indexOf() 返回要查找的元素在数组中的坐标,没有则返回-1
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.indexOf(4) // 3
// includes() 返回bool值,表示是否包含要查找的元素
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.includes(4) // true
// find() 返回第一个匹配的元素
const people = [
{
name: "Matt",
age: 27
},
{
name: "Nicholas",
age: 29
}
];
people.find((element, index, array) => element.age < 28) // {name: "Matt", age: 27}
5、排序方法
- reverse()
- sort()
// reverse() 翻转数组
let values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); // 5,4,3,2,1
// sort() 接收一个方法,用于判断那个值排在前面
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); // 0,1,5,10,15
6、转换方法
join()
// join() 接受一个参数,作为字符串的分隔符,返回的是包含全部项的字符串
let colors = ["red", "green", "blue"];
alert(colors.join(",")); // red,green,blue
alert(colors.join("||")); // red||green||blue
7、迭代方法
不改变原数组:
- some()
- every()
- forEach()
- filter()
- map()
// some() 对每一项都运行传入的测试函数,如果至少有一个元素返回true,则这个函数返回true
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let someResult = numbers.some((item, index, array) => item > 2);
console.log(someResult) // true
// every() 对每一项都运行传入的测试函数,如果全部元素返回true,则这个函数返回true
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let everyResult = numbers.every((item, index, array) => item > 2);
console.log(everyResult) // false
// forEach() 对数组的每一项都运行传入的测试函数,没有返回值
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach((item, index, array) => {
// 执行某些函数
});
// filter() 对每一项都运行传入的函数,函数返回true的项合并成数组并返回
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2);
console.log(filterResult); // 3,4,5,4,3
// map() 对每一项都运行传入的函数,每次函数返回的结构合并为一个数组并返回出来
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let mapResult = numbers.map((item, index, array) => item * 2);
console.log(mapResult) // 2,4,6,8,10,8,6,4,2