javascript中字符串和数组的常用方法

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