JavaScript对数组与字符串的操作方法

你好小羊
299 阅读6分钟

数组与字符串的方法

数组与字符串都有的方法

定义arr与str

let arr = [1, 2, 3, 4, 5];
let str = "Hello World";

length

console.log(arr.length);  // 输出: 5
console.log(str.length);  // 输出: 11

索引访问

console.log(str[0]);  // 输出: H
console.log(arr[0]);  // 输出: 1

indexOf

console.log(arr.indexOf(3));  // 输出: 2
console.log(str.indexOf("World"));  // 输出: 6
arr.push(2);
console.log(arr.lastIndexOf(2));  // 输出: 5
console.log(str.lastIndexOf("o"));  // 输出: 7
//没找到返回-1

[!tip] 在字符串中空格也算一位

includes

console.log(arr.includes(3));  // 输出: true
console.log(str.includes("Hello"));  // 输出: true

数组独有的方法

添加和删除元素：

push

在数组末尾添加新元素，并返回新的长度。

let fruits = ['apple', 'banana'];
console.log("Before push:", fruits);  // Before push: ['apple', 'banana']
console.log("Push result:", fruits.push('orange'));  // Push result: 3
console.log("After push:", fruits);  // After push: ['apple', 'banana', 'orange']

pop

删除数组的最后一个元素，并返回那个元素。

console.log("Before pop:", fruits);  // Before pop: ['apple', 'banana', 'orange']
console.log("Pop result:", fruits.pop());  // Pop result: 'orange'
console.log("After pop:", fruits);  // After pop: ['apple', 'banana']

shift

删除数组的第一个元素，并返回那个元素。

console.log("Before shift:", fruits);  // Before shift: ['apple', 'banana']
console.log("Shift result:", fruits.shift());  // Shift result: 'apple'
console.log("After shift:", fruits);  // After shift: ['banana']

unshift

在数组的开始添加一个或多个元素，并返回新的长度。

console.log("Before unshift:", fruits);  // Before unshift: ['banana']
console.log("Unshift result:", fruits.unshift('strawberry'));  // Unshift result: 2
console.log("After unshift:", fruits);  // After unshift: ['strawberry', 'banana']

splice

参数：

  1. start：指定修改的开始位置。
  2. deleteCount：要删除的元素数量（如果不删除则为0）。
  3. items...：要添加的新元素。 通过删除现有元素和/或添加新元素来更改数组的内容。
console.log("Before splice:", fruits);  // Before splice: ['strawberry', 'banana']
fruits.splice(1, 0, 'mango');  // 在索引1的位置添加'mango'，不删除元素
console.log("Splice result:", fruits);  // Splice result: ['strawberry', 'mango', 'banana']
console.log("After splice:", fruits);  // After splice: ['strawberry', 'mango', 'banana']

排序和反转：

sort

参数： 可选的比较函数（compareFn）。

如果没有提供 compareFn，所有非 undefined 的数组元素都会被转换为字符串，并按照 UTF-16 码元顺序比较字符串进行排序。

MDN是这样讲解compareFn的：

所以传入一个函数return a-b就是升序，return b-a就是降序

也可以自己写判断，返回大于0就是，就把第一个传进来的放后面，小于0就反之

对数组元素进行排序。

let numbers = [4, 2, 5, 1, 3];
console.log("Before sort:", numbers);  // Before sort: [4, 2, 5, 1, 3]
numbers.sort();
console.log("After sort:", numbers);  // After sort: [1, 2, 3, 4, 5]

const items = [
  { name: "Edward", value: 21 },
  { name: "Sharpe", value: 37 },
  { name: "And", value: 45 },
  { name: "The", value: -12 },
  { name: "Magnetic", value: 13 },
  { name: "Zeros", value: 37 },
];

// 根据 value 排序
items.sort((a, b) => a.value - b.value);

// 根据 name 排序
items.sort((a, b) => {
  const nameA = a.name.toUpperCase(); // 忽略大小写
  const nameB = b.name.toUpperCase(); // 忽略大小写
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // name 必须相等
  return 0;
});

reverse

颠倒数组中元素的顺序。

console.log("Before reverse:", numbers);  // Before reverse: [1, 2, 3, 4, 5]
numbers.reverse();
console.log("After reverse:", numbers);  // After reverse: [5, 4, 3, 2, 1]

高级迭代方法:

map

React经常用来迭代并处理数组

迭代数组，在callback一顿操作之后返回一个新数组

参数：callback函数

callback函数的参数：

  • currentValue：数组中正在处理的当前元素。
  • index（可选）：数组中正在处理的当前元素的索引。
  • array（可选）：调用 map 方法的原数组。
let numbers = [1, 2, 3, 4];
let squared = numbers.map(x => x * x);
console.log(squared);  // 输出: [1, 4, 9, 16]

filter

筛选数组的数据

参数：callback函数

callback函数的参数：

  • element：数组中正在测试的当前元素。
  • index（可选）：数组中正在测试的当前元素的索引。
  • array（可选）：调用 filter 方法的数组。

返回值： filter() 返回一个新的数组，该数组包含所有符合条件的元素。

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(x => x % 2 === 0);
console.log(evenNumbers);  // 输出: [2, 4]

reduce

对数组的每个元素执行一个由你提供的“reducer”回调函数（执行累积器），将其结果汇总为单个返回值。

参数：callback函数

callback函数的参数：

  • accumulator：累计器累计回调的返回值；它是上一次调用回调时返回的累积值，或者是提供的初始值（如果提供了）。
  • currentValue：数组中正在处理的当前元素。
  • index（可选）：数组中正在处理的当前元素的索引。
  • array（可选）：调用 reduce 方法的数组。
  • initialValue（可选）：作为第一次调用 callback 函数时第一个参数的值。

返回值： reduce() 方法返回通过累加器函数处理数组元素后的单一输出值。

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, x) => acc + x, 0);
console.log(sum);  // 输出: 10

acc 是累加器，它的初始值为 0，然后逐个加上数组中的每个元素。

字符串独有的方法

提取和搜索：

substring

返回字符串中指定两个索引之间的字符。

参数：

  • start: 开始索引，包含该索引处的字符。
  • end（可选）: 结束索引，不包含该索引处的字符。

返回值：返回从 start 到 end（不包括 end）索引之间的新字符串。

let str = "Hello World";
console.log(str.substring(1, 4));  // 输出: "ell"

slice

提取字符串的一部分，并返回新的字符串。

参数：

  • start: 开始索引，包含该索引处的字符。
  • end（可选）: 结束索引，不包含该索引处的字符。

返回值：返回从 start 到 end（不包括 end）索引之间的新字符串。

console.log(str.slice(1, 4));  // 输出: "ell"

那么slice和substring有什么区别呢？

[!tip] substring：第一个参数小于0，就按0处理，如果没有第二个参数则截取到末尾

slice：第一个参数小于0，就从后面开始计数，如果没有第二个参数则截取到末尾

charAt

返回在指定位置的字符。

参数：

  • index: 字符的索引位置。

返回值：返回指定索引位置的字符。

console.log(str.charAt(0));  // 输出: "H"

替换和分割:

replace

替换字符串中的某些部分。

参数：

  • searchValue: 要替换的子字符串或正则表达式。
  • newValue: 替换进字符串的文本或一个函数的返回值。

返回值： 返回新字符串，是替换后的结果。

console.log(str.replace('World', 'Everyone'));  // 输出: "Hello Everyone"

substring

参数：

  • start: 开始索引，包含该索引处的字符。
  • end（可选）: 结束索引，不包含该索引处的字符。

返回值：返回从 start 到 end（不包括 end）索引之间的新字符串。

let str = "Hello World";
console.log(str.substring(1, 4));  // 输出: "ell"

split

根据指定的分隔符将字符串分割成数组。

参数：

  • separator: 分隔符，可以是一个字符串或正则表达式。
  • limit（可选）: 一个整数，限制返回的分割片段数量。

返回值：返回一个字符串数组，是根据 separator 分割得到的。

console.log(str.split(' '));  // 输出: ["Hello", "World"]

split

根据指定的分隔符将字符串分割成数组。

参数：

  • separator: 分隔符，可以是一个字符串或正则表达式。
  • limit（可选）: 一个整数，限制返回的分割片段数量。

返回值：返回一个字符串数组，是根据 separator 分割得到的。

console.log(str.split(' '));  // 输出: ["Hello", "World"]

大小写转换

toUpperCase

toLowerCase

trim

返回去除两端空白后的新字符串。

concat

连接两个或多个字符串。

参数： 接受一个或多个字符串。

返回值： 返回连接后的新字符串。

console.log(str.concat(' everyone'));  // 输出: "Hello World everyone"
avatar
文章
阅读
粉丝