第十三节:特殊的对象——数组的详解

2023-11-18

typeof null; 为什么结果是Object ?

JS解释器编译原则,如果二进制前三位是0,typeof查询的数据类型返回的就是Object,而null转换为二进制存储时,全部位数均为0,所以typeof查询结果为Object,这是早期开发的bug,所以后续又有一个undefined表示空,关于历史原因可以查看阮一峰老师的博客

1、概念介绍

对象:各种属性的名称和属性的值组成的无序的列表的合集;
数组:有序的列表合集;
数组2个特性:每一项可以保存任意数据类型数据;长度可以随时调整;

2、数组创建

//使用new关键字
var arr=new Array(); //创建空数组
// var arr=new Array(size); //size表示数组长度,如果是2则创建长度为2的空数组
// var arr=new Array(1,2,3);//数组长度为3,参数为1,2,3
//使用中括号
var narr=[];//空数组
var narr=[1,2,3]//带有参数值的数组

使用new关键字创建,如果里面只有一个参数,则表示数组的长度;如果有多个参数,多个参数使用都好分割,则参数就表示数组的内容。
使用字面量创建数组: 最后一位不要加逗号,如果加上ie7会报错,后续浏览器已修复,但是最好不要加。

3、数组的读取

读取方式:数组名[该项索引]
注意:索引从0开始

var narr=[1,2,3];
narr[0]; //第一项 1

因为数组是特殊的对象,所以对象的读取除了用点(.)也可以使用中括号([])

4、数组的写入

var list = ['a','b','c','d'];
list[10]='e';//长度变为11,5-10项为空值

delete方法用于删除对象的指定元素,数组为特殊的对象,所以数组删除某一元素,也可使用delete

var list = ['a','b','c','d'];
list.length;//4
delete(list[0]);
list[0]; //删除后数组长度不改变,但是被删除的项的值变为undefined
list.length;//4

改变数组的length

var list = ['a','b','c','d'];
list.length = 6;//设置length比原数组长度大的数
console.log(list);//数组长度变为6,5和6两项的值为undefined
//设置比length小
var list = ['a','b','c','d'];
list.length = 2;
console.log(list);//[ "a", "b" ],从后面依次删除对应的值,3和4项被删除,仅剩1、2两项
//设置length不是个自然数,会报错
var list = ['a','b','c','d'];
list.length = a;//invalid array length

5、数组的检测

typeof检测只能检测出来是对象,无法确定是对象还是数组,需要使用instanceof

//方法一
var list = ['a','b','c','d'];
list instanceof Array; //true
//方法二
list.constructor === Array; //true

缺点:存在多个iframe或者全局环境时会出错
方法三:es5新增方法Array.isArray

var list = ['a','b','c','d'];
Array.isArray(list); //true

缺点:低版本浏览器会报错(无法兼容es5的浏览器)
如何判断是否支持es5:
typeof Array //‘function’,如果是返回function,则支持es5

方法四:Object.prototype.toString.call()

var list = ['a','b','c','d'];
Object.prototype.toString.call(list) === "[object Array]";

比较精准,但是写法较复杂;

6、数组的方法

栈方法:
push()、pop(),对数组末尾进行增加和删除
队列方法:
unshift()、shift(),向数组开头增加和删除
排序方法:
reverse()翻转数组,sort() 对数组元素进行排序
操作方法:
join()把数组中的所有元素放入一个字符串。 元素是通过指定的分隔符进行分隔,默认是逗号;
concat()连接两个或多个数组
slice(start,end)方法可从已有的数组中返回选定的元素,包括开始不包括结尾
splice(index,howmany,item1,…,itemX)可接受多个参数,增删改均可实现;传递1个参数,从该位置删除直到结尾;传递2个参数,从第一个参数位置开始删除,删除第二个参数的个数;传递3个参数,从第一个参数位置开始删除,删除第二个参数的个数,插入第三个或者更多个参数值。

push与concat方法的区别

//区别一:push直接影响原数组,concat会生成一个新数组
var arr = [1,2];
arr.push(4);
arr.concat(5);
arr;//原数组只增加了4,(3) [1, 2, 4]
var narr = arr.concat(6);
narr; //(4) [1, 2, 4, 6]
arr;//(3) [1, 2, 4]
//区别二:传入参数如果是数组,push会当成一个值写入,concat会当成多个值写入
var arr = [1,2];
arr.push([5,4]);//[1,2,[5,4]]
var narr = arr.concat([6,7,8]);
narr; //(6) [1, 2, [5,4], 6, 7, 8]

备注:栈方法、队列方法、排序方法会直接影响原数组
详解:数组方法梳理及各个方法特点

ES5新增数组:
检索方法(位置方法): indexOf和lastIndexOf
array.indexOf(item, start);第一个参数检索值,第二个参数检索开始位置,不传则默认从下标0开始
array.lastIndexOf(item, start);参数同上
查找原则:有检索值返回检索值下标,没有则返回-1
备注:匹配条件是全等(===)
迭代方法: every()、filter()、forEach()、map()、some()
array.filter(function(currentValue, index, arr), thisValue)
这五个方法参数相同,都接受三个参数,第一个参数为当前元素的值,第二个参数当前元素的数组索引,第三个参数当前元素所属的数组对象
归并方法: reduce()和reduceRight()

详解:ES5新增数组方法
w3scholl方法总结:array所有方法参照

备注:本内容学习总结来源于喜马拉雅冰山工作室沙翼老师主讲的(陪你读书(JavaScript WEB前端))

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

第十三节:特殊的对象——数组的详解 的相关文章

  • 如何在指令模板中使用动态 ng-show 值?

    我正在学习 Angular 并且尝试通过使用 Angular 指令来减少执行一些常见操作 例如显示错误消息 所需的代码 我想创建的一个指令是这样的
  • onclick 函数上的 CSS 选择器

    有没有办法让CSS选择器onclick function 您可以在onclick https stackoverflow com questions 24365416 select element which have specific a
  • 如何将 div (或任何元素)覆盖在表格行 (tr) 上?

    我想在恰好有多个列的表行 tr 标记 上覆盖一个 div 或任何可以使用的元素 我尝试了几种方法 似乎都不起作用 我在下面发布了我当前的代码 我确实得到了一个覆盖 但不是直接覆盖在该行上 我尝试将覆盖顶部设置为 div Bottom css
  • 将 Laravel 集合/数组转换为 Javascript 数组

    我想将 Laravel 中的数组分配给 JavaScript 数组 我已经从我的AppServiceProvider和 json decoded 它像 View composer function view users Users all
  • 将组件注册到现有的 Vue.js 实例

    我是 Vue js 新手 我想注册一个本地组件 如下所述 https v2 vuejs org v2 guide components html Local Registration https v2 vuejs org v2 guide
  • NodeJs读取JSON文件

    我正在使用 NodeJs 读取 json 文件 我的代码非常基本 var obj require sample json console log obj 0 Sample json 文件包含这样的字符串化 JSON sample good
  • Twitter Bootstrap 轮播在加载时自动播放

    使用twitter bootstrap框架 如何调用轮播来 自动滑动 这意味着当页面加载时 轮播会自动滚动 我尝试过 javascript onLoad click 函数 a 下一个链接的 但这不起作用 你应该这样做Twitter Boot
  • Disqus 评论数始终为 0 条评论

    我想我已经按照通用代码的说明设置了 Disqus 问题是它总是说某个帖子有 0 条评论 拿这个帖子来说 http tx0rx0 com retropie and the raspberry pi http tx0rx0 com retrop
  • Strapi 未加载 Digital Ocean 上托管的现有 MongoDB 中的集合

    我正在使用 Strapi 创建一个新应用程序 并尝试将其与托管在 Digital Ocean 上的 MongoDB 连接 但不幸的是Strapi 无法从现有 MongoDB 获取集合 在这里 我提到我实现 Strapi 与现有 MongoD
  • SVG 中三角形的圆角

    我正在尝试制作一个具有圆角的三角形 三角形将如下所示 左下角是唯一看起来相当容易制作的角 主要是因为这是一个 90 度的 转弯 该转弯是使用QSVG 中的命令具有以下参数 Q x y height x y height RADIUS从我正在
  • 全局未在 ../node_modules/socket.io-parser/is-buffer.js 中定义

    预先感谢您帮助我 我正在尝试在我的一个角度组件中连接套接字 但在浏览器的控制台中它会抛出一个错误 指出 Global 未在 Object node modules socket io parser is buffer js 中定义 这是我的
  • 如何上传文件 - sails.js

    我可以下载图像和 pdf 但无法下载文档文件 doc pptx odt 下载文档 doc pptx odt 时 仅将其下载为 ZIP XML 文件 我可以做什么 我在用着 填写上传文件文档 https github com balderda
  • javascript/jquery 禁用点击提交按钮,防止重复提交

    所以我的提交按钮如下所示 a href img src images user create product png border 0 a 当我双击它时 显然会双重提交 问题是 我将信息保存在数据库中 因此那里会有重复的信息 我不想那样 这
  • 从未使用 mimeType 初始化的 MediaRecorder 获取 mimeType

    我正在使用 MediaRecorder API 在页面上录制一些媒体 在我的 MediaRecorder 初始化中 我没有指定内容类型 因为我不需要任何特别的内容 浏览器可以选择它想要的 var mediaRecorder new Medi
  • 在多个数组中搜索字符串,然后设置 var - jQuery

    我正在寻找基于字符串存在于哪个数组中设置一个变量 例如 var primary red blue yellow var secondary orange purple green 然后检查 purple 并返回它在 secondary 数组
  • window.open 使用 css 样式

    我想设计我的 window open 目前 我的网页上有一些项目由于解析了某个类而打开 然后在新窗口中打开指定的文本 我想更改字体大小 字体和填充等 这是我的 JavaScript 代码
  • 无法从 JSON 请求获取数据,尽管我知道它已返回

    我试图获取从 getJSON 返回的数据 但我无法让它工作 我已经在 search twitter API 上尝试了相同的代码 效果很好 但它不适用于其他网站 我知道数据已返回 因为我在使用检查器时可以找到它 我通过检查器找到的值是 id
  • 角度 ng-repeat 根据条件添加样式

    我在 div 列表上使用 ng repeat 并且在渲染此 div 的 json 中手动添加项目 我需要定位我在 json 中添加的最后一个 div 它会自动在屏幕上渲染 即 couse 光标所在的位置 其余部分保持在相同位置 但没有给出渲
  • 使用 div 或表格来包含链接列更好吗?

    我的页面底部有 3 列链接 每列都放入一个 div 中 所有三个 div 都包装在页面中央的一个大 div 中 这是更适合桌子的东西还是桌子不适合这项工作 您还可以使用 ul http www w3schools com tags tag
  • 将 Angular Web 组件 EventEmitter 监听到 javascript

    我在以下工具的帮助下创建了一个小型网络组件本文 https medium com IMM9O web components with angular d0205c9db08f使用角度元素 其中包括 Input and Output 我能够将

随机推荐

  • Vue,点击文字更换文本

    div div
  • elasticsearch简介与基本操作

    是什么等 废话后置 1 elasticsearch 分为3个部分 index mapping setting 1 1 index 相当于MySQL的表 elasticsearch 没有库的概念 也没有用户的权限区分概念 所以做好 备份 每个
  • android和harmonyos对比,HarmonyOS和Android深度对比

    HarmonyOS APP 工程结构 HarmonyOS应用发布形态为APP Pack Application Package 简称APP 它是由一个或多个HAP HarmonyOS Ability Package 包以及描述APP Pac
  • k8s Failed to create pod sandbox错误处理

    错误信息 Failed to create pod sandbox rpc error code Unknown desc failed to get sandbox image k8s gcr io pause 3 2 failed to
  • 华为机试 统计字符串中最长的数字串及统计字符串中字母出现最多的次数

    不多说 上代码 package com it thread import java util public class SoftTest public static void main String args Scanner sc new
  • 无法验证驱动程序的签名_无法安装最新版NVIDIA显卡驱动,从技术角度该怎么办?...

    一定会有众多网友 饱受无法更新NVIDIA驱动的困扰 你们一定也很奇怪 我凭实力从正规渠道购买的NVIDIA板卡 凭什么无法及时安装NVIDIA官网提供的驱动程序呢 因为无法更新到413以后的版本 一定也有众多因驱动程序 过时 而被 战地五
  • ACM-Java输入输出基本操作

    一 Java之ACM注意点 1 类名称必须采用public class Main方式命名 2 在有些OJ系统上 即便是输出的末尾多了一个 程序可能会输出错误 所以在我看来好多OJ系统做的是非常之垃圾 3 有些OJ上的题目会直接将OI上的题目
  • Framework层Android4.4锁屏流程分析

    前段时间刚接触到锁屏 我们自己做的锁屏时通过底层通过反射调过去的 所以还是得从framewoke层的启动和加载开始分析 所以画了一下这样的两个图 前面一个图是系统开机调到锁屏的一个流程 后面一个图我分开来画了 一个是按power键灭屏和亮屏
  • 【翻译】#拥抱行动和心理安全--思考根本原因而非根本人物

    本杰明 富兰克林曾经说过 生命中唯一的两个确定性是死亡和税收 但是 如果他是一名工程师 他可能会在这个名单上加上另一个 即故障 脸书的工程师们无疑会同意最近的故障 似乎是由于运行一个命令 无意中关闭了他们骨干网络的所有连接 不仅关闭了脸书
  • 【今日CV 计算机视觉论文速览 第149期】Tue, 30 Jul 2019

    今日CS CV 计算机视觉论文速览 Tue 30 Jul 2019 Totally 77 papers 上期速览 更多精彩请移步主页 Interesting MaskGAN人脸属性操作的新方法 为了克服先前方法受限于预定义的有限人脸特征操作
  • flutter 插件

    一 简介 Flutter 中调用这些能力就必须和原生平台进行通信 目前Flutter 已经支持 iOS Android Web macOS Windows Linux等众多平台 要调用特定平台 API 就需要写插件 插件是一种特殊的包 和纯
  • LeetCode234:回文链表

    题目描述 题目链接 请判断一个链表是否为回文链表 示例 1 输入 1 gt 2 输出 false 示例 2 输入 1 gt 2 gt 2 gt 1 输出 true 进阶 你能否用 O n 时间复杂度和 O 1 空间复杂度解决此题 解题思路
  • 贪吃蛇实验报告

    贪吃蛇实验报告 第一次写博客 这是中山大学软件工程导论的项目之一 对初学者可能有点难度 分享出来做参考 使用的C语言 如果你喜欢的话可以使用 就这样 直接上代码 智能蛇部分也发上来 include
  • 实现二维数组或多维数组排序得方法

    例 对数组 3 2 6 2 3 6 3 4 5 3 进行排序 方法一 import numpy as np a np array 3 2 6 2 3 6 3 4 5 3 ind np lexsort a 1 a 0 print a ind
  • Linux- 文件夹相关的常用指令

    1 统计文件夹下的文件数量 在 Linux 下 有几种方法可以统计文件夹下的文件数量 使用 ls 和 wc 命令 这种方式可以统计目录下的直接子文件 不包括子目录里的文件 ls l lt 目录路径 gt wc l 注意 这将也统计目录自身
  • Hugging Face PEFT 调优实战附代码

    Hugging Face PEFT 调优实战附代码 PEFT调优大模型 Hugging Face PEFT 调优实战附代码 使用Hugging Face PEFT Library 先快速上手使用PEFT LoRA详解 实际应用 Kaggle
  • 常见的Web漏洞——命令注入

    目录 命令注入简介 命令注入原理 漏洞利用 漏洞防范 总结 命令注入简介 命令注入漏洞和SQL注入 XSS漏洞很相似 也是由于开发人员考虑不周造成的 在使用web应用程序执行系统命令的时候对用户输入的字符未进行过滤或过滤不严格导致的 常发生
  • RBF网络的matlab实现

    一 用工具箱实现函数拟合 参考 http blog csdn net zb1165048017 article details 49407075 1 newrb 该函数可以用来设计一个近似径向基网络 approximate RBF 调用格式
  • python教程30-python2和python3的区别、is和isinstance的使用、字类重写父类方法、不使用多态的问题、多态的使用

    python教程 小白入门2021 4 19 学习目标 这里是对应的视频链接 目录 python教程 小白入门2021 4 49 P173 python2和python3的区别 P174 is和isinstance的使用 P175 子类重写
  • 第十三节:特殊的对象——数组的详解

    typeof null 为什么结果是Object JS解释器编译原则 如果二进制前三位是0 typeof查询的数据类型返回的就是Object 而null转换为二进制存储时 全部位数均为0 所以typeof查询结果为Object 这是早期开发