浅析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:21:52
下一篇 2025年11月10日 01:27:09

相关推荐

  • 深入理解CSS框架与JS之间的关系

    深入理解CSS框架与JS之间的关系 在现代web开发中,CSS框架和JavaScript (JS) 是两个常用的工具。CSS框架通过提供一系列样式和布局选项,可以帮助我们快速构建美观的网页。而JS则提供了一套功能强大的脚本语言,可以为网页添加交互和动态效果。本文将深入探讨CSS框架和JS之间的关系,…

    2025年12月24日
    000
  • 项目实践:如何结合CSS和JavaScript打造优秀网页的经验总结

    项目实践:如何结合CSS和JavaScript打造优秀网页的经验总结 随着互联网的快速发展,网页设计已经成为了各行各业都离不开的一项技能。优秀的网页设计可以给用户留下深刻的印象,提升用户体验,增加用户的黏性和转化率。而要做出优秀的网页设计,除了对美学的理解和创意的运用外,还需要掌握一些基本的技能,如…

    2025年12月24日
    200
  • 学完HTML和CSS之后我应该做什么?

    网页开发是一段漫长的旅程,但是掌握了HTML和CSS技能意味着你已经赢得了一半的战斗。这两种语言对于学习网页开发技能来说非常重要和基础。现在不可或缺的是下一个问题,学完HTML和CSS之后我该做什么呢? 对这些问题的答案可以分为2-3个部分,你可以继续练习你的HTML和CSS编码,然后了解在学习完H…

    2025年12月24日
    000
  • 聊聊怎么利用CSS实现波浪进度条效果

    本篇文章给大家分享css 高阶技巧,介绍一下如何使用css实现波浪进度条效果,希望对大家有所帮助! 本文是 CSS Houdini 之 CSS Painting API 系列第三篇。 现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 在上两篇中,我们…

    2025年12月24日 好文分享
    200
  • 巧用距离、角度及光影制作炫酷的 3D 文字特效

    如何利用 css 实现3d立体的数字?下面本篇文章就带大家巧用视觉障眼法,构建不一样的 3d 文字特效,希望对大家有所帮助! 最近群里有这样一个有意思的问题,大家在讨论,使用 CSS 3D 能否实现如下所示的效果: 这里的核心难点在于,如何利用 CSS 实现一个立体的数字?CSS 能做到吗? 不是特…

    2025年12月24日 好文分享
    000
  • CSS高阶技巧:实现图片渐隐消的多种方法

    将专注于实现复杂布局,兼容设备差异,制作酷炫动画,制作复杂交互,提升可访问性及构建奇思妙想效果等方面的内容。 在兼顾基础概述的同时,注重对技巧的挖掘,结合实际进行运用,欢迎大家关注。 正文从这里开始。 在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: 立即学习“前端…

    2025年12月24日 好文分享
    000
  • css实现登录按钮炫酷效果(附代码实例)

    今天在网上看到一个炫酷的登录按钮效果;初看时感觉好牛掰;但是一点一点的抛开以后发现,并没有那么难;我会将全部代码贴出来;如果有不对的地方,大家指点一哈。 分析 我们抛开before不谈的话;其实原理和就是通过背景大小以及配合位置达到颜色渐变的效果。 text-transform: uppercase…

    2025年12月24日
    000
  • CSS flex布局属性:align-items和align-content的区别

    在用flex布局时,发现有两个属性功能好像有点类似:align-items和align-content,乍看之下,它们都是用于定义flex容器中元素在交叉轴(主轴为flex-deriction定义的方向,默认为row,那么交叉轴跟主轴垂直即为column,反之它们互调,flex基本的概念如下图所示)…

    2025年12月24日 好文分享
    000
  • 手把手教你用 transition 实现短视频 APP的点赞动画

    怎么使用纯 css 实现有趣的点赞动画?下面本篇文章就带大家了解一下巧妙借助 transition实现点赞动画的方法,希望对大家有所帮助! 在各种短视频界面上,我们经常会看到类似这样的点赞动画: 非常的有意思,有意思的交互会让用户更愿意进行互动。 那么,这么有趣的点赞动画,有没有可能使用纯 CSS …

    2025年12月24日 好文分享
    000
  • 巧用CSS实现各种奇形怪状按钮(附代码)

    本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮,希望对大家有所帮助! 怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢? 本文基于一些高频出现在设计稿中的,使用 css 实现稍微有点难度和技巧性的按钮,讲解使用 css 如何尽可能的实现它们。【推荐学习:…

    2025年12月24日 好文分享
    000
  • 原来利用纯CSS也能实现文字轮播与图片轮播!

    怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯css也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助! 今天,分享一个实际业务中能够用得上的动画技巧。【推荐学习:css视频教程】 巧用逐帧动画,配合补间动画实现一个无限循环的轮播效果,像是这样: 立即学习“前端…

    2025年12月24日 好文分享
    000
  • HTML+CSS+JS实现雪花飘扬(代码分享)

    使用html+css+js如何实现下雪特效?下面本篇文章给大家分享一个html+css+js实现雪花飘扬的示例,希望对大家有所帮助。 很多南方的小伙伴可能没怎么见过或者从来没见过下雪,今天我给大家带来一个小Demo,模拟了下雪场景,首先让我们看一下运行效果 可以点击看看在线运行:http://hai…

    2025年12月24日 好文分享
    500
  • 总结整理:需要避坑的五大常见css错误(收藏)

    本篇文章给大家总结5个最常见的css错误,并介绍一下避坑方法,希望对大家有所帮助! 正如我们今天所知,CSS语言是web的一个重要组成部分。它使我们有能力绘制元素在屏幕、网页或其他媒体中的展示方式。 它简单、强大,而且是声明式的。我们可以很容易地实现复杂的事情,如暗黑/光明模式。然而,对它有很多误解…

    2025年12月24日
    000
  • CSS+JS实现爱心点赞按钮(代码示例)

    本篇文章给大家介绍一下css+js实现一个“爱之满满”点赞按钮的方法,希望对大家有所帮助! 前段时间在看一档说唱节目,被里面的一个说唱歌手JBcob的爱之满满这句词给洗脑了。 于是这次给大家带来一个爱之满满的点赞按钮,让大家在点赞的同时还能感受到被爱包裹的感觉。 立即学习“前端免费学习笔记(深入)”…

    2025年12月24日 好文分享
    000
  • 让人眼前一亮的五个前端小技巧

    为了让大家编程更轻松一些,本挑选一些有用的但相对比较少见有用的技巧。废话不多说,开车了。 1.快速隐藏 要隐藏一个DOM元素,不需要JavaScript。一个原生的HTML属性就足以隐藏。其效果类似于添加一个style display: none;。 该段落在页面上是不可见的,它对HTML是隐藏的。…

    2025年12月24日
    000
  • 10款好看且实用的文字动画特效,让你的页面更吸引人!

    图片和文字是网页不可缺少的组成部分,图片运用得当可以让网页变得生动,但普通的文字不行。那么就可以给文字添加一些样式,实现一下好看的文字效果,让页面变得更交互,更吸引人。下面创想鸟就来给大家分享10款文字动画特效,好看且实用,快来收藏吧! 1、网页玻璃文字动画特效 模板简介:使用css3制作网页渐变底…

    2025年12月24日 好文分享
    000
  • 如何实现炫酷的数字大屏

    依托强大无远开发平台,可以快速实现带各种酷炫联动效果的数字化大屏。一起来看一下吧 DEMO 地址:https://previewer.wuyuan.io/p… 配置地址:https://workbench.wuyuan.io/p… 效果图 1 效果图 2 实现步骤 1. 完成…

    2025年12月24日 好文分享
    000
  • 使用JS或CSS如何实现瀑布流布局,几种方案介绍

    本篇文章带大家了解一下瀑布流布局,介绍一下三种靠谱js方案,以及n种不靠谱css方案。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 本着实用精神,我们今天来分享一下瀑布流布局(昨天有个小兄弟问我怎么做,我找了半天没找到,啊原来写在内网了)。 演示地址: http://www.li…

    2025年12月24日 好文分享
    000
  • tp5如何引入css文件

    tp5引入css文件的方法:1、将css文件放在public目录下的static文件里即可;2、在页面引入中写上“”语句即可。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 其实很简单,只需要将css,js,image文件放在这个目录下即可 页…

    2025年12月24日
    000
  • 聊聊CSS 与 JS 是如何阻塞 DOM 解析和渲染的

    本篇文章给大家介绍一下css和js阻塞 dom 解析和渲染的原理。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 hello~各位亲爱的看官老爷们大家好。估计大家都听过,尽量将CSS放头部,JS放底部,这样可以提高页面的性能。然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其…

    2025年12月24日
    200

发表回复

登录后才能评论
关注微信