深入剖析 JavaScript 数组和字符串的各种操作技巧

在这里插入图片描述
🙂博主：小猫娃来啦
🙂文章核心：深入剖析 JavaScript 数组和字符串的各种操作技巧

近日总结了一下js数组和字符串相关操作方法，今天输出一篇博客，进行前端有关数组字符串相关操作方法的汇总，以后如果能用上，就当字典一样来查询方法即可。本篇博客简单粗暴，直接提供语法相关例子。

参考文献：
MDN官网
如何利用splice（）和slice（）方法操作数组
js数组高阶函数——filter()方法
js数组高阶函数——includes()方法
js数组高阶函数——map()方法
CSDN的C知道

文章目录

  • 数组方法
    • push()方法
    • unshift()方法
    • shift()方法
    • pop()方法
    • reverse()方法
    • sort()方法
    • splice()方法
    • forEach()方法
  • 字符串方法
    • toString()方法
    • split()方法
    • slice()方法
    • stringify()方法
  • 数组和字符串组合方法
    • contact()方法
    • join()方法
  • 函数式方法
    • reduce()方法
    • map()方法
    • filter()方法
    • includes()方法
    • some()方法
    • every()方法

数组方法

push()方法

向数组的末尾添加一个或多个新元素，并返回修改后数组的新长度。
语法：

arr.push(element1, element2, ..., elementN)

参数：

  • element1, element2, …, elementN：要添加到数组末尾的元素。

返回值：

  • 修改后数组的新长度。

例子：

var fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 输出：['apple', 'banana', 'orange']fruits.push('grape');
console.log(fruits); // 输出：['apple', 'banana', 'orange', 'grape']fruits.push('kiwi', 'pineapple');
console.log(fruits); // 输出：['apple', 'banana', 'orange', 'grape', 'kiwi', 'pineapple']

unshift()方法

向数组的开头添加一个或多个新元素，并返回修改后数组的新长度
语法：

arr.unshift(element1, element2, ..., elementN)

参数：

  • element1, element2, …, elementN：要添加到数组开头的元素。

返回值：

  • 修改后数组的新长度。

例子：

var fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 输出：['apple', 'banana', 'orange']fruits.unshift('grape');
console.log(fruits); // 输出：['grape', 'apple', 'banana', 'orange']fruits.unshift('kiwi', 'pineapple');
console.log(fruits); // 输出：['kiwi', 'pineapple', 'grape', 'apple', 'banana', 'orange']

shift()方法

删除数组的第一个元素，并返回被删除的元素
语法：

arr.shift()

参数：无

返回值：被删除的元素。

例子：

var fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 输出：['apple', 'banana', 'orange']var shiftedElement = fruits.shift();
console.log(shiftedElement); // 输出：'apple'console.log(fruits); // 输出：['banana', 'orange']

pop()方法

删除数组的最后一个元素，并返回被删除的元素
语法：

arr.pop()

参数：无

返回值：被删除的元素。

例子：

var fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 输出：['apple', 'banana', 'orange']var poppedElement = fruits.pop();
console.log(poppedElement); // 输出：'orange'console.log(fruits); // 输出：['apple', 'banana']

reverse()方法

颠倒数组元素的顺序，即将数组中的第一个元素变为最后一个元素，将最后一个元素变为第一个元素，以此类推。
语法：

arr.reverse()

参数：无

返回值：颠倒顺序后的数组。

例子：

var fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 输出：['apple', 'banana', 'orange']var reversedArray = fruits.reverse();
console.log(reversedArray); // 输出：['orange', 'banana', 'apple']console.log(fruits); // 输出：['orange', 'banana', 'apple']（原数组也被修改）

sort()方法

对数组元素进行排序。默认情况下，它按照字符串的 Unicode 编码顺序进行排序。
语法：

arr.sort()

参数：无

返回值：排序后的数组。

例子：

var fruits = ['banana', 'apple', 'orange'];
console.log(fruits); // 输出：['banana', 'apple', 'orange']var sortedArray = fruits.sort();
console.log(sortedArray); // 输出：['apple', 'banana', 'orange']console.log(fruits); // 输出：['apple', 'banana', 'orange']（原数组也被修改）

splice()方法

在数组中添加或删除元素，并返回被删除的元素。
语法：

array.splice(startIndex, deleteCount, item1, item2, ...)

参数：

  • tartIndex：指定要进行修改的起始位置的索引。
  • deleteCount：可选参数，指定要删除的元素的数量。如果设置为0，则不删除任何元素。
  • item1, item2, …：可选参数，表示要添加到数组的新元素。可以添加任意数量的元素。

返回值：包含被删除元素的新数组。

例子：

var arr = [1, 2, 3, 4, 5];
var deletedItems = arr.splice(1, 2, 6, 7);
console.log(arr); // 输出：[1, 6, 7, 4, 5]
console.log(deletedItems); // 输出：[2, 3]

需要注意，splice()方法会改变原始数组。它会删除指定位置范围内的元素，并将新元素插入到相应的位置。如果不设置deleteCount参数，则删除从startIndex到数组末尾的所有元素。如果设置deleteCount为0，则不删除任何元素，只进行插入操作。splice()方法还会返回一个由被删除元素组成的新数组，可以根据需要将其赋值给一个变量。当没有删除任何元素时，返回的是一个空数组。

forEach()方法

对数组中的每个元素执行指定的操作。
语法：

arr.forEach(callback[, thisArg])

参数：

  • callback：一个函数，用于对数组的每个元素执行的操作。callback函数可以接受三个参数：当前元素的值、当前元素的索引和正在遍历的数组。
  • thisArg（可选）：在执行回调函数时使用的this值。

返回值：undefined

例子：

var numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(element, index, array) {console.log('Element:', element);console.log('Index:', index);console.log('Array:', array);
});

需要注意，forEach（）方法会对数组每一个元素实行一次callback方法，最终输出结果如下：

Element: 1
Index: 0
Array: [1, 2, 3, 4, 5]
Element: 2
Index: 1
Array: [1, 2, 3, 4, 5]
Element: 3
Index: 2
Array: [1, 2, 3, 4, 5]
Element: 4
Index: 3
Array: [1, 2, 3, 4, 5]
Element: 5
Index: 4
Array: [1, 2, 3, 4, 5]

在每次迭代中，回调函数都会接收当前元素的值、索引和数组本身作为参数，并执行指定的操作。可以根据需要在回调函数中进行相关的处理逻辑。注意，forEach()方法在遍历数组时是按照元素顺序依次执行的，且没有返回值。

字符串方法

toString()方法

将数组转换为字符串。
语法：

arr.toString()

参数：无

返回值：表示数组元素的字符串。

例子：

var fruits = ['apple', 'banana', 'orange'];
console.log(fruits.toString()); // 输出：'apple,banana,orange'

需要注意的是，toString()方法不会改变原始数组，它只是返回一个新的字符串表示。如果需要在操作后获取新的字符串表示，可以将toString()方法的结果赋值给一个变量

split()方法

将一个字符串分割为子字符串，并将结果存储在一个新数组中。
语法：

str.split(separator[, limit])

参数：

  • separator：字符串或正则表达式，用于指定分割子字符串的位置。可以是一个固定的字符串、一个包含多个字符的字符串，或者一个正则表达式。
  • limit（可选）：一个整数，用于限制返回的子字符串数量。

返回值：一个新数组，该数组包含分割后的子字符串。

例子：

var str = 'Hello,World,JavaScript';
var arr = str.split(',');
console.log(arr); // 输出：['Hello', 'World', 'JavaScript']

请注意，split()方法不会改变原始字符串，它只是返回一个新的数组。如果需要在操作后获取新的数组，可以将split()方法的结果赋值给一个变量。另外，如果没有提供limit参数，则将返回包含所有分割后子字符串的数组。如果提供了limit参数，但是没有足够的分割位置，则返回的数组长度可能小于limit值。

slice()方法

提取字符串或数组的一部分内容，返回一个新的字符串或数组。
语法：

str.slice(startIndex, endIndex)
arr.slice(startIndex, endIndex)

参数：

  • startIndex：指定提取起始位置的索引。如果为负数，则表示从末尾开始计算的偏移量。如果省略该参数，则从第一项（索引为0）开始提取。
  • endIndex：指定提取结束位置的索引（不包括该索引对应的元素）。如果为负数，则表示从末尾开始计算的偏移量。如果省略该参数，则提取到最后一项（索引为arr.length - 1）。

返回值：一个新的字符串或数组，包含从原始字符串或数组中提取的部分内容。

例子：

var str = "Hello, World!";
var slicedStr = str.slice(7, 12);
console.log(slicedStr); // 输出：Worldvar arr = [1, 2, 3, 4, 5];
var slicedArr = arr.slice(1, 4);
console.log(slicedArr); // 输出：[2, 3, 4]

需要注意，slice()方法不会改变原始字符串或数组，它只是返回一个新的字符串或数组。如果省略endIndex参数，则提取到最后一项。如果startIndex大于或等于endIndex，则返回空字符串或空数组。另外，如果传入负数的索引，它们会被解释为相对于字符串或数组末尾的偏移量。

stringify()方法

将JavaScript对象转换为JSON字符串。
语法：

JSON.stringify(value[, replacer[, space]])

参数：

  • value：要转换为JSON字符串的值。
  • replacer：可选参数，用于控制如何转换结果。可以是一个函数或一个数组。
    如果 replacer 是一个函数，则表示对转换后的每个对象和数组元素都会调用该函数，并将该对象的每个属性和数组的每个元素都作为参数传入该函数。可以在函数中返回一个序列化的值来替代原始值。如果返回undefined，则会删除相应的属性或元素。
    如果 replacer 是一个数组，则指定了哪些属性应包括在最终的 JSON字符串中。数组中的属性名必须是字符串或数字。
  • space：可选参数，用于控制缩进格式化输出结果。可以是一个数字来指定缩进的空格数，也可以是一个字符串（如 ‘\t’）来指定缩进字符。如果省略，则生成的 JSON 字符串没有额外的空格。

返回值：转换后得到的JSON字符串。

数组和字符串组合方法

contact()方法

将多个数组或值合并到一个新数组中
语法：

array.concat(value1, value2, ..., valueN)

参数：

  • value1, value2, …, valueN：要合并到新数组的数组或值。可以是单个数组、多个数组、单个值或多个值。

返回值：返回一个新数组，包含原始数组以及要合并的数组或值。

例子：

var arr1 = [1, 2, 3];
var arr2 = [4, 5];
var arr3 = [6];
var combined = arr1.concat(arr2, arr3, 7, 8);
console.log(combined); // 输出：[1, 2, 3, 4, 5, 6, 7, 8]

请注意，concat()方法不会修改原始数组，而是返回一个新数组。如果合并的是多维数组，则会进行浅拷贝，并将嵌套数组作为单个元素添加到新数组中。

你可以传递任意数量的数组和值给concat()方法来实现数组的合并。

join()方法

将数组中的所有元素连接成一个字符串，并返回这个字符串。
语法：

arr.join([separator])

参数：

  • separator：可选参数，指定连接数组元素时使用的分隔符。如果省略该参数，则默认使用逗号作为分隔符。

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

例子：

var arr = ['Apple', 'Banana', 'Orange'];
var result = arr.join(', ');
console.log(result); // 输出：'Apple, Banana, Orange'

需要注意的是，join()方法不会改变原始数组，而是返回一个新的字符串。

函数式方法

reduce()方法

对数组中的每个元素执行一个回调函数，并将回调函数的返回值累积成最终结果。
语法：

array.reduce(callback, initialValue)

参数：

  • callback：一个回调函数，用来处理数组中的每个元素。该函数可以接收四个参数：
    accumulator：累加器，存储回调函数的返回值。
    currentValue：当前正在处理的元素。
    currentIndex：当前正在处理的元素的索引（可选）。
    array：原始数组（可选）。

  • initialValue：可选参数，作为第一次调用回调函数时的初始值。

返回值：

  • 返回一个累计结果。

例子：

var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce(function(accumulator, currentValue) {return accumulator + currentValue;
}, 0);
console.log(sum); // 输出：15

reduce()方法通过遍历数组的每个元素，并依次应用回调函数来实现累积操作。它可以用于解决各种累积问题，如求和、求积、拼接字符串等。在回调函数中，可以根据需求自定义逻辑来处理元素并更新累加器的值。

需要注意的是，如果没有提供初始值initialValue，则将使用数组的第一个元素作为初始值，并从第二个元素开始应用回调函数。如果数组为空且没有提供初始值，则会抛出TypeError。另外，reduce()方法不会修改原始数组。

map()方法

对数组中的每个元素执行一个回调函数，并将回调函数的返回值组成一个新的数组返回。
语法：

array.map(callback)

参数：

  • callback：一个回调函数，用来处理数组中的每个元素。该函数可以接收三个参数：
          currentValue：当前正在处理的元素。
          index：当前正在处理的元素的索引（可选）。
          array：原始数组（可选）。

返回值：

  • 返回一个新的数组，包含每次调用回调函数的返回值。

例子：

var arr = [1, 2, 3, 4, 5];
var doubled = arr.map(function(currentValue) {return currentValue * 2;
});
console.log(doubled); // 输出：[2, 4, 6, 8, 10]

map()方法不会修改原始数组，而是返回一个新的数组。新数组的元素数量和原始数组相同，只是每个元素经过回调函数处理后得到的新值。

filter()方法

对数组中的每个元素执行一个回调函数，并根据回调函数的返回值来筛选出满足条件的元素组成一个新的数组返回。
语法：

array.filter(callback)

参数：

  • callback：一个回调函数，用来处理数组中的每个元素。该函数可以接收三个参数：
          currentValue：当前正在处理的元素。
          index：当前正在处理的元素的索引（可选）。
          array：原始数组（可选）。

返回值：

  • 返回一个新的数组，包含满足回调函数条件的元素。

例子：

var arr = [1, 2, 3, 4, 5];
var evenNumbers = arr.filter(function(currentValue) {return currentValue % 2 === 0;
});
console.log(evenNumbers); // 输出：[2, 4]

filter()方法通过遍历数组的每个元素，并依次应用回调函数来筛选出满足条件的元素。在回调函数中，可以根据需求自定义逻辑来判断元素是否满足条件。如果回调函数返回true，则表示该元素满足条件，会被保留在新数组中；若返回false，则表示该元素不满足条件，会被过滤掉。

filter()方法不会修改原始数组，而是返回一个新的数组。新数组中只包含满足条件的元素，其顺序与原始数组保持一致。如果没有满足条件的元素，则返回一个空数组。

includes()方法

判断数组是否包含某个指定的元素，并返回一个布尔值。
语法:

array.includes(searchElement, fromIndex)

参数：

  • searchElement：要搜索的元素。
  • fromIndex（可选）：开始搜索的索引，默认为 0。如果指定的索引值为负数，则从数组末尾开始搜索。

返回值：

  • 如果数组中包含指定的元素，则返回true；否则返回false。

例子：

var arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // 输出：true
console.log(arr.includes(6)); // 输出：false
console.log(arr.includes(2, 2)); // 输出：false

includes()方法对于数组中的每个元素都会进行严格相等（===）的比较。如果数组中有NaN，则includes()方法也能正确判断。

some()方法

判断数组中是否至少有一个元素满足指定的条件，并返回一个布尔值。
语法：

array.some(callback, thisArg)

参数：

  • callback：一个回调函数，用于对数组的每个元素进行测试。该回调函数接受三个参数：
          currentValue：当前正在测试的元素。
          index（可选）：当前正在测试的元素的索引。
          array（可选）：调用some()方法的数组。
  • thisArg（可选）：执行回调函数时使用的 this 值。

返回值：

  • 如果回调函数对任一元素返回true，则返回值为true；如果所有元素回调函数都返回false，则返回值为false。

例子：

var arr = [1, 2, 3, 4, 5];
var result1 = arr.some(function(currentValue) {return currentValue > 3;
});
console.log(result1); // 输出：truevar result2 = arr.some(function(currentValue) {return currentValue > 5;
});
console.log(result2); // 输出：false

注意：some()方法在找到满足条件的元素后就会停止遍历，不会继续检查剩余的元素。如果数组为空，则返回结果为false。

every()方法

判断数组中的所有元素是否都满足指定的条件，并返回一个布尔值。
语法：

array.every(callback, thisArg)

参数：

  • callback：一个回调函数，用于对数组的每个元素进行测试。该回调函数接受三个参数：
          currentValue：当前正在测试的元素。
          index（可选）：当前正在测试的元素的索引。
          array（可选）：调用every()方法的数组。
  • thisArg（可选）：执行回调函数时使用的 this 值。

返回值：

  • 如果所有元素都满足回调函数的条件，则返回值为true；如果至少有一个元素不满足条件，则返回值为false。

例子：

var arr = [1, 2, 3, 4, 5];
var result1 = arr.every(function(currentValue) {return currentValue > 0;
});
console.log(result1); // 输出：truevar result2 = arr.every(function(currentValue) {return currentValue > 3;
});
console.log(result2); // 输出：false

every()方法在找到不满足条件的元素后就会停止遍历，不会继续检查剩余的元素。如果数组为空，则返回结果为true。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/18917.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

前端｜CSS（二）

前端｜CSS（二）

参考视频：黑马程序员前端CSS3基础教程，前端必备基础 目录 📚CSS 布局的三种机制 🐇普通流 🐇浮动 ⭐️浮动介绍 ⭐️浮动(float)的应用 ⭐️浮动(float)的扩展 ⭐️清除浮动 🐇定位 ⭐️定位 ⭐️…
阅读更多...
渲染流程（下）：HTML、CSS和JavaScript，是如何变成页面的？

渲染流程（下）：HTML、CSS和JavaScript，是如何变成页面的？

在上篇文章中，我们介绍了渲染流水线中的 DOM 生成、样式计算和布局三个阶段，那今天我们接着讲解渲染流水线后面的阶段。 这里还是先简单回顾下上节前三个阶段的主要内容：在 HTML 页面内容被提交给渲染引擎之后，渲染引擎首先将 HTML 解析为浏览器可以理解的 DOM；然后根据 …
阅读更多...
uniapp快速开发小程序全流程

uniapp快速开发小程序全流程

uniapp快速开发小程序全流程 完整项目代码：https://gitee.com/Zifasdfa/ziyi-app 欢迎fork与star 1 项目效果及环境准备 1.1 项目效果 本文主要使用uniapp实现一个简单的app应用 1.2 环境准备&项目初始化 ①node环境：去node.js官网下载稳定版的nod…
阅读更多...
BATJ 面试 Java 岗：精选 1200+ 面试题及答案

BATJ 面试 Java 岗：精选 1200+ 面试题及答案

Z 认为，对于 Java 面试以及进阶的最佳学习方法莫过于刷题博客书籍总结，前三者 LZ 将淋漓尽致地挥毫于这篇文章中，至于总结在于个人，实际上越到后面你会发现面试并不难，其次就是在刷题的过程中有没有去思考，…
阅读更多...
Fiddler抓取app HTTPS请求

Fiddler抓取app HTTPS请求

一、电脑和手机连接同一WIFI cmd->ipconfig，查看电脑当前IP地址为192.168.101.48 二、配置Fiddler Options选项勾选Allow remote computers to connect。 安装证书 勾选抓取HTTPS请求 三、手机端配置代理 手机端连接wifi，手动配置代理。 主机名&…
阅读更多...
【GPT模型】遥感云大数据在灾害、水体与湿地领域中的应用

【GPT模型】遥感云大数据在灾害、水体与湿地领域中的应用

近年来遥感技术得到了突飞猛进的发展，航天、航空、临近空间等多遥感平台不断增加，数据的空间、时间、光谱分辨率不断提高，数据量猛增，遥感数据已经越来越具有大数据特征。遥感大数据的出现为相关研究提供了前所未有的机遇&#xf…
阅读更多...
Docker笔记

Docker笔记

Docker概述 Docker为什么出现 一款产品从开发到上线，从操作系统，到运行环境，再到应用配置。作为开发运维之间的协作我们需要关心很多东西，这也是很多互联网公司都不得不面对的问题，特别是各种版本的迭代之后&#xf…
阅读更多...
window安装MongoDB

window安装MongoDB

安装直接先去官网下载 Download MongoDB Community Server | MongoDB 安装后如下，我们直接双击运行， 这里记得选下面(可以自己选择安装盘符位置)，上面第一个会自动帮你安装到C盘，然后选择下一步 ，这里勾选就会选择去自…
阅读更多...
MedNeXt的一些问题集锦

MedNeXt的一些问题集锦

归纳偏差是一种关于机器学习算法的目标函数的假设，也就是目标函数评分的标准。 归纳偏差是指模型更容易学习到训练数据中的局部和表面特征，而较难捕捉全局和抽象特征。 scalable 可扩展的 network-wide优势？？？ 深度监…
阅读更多...
什么是数据编织，与数据中台、数据湖、数据治理、DataOps有何关系

什么是数据编织，与数据中台、数据湖、数据治理、DataOps有何关系

​数据领域的新概念真是层出不穷呀~数据中台的火刚熄灭，又看到人家说“数据治理的下一站是DataOps”，“数据编织是数据中台的一下站”。作为一个好学的的数据人，让我看看“数据编织”又是个什么鬼，到底是一场概念的炒作&#xff0…
阅读更多...
Unity VR 开发教程 OpenXR+XR Interaction Toolkit（八）手指触控 Poke Interaction

Unity VR 开发教程 OpenXR+XR Interaction Toolkit（八）手指触控 Poke Interaction

文章目录 📕教程说明📕XR Poke Interactor📕与 UI 进行触控交互⭐添加 Tracked Device Graphic Raycaster 和 XR UI Input Module 让 UI 可被交互 📕与物体进行交互⭐XR Simple Interactable⭐XR Poke Filter 往期回顾&#xff1a…
阅读更多...
msvcp100.dll丢失怎样修复（一键修复方法）

msvcp100.dll丢失怎样修复（一键修复方法）

msvcp100.dll是一个动态链接库文件，它是Microsoft Visual Studio 2010的一部分。这个文件主要包含了C的标准库函数，可以被应用程序调用以完成特定的功能。当系统中缺少或损坏了msvcp100.dll文件时，就会出现“msvcp100.dll丢失”的错误提示。 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023