JS Array数组方法

2023-10-29

1、unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。头部添加(原数组改变)

const array1 = [1, 2, 3];
// 返回数组长度
console.log(array1.unshift(4, 5));// 5
// 原数组改变
console.log(array1);// [4, 5, 1, 2, 3]

2、push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。尾部添加(原数组改变)

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
// 返回数组长度
console.log(count);// 4
// 原数组改变
console.log(animals);//  ["pigs", "goats", "sheep", "cows"]

3、shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。头部删除(原数组改变)

const array1 = [1, 2, 3];

const firstElement = array1.shift();
// 原数组改变
console.log(array1);// [2, 3]
// 返回删除元素
console.log(firstElement);//  1

4、pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。尾部删除(原数组改变)

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
// 返回删除元素
console.log(plants.pop());// "tomato"
// 原数组改变
console.log(plants);//  ["broccoli", "cauliflower", "cabbage", "kale"]

5、concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。拼接

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
// 拼接数组得到新数组
const array3 = array1.concat(array2);
// 新数组
console.log(array3);// ["a", "b", "c", "d", "e", "f"]

6、findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。头部查找(第一个满足条件)返回索引值 ES6

const array1 = [5, 12, 8, 130, 44];

// 元素判断公式
const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));//  3

7、indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。头部查找(第一个满足条件)返回索引值

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));//  1
// start from index 2
console.log(beasts.indexOf('bison', 2));// 4

console.log(beasts.indexOf('giraffe'));//  -1

8、find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。头部查找(第一个满足条件)返回值 ES6

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);// 12

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

const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo'));//  3

console.log(animals.lastIndexOf('Tiger'));//  1

10、includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。返回布尔值 ES6

const array1 = [1, 2, 3];

console.log(array1.includes(2));//  true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));// true

console.log(pets.includes('at'));//  false

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

const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());// "1,2,a,1a"

12、join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());//  "Fire,Air,Water"

console.log(elements.join(''));//  "FireAirWater"

console.log(elements.join('-'));//  "Fire-Air-Water"

13、slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。剪切(截取)

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));//  ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));//  ["camel", "duck"]

console.log(animals.slice(1, 5));//  ["bison", "camel", "duck", "elephant"]

14、splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。拼接(原数组改变)

第一个参数定义了应添加新元素的位置(拼接)。第二个参数定义应删除多少元素。其余参数定义要添加的新元素

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);//	["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);//  ["Jan", "Feb", "March", "April", "May"]

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

const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
const localeString = array1.toLocaleString('en', { timeZone: 'UTC' });

console.log(localeString);
//  "1,a,12/21/1997, 2:12:00 PM",
// This assumes "en" locale and UTC timezone - your results may vary

16、sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的,由于它取决于具体实现,因此无法保证排序的时间和空间复杂性。排序(三大排序)ES6

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);//  ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);//  [1, 100000, 21, 30, 4]

17、reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。倒序(原数组改变)

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);//  ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);//  ["three", "two", "one"]

console.log('array1:', array1);//  ["three", "two", "one"]

18、flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。扁平化 ES6

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());//  [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2));//  [0, 1, 2, [3, 4]]

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

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);// ["exuberant", "destruction", "present"]

20、map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);//  [2, 8, 18, 32]

21、forEach() 方法对数组的每个元素执行一次给定的函数

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

//  "a"
//  "b"
//  "c"

22、every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));// true

23、some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));//  true

24、reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
//  10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
//  15

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

const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
  (accumulator, currentValue) => accumulator.concat(currentValue)
);

console.log(array1);
//  [4, 5, 2, 3, 0, 1]

26、from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。 ES6

console.log(Array.from('foo'));//  ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));//  [2, 4, 6]

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

Array.of(1, 2, 3); // [1, 2, 3]
Array(1, 2, 3);    // [1, 2, 3]

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

const array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
//  [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
//  [1, 5, 5, 5]

console.log(array1.fill(6));
//  [6, 6, 6, 6]

29、copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。ES6

const array1 = ['a', 'b', 'c', 'd', 'e'];

// copy to index 0 the element at index 3
console.log(array1.copyWithin(0, 3, 4));
//  ["d", "b", "c", "d", "e"]

// copy to index 1 all elements from index 3 to the end
console.log(array1.copyWithin(1, 3));
//  ["d", "d", "e", "d", "e"]

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

const array1 = ['a', 'b', 'c'];

const iterator1 = array1.entries();

console.log(iterator1.next().value);
//  [0, "a"]

console.log(iterator1.next().value);
//  [1, "b"]

31、keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。ES6

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
  console.log(key);
}

//  0
//  1
//  2

32、values() 方法返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值 ES6

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value);
}

//  "a"
//  "b"
//  "c"

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

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 flattened
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

34、判断是否变量数组

(1)instanceof

[1,2] instanceof Array 
true

(2)Array.isArray()

Array.isArray([1,2])
true

(3)Object.prototype.toString.call(arr) === “[object Array]”

Object.prototype.toString.call([1,2])
"[object Array]"

(4)arr.constructor.name===’Array’

[1,2].constructor.name==='Array';
true

以上内容纯属个人见解,还请多多指教!!!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JS Array数组方法 的相关文章

  • 全日历和时区。求助,我做错了

    我不知何故做错了 我被时区绊倒了Fullcalendar 我尝试过设置ignoreTimezone真与假 不过似乎并不重要 它在下面的代码中的两个地方 因为我不确定它在哪里 我的数据源是隐藏的表单字段 数据流转out of FullCale
  • 如何将默认文本添加到 html 文本区域的开头?

    我正在建立一个个人的小型社交网络 作为设计的一部分 所有状态都应以不应更改的默认文本开始 类似于 嗨 我的名字是 然后用户完成其余的操作 有点像不会消失的 HTML5 占位符 实现这一目标的最佳方法是什么 请参考这个fiddle http
  • 如何在 Angular JS 中显示以字节数组形式接收的图像

    我有一个将返回图像的服务器端应用程序 这些是响应标头 Content Disposition attachment filename 8822a009 944e 43f4 999b d297198d302a 1 0 low res Cont
  • React-Native 博览会 POST Blob

    我正在使用 React Native 和 expo 并尝试通过 fetch api 发布 blob 图像 我对正文使用表单数据格式 并且我有下一个代码 const blob await response blob const form ne
  • 检索博客中所有标签的列表

    有没有办法使用 gdata api 检索所有列表labels在博主中 我需要根据该列表创建一个菜单 但不能简单地列出所有帖子并获取它 因为它是一个繁忙的博客 并且有超过 2000 个帖子 以下是使用 json 调用获取标签列表的最简单方法
  • 未捕获的类型错误:属性...不是函数 - 页面加载后

    我正在使用对外部 API 的跨域 Ajax 请求 有时它会失败 并显示控制台消息 Uncaught TypeError Property photos of object object DOMWindow is not a function
  • 返回 false 不停止表单提交

    我的目的 如果用户字段和密码字段为空 我想停止表单提交 这是我正在尝试的代码
  • Dojo DataGrid (DGrid) 添加复选框列

    我在用DojoDgrid 但是我正在尝试添加一个复选框列 但我不确定该方法 我一直在看的大多数教程都遵循不同的代码结构 我无法创建复选框列 我想创建一个复选框列来选择行 Code 这里还有一个Fiddle http jsfiddle net
  • 当 querySelectorAll 在不使用库的情况下不可用时,按属性获取元素?

    p 你怎样才能做到相当于 document querySelectorAll data foo where 查询选择器全部 https developer mozilla org en DOM Document querySelectorA
  • JavaScript 中最大长度的正则表达式

    如何限制与正则表达式匹配的字符串的长度 我假设var sixCharsRegEx 6 7 只匹配长度为 6 或 7 的字符串 but no http jsfiddle net FEXbB http jsfiddle net FEXbB 我缺
  • 如何在 React JS 组件中预加载图像?

    我目前正在渲染一个子组件signInError发生 这signInError存储在父组件中 如果不为 null 则渲染
  • 散景服务器获取鼠标位置

    我正在开发一个带有散景 0 12 2 的交互式应用程序 它根据特定的交互更新绘图 现在 我使用滑块来更改图中字形的位置 但实际上我想访问鼠标在特定图中的位置 数据集是一个多维矩阵 张量 密集数据 每个图在特定位置显示一个维度 如果我更改一个
  • Firefox:按下鼠标按钮时鼠标悬停不起作用

    这是我想做的 https gfycat com ValidEmbarrassedHochstettersfrog https gfycat com ValidEmbarrassedHochstettersfrog 我想强调一些 td 对象在
  • 对同一域发出 get 请求,出现 CORS 错误

    在浏览器扩展中 这是我的 ajax 调用 var xhr new XMLHttpRequest xhr open GET window location href true xhr responseType arraybuffer xhr
  • 检查 IE8 是否使用纯 Javascript [重复]

    这个问题在这里已经有答案了 我以前是这样检查的 browser msie browser version 8 但似乎 browser已从 jQuery 的更高版本中删除 So 我怎样才能用纯javascript检查这一点 I tried i
  • Electron 中的收据热敏打印机

    我需要找到一种在 javascript 中打印收据的方法Electron 我已经尝试过了QZ TRAY但由于 Electron 它不起作用 我也尝试过节点热敏打印机但它也从来没有对我有用 这里有人知道如何在 javascript Elect
  • 如何使用复杂对象或json在ng-table中添加动态列?

    我有以下 ng table 代码 参见笨蛋 http plnkr co edit oTxkmtAwt22gtO2JDPg4 p preview var app angular module main ngTable controller D
  • .js.erb VS .js

    将 Rails 应用程序的 javascript 放入 js erb 文件而不只是将其放入 application js 文件有什么好处 我有一个企业创建按钮 因此我应该将代码放入 create js erb 文件中 还是使用以下方法将其放
  • vuejs2复制剪贴板问题

    我正在尝试使用https alligator io vuejs vue clipboard copy https alligator io vuejs vue clipboard copy 对于 Vue js 中的复制剪贴板功能 它对于字符
  • 使用node.js/Express从HTTP重定向到HTTPS

    有什么方法可以更改我的 Web 应用程序以侦听 HTTPS 而不是 HTTP 我正在使用node js express 我需要它来侦听 HTTPS 因为我正在使用地理定位 而 Chrome 不再支持地理定位 除非从 HTTPS 等安全上下文

随机推荐

  • powershell 自动补全

    我在zsh中使用智能提示 zsh autosuggestions已经习惯了 而在windows中的终端默认没有智能提示 很起来不舒服 那么有没有什么替代呢 安装powershell 7 3 我的windows 10默认安装的是powersh
  • CSDN 改变字体颜色

    将字体改变为红色 font color 900 我是编程ID font 设置字体颜色和字号 font face 华文行楷 color red size 5 本字体是华文行楷 红色 5号大小 font 更多字体参见 https blog cs
  • vue+element+table+render+slot

    前言 最新又回忆并且整理下之前的资料 在这里共享下把 主要是element ui框架里面对table的使用 因为element ui不可以像我们iview框架一样可以直接的在表头里面写render函数 我这里把element ui的tabl
  • Java使用EasyExcel导出数据到Excel文件,以及调用接口下载文件

    1 引入EasyExcel 依赖
  • OAM PDU

    MPLS OAM基本概念 MPLS提供一个完全不依赖于任何三层协议或二层协议的OAM机制 在MPLS的数据平面实现以下功能 1确定LSP的连通性 2 衡量网络利用率以及度量网络性能 3 在链路出现缺陷或故障时迅速进行保护倒换 以便根据与客户
  • hping3的使用

    Hping 是面向命令行的 用于生成和解析 TCP IP 协议数据包汇编 分析的开源工具 常见的应用是 扫描端口 伪造地址和洪水攻击 hping3中的参数如下 h help 显示帮助 v version 显示版本 c count 发送数据包
  • APS计划排程系统之下的MRPII、JIT、TOC三种方式对比分析

    1 生产物流计划的制订方式对比 MRPII采用的是集中式的物料计划方式 建立好产品加工程序 在电脑中确定好准确的订单需求和库存量 对各个生产单元传送生产指令 JIT利用的是看板管理控制方式 按照有限能力计划 逐道工序地倒序传递生产中的取货指
  • librecad二次开发

    1 ui 部份 1 增加主菜单 在这里插入图片描述 https img blog csdnimg cn 65e596109caf43a485505ab1b705ea94 png x oss process image watermark t
  • python 视频处理技术_Python玩转视频处理(三):从视频中提取女神片段

    在上一篇中实现了基于人脸识别提取人物片段的功能 但是在实践过程中发现 如果是一部电影 那么提取到的片段太多了 为了找女神的电影片段 还要在辣么多剪辑中苦苦手工筛选 这个不是一个优秀的程序员应该做的 经过一番实践和探索 发现了一个强大的库 叫
  • 通过pyppeteer来爬取今日头条

    import asyncio from pyppeteer import launch async def main browser await launch page await browser newPage await page se
  • ElementUI的form表单验证注意事项

    ElementUI的form表单验证注意事项 1 踩过的坑 记录一下 验证表单时一直提示必填项未填写 实际已经填写了 2 el form的正确使用流程 el form就是最外层的form表单 做验证有三个必填属性 不填写验证就会不正确 re
  • 烧屏现象对OLED屏幕质量的影响:如何保持画面清晰度?

    OLED Organic Light Emitting Diode 屏幕作为一种高品质 高对比度和鲜艳色彩的显示技术 越来越受到消费者的青睐 然而 一些用户可能会担心OLED屏幕烧屏的问题 本文将探讨OLED屏幕烧屏的原因 如何预防烧屏以及
  • 前端常见的面试题整理

    移动端相关 1 移动端1px边框问题的解决方案 华润集团 使用小数写px值 通过媒体查询判断设备的像素比 DRP 根据不同像素比写不同的边框大小 border border 1px solid ccc media screen and we
  • 基于传统检测算法hog+svm实现图像多分类

    直接上效果图 代码仓库和视频演示b站视频005期 到此一游7758258的个人空间 到此一游7758258个人主页 哔哩哔哩视频 代码展示 数据集在datasets文件夹下 运行01train py即可训练 训练结束后会保存模型在本地 运行
  • Layui上传下载实现

    Layui SSM上传下载文件 上传Controller 上传 RequestMapping sc ResponseBody public String sc RequestParam uploadFile MultipartFile fi
  • s20赛季服务器维护,S20赛季迎来重大更新,这些细节你了解吗?

    随着7月9号的S20赛季更新 又一个赛季落下帷幕 本应于6月30号的赛季更新不知为何推迟 好在是官方终于宣布了赛季更新消息 就让我们一起来看看新赛季有哪些改动吧 一代版本一代神 每一个版本总有一些耀眼的英雄随着机制或者装备的改善从而登上热门
  • 使用promise封装wx.request()

    1 目录结构 在根目录下创建http目录及api js文件fetch js以及http js文件 在根目录下创建env目录 创建index js配置并导出多个开发环境 module exports 开发环境 Dev BaseUrl http
  • 计算机网络实验-静态路由与默认路由配置

    一 实验目的 1 理解静态路由的含义 2 掌握路由器静态路由的配置方法 3 理解默认路由的含义 4 掌握默认路由的配置方法 二 实验仪器 1 装有Cisco Packet Tracer的Windows10计算机 三 实验原理 30 1 静态
  • uniapp对接支付宝出现的问题

    支付逻辑没问题却出现商家订单参数异常 请重新发起付款 检查发现后端传回来根本没什么问题 检查很久发现需要下载证书放在服务器上 小程序文档 支付宝文档中心
  • JS Array数组方法

    1 unshift 方法将一个或多个元素添加到数组的开头 并返回该数组的新长度 该方法修改原有数组 头部添加 原数组改变 const array1 1 2 3 返回数组长度 console log array1 unshift 4 5 5