数组和字符串常用的方法-总结

最新推荐文章于 2024-08-15 14:03:08 发布

前端·柱子

最新推荐文章于 2024-08-15 14:03:08 发布

阅读量103

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_55896343/article/details/134970760

版权

1. 数组方法

推荐使用字面量方式声明数组，而不是Array构造函数
实例方法forEach 用于遍历数组，替代数组，替代for循环
实例方法filter过滤数组单元值，生成新数组
实例方法map迭代数组，生成新数组(重点，可以为对数组的二次加工)
实例方法join数组元素拼接为字符串，返回字符串(重点)
实例方法find 查找元素，返回符合测试条件的第一个数组值，如果没有符合条件的返回null，
实例方法every监测数组所有元素是否都符合指定条件，吐过所有元素都通过返回true，有一个没通过就返回false
实例方法some监测数组中元素是否都符合指定条件，如果数组中有元素满足条件返回true，一个就是true，所有都不满足返回false
实例方法concat方法合并两个数组，返回生成新数组
实例方法sort对原数组单元值排序
实例方法splice删除或者替换原数组单元
实例方法reverse反转数组
实例方法findIndex 查找元素的索引值

1.forEach(代码演示)

  const arr = [1, 3, 5, 9, 2, 5, 4, 6]
    arr.forEach((item, index) => {
      console.log(index + "----" + item);      
    })

2.filter(代码演示)

	const arr = [1, 3, 5, 9, 2, 8, 4, 7, 6]
    let newArr = arr.filter((item, index) => item > 5)
    console.log(newArr);

3.map(代码演示)

 	const arr = [1, 3, 5, 9, 2, 8, 4, 7, 6]
    let newArr = arr.map((item, index) => item + 5)
    console.log(newArr);

4.join(代码演示)

前端中的join()方法可以用于将数组中的所有元素连接成一个字符串。该方法接受一个可选的参数，用于指定连接字符串的分隔符。如果省略该参数，则默认使用逗号作为分隔符

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var fruitString = fruits.join(" and ");
console.log(fruitString); // 输出：Banana and Orange and Apple and Mango


var fruits = ["Banana", "Orange", "Apple", "Mango"];
var fruitString = fruits.join();
console.log(fruitString); // 输出：Banana,Orange,Apple,Mango

5.find(代码演示)

在前端开发中，find()方法通常用于在数组中查找符合条件的第一个元素，并返回该元素的值。该方法接受一个回调函数作为参数，该回调函数接受三个参数：当前元素的值，当前元素的索引和数组本身。回调函数应该返回一个布尔值，以指示当前元素是否符合条件。如果找到符合条件的元素，则返回该元素的值；否则返回undefined。

const arr = [5, 12, 8, 130, 44];
const found = arr.find(element => element > 10);
console.log(found); // 输出：12

6.every(代码演示)

function(currentValue, index, arr)：要对数组每个元素执行的函数。它接收三个参数：
currentValue：数组当前被处理的元素。
index（可选）：当前元素的索引。
arr（可选）：调用 every() 方法的数组。

var numbers = [20, 30, 40, 50];
var allOverTen = numbers.every(function(number) {
    return number > 10;
});

console.log(allOverTen); // 输出 true

7.some(代码演示)

var numbers = [5, 8, 12, 3];

var anyOverTen = numbers.some(function(number) {
    return number > 10;
});

console.log(anyOverTen); // 输出 true

8.concat(代码演示)

concat() 方法不会修改现有数组，而是返回一个新数组，其中包含合并了所有给定数组或值的内容。这使得在处理数组时能够轻松地创建新数组而不改变原始数据。

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];

var mergedArray = array1.concat(array2);

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

var newArray = array.concat(4, 5, 6);

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

var newArray = array.concat([4, 5], 6);

console.log(newArray); // 输出 [1, 2, 3, 4, 5, 6]

9.sort(代码演示)

这里的比较函数 function(a, b) { return a - b; } 控制了排序规则。当 a 小于 b 时，a - b 为负值，说明 a 应该排在 b 前面；当 a 大于 b 时，a - b 为正值，说明 a 应该排在 b 后面；当 a 等于 b 时，a - b 为 0，说明 a 和 b 的相对位置不变。

// 默认排序（按 Unicode 代码点）
var fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.sort();

console.log(fruits); // 输出 ["Apple", "Banana", "Mango", "Orange"]
-------------------------------------------------------------------
// 数字数组排序
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
    return a - b;
});
-------------------------------------------------------------------
// 自定义对象数组排序
var persons = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 20 },
    { name: 'Charlie', age: 30 }
];

persons.sort(function(a, b) {
    return a.age - b.age;
});

console.log(persons);
// 输出 [{ name: 'Bob', age: 20 }, { name: 'Alice', age: 25 }, { name: 'Charlie', age: 30 }]

10.splice代码演示)

array.splice(start, deleteCount, item1, item2, …)
start：指定修改的起始位置，即要修改的元素的索引。
deleteCount：要删除的元素个数（可选）。如果设置为 0，表示不删除任何元素。
item1, item2, …：要添加到数组的新元素（可选）。

// 删除元素
var fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
var removed = fruits.splice(2, 1); // 从索引 2 开始删除 1 个元素
console.log(fruits); // 输出 ["Apple", "Banana", "Mango"]
console.log(removed); // 输出 ["Orange"]
----------------------------------------------------------------------
// 插入元素
var fruits = ['Apple', 'Banana', 'Mango'];
fruits.splice(2, 0, 'Orange', 'Grapes'); // 从索引 2 开始插入 'Orange' 和 'Grapes'
console.log(fruits); // 输出 ["Apple", "Banana", "Orange", "Grapes", "Mango"]
----------------------------------------------------------------------
// 替换元素
var fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
fruits.splice(2, 1, 'Pineapple', 'Grapes'); // 从索引 2 开始替换 1 个元素为 'Pineapple' 和 'Grapes'

console.log(fruits); // 输出 ["Apple", "Banana", "Pineapple", "Grapes", "Mango"]

splice() 方法可以根据需要删除、插入或替换数组中的元素。它会直接修改原始数组，并返回一个包含被删除元素的数组（如果有删除的话）。

11.reverse代码演示)

var fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
fruits.reverse();

console.log(fruits); // 输出 ["Mango", "Orange", "Banana", "Apple"]

12.findIndex代码演示)

在这个例子中，findIndex() 方法遍历了数组 numbers 中的所有元素，并返回第一个满足条件的元素的索引。如果没有找到满足条件的元素，则返回 -1。

var numbers = [5, 8, 12, 3];

var index = numbers.findIndex(function(number) {
    return number > 10;
});

console.log(index); // 输出 2（索引为 2 的元素 12 是第一个大于 10 的元素）

2. 字符串

实例属性 length 用来获取字符串的度长(重点)
charAt()返回字符串的索引值.(括号里面填写索引号)
实例方法 split('分隔符') 用来将字符串拆分成数组(重点)
实例方法 substring（需要截取的第一个字符的索引[,结束的索引号]） 用于字符串截取(重点)
实例方法 startsWith(检测字符串[, 检测位置索引号]) 检测是否以某字符开头(重点)
实例方法 includes(搜索的字符串[, 检测位置索引号]) 判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false(重点)
实例方法 toUpperCase 用于将字母转换成大写
实例方法 toLowerCase 用于将就转换成小写
实例方法 indexOf 检测是否包含某字符
实例方法 endsWith 检测是否以某字符结尾
实例方法 replace 用于替换字符串，支持正则匹配
实例方法 match 用于查找字符串，支持正则匹配
实例方法trim用于清楚空格

注：String 也可以当做普通函数使用，这时它的作用是强制转换成字符串数据类型。

1.charAt()代码演示)

string.charAt(index)
index：指定要返回的字符位置的索引。索引值从 0 开始，表示字符串中的第一个字符。

charAt() 方法可用于获取字符串中特定位置的字符，索引应该在字符串的有效范围内，否则返回空字符串。

var str = "Hello World!";
var char = str.charAt(1);

console.log(char); // 输出 "e"## 12.findIndex代码演示)
----------------------------------------------------------
var str = "Hello";
var char = str.charAt(10); // 索引 10 超出了字符串的长度，返回空字符串

console.log(char); // 输出 ""

2.split()(代码演示)

string.split(separator, limit)
separator：指定用于确定子字符串位置的分隔符。可以是一个字符串或正则表达式。如果省略该参数，将整个字符串作为唯一的元素存储在数组中。
limit：可选参数，指定返回的数组的最大长度。超过此限制的部分将被舍弃。

var str = "Apple, Banana, Orange";
var fruits = str.split(", ");

console.log(fruits); // 输出 ["Apple", "Banana", "Orange"]

-----------------------------------------------------
var str = "Hello  World! 123";
var parts = str.split(/\s+/); // 使用正则表达式匹配空白字符

console.log(parts); // 输出 ["Hello", "World!", "123"]
-----------------------------------------------------限制返回数组的最大长度

var str = "Apple, Banana, Orange";
var fruits = str.split(", ", 2); // 限制返回的数组最大长度为 2

console.log(fruits); // 输出 ["Apple", "Banana"]

3.substring()(代码演示)

string.substring(indexStart, indexEnd)
indexStart：必需，指定子字符串的起始位置。如果大于或等于字符串的长度，substring() 将返回空字符串。
indexEnd：可选，指定子字符串的结束位置（不包括该位置的字符）。如果省略该参数，substring() 将提取字符串的剩余部分。

var str = "Hello World!";
var sub1 = str.substring(1, 4); // 从索引 1 开始提取到索引 3（不包括索引 4）的字符

console.log(sub1); // 输出 "ell"

var sub2 = str.substring(6); // 从索引 6 开始提取到字符串的末尾

console.log(sub2); // 输出 "World!"

4.includes(代码演示)

string.includes(searchString, position)
searchString：要在字符串中搜索的子字符串。
position：可选参数，表示开始搜索的位置，默认为 0。

需要注意的是，includes() 方法区分大小写，所以大写和小写字符被视为不同。

var str = "Hello World!";
var isFound1 = str.includes("Hello"); // 检查字符串中是否包含 "Hello"

console.log(isFound1); // 输出 true

var isFound2 = str.includes("world"); // 检查字符串中是否包含 "world"（注意大小写）

console.log(isFound2); // 输出 false

var isFound3 = str.includes("World", 6); // 从索引 6 开始检查字符串中是否包含 "World"

console.log(isFound3); // 输出 true

5.toUpperCase & toLowerCase (代码演示)

这两个方法分别返回原始字符串的大写或小写版本，但不会改变原始字符串本身。可以用于对字符串进行大小写转换，以便于比较、显示或其他操作。

var str = "Hello World!";
var upperCaseStr = str.toUpperCase();

console.log(upperCaseStr); // 输出 "HELLO WORLD!"
---------------------------------------------------
var str = "Hello World!";
var lowerCaseStr = str.toLowerCase();

console.log(lowerCaseStr); // 输出 "hello world!"

6.indexOf(代码演示)

string.indexOf(searchValue, fromIndex)
searchValue：要在字符串中搜索的子字符串。
fromIndex：可选参数，表示开始搜索的位置，默认为 0。如果省略此参数或提供的值大于等于字符串长度，则从字符串的起始位置开始搜索。

var str = "Hello World!";
var index1 = str.indexOf("World"); // 搜索字符串中 "World" 的位置

console.log(index1); // 输出 6（从索引 6 开始的位置是 "World"）

var index2 = str.indexOf("world"); // 区分大小写，"world" 在字符串中未找到

console.log(index2); // 输出 -1

var index3 = str.indexOf("o", 5); // 从索引 5 开始搜索 "o" 的位置

console.log(index3); // 输出 7（从索引 7 开始的位置是 "o"）

7.startsWith & endsWith(代码演示)

var str = "Hello World!";
var starts1 = str.startsWith("Hello"); // 检查字符串是否以 "Hello" 开头

console.log(starts1); // 输出 true

var starts2 = str.startsWith("hello"); // 区分大小写，"hello" 在字符串开头未找到

console.log(starts2); // 输出 false

var starts3 = str.startsWith("World", 6); // 从索引 6 开始检查字符串是否以 "World" 开头

console.log(starts3); // 输出 true
------------------------------------------------
var str = "Hello World!";
var ends1 = str.endsWith("World!"); // 检查字符串是否以 "World!" 结尾

console.log(ends1); // 输出 true

var ends2 = str.endsWith("world!"); // 区分大小写，"world!" 在字符串结尾未找到

console.log(ends2); // 输出 false

var ends3 = str.endsWith("Hello", 5); // 从索引 5 开始检查字符串是否以 "Hello" 结尾

console.log(ends3); // 输出 true

8.replace(代码演示)

string.replace(searchValue, replaceValue)
searchValue：要替换的子字符串或正则表达式。
replaceValue：替换 searchValue 的新字符串或函数。

 // 替换字符串的子字符串
var str = "Hello World!";
var newStr = str.replace("World", "Universe"); // 将 "World" 替换为 "Universe"

console.log(newStr); // 输出 "Hello Universe!"
--------------------------------------------------------
// 使用正则表达式替换匹配
var str = "JavaScript is fun!";
var newStr = str.replace(/fun/i, "amazing"); // 使用正则表达式替换 "fun" 为 "amazing"，不区分大小写

console.log(newStr); // 输出 "JavaScript is amazing!"
--------------------------------------------------------
// 使用函数替换匹配模式
function capitalize(match) {
    return match.toUpperCase();
}

var str = "hello world";
var newStr = str.replace(/hello|world/g, capitalize); // 使用函数将匹配的子字符串转换为大写

console.log(newStr); // 输出 "HELLO WORLD"

在第二个示例中，正则表达式 /fun/i 匹配了字符串中的 "fun"，并将其替换为 "amazing"，因为 /i 表示不区分大小写。而在第三个示例中，replace() 方法中传入了一个函数，用于将匹配的子字符串转换为大写。
replace() 方法返回一个新的字符串，并且不会修改原始字符串。如果想要替换所有匹配的子字符串，可以使用带有全局标志 /g 的正则表达式。

9.match(代码演示)

match() 是 JavaScript 字符串对象的方法之一，用于在字符串中检索指定的值，返回找到的值并将其作为数组返回。

var str = "The rain in Spain falls mainly on the plain";

var matches = str.match(/ain/g);

console.log(matches); // 输出 ["ain", "ain", "ain"]

在这个例子中，正则表达式 /ain/g 匹配了字符串中所有的 "ain"，并返回一个数组包含所有匹配的子字符串。

var str = "John Smith is 30 years old, and Jane Doe is 25.";

var ages = str.match(/\d+/g);

console.log(ages); // 输出 ["30", "25"]

在这个例子中，正则表达式 /\d+/g 匹配了字符串中的所有数字，并返回一个数组包含所有匹配的数字。

match() 方法根据传入的正则表达式，在字符串中查找匹配项并返回一个包含匹配结果的数组。如果没有找到匹配项，则返回 null

10.trim(代码演示)

var str = "   Hello, World!   ";
var trimmedStr = str.trim();

console.log(trimmedStr); // 输出 "Hello, World!"

前端·柱子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫