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

简介: 深入剖析 JavaScript 数组和字符串的各种操作技巧(上)


🙂博主:小猫娃来啦

🙂文章核心:深入剖析 JavaScript 数组和字符串的各种操作技巧

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

参考文献:MDN官网

如何利用splice()和slice()方法操作数组

js数组高阶函数——filter()方法

js数组高阶函数——includes()方法

js数组高阶函数——map()方法

CSDN的C知道

文章目录

数组方法

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()方法在遍历数组时是按照元素顺序依次执行的,且没有返回值。

相关文章
|
3月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
124 63
|
1月前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
56 13
|
3月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
45 2
|
4月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
62 2
|
4月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
77 3
|
4月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
67 4
|
4月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
71 1
|
4月前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
48 0
|
4月前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
61 0
|
9月前
|
JavaScript 前端开发
JS将两个数组和合并成数组包对象格式的方法
JS将两个数组和合并成数组包对象格式的方法
117 0

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    52
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62