常用的数组方法+字符串方法

小奋斗♛

已于 2023-05-02 10:00:01 修改

阅读量1.4k

点赞数 2

文章标签： javascript 前端 html5 css3 vue.js

于 2023-05-02 09:57:28 首次发布

本文链接：https://blog.csdn.net/m0_72684019/article/details/130461538

版权

这篇文章详细介绍了JavaScript中常见的数组操作方法，包括push、unshift、pop、shift、splice、reverse、sort、join、filter、forEach、map、reduce、indexOf、find、findIndex、every、some和concat。这些方法分别用于添加元素、删除元素、排序、转换以及检查数组元素等操作，展示了JavaScript处理数组的强大功能。

摘要由CSDN通过智能技术生成

常用的数组方法

1、push()【末尾追加】

push() 方法向数组末尾添加新项目，并返回新长度。

提示：新的项目将被添加到数组的末尾。

注释：push() 方法会改变数组的长度。

let arr = [3, 6, 2, 4, 1, 5];
let result = arr.push(9);
console.log(result); // 返回数组长度7
console.log(arr); // [3, 6, 2, 4, 1, 5 ,9]

2、unshift()【头部追加】

unshift() 方法将新项添加到数组的开头，并返回新的长度。

注释：unshift() 方法会改变数组的长度。

let arr = [1, 2, 3, 4, 5, 6];
let result = arr.unshift(9);
console.log(result); // 返回数组长度7
console.log(arr); // [ 9, 1, 2, 3, 4, 5, 6]

3、pop()【删除最后一个元素】

pop() 方法移除数组的最后一个元素，并返回该元素。

注释：pop() 方法会改变数组的长度。

let arr = [1, 2, 3, 4, 5, 6];
let result = arr.pop();
console.log(result); // 返回删除的元素 6
console.log(arr); // [1, 2, 3, 4, 5]

4、shift()【删除第一个元素】

shift() 方法移除数组的第一项。

注释：shift() 方法会改变数组的长度。

注释：shift 方法的返回值是被移除的项目。

注释：shift() 方法会改变原始数组。

let arr = [1, 2, 3, 4, 5, 6];
let result = arr.shift();
console.log(result); // 返回删除的元素 1
console.log(arr); // [ 2, 3, 4, 5, 6 ]

5、splice()【删除/修改/替换】

通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。

语法：array.splice(index, howmany, item1, ....., itemX)

splice() 方法向/从数组添加/删除项目，并返回删除的项目。

注释：splice() 方法会改变原始数组。

// 将项目添加到数组：
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits); // [ 'Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango' ]
// ------------------------------------------------------------------------------------------------------------------
// 在位置 2，添加新项目，并删除 1 个项目：
let fruits2 = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 1, "Lemon", "Kiwi");
console.log(fruits2); // [ 'Banana', 'Orange', 'Apple', 'Mango' ]
// ------------------------------------------------------------------------------------------------------------------
// 在位置 2，删除 2 个项目：
let fruits3 = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
fruits.splice(2, 2);
console.log(fruits3); // [ 'Banana', 'Orange', 'Apple', 'Mango', 'Kiwi' ]

6、reverse()【翻转】

翻转

// 实现对该数组的倒排，输出[5,1,4,2,6,3]
var arr = [3, 6, 2, 4, 1, 5];
console.log(arr.reverse()); // [5,1,4,2,6,3]

7、sort()【排序】

对数组的元素进行排序

// 实现对该数组的降序排列，输出[6,5,4,3,2,1]
var arr = [3, 6, 2, 4, 1, 5];
// a-b 输出从小到大排序，b-a 输出从大到小排序。
 var A= arr.sort(function (a, b) {
  return b - a;
});
console.log(A); // [6,5,4,3,2,1]

8、join()【数组 ===> 字符串】

把数组中的元素拼接成字符串（不会改变原数组）

// join() 方法 ===> 用于把数组中的所有元素放入一个字符串。
var stringArray = ["This", "is", "Baidu", "Campus"];
console.log(stringArray.join(" ")); // This is Baidu Campus

9、filter【过滤】

filter() 方法创建一个包含通过测试的数组元素的新数组。【不会改变原数组】

请注意此函数接受 3 个参数：

项目值
项目索引
数组本身

在上面的例子中，回调函数不使用 index 和 array 参数，因此可以省略它们：

// 普通函数形式
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
console.log(over18); // [ 45, 25 ]
// ------------------------------------------------------------------------------------------------------------------
// 箭头函数形式
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter((value)=>{
    return value > 18;
});
console.log(over18); // [ 45, 25 ]

10、forEach【迭代】

forEach() 方法为每个数组元素调用一次函数（回调函数），【不会改变原数组】

注释：该函数接受 3 个参数：

项目值
项目索引
数组本身

// 普通函数形式
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
  txt = txt + value + "......";
  console.log(txt);
}
// ------------------------------------------------------------------------------------------------------------------
// 箭头函数形式
var txt2 = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach((value) => {
  txt2 = txt2 + value + "------";
  console.log(txt2);
});

在这里插入图片描述

11、map【映射】

map() 方法通过对每个数组元素执行函数来创建新数组。【不会改变原数组，得到新数组】

map() 方法不会对没有值的数组元素执行函数。

注意，该函数有 3 个参数：

项目值
项目索引
数组本身

当回调函数仅使用 value 参数时，可以省略索引和数组参数：

// 普通函数形式
var numbers1 = [1, 2, 3, 4, 5];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}
console.log(numbers2); // [ 2, 4, 6, 8, 10 ]
// ------------------------------------------------------------------------------------------------------------------
// 箭头函数形式
var numbers1 = [1, 2, 3, 4, 5];
var numbers2 = numbers1.map((value) => {
  return value * 2;
});
console.log(numbers2); // [ 2, 4, 6, 8, 10 ]

12、reduce()

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。【不会改变原数组】

reduce() 方法在数组中从左到右工作。另请参阅 reduceRight()【从右到左工作】。

reduce() 方法能够接受一个初始值

请注意此函数接受 4 个参数：

总数（初始值/先前返回的值）
项目值
项目索引
数组本身

// 确定数组中所有数字的总和：
var numbers1 =[1, 2, 3, 4, 5];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
    console.log(total); // 1，3，6，10
    console.log(value); // 2，3，4，5
  return total + value;
}
console.log(sum); // 15
---------------------------------------------------------------------------------------------------------------------
// // 箭头函数形式
var numbers1 = [1, 2, 3, 4, 5];
var sum = numbers1.reduce((total, value) => {
    console.log(total); // 1，3，6，10
    console.log(value); // 2，3，4，5 【注意：因未给定初始值，所以默认数组下标0的值为初始值 1，然后输出的是数组的每一项值】
  return total + value;
});
console.log(sum); // 15
---------------------------------------------------------------------------------------------------------------------
// reduce() 方法能够接受一个初始值：
var numbers1 = [1, 2, 3, 4, 5];
var sum = numbers1.reduce(myFunction, 100);

function myFunction(total, value) {
    console.log(total); // 100，101，103，106，110 【注意：第一个值是所给定的初始值100，然后在每个数组元素上运行函数】
    console.log(value); // 1，2，3，4，5  【注意：输出的是数组的每一项值】
  return total + value;
}
console.log(sum); // 115

13、indexOf()

indexOf() 方法在数组中搜索元素值并返回其位置。

语法：array.indexOf(item, start)

注释：第一个项目的位置是 0，第二个项目的位置是 1，以此类推。

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
console.log(a); // 0   【注意：如果项目多次出现，则返回第一次出现的位置】
var b = fruits.indexOf("Mango");
console.log(b); // 3   【第一个项目的位置是 0，第二个项目的位置是 1，以此类推】
var c = fruits.indexOf("Hello");
console.log(c); // -1  【注意：如果未找到项目，`Array.indexOf()` 返回 -1。】

14、find()

find() 方法返回通过测试函数的第一个数组元素的值。

请注意此函数接受 3 个参数：

项目值
项目索引
数组本身

// 查找（返回）大于 18 的第一个元素的值：
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
console.log(first); // 25
---------------------------------------------------------------------------------------------------------------------
// 箭头函数----简写形式
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find((value) => {
  return value > 18;
});
console.log(first); // 25

15、findIndex()

findIndex() 方法返回通过测试函数的第一个数组元素的索引。

请注意此函数接受 3 个参数：

项目值
项目索引
数组本身

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
console.log(first); // 3 【注意：查找符合条件的第一个元素的索引，如果都不符合条件，则返回-1。】

16、every()

every() 方法检查所有数组值是否通过测试。

判断数组中是不是所有的元素都符合条件，如果都符合条件返回true，否则返回false

请注意此函数接受 3 个参数：

项目值
项目索引
数组本身

// 检查所有数组值是否大于 18

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

// 如果回调函数仅使用第一个参数（值）时，可以省略其他参数：
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

17、some()

some() 方法检查某些数组值是否通过了测试。

判断数组中是不是有一个元素符合条件，如果有一个符合条件返回true，否则返回false

请注意此函数接受 3 个参数：

项目值
项目索引
数组本身

// 检查某些数组值是否大于 18：

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

18、concat() 【合并多个数组】

合并多个数组【不会改变原数组】

var array1 = ["a", "b", "c"];
var bArray = ["d", "e", "f"];
var cArray = array1.concat(bArray);
console.log(cArray); // [ 'a', 'b', 'c', 'd', 'e', 'f' ]
// 不改变原数组
console.log(array1); // [ 'a', 'b', 'c' ]
console.log(bArray); // [ 'd', 'e', 'f' ]

常用的字符串方法

注意：字符串的方法都不会改变字符串自身 ！！！！！！

1、trim()【去除前后空格】

let str = "       Runoob        ";
console.log(str.trim()); // Runoob

2、split()【字符串 ===> 数组】

把字符串按某个字符切分成数组

// split()方法 ===> 在JavaScript中用于把一个字符串分割成字符串数组，
var str = "get-element-by-id";
console.log( str.split("-")); // [ 'get', 'element', 'by', 'id' ]

3、replace()【替换】

replace() 方法在字符串中搜索值或正则表达式。

replace() 方法返回已替换值的新字符串。

replace() 方法不会更改原始字符串。

提示：如果您替换值，则只会替换第一个实例。如需替换所有实例，请使用带有 g 修饰符集的正则表达式。

// 普通替换
let text = "Visit Microsoft!";
let result = text.replace("Microsoft", "W3School");
console.log(result); // Visit W3School!


let text = "Mr Blue has a blue house and a blue car";
// 全局替换：
let result2 = text.replace(/blue/g, "red");
console.log(result2); // Mr Blue has a red house and a red car

// 全局的、不区分大小写的替换：
let result3 = text.replace(/blue/gi, "red");
console.log(result3); // Mr red has a red house and a red car

// 返回替换文本的函数：
let result = text.replace(/blue|house|car/gi, function (x) {
  return x.toUpperCase();
});
console.log(result); // Mr BLUE has a BLUE HOUSE and a BLUE CAR

4、toUpperCase【小===>大】

把字符串中的小写英文字母转成大写

let str = "abcdef";
let result = str.toUpperCase();
console.log(result); // ABCDEF

5、toLowerCase【大===>小】

把字符串中的大写英文字母转成小写

let str = "ABCDEF";
let result = str.toLowerCase();
console.log(result); // abcdef

6、slice()【提取字符串内容】

语法：string.slice(start, end)

slice() 方法提取字符串的一部分。

slice() 方法以新字符串的形式返回提取的部分，不会更改原始字符串。

start 和 end 参数规定要提取的字符串部分。

第一个位置是 0，第二个是 1，…

负数从字符串的末尾来选取。

let text = "Hello world!";

// 裁切前 5 个位置：
let result = text.slice(0, 5);
console.log(result); // Hello

// 从位置 3 到末尾：
let result2 = text.slice(3);
console.log(result2); // lo world!

// 从位置 3 到 8：
let result3 = text.slice(3, 8);
console.log(result3); // lo wo

// 仅第一个字符：
let result4 = text.slice(0, 1);
console.log(result4); // H

// 仅最后一个字符：
let result5 = text.slice(-1);
console.log(result5); // l

// 整个字符串：
let result6 = text.slice(0);
console.log(result6); // Hello world!

数值去重的方法

1、`Array.from(new Set)`

const arr = [1, 2, 2]
const result = Array.from(new Set(arr))
console.log(result) // [ 1, 2]

2、`includes`方法

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

function list(arr) {
    // 定义一个新的空数组
    const newArr = [];
    // 使用 forEach 遍历数组
    arr.forEach((item) => {
        // 使用 includes 去重
      if (!newArr.includes(item)) {
        newArr.push(item);
      }
    });
    return newArr;
  }
  const arr = [1, 2, 2];
  const result = list(arr);
  console.log(result); // [ 1, 2]

3、`map`去重

//map数据结构是es6中新出的语法，其本质也是键值对，只是其键不局限于普通对象的字符串 
let list = [1,2,2,3]
    let newList3 = [];
    let map = new Map()
    list.forEach((item) => {
     // 如果map.has指定的item不存在，那么就设置key和value 这个item就是当前map里面不存在的key,把这个item添加到新数组
     // 如果下次出现重复的item，那么map.has(item等于ture 取反 !map.has(item))  不执行
        if (!map.has(item)) {
            map.set(item,ture)
            newList3.push(item)
        }
    })
    console.log('newList3', newList3);

4、`indexOf`去重

//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1 
let list = [1,2,2,3]
    let newList4 = [];
    list.forEach((item) => {
     // 空数组newList4第一次循环没有找到匹配的item 返回-1  执行数组添加操作
     // 如果数组在第n次循环中找到了newList4数组中item 例如：item等于6 而在newList4数组中已经有9 所以indexOf就不等于-1  不执行数组添加操作
        if (newList4.indexOf(item) === -1) {
            newList4.push(item)
        }
    })
    console.log('newList4', newList4); // newList4 [ 1, 2, 3 ]

5、利用 filter

function unique(arr) {
return arr.filter(function(item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}
const arr = [1, 2, 2]
const result = unique(arr)
console.log(result) // [ 1, 2]

6、双层for循环+`splice()`去重

function unique(arr) {
    // 第一次 for 遍历
  for (vari = 0; i < arr.length; i++) {
    //   第二次 for 遍历
    for (varj = i + 1; j < arr.length; j++) {
      if (arr[i] == arr[j]) {
        //第一个等同于第二个，splice方法删除第二个
        arr.splice(j, 1);
        j--;
      }
    }
  }
  returnarr;
}

7、利用`Array.filter`和`map`对象去重（性能较高）

let map = new Map();
let list3 = [
  {
    name: "好先森1",
    id: 1,
  },
  {
    name: "好先森1",
    id: 2,
  },
  {
    name: "好先森2",
    id: 3,
  },
  {
    name: "好先森3",
    id: 3,
  },
];
// 对象数组去重
function xxx(list3, key) {
  return list3.filter(
    (item) => !map.has(item[key].toString()) && map.set(item[key].toString())
  );
}
console.log("newList8", xxx(list3, "id"));

8、利用`Array.filter`和`Array.includes` 对象数组去重

let list4 = [
  {
    name: "好先森1",
    id: 1,
  },
  {
    name: "好先森1",
    id: 2,
  },
  {
    name: "好先森2",
    id: 3,
  },
  {
    name: "好先森3",
    id: 3,
  },
];
function xxx(arr) {
  let list = [];
  return arr.filter(
    (item) => !list.includes(item.name) && list.push(item.name)
  );
}
console.log("newList9", xxx(list4));