浅析JS中Array对象一些操作方法(附代码)

之前的文章《一文讲解JS中Object对象一些操作方法(分享)》中,给大家了解了JS中Object对象一些操作方法。下面本篇文章给大家了解JS中Array对象一些操作方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有帮助。

浅析JS中Array对象一些操作方法(附代码)

javascriptArray一些高效的操作方法

Array.from()

方法从一个类似数组或可迭代对象中创建一个新的数组实例。

console.log(Array.from("foo"));// expected output: Array ["f", "o", "o"]console.log(Array.from([1, 2, 3], (x) => x + x));// expected output: Array [2, 4, 6]

Array.isArray()

用于确定传递的值是否是一个Array

Array.isArray([1, 2, 3]);// trueArray.isArray({ foo: 123 });// falseArray.isArray("foobar");// falseArray.isArray(undefined);// false

Array.obsolete()

用于异步监视数组发生的变化

已被废弃 语法:Array.observe(arr, callback)

Array.of()

方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。

Array.of(7); // [7]Array.of(1, 2, 3); // [1, 2, 3]Array(7); // [ , , , , , , ]Array(1, 2, 3); // [1, 2, 3]//es5if (!Array.of) {  Array.of = function () {    return Array.prototype.slice.call(arguments);  };}

Array.concat()

方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

var array1 = ["a", "b", "c"];var array2 = ["d", "e", "f"];console.log(array1.concat(array2));// expected output: Array ["a", "b", "c", "d", "e", "f"]

Array.copyWithin()

方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,而不修改其大小。

var array1 = [1, 2, 3, 4, 5];// place at position 0 the element between position 3 and 4console.log(array1.copyWithin(0, 3, 4));// expected output: Array [4, 2, 3, 4, 5]// place at position 1 the elements after position 3console.log(array1.copyWithin(1, 3));// expected output: Array [4, 4, 5, 4, 5]

Array.entries()

方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。

var array1 = ["a", "b", "c"];var iterator1 = array1.entries();console.log(iterator1.next().value);// expected output: Array [0, "a"]console.log(iterator1.next().value);// expected output: Array [1, "b"]

Array.every()

方法测试数组的所有元素是否都通过了指定函数的测试。

var array1 = [1, 30, 39, 29, 10, 13];console.log(array1.every((x) => x < 40));//out true

Array.fill()

方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止

var array1 = [1, 2, 3, 4];// fill with 0 from position 2 until position 4console.log(array1.fill(0, 2, 4));// expected output: [1, 2, 0, 0]// fill with 5 from position 1console.log(array1.fill(5, 1));// expected output: [1, 5, 5, 5]console.log(array1.fill(6));// expected output: [6, 6, 6, 6]

Array.filter()

方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素。

var words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];const result = words.filter((word) => word.length > 6);console.log(result);// expected output: Array ["exuberant", "destruction", "present"]

Array.find()

方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined

var array1 = [5, 12, 8, 130, 44];var found = array1.find((x) => x > 10);console.log(found);// expected output: 12

Array.findIndex()

方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1

var array1 = [5, 12, 8, 130, 44];var index = array1.findIndex((x) => x > 10);console.log(index);// expected output: 1

Array.flat()

方法会递归到指定深度将所有子数组连接,并返回一个新数组。

var arr1 = [1, 2, [3, 4]];arr1.flat();// [1, 2, 3, 4]var arr2 = [1, 2, [3, 4, [5, 6]]];arr2.flat();// [1, 2, 3, 4, [5, 6]]var arr3 = [1, 2, [3, 4, [5, 6]]];arr3.flat(2);// [1, 2, 3, 4, 5, 6]var arr4 = [1, 2, , 4, 5];arr4.flat();// [1, 2, 4, 5]

Array.flatMap()

方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与map和深度值1flat几乎相同,但flatMap通常在合并成一种方法的效率稍微高一些。

var arr1 = [1, 2, 3, 4];arr1.map((x) => [x * 2]);// [[2], [4], [6], [8]]arr1.flatMap((x) => [x * 2]);// [2, 4, 6, 8]// only one level is flattenedarr1.flatMap((x) => [[x * 2]]);// [[2], [4], [6], [8]]

Array.forEach()

方法对数组的每个元素执行一次提供的函数。

var array1 = ["a", "b", "c"];array1.forEach((value, index, arr) => console.log(value));// output 'a'// output 'b'// output 'c'

Array.includes(value,index)

方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回true,否则返回false

var array1 = [1, 2, 3];console.log(array1.includes(2));// expected output: truevar pets = ["cat", "dog", "bat"];console.log(pets.includes("cat"));// expected output: trueconsole.log(pets.includes("at"));// expected output: false

Array.indexOf()

方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1

/var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];console.log(beasts.indexOf('bison'));// expected output: 1// start from index 2console.log(beasts.indexOf('bison', 2));// expected output: 4console.log(beasts.indexOf('giraffe'));// expected output: -1

Array.join()

方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符

var elements = ["Fire", "Wind", "Rain"];console.log(elements.join());// expected output: Fire,Wind,Rainconsole.log(elements.join(""));// expected output: FireWindRainconsole.log(elements.join("-"));// expected output: Fire-Wind-Rain//数组[1,2,3,3,4,5]求和eval([1, 2, 3, 3, 4, 5].join("+")) = 18;

Array.keys()

方法返回一个新的Array迭代器,它包含数组中每个索引的键。

代码小浣熊 代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手,覆盖软件需求分析、架构设计、代码编写、软件测试等环节

代码小浣熊 51 查看详情 代码小浣熊

var array1 = ["a", "b", "c"];var iterator = array1.keys();for (let key of iterator) {  console.log(key); // expected output: 0 1 2}

Array.lastIndexOf(item,index)

方法返回指定元素(也即有效的JavaScript值或变量)在数组中的最后一个的索引,如果不存在则返回-1。从数组的后面向前查找,从fromIndex处开始。

var animals = ["Dodo", "Tiger", "Penguin", "Dodo"];console.log(animals.lastIndexOf("Dodo"));// expected output: 3console.log(animals.lastIndexOf("Tiger"));// expected output: 1

Array.map()

方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

var array1 = [1, 4, 9, 16];// pass a function to mapconst map1 = array1.map((x) => x * 2);console.log(map1);// expected output: Array [2, 8, 18, 32]

Array.pop()

方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

var plants = ["broccoli", "cauliflower", "cabbage", "kale", "tomato"];console.log(plants.pop());// expected output: "tomato"console.log(plants);// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]plants.pop();console.log(plants);// expected output: Array ["broccoli", "cauliflower", "cabbage"]

Array.push()

方法将一个或多个元素添加到数组的末尾,并返回新数组的长度。

var animals = ["pigs", "goats", "sheep"];console.log(animals.push("cows"));// expected output: 4console.log(animals);// expected output: Array ["pigs", "goats", "sheep", "cows"]animals.push("chickens");console.log(animals);// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens"]

Array.reduce()

方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。

const array1 = [1, 2, 3, 4];const reducer = (accumulator, currentValue) => accumulator + currentValue;// 1 + 2 + 3 + 4console.log(array1.reduce(reducer));// expected output: 10// 5 + 1 + 2 + 3 + 4console.log(array1.reduce(reducer, 5));// expected output: 15

Array.reduceRight()

方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。

const array1 = [  [0, 1],  [2, 3],  [4, 5],].reduceRight((accumulator, currentValue) => accumulator.concat(currentValue));console.log(array1);// expected output: Array [4, 5, 2, 3, 0, 1]

Array.reverse()

方法将数组中元素的位置颠倒。

var array1 = ["one", "two", "three"];console.log("array1: ", array1);// expected output: Array ['one', 'two', 'three']var reversed = array1.reverse();console.log("reversed: ", reversed);// expected output: Array ['three', 'two', 'one']/* Careful: reverse is destructive. It also changesthe original array */console.log("array1: ", array1);// expected output: Array ['three', 'two', 'one']

Array.shift()

方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

var array1 = [1, 2, 3];var firstElement = array1.shift();console.log(array1);// expected output: Array [2, 3]console.log(firstElement);// expected output: 1

Array.slice()

方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。

var animals = ["ant", "bison", "camel", "duck", "elephant"];console.log(animals.slice(2));// expected output: Array ["camel", "duck", "elephant"]console.log(animals.slice(2, 4));// expected output: Array ["camel", "duck"]console.log(animals.slice(1, 5));// expected output: Array ["bison", "camel", "duck", "elephant"]

Array.some()

方法测试数组中的某些元素是否通过由提供的函数实现的测试。

var array = [1, 2, 3, 4, 5];var even = function (element) {  // checks whether an element is even  return element % 2 === 0;};console.log(array.some(even));// expected output: true

Array.sort()

方法用原地算法对数组的元素进行排序,并返回数组。排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。

var months = ["March", "Jan", "Feb", "Dec"];months.sort();console.log(months);// expected output: Array ["Dec", "Feb", "Jan", "March"]var array1 = [1, 30, 4, 21];array1.sort();console.log(array1);// expected output: Array [1, 21, 30, 4]

Array.splice()

方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

var months = ["Jan", "March", "April", "June"];months.splice(1, 0, "Feb");// 增console.log(months);// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']months.splice(4, 1, "May");// 改console.log(months);// expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']// 删months.splice(4, 1);console.log(months);//output: ["Jan", "Feb", "March", "April"]

Array.toLocaleString()

返回一个字符串表示数组中的元素。数组中的元素将使用各自的toLocaleString方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 “,“)隔开。

var array1 = [1, "a", new Date("21 Dec 1997 14:12:00 UTC")];var localeString = array1.toLocaleString("en", { timeZone: "UTC" });console.log(localeString);// expected output: "1,a,12/21/1997, 2:12:00 PM",// This assumes "en" locale and UTC timezone - your results may varyvar prices = ["¥7", 500, 8123, 12];prices.toLocaleString("ja-JP", { style: "currency", currency: "JPY" });// "¥7,¥500,¥8,123,¥12"

Array.toSource()

返回一个字符串,代表该数组的源代码。

该特性是非标准的,请尽量不要在生产环境中使用它!

var alpha = new Array("a", "b", "c");alpha.toSource(); //返回["a", "b", "c"]

Array.toString()

返回一个字符串,表示指定的数组及其元素。

var array1 = [1, 2, "a", "1a"];console.log(array1.toString());// expected output: "1,2,a,1a"

Array.unshift()

方法将一个或多个元素添加到数组的开头,并返回新数组的长度。

var array1 = [1, 2, 3];console.log(array1.unshift(4, 5));// expected output: 5console.log(array1);// expected output: Array [4, 5, 1, 2, 3]

Array.values()

方法返回一个新的Array Iterator对象,该对象包含数组每个索引的值。

const array1 = ["a", "b", "c"];const iterator = array1.values();for (const value of iterator) {  console.log(value);  // expected output: "a" "b" "c"}

推荐学习:JavaScript视频教程

以上就是浅析JS中Array对象一些操作方法(附代码)的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/561648.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
迟来的荣耀!策划亲自下场测试新服
上一篇 2025年11月10日 01:22:12
提升Windows 10性能与安全性的最佳助手:电脑管家全解析
下一篇 2025年11月10日 01:22:17

相关推荐

  • 修复Django电商项目中AJAX过滤产品列表图片不显示问题

    在Django电商项目中,当使用AJAX动态加载过滤后的产品列表时,常遇到图片无法正常显示的问题。这通常是由于前端模板中图片加载方式(如data-setbg属性结合JavaScript库)与AJAX动态内容更新机制不兼容所致。解决方案是直接在AJAX返回的HTML中使用标准的标签来渲染图片,确保浏览…

    2026年5月10日
    000
  • 开源免费PHP工具 PHP开发效率提升利器

    推荐开源免费PHP开发工具以提升效率:VS Code、Sublime Text轻量高效,PhpStorm专业强大;调试用Xdebug、Kint、Ray;依赖管理选Composer;代码质量工具包括PHPStan、Psalm、PHP_CodeSniffer;数据库管理可用%ignore_a_1%MyA…

    2026年5月10日
    000
  • Golang JSON序列化:控制敏感字段暴露的最佳实践

    本教程探讨golang中如何高效控制结构体字段在json序列化时的可见性。当需要将包含敏感信息的结构体数组转换为json响应时,通过利用`encoding/json`包提供的结构体标签,特别是`json:”-“`,可以轻松实现对特定字段的忽略,从而避免敏感数据泄露,确保api…

    2026年5月10日
    000
  • 修复点击时按钮抖动:CSS垂直对齐实践

    本文探讨了在Web开发中,交互式按钮(如播放/暂停按钮)在点击时发生意外垂直位移的问题。通过分析CSS样式变化对元素布局的影响,我们发现这是由于按钮不同状态下的边框样式和内边距改变,以及默认的垂直对齐行为共同作用所致。核心解决方案是利用CSS的vertical-align属性,将其设置为middle…

    2026年5月10日
    100
  • 使用 Jupyter Notebook 进行探索性数据分析

    Jupyter Notebook通过单元格实现代码与Markdown结合,支持数据导入(pandas)、清洗(fillna)、探索(matplotlib/seaborn可视化)、统计分析(describe/corr)和特征工程,便于记录与分享分析过程。 Jupyter Notebook 是进行探索性…

    2026年5月10日
    000
  • 如何在HTML中插入表单元素_HTML表单控件与输入类型使用指南

    HTML表单通过标签构建,包含action和method属性定义数据提交目标与方式,常用input类型如text、password、email等适配不同输入需求,配合label、required、placeholder提升可用性,结合textarea、select、button等控件实现完整交互,是…

    2026年5月10日
    100
  • 前端缓存策略与JavaScript存储管理

    根据数据特性选择合适的存储方式并制定清晰的读写与清理逻辑,能显著提升前端性能;合理运用Cookie、localStorage、sessionStorage、IndexedDB及Cache API,结合缓存策略与定期清理机制,可在保证用户体验的同时避免安全与性能隐患。 前端缓存和JavaScript存…

    2026年5月10日
    200
  • HTML5网页如何实现手势操作 HTML5网页移动端交互的处理技巧

    首先利用原生touch事件实现滑动判断,再通过preventDefault解决滚动冲突,接着引入Hammer.js处理复杂手势,最后通过优化点击区域、避免事件冲突和增加视觉反馈提升体验。 在移动端浏览器中,HTML5网页可以通过触摸事件实现手势操作,提升用户体验。虽然原生JavaScript提供了基…

    2026年5月10日
    000
  • 深入理解 Express.js 中 next() 参数的作用与中间件机制

    本文深入探讨 express.js 中间件函数中的 `next()` 参数。它负责将控制权传递给请求-响应周期中的下一个中间件或路由处理程序。文章将详细解释 `next()` 的工作原理、中间件的注册与执行顺序,以及不正确使用 `next()` 可能导致请求挂起的风险,并通过代码示例和实际应用场景,…

    2026年5月10日
    000
  • JavaScript 闭包:理解闭包原理与内存泄漏问题

    闭包是函数访问其外部作用域变量的能力,即使外部函数已执行完毕。如 inner 函数引用 outer 中的 count,形成闭包,使变量持久存在。闭包本身无害,但可能因延长变量生命周期导致内存泄漏,例如事件监听器引用大对象时。若未及时清理 DOM 事件或定时器,闭包会阻止垃圾回收,造成内存占用过高。解…

    2026年5月10日
    100
  • JavaScript 动态菜单点击高亮效果实现教程

    本教程详细介绍了如何使用 JavaScript 实现动态菜单的点击高亮功能。通过事件委托和状态管理,当用户点击菜单项时,被点击项会高亮显示(绿色),同时其他菜单项恢复默认样式(白色)。这种方法避免了不必要的DOM操作,提高了性能和代码可维护性,确保了无论点击方向如何,功能都能稳定运行。 动态菜单高亮…

    2026年5月10日
    200
  • JavaScript函数中插入加载动画(Spinner)的正确方法

    本文旨在解决在JavaScript函数中插入加载动画(Spinner)时遇到的异步问题。通过引入async/await和Promise.all,确保在数据处理完成前后正确显示和隐藏加载动画,提升用户体验。我们将提供两种实现方案,并详细解释其原理和优势。 在Web开发中,当执行耗时操作时,显示加载动画…

    2026年5月10日
    100
  • Golang空接口如何应用在项目中

    空接口可用于接收任意类型值,常见于日志函数、通用数据结构、JSON动态解析及配置驱动逻辑,提升代码灵活性,但需配合类型断言确保安全,避免滥用以降低维护成本。 空接口 interface{} 在 Go 语言中是一个非常灵活的类型,它可以存储任何类型的值。虽然它牺牲了一部分类型安全,但在实际项目中合理使…

    2026年5月10日
    100
  • 动态更新圆形进度条:JavaScript成绩计算器集成指南

    本文档旨在指导开发者如何将JavaScript成绩计算系统与动态圆形进度条集成,实现可视化展示平均成绩。我们将详细讲解如何修改现有的JavaScript代码,使其在计算出平均分后,能够动态更新圆形进度条的进度,从而提供更直观的用户体验。本文档包含详细的代码示例和注意事项,帮助开发者轻松实现这一功能。…

    2026年5月10日
    000
  • Golang使用Protobuf定义接口与消息格式

    Protobuf通过字段编号实现兼容性,新增字段可忽略、删除字段可保留编号,确保新旧版本互操作,支持服务独立演进。 在Golang项目中,利用Protobuf定义接口和消息格式,本质上是为服务间通信构建了一套高效、类型安全且跨语言的契约。它让数据结构清晰可见,RPC调用标准化,极大地简化了分布式系统…

    2026年5月10日
    000
  • Go语言接口与切片:如何识别和操作[]interface{}

    本文将深入探讨Go语言中如何识别和操作`[]interface{}`类型的切片。我们将介绍类型断言(Type Assertion)的关键作用,并通过`switch`语句演示如何安全地检测`[]interface{}`类型,并进而遍历其内部元素。文章旨在提供清晰的示例代码和专业指导,帮助开发者有效地处…

    2026年5月10日
    000
  • JavaScript计算器开发:解决数值显示与初始化问题

    本教程深入探讨了使用JavaScript构建计算器时常见的数值显示异常问题,特别是由于类属性未初始化导致的`Cannot read properties of undefined`错误。我们将详细分析问题根源,并通过在构造函数中调用初始化方法来解决该问题,同时优化显示逻辑,确保计算器功能稳定且界面显…

    2026年5月10日
    000
  • 使用 Ajax 和 FormData 实现文件上传及文本数据提交的完整教程

    本文旨在解决在使用 Ajax 和 FormData 进行文件上传时,遇到的 $_POST 和 $_FILES 为空的问题。通过详细的代码示例和解释,我们将展示如何正确地构建 FormData 对象,并通过 Ajax 将文件和文本数据发送到服务器端,同时避免常见的错误配置,确保数据能够成功地被 PHP…

    2026年5月10日
    000
  • JavaScript 高效判断页面所有复选框状态的技巧与实践

    本文旨在提供一套高效且专业的javascript方法,用于判断网页中所有复选框的选中状态。我们将探讨如何利用`array.some()`快速确定是否有未选中的复选框(进而判断是否全部选中),以及如何使用`array.filter()`统计选中和未选中的复选框数量。通过优化dom元素选择和数组操作,提…

    2026年5月10日
    000
  • 解决Persistent UTM代码导致链接意外添加问号的问题

    本文旨在解决在使用JavaScript持久化UTM参数时,链接在没有UTM参数的情况下被意外添加问号的问题。通过分析问题代码,找出错误原因,并提供修正后的代码示例,确保只有当存在UTM参数时,链接才会被添加相应的参数。同时,强调了代码的健壮性和可维护性,避免不必要的修改和潜在的错误。 在使用Java…

    2026年5月10日
    200

发表回复

登录后才能评论
关注微信