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

数组方法学习

判断一个数组的方法

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()方法不会跳过undefined和null，但是会跳过空位。

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

返回值：一个新数组

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.max
      console.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']
    // let
    function 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]
    // let
    function 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 = 123
    for (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] = arr
    console.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]

这些方法不会改变原数组

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/377696.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Python 线性回归可视化 并将回归函数放置到图像上

Python 线性回归可视化 并将回归函数放置到图像上

import matplotlib.pyplot as plt import scipy import seaborn as sns# 加载内置的数据集 df sns.load_dataset(tips)#create regplot p sns.regplot(xtotal_bill, ytip, datadf)#calculate slope and intercept of regression equation slope, intercept, r, p, sterr sci…
阅读更多...
网络连接受限或无连接怎么办？这里提供几个修复办法

网络连接受限或无连接怎么办？这里提供几个修复办法

本文介绍了如何完成疑难解答步骤，以解决在Windows 10、Windows 8和Windows 7中尝试在Windows计算机上设置或建立网络连接时可能遇到的连接问题错误。 可能错误提示 连接受限或无连接：连接具有有限的连接或无连接。你可能无法访问Internet或某些网络资源。 连接受限。 排除和解…
阅读更多...
【Java EE】----Bean的作用域和生命周期

【Java EE】----Bean的作用域和生命周期

1.Bean的作用域 定义&#xff1a;Bean 的作⽤域是指 Bean 在 Spring 整个框架中的某种⾏为模式&#xff0c;⽐如 singleton 单例作⽤域&#xff0c;就 表示 Bean 在整个 Spring 中只有⼀份 &#xff08;产生的原因&#xff0c;Bean 默认情况下是单例状态&#xff08;singleton&…
阅读更多...
labelimg 在pycharm下载使用

labelimg 在pycharm下载使用

labelimg 使用数据标注工具 labelimg 制作数据集 在pycharm中搜索labelimg 选择版本安装 labelimg install 使用数据标注工具制作数据集 启动 带参数启动 1、cmd cd到指定目录 2、带参数启动标注工具 左侧可以选择切换为需要的数据格式 一些快捷键 和自动保存&#xff0c…
阅读更多...
FPGA_vga显示

FPGA_vga显示

一 VGA 1.1 VGA VGA是视频图像阵列&#xff0c;是一种使用模拟信号进行视频传输的标准协议。 1.2 VGA接引脚定义 VGA分公母两种&#xff0c;RGB显示标准。 1.3 VGA显示器 VGA显示器采用图像扫描的方式进行图像显示&#xff0c;将构成图像的像素点&#xff0c;在行同步信号…
阅读更多...
Logback - 日志框架

Logback - 日志框架

引言 在当今的企业级应用开发中&#xff0c;日志管理是一个不可或缺的部分。它不仅帮助我们进行错误跟踪&#xff0c;还能有效监控应用程序的运行状态&#xff0c;为性能优化提供数据支撑。Spring Boot作为一个简化Spring应用开发的框架&#xff0c;自带了强大的日志管理功能。…
阅读更多...
航芯ACM32G103开发板评测 08 ADC Timer外设测试

航芯ACM32G103开发板评测 08 ADC Timer外设测试

航芯ACM32G103开发板评测 08 ADC Timer外设测试 1. 软硬件平台 ACM32G103 Board开发板MDK-ARM Keil 2. 定时器Timer 在一般的MCU芯片中&#xff0c;定时器这个外设资源是非常重要的&#xff0c;一般可以分为SysTick定时器&#xff08;系统滴答定时器&#xff09;、常规定时…
阅读更多...
【力扣】盛最多水的容器，双指针法

【力扣】盛最多水的容器，双指针法

盛最多水的容器原题地址 方法一&#xff1a;双指针 如果使用暴力枚举&#xff0c;时间复杂度为&#xff0c;效率太低&#xff0c;会超时。 考虑使用双指针&#xff0c;利用单调性求解。用left和right作为数组height的下标&#xff0c;分别初始化为0和size-1。考虑在区间[lef…
阅读更多...
io和File的综合练习：

io和File的综合练习：

先来说说字节流和字符流的应用场景 练习一&#xff1a; /*拷贝一个文件夹考虑子文件夹*///源文件夹路径File src new File("E:\\aaa-FIle学习测试\\bbb");//目的文件夹路径File dest new File("E:\\aaa-FIle学习测试\\ccc");copy(src,dest);}public stati…
阅读更多...
Mybatis- plus 基本使用

Mybatis- plus 基本使用

目录 一. 引入依赖 二.定义Mapper 三.常见注解 3.1TableName 3.2.TableId 3.3TableField 3.4常见配置 一. 引入依赖 由于这个starter包含对mybatis的自动装配&#xff0c;因此完全可以替换掉Mybatis的starter。 <dependency><groupId>com.baomidou</gr…
阅读更多...
IP地址被攻击？如何有效防范

IP地址被攻击？如何有效防范

在当今数字化的世界中&#xff0c;网络攻击是一个不容忽视的威胁&#xff0c;而IP地址是黑客攻击的主要目标之一。一旦IP地址受到攻击&#xff0c;可能导致服务中断、数据泄露以及其他严重后果。本文将探讨IP地址被攻击的常见原因以及如何有效防范这些攻击。 一、IP地址被攻击…
阅读更多...
基于ISO13400 (DoIP) 实现车辆刷写

基于ISO13400 (DoIP) 实现车辆刷写

近年来&#xff0c;在整车研发中基于以太网实现车辆高带宽通讯无疑是人们热议的话题。无论是车内基于车载以太网来减少线束成本&#xff0c;实现ADAS、信息娱乐系统等技术&#xff0c;还是基于新的电子电气架构以及远程诊断需求来实现以太网诊断&#xff08;DoIP&#xff09;&a…
阅读更多...
2024.2.7日总结（小程序开发4）

2024.2.7日总结（小程序开发4）

页面导航 页面导航是页面之间的相互跳转&#xff1a; <a>链接location.href 小程序中实现页面导航的两种方式&#xff1a; 声明式导航 在页面上声明一个<navigator>导航组件通过点击<navigator>组件实现页面跳转 编程式导航 调用小程序的导航API&…
阅读更多...
vue3（笔记）

vue3（笔记）

组合式Api setup-----相当于beforeCreate, create生命周期 reactive–定义状态 对象形式 响应式原理 toRefs— Pinia &#xff08;只有state、getters和actions&#xff09; 更加简洁的语法&#xff0c;完美支持Vue3的Composition api 和 对TypesCcript的完美支持
阅读更多...
街头篮球

街头篮球

欢迎来到程序小院 街头篮球 玩法&#xff1a;根据箭头所指方向&#xff0c;点击鼠标左键进行投篮&#xff0c; 投中获得1分&#xff0c;简单、普通、困难关卡&#xff0c;快去投篮吧^^。开始游戏https://www.ormcc.com/play/gameStart/272 html <div id"wrapper"…
阅读更多...
unity——ScriptableObject相关知识点【学习笔记/不足之处欢迎斧正/个人复习向/侵删】

unity——ScriptableObject相关知识点【学习笔记/不足之处欢迎斧正/个人复习向/侵删】

一、相关简介 1.ScriptableObject是什么&#xff1a;Unity提供的一个数据存储基类 2.ScriptableObject的好处有哪些&#xff1a;文件配置、数据复用、更好的处理数据带来的多态性为 二、ScriptableObject的创建 1.自定义ScriptableOject数据容器 继承ScriptableObject类 在…
阅读更多...
2024/2/7总结

2024/2/7总结

Node.js 什么是node.js node.js是一个基于chrome v8 引擎的 JavaScript 运行环境。 浏览器是JavaScript的前端运行环境node.js是JavaScript的后端运行环境 node.js中无法调用DOM和BOM等浏览器内置API fs模块 是node.js官方提供的、用来操作文件的模块&#xff0c;它提供了一系…
阅读更多...
3.1-媒资管理之需求分析+搭建Nacos

3.1-媒资管理之需求分析+搭建Nacos

文章目录 媒资管理模块1 模块需求分析1.1 模块介绍1.2 业务流程1.2.1 上传图片1.2.2 上传视频1.2.3 处理视频1.2.4 审核媒资 2.2 搭建Nacos2.2.1 服务发现中心2.2.2 配置中心2.2.2.1 配置三要素2.2.2.3配置content-api 2.2.3 公用配置2.2.4 配置优先级2.2.5 导入配置文件2.2.6 …
阅读更多...
Java学习笔记------API

Java学习笔记------API

API API&#xff08; Application Programming Interface&#xff09;&#xff1a;应用程序编程接口 简单的说&#xff0c;API就是Java里面别人已经写好的东西&#xff0c;不用自己编写&#xff0c;直接使用即可 例如&#xff1a; public static void main&#xff08;Str…
阅读更多...
[设计模式Java实现附plantuml源码~行为型]请求的链式处理——职责链模式

[设计模式Java实现附plantuml源码~行为型]请求的链式处理——职责链模式

前言&#xff1a; 为什么之前写过Golang 版的设计模式&#xff0c;还在重新写Java 版&#xff1f; 答&#xff1a;因为对于我而言&#xff0c;当然也希望对正在学习的大伙有帮助。Java作为一门纯面向对象的语言&#xff0c;更适合用于学习设计模式。 为什么类图要附上uml 因为很…
阅读更多...
最新文章

Copyright @ 2022~2023