浅谈Array --JavaScript内置对象
Array --JavaScript内置对象
描述
可以用一个变量存储多种数据类型的Array对象,Array不是关联数组,不能使用字符串作为索引访问数组元素,需要使用非负整数的下标访问数组中的元素。
和对象的某些特征很相似,例如:属性访问器一半相似,衍生出的使用 .call() 或者 .apply() 将数组方法赋予对象。
较为常用的几个方法
有的是通过改变原数组,又或是返回一个新数组的形式。方便记忆可以划分为:增删改查,排序,遍历,数据和数据集功能。
陈旧的:
此区域为增删区域
\1. push() - 在数组末尾添加一个或多个元素,并返回新的长度。
\2. pop() - 删除并返回数组的最后一个元素。
\3. shift() - 删除并返回数组的第一个元素。
\4. unshift() - 在数组的开头添加一个或多个元素,并返回新的长度。
此区域为修改区域(合并)
\5. splice() - 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。
\6. slice() - 返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝。
\7. concat() - 返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组。
\8. join() - 将数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。
此区域为排序查找
\9. reverse() - 颠倒数组中元素的顺序。
\10. sort() - 对数组的元素进行排序。
\11. indexOf() - 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
\12. lastIndexOf() - 返回一个指定的元素在数组中最后出现的位置,如果不存在,则返回-1。
此区域为遍历
\13. forEach() - 对数组的每个元素执行一次提供的函数。
\14. map() - 创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
\15. filter() - 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
\16. reduce() - 对数组中的所有元素执行一个由您提供的reducer函数(升序执行),将其结果汇总
新颖的:
此区域为数据和数据集功能
at() - 通过下标访问数组元素,区别于直接用方括号访问,可以使用负数访问。
flat() - 将数组扁平化,深度为1。通过传递一个数字参数修改深度。
flatMap() - flat() 和 map() 的结合,先扁平(深度1)再遍历。
Array.from() - 类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。例如字符串,map和set
Array.of() - 创建一个数组,区别于直接使用 Array() 创建数组,括号内的内容是数组的实际数据。假如你想创建一个长度为7的数组应该使用 Array(7) 而不是 Array.of(7) ,因为后者会创建一个[7]的数组。
entries() - 返回一个Array迭代器对象。
Array.length
array.length 改变length属性会发生的情况,假如length小于数组最大的下标,会将length之后的元素清除。
数组的长度跟许多方法是挂钩的,例如 entries() 方法,会通过获取数组长度访问每个整数索引。可以简单的通过 .call() 方法验证:
const arrayLike = {
length: 3,
0: "a",
1: "b",
2: "c",
};
for (const entry of Array.prototype.entries.call(arrayLike)) {
console.log(entry);
}
// [ 0, 'a' ]
// [ 1, 'b' ]
// [ 2, 'c' ]
可以以此俩想到楼下的通用数组方法,只访问 length 属性和索引访问数组元素。
空槽和数组方法
可以使用 Array(n) 创建一个长度为n的空槽数组。
对于空槽而言,许多数组方法都会照顾一下。例如 concat() 方法就会将空槽省去。亦或是将空槽视为 undefined 例如你能想到的 values()
数组遍历
forEach() 和 for...in 两者在特殊情况下的不同效果
for...in可能会迭代对象的原型链上的属性,而array.forEach不会迭代数组的原型链上的属性。此外,array.forEach可以使用break和continue语句来控制迭代。而for...in不能。
const arr1 = [1, 2, 3];
arr1.name = "shit"
arr1.forEach((i) => {
console.log(i);
}); // 1, 2, 3
for (const i in arr1) {
console.log(arr1[i]);
}; // 1, 2, 3, shit
数组复制
深拷贝,浅拷贝 主要比较对象的引用是否一致。例如对象和数组这类数据类型可以想象成保存的是指向数据的地址,浅拷贝的本质是两个数组或者对象中的数据指向了同一个目标。而深拷贝则是两个完全不同的数据指向。
自带的一个浅拷贝 slice() 。
简单的完成一个深拷贝可以使用 JSON 提供的 stringify 和 parse 方法,通过转成 JSON 对象再转回数组的方式。
通用数组方法
指数组的不访问数组对象的任何内部数据,只访问 length 属性和索引访问数组元素。可以使用call方法在类数组对象上调用。
const arrayLike = {
0: "a",
1: "b",
length: 2,
};
console.log(Array.prototype.join.call(arrayLike, "+")); // 'a+b'
由此来看,数组和对象的相似性还是蛮大的,又或者是较简单的数据形式,提供的简单方法能够让开发者更便捷的对数据集进行操作。
浅谈Array --JavaScript内置对象的更多相关文章
- javascript 内置对象及常见API
javascript 内置对象及常见API 2012-09-02 15:17 571人阅读 评论(0) 收藏 举报 javascript正则表达式文档浏览器urlstring Javascript内置 ...
- JavaScript进阶 - 第7章 JavaScript内置对象
第7章 JavaScript内置对象 7-1 什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的, ...
- JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装
知识点梳理 课堂讲义 1.JavaScript面向对象 1.1.面向对象介绍 在 Java 中我们学习过面向对象,核心思想是万物皆对象. 在 JavaScript 中同样也有面向对象.思想类似. 1. ...
- document和javaScript内置对象
1.Document 属性: referrer //返回载入当前文档的URL URL //返回当前文档的URL 方法: getElementById(); //根据id获取html元素对象 getEl ...
- JavaScript内置对象-Object
▓▓▓▓▓▓ 大致介绍 JavaScript的简单数据类型包括:Undefined.Null.Boolean.Number.String.JavaScript中这五种基本数据类型不是对象,其他所有值都 ...
- JavaScript内置对象与原生对象【转】
原文:https://segmentfault.com/a/1190000002634958 内置对象与原生对象 内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化 ...
- JavaScript内置对象与原型继承
(一) 理解JavaScript类定义 1>关于内置对象理解 console.log(Date.prototype.__proto__===Object.prototype //tru ...
- Javascript 笔记与总结(2-4)Javascript 内置对象
① String 字符串对象 fromCharCode() 静态方法, 用作为参数而传递的字符代码创建一个新的字符串. length 字符串的长度. charAt() 抽取字符串中指定位置的字符. c ...
- javascript 内置对象 第17节
<html> <head> <title>内置对象</title> </head> <body> <div>内置对象 ...
- JavaScript内置对象——Math对象
这几天在刷leetcode的时候用到了一些Math对象的知识,故作一下总结~ JavaScript中的Math对象也是一个常见的内置对象,然而与String等其它常见对象不同,Math对象没有构造函数 ...
随机推荐
- 系统U盘安装Windows无法打开install.wim的问题
我们在使用UltraISO工具制作Windows操作系统安装U盘,使用U盘启动,在安装Windows操作系统的过程中,出现类似"Windows无法打开所需的文件X:\sources\inst ...
- vm 16 player安装与网络配置
1.密钥: FA1M0-89YE3-081TQ-AFNX9-NKUC0 2.安装步骤: xshell6,要先右键管理员运行绿化.bat,再双击.exe 3.一般的虚拟机,需要win上的v8适配器的ip ...
- 第8章 使用标记帮助工具构建表单(ASP.NET Core in Action, 2nd Edition)
本章包括 使用Tag Helpers轻松构建表单 使用锚标记帮助程序生成URL 使用Tag Helpers为Razor添加功能 在第7章中,您了解了Razor模板以及如何使用它们为应用程序生成视图.通 ...
- JMeter参数化(二)--数据库参数化
1.下载mysql驱动,解压得到mysql-connector-java-8.0.17.jar(驱动一般放在java的 \java\jre\lib\ext 路径下): 2.在 测试计划-->浏览 ...
- jQuery实现论坛发帖Demo
目录 效果展示 思路 代码 改进空间 效果展示 思路 主要知识点:运用jQuery对HTML元素节点的操作(append)来添加帖子. 交互设计:用户点击页面上的"论坛发帖"按钮, ...
- [Python]Running multiprocessing
import multiprocessing as mp import time def name_and_time(name,num): print(f"Hello {name}, cur ...
- Step by Step: Connecting to Dynamics 365 using a C# Console App
Step by Step: Connecting to Dynamics 365 using a C# Console App If you're new to Microsoft Dynam ...
- CH573 CH579 CH582程序烧录讲解
WCH的蓝牙芯片CH57x/CH58x系类大部分是支持串口烧录.USB烧录和LINK烧录的,除了一些特殊的封装,如571K,它引脚较少,只支持串口免按键烧录. 仿真下载:ARM内核的CH579支持Jl ...
- 使用.pem密钥文件登录服务器
一.使用puttygen工具将.pem文件转成.ppk文件 Load时,需注意选择文件类型为All Files 二.使用secureCRT工具登录 点击properties...按钮,上传ppk文件, ...
- 解决Python写入yaml后排版混乱还丢失注释问题
转载https://www.cnblogs.com/jiahm/category/1530828.html 大家有没有遇到过在使用Python进行yaml文件写入数据后,内容排版混乱并且丢失注释问题, ...