#Js篇:数组的方法es5和es6

news/2024/3/4 9:12:13

数组方法学习

判断一个数组的方法

Array.isArray()

javascript内置的方法,用于检测给定的对象是否为数组类型。

  • 早期版本兼容性es5引入,对于不支持es5的老旧浏览器(如ie8及更早版本),该方法不可用。

es5实例方法

valueof()

表示对对象求值。

​ 数组的valueOf方法返回数组本身

toString()

​ 数组的toString方法返回数组的字符串形式----基本类型的数组

​ 复杂类型–JSON.stringify()

push

push—往数组末尾添加一个或多个元素—返回添加后的数组长度

unshift

unshift–往数组头部添加一个或多个元素–返回添加后的数组长度

pop

pop—删除数组最后一个元素,并返回删除的元素

Shift

Shift–删除头部元素

Join

指定参数作为分割符,将数组成员连接为一个字符串返回。默认用逗号。

join

Array.pototype.join.call([1,2],'-)

数组合并—浅拷贝concat

参数一

 let arr1 = [1, 2]let contact = arr1.concat(5, 6)console.log('contact: ', contact);

参数二

  let arr1 = [1, 2]let arr2 = [3, 4]let contact = arr1.concat(arr2)console.log('contact: ', contact);

reverse()

—颠倒数组

slice()

—提取数组,返回新数组,原数组不变

​ slice(start,end)—包含start,不包含end;

​ 如果省略第二个参数,则一直返回到原数组的最后一个成员

Splice()方法用于删除原数组的一部分,并可以在删除的位置添加新的数组成员,返回是被删除的元素。该方法会改变原数组

let arr = [1,2,3,4]
arr.splice(start,count,addE1,addE2)

​ splice参数

第一个参数是删除的开始元素位置

第二个参数是被删除的元素的个数,参数为0代表不删除为插入

后面的参数是被插入的新元素—这个参数可以没有

返回值是被删除的元素

 let arr = [1, 2, 3, 4, 5]let splice = arr.splice(1, 1, 33)console.log('splice: ', splice, arr);
// splice:  [2] (5) [1, 33, 3, 4, 5]
    let arr = [1, 2, 3, 4, 5]let splice = arr.splice(1, 1)console.log('splice: ', splice, arr);// splice:  [2] (4) [1, 3, 4, 5]

sort

作用: 对数组成员进行排序

排序后 :原数组将会改变

参数:

  1. 可以不接收参数,默认按照字典顺序排序;
  2. 按照自定义方式排序,传入一个函数作为参数
 let arrObj = [{ name: "张三", age: 30 },{ name: "李四", age: 24 },{ name: "王五", age: 28 }]let sortAge = arrObj.sort((a, b) => {return b.age - a.age})console.log('sortAge: ', sortAge, arrObj);
// 从大到小

map

作用:将每次指行的结果作为一个新数组返回

参数:

  • 第一个参数:一个函数,

    函数传入三个参数

    第一个当前成员

    第二个当前位置

    第三个数组本身

  • 还一个接受第二个参数,用来绑定回调函数内部的this变量

map()方法不会跳过undefinednull,但是会跳过空位。

如果改变本身就有的属性 原数组也会变

返回值:一个新数组

forEach

作用:处理数据不返回数据,操作数据,不是为了得到返回值,而是为了在屏幕上输出内容

参数:

  • 第一个参数:一个函数,

    函数接受三个参数

    当前值、当前位置、整个数组

  • 也可以接受第二个参数用于绑定函数的this变量

返回:不返回

    var out = [];[1, 2, 3].forEach(function (elem) {this.push(elem * elem);}, out);out // [1, 4, 9]

forEach()方法无法中断,总是会讲所有成遍历完。

如果要中断解决办法

使用for循环

var arr = [1, 2, 3];for (var i = 0; i < arr.length; i++) {if (arr[i] === 2) break;console.log(arr[i]);
}
// 1

filter

作用:用于过滤数组成员,满足条件的成员组成一个新数组返回。

参数:

  • 第一个参数是一个函数

    函数接受三个参数

    当前值

    当前位置

    这个数组

  • 第二个参数可以绑定this

  •     let obj = { max: 3 }let arr = [1, 2, 3, 4, 5, 6]let filter = arr.filter(function (x) {return x > this.maxconsole.log('this: ', this);}, obj)console.log('filter: ', filter);
    // filter:  (3) [4, 5, 6]
    

返回:

返回结果为true的成员组成一个新数组返回。

原数组不会改变

Some&every

reduce&reduceRight

reduce

定义: 处理数组的每个成员,最终累计为一个值。

reduce从左到右处理,从第一个成员到最后一个成员

作用: 用于一个数据求和。

参数:

  • 第一个参数,一个函数

    如果有n个成员这个参数函数就会指行n-1次

    函数的参数

    第一个参数–累计变量

    第二个参数 —当前变量

    第三个参数–当前位置

    第四个参数—原数组

    这四个参数之中,只有前两个是必须的

  • 第二个参数,给定初始值

建议总是加上第二个参数,这样比较符合直觉,每个数组成员都会依次执行reduce()方法的参数函数。另外,第二个参数可以防止空数组报错。

可以用于找出字符长度最长的数组成员

或者数组重最大的值

   let arr = ['aaa', 'bbbb', 'ccccc']// letfunction findMax(entried) {return entried.reduce((max, item) => {return max.length < item.length ? max : item})}findMax(arr)console.log('  findMax(arr): ', findMax(arr));
//   findMax(arr):  aaa
   let arr = [1, 2, 3, 4, 5, 6]// letfunction findMax(entried) {return entried.reduce((max, item) => {return max > item ? max : item})}findMax(arr)console.log('  findMax(arr): ', findMax(arr));
//   findMax(arr):  6

indexOf() lastIndexOf

定义:

返回给定元素在数组重第一次出现的位置,如果没有出现则返回-1。

参数:

  • 第一个参数给定元素
  • 第二个参数,表示搜索的开始位置
    let arr = [1, 2, 3, 4, 5, 6]let indexOf = arr.indexOf(2, 2)console.log('indexOf: ', indexOf);// indexOf:  -1

返回值:

位置下标

注意,这两个方法不能用来搜索NaN的位置,即它们无法确定数组成员是否包含NaN

[NaN].indexOf(NaN) // -1
[NaN].lastIndexOf(NaN) // -1

in运算–检查某个键名是否存在

for …in…

仅会遍历数组所有的数字键,还会遍历非数字键。

不推荐使用for…in遍历数组。

    let arr = [1, 2, 3]arr.foo = 123for (const key in arr) {console.log('key: ', key);}
// key:  0
01 function_jiantouhanshu.html:15 key:  1
01 function_jiantouhanshu.html:15 key:  2
01 function_jiantouhanshu.html:15 key:  foo

数组的空位

当某个位置是空元素,即两个逗号之间没有任何值,我们称该数组存在空位。

let a = [1,,2]

es6数组的扩展

扩展运算符

定义:
三个点…

作用:

  • 复制数组—的便捷方法
  • 合并数组
  • 与解构赋值结合
    let arr = [1, 2, 3]let [a, ...rest] = arrconsole.log('rest: ', rest);console.log('a: ', a);// rest:  (2) [2, 3]
01 function_jiantouhanshu.html:15 a:  1
  • 字符串

     let hellon = 'hellon'console.log('hellon: ', [...hellon]);
    // hellon:  (6) ['h', 'e', 'l', 'l', 'o', 'n']
    
  • 实现iterator接口对象

Array.from

作用:

将用于将两类对象转为真正的数组

第一类—类似数组的对象

第二类—可遍历的对象(包括ES6新增的数据结构Set和Map)

参数:

第一个参数当前对象

第二个参数可以接受一个函数

任何有length属性的对象,都可以通过Array.from()方法转为数组,而此时扩展运算符就无法转换。

类似数组的解释

在Javascript中是指哪些具有数字键和length属性,且可以像数组一项进行索引访问,但并非真正的Array实例对象。

例如

let arrayLike = {0:'apple',1: 'banana',length:2
}

这样的对象虽然可以模拟数组的行为,但由于不是真正的数组,所以不能直接使用诸如map、forEach、push等的数组方法

Array.prototype.slice.call(arr)

Array.of()

定义:
用于将一组值转为数组----特定元素的数组

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

Array.from和Array.of区别

Array.of 接受的参数是原始值或对象,直接作为数组的元素

Array.from接受的参数是类数组对象或可迭代对象,并且可以接受一个可选的映射函数对每个元素进行转换。

copyWithin()

定义:
–将指定位置成员复制到其它位置。

参数:

接受三个参数

第一个必须 从该位置开始替换数据。为负,表示从倒数开始;

第二个可选 从该位置开始读取数据,默认为0.为负数,表示从末尾开始计算

第三个参数可选,道该位置前挺尸读取数据,默认为数组长度。

返回:

复制后的数组

find findIndex findLast findLastIndex

find

定义

用于找出第一个符合条件的数据成员

参数

  • 第一个参数回掉函数

​ 函数参数

​ 依次为当前的值、当前的位置和原数组。

  • 第二个参数绑定this

返回:

返回第一个符合该条件的成员值,不符合返回undefined

function f(v){return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26
findIndex

定义

返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

fill

定义:
使用给定值填充一个数组

参数:

第一个参数给定值

第二个参数 填充起始位置

第三个参数填充结束位置—不包含

let arr = [1, 2, 3, 4]
let fill = arr.fill(10)
console.log('fill: ', fill);
// [10,10,10,10]

entries,keys,values

entries

定义:
对键值对的遍历

keys

定义:

对键名的遍历

values

定义:

对键值的遍历

includes

定义:

返回一个布尔值。表示某个数组是否包含给定的值,与字符串的inclueds方法类似。

参数:
第一个参数给定值

第二个可选表示搜索的奇石位置

indexOf和includes区别

indexOf方法有两个缺点

第一个它不够语义话;

第二个内部使用严格相等运算符===进行判断,会导致NaN误判

[NaN].indexOf(NaN)
// -1

includes

[NaN].includes(NaN)
// true

flat flatMap

flat

定义:

用于将嵌套数组“拉平”,变成一维数组。

参数:

  • 参数写成一个整数,表示想要拉平的层数,不传参数默认为1
  • 如果不管有多少嵌套,都要转成一维数组,可以用Infinity关键字作为参数。
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

上面代码中,flat()的参数为2,表示要“拉平”两层的嵌套数组。

作用:

该方法返回一个新数组,

对原数据没有影响。

flat方法会跳过空位

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]
flatMap

定义:

对原数组的每个成员执行一个函数,

(相当于=== Array.prototype.map())

然后对返回值组成的数组执行flat()方法

参数:

  • 函数三个参数
  • 第二个参数this

返回:
该方法返回一个新数组,

原数组不变

flatMap只能展开一层数组

at()

解决js不支持数组的负索引,如果要应用数组的最后一个成员,不能写成arr[-1],只能使用arr[arr.length-1]

定义:
取索引对应的值

参数:

接受一个整数作为参数,支持负索引

返回:

返回对应位置的成员值

toReversed toSorted toSpliced with

  • toReversed()对应reverse(),用来颠倒数组成员的位置。

  • toSorted()对应sort(),用来对数组成员排序。

  • toSpliced()对应splice(),用来在指定位置,删除指定数量的成员,并插入新成员。

  • with(index, value)对应splice(index, 1, value),用来将指定位置的成员替换为新的值。

  • const sequence = [1, 2, 3];
    sequence.toReversed() // [3, 2, 1]
    sequence // [1, 2, 3]const outOfOrder = [3, 1, 2];
    outOfOrder.toSorted() // [1, 2, 3]
    outOfOrder // [3, 1, 2]const array = [1, 2, 3, 4];
    array.toSpliced(1, 2, 5, 6, 7) // [1, 5, 6, 7, 4]
    array // [1, 2, 3, 4]const correctionNeeded = [1, 1, 3];
    correctionNeeded.with(1, 2) // [1, 2, 3]
    correctionNeeded // [1, 1, 3]
    

这些方法不会改变原数组


http://www.ppmy.cn/news/1346787.html

相关文章

2021-2025年全国科普教育基地

2021-2025年全国科普教育基地 第一批认定名单 序号 所在地区 申报单位 基地名称 推荐单位 1 北京市 中国科学院北京纳米能源与系统研究所 中国科学院北京纳米能源与系统研究所 中国材料研究学会 2 北京市 中国测绘科学研究院 中国测绘科学研究院 中国测绘学会 3…

2024年【G3锅炉水处理】证考试及G3锅炉水处理模拟考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 G3锅炉水处理证考试根据新G3锅炉水处理考试大纲要求&#xff0c;安全生产模拟考试一点通将G3锅炉水处理模拟考试试题进行汇编&#xff0c;组成一套G3锅炉水处理全真模拟考试试题&#xff0c;学员可通过G3锅炉水处理模…

Vue中的自定义参数校验

目录 1 前言 2 方法 2.1 定义校验函数 2.2 进行绑定 1 前言 在Vue中&#xff0c;自带了许多校验方法&#xff0c;但是有时候需要我们自定义一些校验方法&#xff0c;才能满足实际的需求。现在举个例子&#xff0c;我们从这个例子来讲解自定义参数校验。 我们要提供修改密…

JavaScript相关(一)——作用域

本篇将从JS的执行上下文开始&#xff0c;去理解&#xff1a;变量提升、 栈式调用、作用域和闭包。 参考&#xff1a; 浏览器工作原理与实践 JS执行上下文 执行上下文是 JavaScript 执行一段代码时的运行环境&#xff0c;比如调用一个函数&#xff0c;就会生成这个函数的执行…

0基础学习VR全景平台篇第141篇:如何制作卫星航拍全景

大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; 很多人都看过或者拍摄过航拍全景&#xff0c;其效果相比于普通的地拍的确有着更加震撼的拍摄效果&#xff0c;但是受限于无人机高度&#xff0c;以及禁飞区等等限制&#xff0c;导致很多大场景无法展示完全&a…

JavaEE作业-实验三

目录 1 实验内容 2 实验要求 3 思路 4 核心代码 5 实验结果 1 实验内容 简单的线上图书交易系统的web层 2 实验要求 ①采用SpringMVC框架&#xff0c;采用REST风格 ②要求具有如下功能&#xff1a;商品分类、订单、购物车、库存 ③独立完成&#xff0c;编写实验报告 …

2024-02-07(Sqoop,Flume)

1.Sqoop的增量导入 实际工作中&#xff0c;数据的导入很多时候只需要导入增量的数据&#xff0c;并不需要将表中的数据每次都全部导入到hive或者hdfs中&#xff0c;因为这样会造成数据重复问题。 增量导入就是仅导入新添加到表中的行的技术。 sqoop支持两种模式的增量导入&a…

关于域名递归解析服务的问题

域名递归解析服务是互联网基础设施的重要组成部分&#xff0c;它允许用户通过域名来访问网站或应用程序。然而&#xff0c;在某些情况下&#xff0c;域名递归解析服务可能会出现问题&#xff0c;导致用户无法正常访问网站或应用程序。本文将探讨域名递归解析服务可能面临的问题…

it行业哪些证书含金量比较高

在IT行业中&#xff0c;证书通常被视为专业技能和知识的证明&#xff0c;它们可以帮助求职者在就业市场上脱颖而出&#xff0c;或者帮助在职专业人士提升职业生涯。以下是一些在IT行业中含金量较高的证书&#xff1a; 1. 认证信息系统安全专家&#xff08;CISSP&#x…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之ScrollBar组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之ScrollBar组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、ScrollBar组件 鸿蒙&#xff08;HarmonyOS&#xff09;滚动条组件ScrollBar&…

Pymysql之Connection中常用API

Connection中常用API 1、open() &#xff1a;检测数据库是否连接。 connect.open&#xff1a;如果数据库连接返回Trhe&#xff0c;否则返回False。 2、ping(reconnectTrue) connect.ping(reconnectTrue):如果reconnectTrue表示连接断开后&#xff0c;重新进行连接。 import…

JUnit实践教程——Java的单元测试框架

前言 大家好&#xff0c;我是chowley&#xff0c;最近在学单元测试框架——JUnit&#xff0c;写个博客记录一下&#xff01; 在软件开发中&#xff0c;单元测试是确保代码质量和稳定性的重要手段之一。JUnit作为Java领域最流行的单元测试框架&#xff0c;为开发人员提供了简单…

item_get_video-获取视频详情(bili.item_get_video)

B站&#xff08;Bilibili&#xff09;的item_get_video API用于获取视频的详细信息。通过调用该API&#xff0c;您将能够获得视频的基本信息、元数据、播放链接等。这使得开发者可以轻松地将B站视频集成到自己的应用程序或网站中&#xff0c;为用户提供更丰富的内容和更好的体验…

人工智能之最优化问题数学模型

人工智能的本质其实就是最优化过程。最优化就是在有限或者无限种可能的方案中选择一个最好的方案以达到最优目标。 最优化问题数学模型的一般形式为: m i n f ( x ⃗ ) x ⃗ ∈ R n s . t . { c i ( x ⃗ ) = 0 , i ∈ E = { 1 , 2 , ⋯   , l } c i ( x ⃗ ) ≤ 0 , i ∈ …

Python __dir__用法:列出对象的所有属性(方法)名

对象的 __dir__ 方法用于列出该对象内部的所有属性&#xff08;包括方法&#xff09;名&#xff0c;该方法将会返回包含所有属性&#xff08;方法&#xff09;名的序列。 当程序对某个对象执行 dir(object&#xff09; 函数时&#xff0c;实际上就是将该对象的 __dir__() 方法返…

【Kotlin】Kotlin环境搭建

1 前言 Kotlin 是一种现代但已经成熟的编程语言&#xff0c;由 JetBrains 公司于 2011 年设计和开发&#xff0c;并在 2012 年开源&#xff0c;在 2016 年发布 v1.0 版本。在 2017 年&#xff0c;Google 宣布 Kotlin 正式成为 Android 开发语言&#xff0c;这进一步推动了 Kotl…

Galaxy生信云平台参考基因组简介

Galaxy生信云平台&#xff08;UseGalaxy.CN&#xff09;目前支持以下参考基因组&#xff1a; Arabidopsis (Arabidopsis thaliana): TAIR10Human (Homo sapiens) (b37): hg19Human (Homo sapiens) (b38): hg38Mouse (Mus Musculus) (b38): mm10Wheat (Triticum aestivum) (Chin…

壁纸小程序源码/双端微信抖音小程序源码

Uniapp壁纸小程序源码&#xff0c;双端微信抖音小程序源码。WordPress后台的小程序。为一些做壁纸类自媒体的朋友解决变现难的问题&#xff0c;抖音壁纸常见的图片取号码&#xff0c;微信的壁纸公众号小程序均可使用该小程序进行变现&#xff0c;这款小程序后端为WordPress&…

不同进制之间的转换

目录 前言进制转换10进制转2进制方法1方法2 2进制转10进制10进制转n进制n进制转10进制2进制与8进制和16进制之间的快速转换 代码实现10进制转n进制CPython n进制转10进制CPython 结尾 本文由Jzwalliser原创&#xff0c;发布在CSDN平台上&#xff0c;遵循CC 4.0 BY-SA协议。 因此…

spring boot和spring cloud项目中配置文件application和bootstrap加载顺序

在前面的文章基础上 https://blog.csdn.net/zlpzlpzyd/article/details/136060312 日志配置 logback-spring.xml <?xml version"1.0" encoding"UTF-8"?> <configuration scan"true" scanPeriod"10000000 seconds" debug…
最新文章