重学JavaScript - 数组
作者:狐狸家的鱼
GitHub:surRimn
整理自MDN文档
数组
数组是一种类列表对象,长度和元素类型不固定。
描述
访问数组
JavaScript数组的索引是从0开始的,第一个元素的索引为0,最后一个为数组长度减一。
如果指定的索引是一个无效值,不会报错,而是返回undefined。
以数字开头的属性不能用点号引用,必须用方括号。
正则匹配结果所返回的数组
RegExp.exec、String.match、String.replace都会返回这样的数组。
属性
Array.length:Array构造函数的length属性,其值为1get Array[]:返回Array构造函数Array.prototype:通过数组的原型对象可以为所有的数组对象添加属性
方法
Array.from():从类数据对象或者迭代对象中创建一个新的数组实例Array.isArrau():判断某个变量是否是一个数组对象Array.of():根据一组参数来创建新的数组实例,支持任意的参数数量和类型
数组实例
所有数组实例都会从Array,prototypr继承属性和方法。修改Array的原型会影响到所有的数组实例。
属性
Array.prototype.constructor:所有的数组实例都继承了这个属性,它的值就是Array,表面了所有的数组都是由Array构造出来的 Array.prototype.length:这个值为 0,因为它是个空数组
方法
- 修改器方法: 会改变调用它们的对象自身的值
- 访问方法:绝对不会改变调用它们的对象的值,只会返回一个新的数组或者返回一个其它的期望值。
- 迭代方法:数组遍历,不要尝试在遍历过程中对原数组进行任何修改
| 修改器方法 | 含义 |
|---|---|
Array.prototype.pop() |
在数组内部,将元素序列拷贝到另一端元素序列上,覆盖原有的值 |
Array.prototype.push() |
在数组的末尾增加一个或多个元素,并返回数组的新长度 |
Array.prototype.reverse() |
颠倒数组中元素的排列顺序,即原先的第一个变为最后一个,原先的最后一个变为第一个 |
Array.prototype.shift() |
删除数组的第一个元素,并返回这个元素 |
Array.prototype.sort() |
对数组元素进行排序,并返回当前数组 |
Array.prototype.splice() |
在任意的位置给数组添加或删除任意个元素 |
Array.prototype.unshift() |
在数组的开头增加一个或多个元素,并返回数组的新长度 |
| 访问方法 | 含义 |
|---|---|
Array.prototype.concat() |
返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组 |
Array.prototype.join() |
连接所有数组元素组成一个字符串 |
Array.prototype.slice() |
抽取当前数组中的一段元素组合成一个新数组 |
Array.prototype.toString() |
返回一个由所有数组元素组合而成的字符串。遮蔽了原型链上的 Object.prototype.toString() 方法 |
Array.prototype.toLocaleString() |
返回一个由所有数组元素组合而成的本地化后的字符串。遮蔽了原型链上的 Object.prototype.toLocaleString() 方法 |
Array.prototype.indexOf() |
返回数组中第一个与指定值相等的元素的索引,如果找不到这样的元素,则返回 -1 |
Array.prototype.lastIndexOf() |
返回数组中最后一个(从右边数第一个)与指定值相等的元素的索引,如果找不到这样的元素,则返回 -1 |
| 迭代方法 | 含义 |
|---|---|
Array.prototype.forEach() |
为数组中的每个元素执行一次回调函数 |
Array.prototype.every() |
如果数组中的每个元素都满足测试函数,则返回 true,否则返回 false |
Array.prototype.some() |
如果数组中至少有一个元素满足测试函数,则返回 true,否则返回 false |
Array.prototype.filter() |
将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回 |
Array.prototype.map() |
返回一个由回调函数的返回值组成的新数组 |
Array.prototype.reduce() |
从左到右为每个数组元素执行一次回调函数,并把上次回调函数的返回值放在一个暂存器中传给下次回调函数,并返回最后一次回调函数的返回值 |
Array.prototype.reduceRight() |
从右到左为每个数组元素执行一次回调函数,并把上次回调函数的返回值放在一个暂存器中传给下次回调函数,并返回最后一次回调函数的返回值 |
示例简单列表
创建数组
let person = [1, 2, 3];
通过索引访问数组元素
let first = person[0];//
let last = person[person.length - 1];//
遍历数组
person.forEach((item, index, array) => {
})
添加元素到数组的末尾
let new = person.push(4);//[1, 2, 3, 4]
删除数组末尾的元素
person.pop();//[1, 2, 3]
删除数组最前面(头部)元素
person.shift();//[2, 3]
添加元素到数组的头部
person.unshift(1);//[1, 2, 3]
找出某个元素在数组中的索引
person.indexOf(1);//
通过索引删除某个元素
第一个参数代表开始索引位置,第二个参数代表个数
person.splice(1, 1);//[1, 3, 4]
从一个索引位置删除多个元素
person.splice(0, 2);//[4]
复制一个数组
let newPerson = person.slice();
重学JavaScript - 数组的更多相关文章
- 2.重学javascript 对象和数组
什么是对象,其实就是一种类型,即引用类型. 一.创建Object类型有两种. ①使用new运算符 <script type="text/javascript"> var ...
- 1.重学javascript (一)
一.script标签解析 <script>xxx</script>这组标签,是用于在html 页面中插入js的主要方法.它主要有以下 几个属性: 1.charset:可选.表示 ...
- 重学JavaScript - 映射与集合
作者:狐狸家的鱼 GitHub:surRimn 整理自MDN文档 带键的集合 映射 Map对象 一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个 for...of 循环在每次迭代后会返 ...
- 复习 Array,重学 JavaScript
1 数组与对象 在 JavaScript 中,一个对象的键只能有两种类型:string 和 symbol.下文只考虑键为字符串的情况. 1.1 创建对象 在创建对象时,若对象的键为数字,或者由 字母+ ...
- 重学JavaScript之面向对象的程序设计(继承)
1. 继承 ES 中只支持实现继承,而且其实现继承主要依靠原型链来实现的. 2. 原型链 ES中 描述了 原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引 ...
- 重学JavaScript之匿名函数
1. 什么是匿名函数? 匿名函数就是没有名字的函数,有时候也称为< 拉姆达函数>.匿名函数是一种强大的令人难以置信的工具.如下: function a(a1, a2, a3) { // 函 ...
- 重学js之JavaScript 面向对象的程序设计(创建对象)
注意: 本文章为 <重学js之JavaScript高级程序设计>系列第五章[JavaScript引用类型]. 关于<重学js之JavaScript高级程序设计>是重新回顾js基 ...
- 【跟着大佬学JavaScript】之数组去重(结果对比)
前言 数组去重在面试和工作中都是比较容易见到的问题. 这篇文章主要是来测试多个方法,对下面这个数组的去重结果进行分析讨论.如果有不对的地方,还请大家指出. const arr = [ 1, 1, &q ...
- 【从0到1学javascript】javascript数据结构----数组
javascript中对数组的定义 数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可以是整数.这些数字索引在内部被转换成字符串类型.这是因为javascript对象中的属性名必须是字符 ...
随机推荐
- PHP+nginx 启动后访问超时
场景 在Windows上, nginx配置并启动后, 访问报504超时 解决 很尴尬, php-cgi没启动 php-cgi -b
- Django之CSRF跨站请求伪造(老掉牙的钓鱼网站模拟)
首先这是一个测试的代码 请先在setting页面进行下面操作 注释完成后,开始模拟钓鱼网站的跨站请求伪造操作: 前端代码: <!DOCTYPE html> <html lang=&q ...
- 可编辑且宽度自适应input
默认的input项是比较难看的,并且它的宽度还无法随着输入而变化,这样未免有些呆板,不过借助JavaScript可以达到宽度自适应的效果,下面为了方便使用了jQuery: <div class= ...
- 1.4 GPU分析
shader 加宏 编译说明glsl
- 解决Geoserver请求跨域的几种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景描述 跨域问题是浏览器同源安全制引起的特别常见的问题.不同前端语 ...
- 小米平板8.0以上系统如何不用root激活xposed框架的流程
在大多使用室的引流,或业务操作中,基本上都需要使用安卓的强大XPOSED框架,近来我们使用室购来了一批新的小米平板8.0以上系统,基本上都都是基于7.0以上系统版本,基本上都不能够刷入ROOT的su权 ...
- TCP点对点转发的实现与原理(nodejs)
Nagent Nagent是TCP点对点转发实现,名称来源于Nat与Agent的组合.类似frp项目,可以在局域网与互联网提供桥梁. 前提是你要有一台流量服务器并且有一个公网IP.如果没有,也可以找服 ...
- iBatis第五章:事务管理
---------------------------- 1.什么是事务 ------------------------------ 什么是事务? 需要注意的是,事务的概念不是针对某个特定的数据库的 ...
- Eclipse里JAR文件的打包和使用
作用:用于封装class.properties文件,是文件封装的最小单元: 包含Java类的普通库.资源(resources).辅助文件(auxiliary files)等. 可以将程 ...
- Vue-cli在webpack内使用雪碧图(响应式)
先执行install cnpm install webpack-spritesmith 文件位置 build\webpack.dev.conf.js 添加内容: const SpritesmithPl ...