Array 对象简介

Array 对象属性

Array 对象方法

数组迭代遍历

二维数组的创建与迭代

for ... of 增强型迭代

Array 对象简介

1、Array 对象用于在单个的变量中存储多个值，js 的 Array 如同 Java 的 list 一样，它的长度是可以自动调整的。创建 Array 对象的语法：

new Array();
new Array(size);
new Array(element0, element1, ..., elementn);

2、参数 size 是期望的数组元素个数，length 属性将被设为 size 的值。

3、参数 element ..., elementn 是参数列表，当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值，它的 length 属性也会被设置为参数的个数。

4、如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0，可以后面使用 length() 方法进行设置长度。

5、当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined 的数组。

Array 对象属性

属性	描述
constructor	返回对创建此对象的数组函数的引用。
length	1）设置或返回数组中元素的数目。语法：arrayObject.length。数组的 length 属性总是比数组中定义的最后一个元素的下标大 1。数组的 length 属性在用构造函数 Array() 创建数组时被初始化。 2）给数组添加新元素时，如果实际的元素个数超过 length，则将自动更新 length 的值。 3）设置 length 属性可改变数组的大小，如果设置的值比其当前值小，数组将被截断，其尾部的元素将丢失。如果设置的值比它的当前值大，数组将增大，新的元素被添加到数组的尾部，它们的值为 undefined。
prototype	使您有能力向对象添加属性和方法。

    <script type="text/javascript">var arrs = [1, 2, 3, 4, 5];console.log("原始数组——>" + arrs.toString());arrs.length = 3;//此时元素 4,5会被删除console.log("arrs1=" + arrs.toString());arrs.length = 0;//此时整个数组的值会被删除console.log("arrs2=" + arrs.toString());arrs.length = 2;//此时数组长度重新设置为2，但是无元素console.log("arrs3=" + arrs.toString());//虽然此时设置的 length 属性值为2，但是添加的元素的个数超过时，length 会自动更新确保元素添加成功arrs[0] = 10, arrs[1] = 20, arrs[2] = 30, arrs[3] = 40, arrs[4] = 50;console.log("arrs4=" + arrs.toString());</script>

Array 对象方法

方法	描述
concat()	连接两个或更多的数组，并返回结果。
copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries()	返回数组的可迭代对象。
every()	检测数值元素的每个元素是否都符合条件。
fill()	使用一个固定值来填充数组。
filter()	检测数值元素，并返回符合条件所有元素的数组。蚩尤后裔
find()	返回符合传入测试（函数）条件的数组元素。
findIndex()	返回符合传入测试（函数）条件的数组元素索引。
forEach()	数组每个元素都执行一次回调函数。
from()	通过给定的对象中创建一个数组。
includes()	判断一个数组是否包含一个指定的值。
indexOf()	搜索数组中的元素，并返回它所在的位置。
isArray()	判断对象是否为数组。
join()	把数组的所有元素放入一个字符串。
keys()	返回数组的可迭代对象，包含原始数组的键(key)。
lastIndexOf()	返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。蚩尤后裔
pop()	删除数组的最后一个元素并返回删除的元素。蚩尤后裔
push()	向数组的末尾添加一个或更多元素，并返回新的长度。蚩尤后裔
reduce()	将数组元素计算为一个值（从左到右）。
reduceRight()	将数组元素计算为一个值（从右到左）。
reverse()	反转数组的元素顺序。
shift()	删除并返回数组的第一个元素。蚩尤后裔
slice()	选取数组的的一部分，并返回一个新数组。
some()	检测数组元素中是否有元素符合指定条件。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。蚩尤后裔
valueOf()	返回数组对象的原始值。

数组迭代遍历

    <script type="text/javascript">var arrays = [10, 20, 30, 40, 50];console.log("-------普通 for 循环-------");for (var i = 0; i < arrays.length; i++) {console.log((i + 1) + " = " + arrays[i]);}console.log("-------增强 for 循环-------");var count = 1;for (var valueLoop of arrays) {console.log((count++) + " = " + valueLoop);}</script>

1、forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数，forEach() 对于空数组是不会执行回调函数的。

语法：array.forEach(function(currentValue, index, arr), thisValue)

参数

描述

function(currentValue, index, arr)

必需。数组中每个元素需要调用的函数。
函数参数:

参数	描述
currentValue	必需。当前元素
index	可选。当前元素的索引值。
arr	可选。当前元素所属的数组对象。

thisValue

可选。传递给函数的值一般用 "this" 值。
如果这个参数为空， "undefined" 会传递给 "this" 值

    <script type="text/javascript">var arrays = [10, 20, 30, 40, 50];arrays.forEach(function (value, index) {console.log(index + "=" + value);});</script>

二维数组的创建与迭代

1、JavaScript 没有直接创建二维数组的功能，但是可以用一维数组间接创建，即将一维数组的值也设置为数组即可。

    <script>var oneSize = 3;//行数var towSize = 5;//列数var arr = [];//为它的子元素创建数组。大小不指定时，后期添加时会自动扩展。for (var i = 0; i < oneSize; i++) {arr[i] = [];for (var j = 0; j < towSize; j++) {arr[i][j] = (i + 1) + "" + (j + 1);}}//普通 for 循环取值for (var i = 0; i < oneSize; i++) {for (var j = 0; j < towSize; j++) {console.log("(" + i + "," + j + ")", arr[i][j]);}}//for...of 迭代取值for (var one of arr) {for (var tow of one) {console.log(tow);}}</script>

for ... of 增强型迭代

1、for...of 可以迭代任何可以迭代的对象，如数组、类数组、maps、sets、DOM 集合、string，类似 Java 的增强型 for 循环.

数组迭代

    //迭代数组。for...of 循环遍历 ids 的每一项，迭代项被赋值给变量 id.var ids = ["1100U", "9987Y", "00PP7"];for (var id of ids){console.log(id);}

类数组迭代

1、for...of 可以用于迭代类数组对象，arguments 是函数体内的特殊变量，包含函数的所有参数，这是一个经典的类数组对象。

    //求和函数function sun() {var sun = 0;// 循环遍历类数组 arguments 中的每一个数for (var arg of arguments) {sun += arg;}return sun;}console.log(sun(1, 4, 8, 9));//输出 22

字符串迭代

1、JavaScript 的基础类型 string 是可迭代的，因此可以轻松地遍历字符串的字符。

    var str = "Hello 中国!";for (var s of str) {console.log(s);}

Map 和 Set 迭代

    var map = new Map();map.set("id", 9527);map.set("name", "华安");//迭代器返回一个数组 [key，value] ，然后使用 var [m_k, m_v] 对对数组进行解构.for (var [m_k, m_v] of map) {console.log(m_k + "=" + m_v);}var set = new Set();set.add("大秦");set.add("大魏");for (var s of set) {console.log(s);}

json 对象迭代

    //forEach 遍历方式Object.keys(json).forEach(function (key) {console.log(key + "=" + json[key]);});//for in 遍历方式for (var key in json) {console.log(key + "=" + json[key]);}//for...in 遍历方式for (var [key, value] of Object.entries(json)) {console.log(key + "=" + value);}

遍历 DOM 集合

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div><p>万里长城</p><p>阿房宫</p><p>骊山</p>
</div>
</body>
<script type="text/javascript">var pDomObjs = document.querySelectorAll('p');for (var pDom of pDomObjs) {console.log(pDom.innerHTML);}
</script>
</html>

JS 数组 Array 对象详解与 for...of 增强型迭代相关推荐

js 数组遍历方法详解（map、filter、find、findIndex、reduce）
目录前言 map map是什么 map方法的结构及入参语法糖 map一般不改变原数组 filter 说明例子 find 和 findIndex 说明例子 reduce 说明例子尾言前言 ...
JS进阶篇--JS数组reduce()方法详解及高级技巧
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
JS进阶篇--JS数组reduce()方法详解及高级技巧 1
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
JS 数组定义及详解
一.数组简介 1.什么是数组: 数组是值的有序集合.每个值叫做元素,每个元素在数组中都有数字位置编号,也就是索引. JS中的数组是弱类型的,数组中可以含有不同类型的元素.数组元素甚至可以是对象或其他数 ...
史上最全JavaScript数组对象详解（二）
JavaScript数组对象详解(二) 上一篇博客我们讲到了JavaScript数组对象的创建,访问和属性,接下来一篇博客主要讲一下JavaScript数组对象的方法及使用.说到数组的方法,主要分为两 ...
JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的 ...
JS window对象详解
JS window对象详解 1.window对象 2.窗口操作打开窗口关闭窗口 3.对话框 confirm prompt 4.定时器 setTimeout和clearTimeout setInte ...
JS Event对象详解
JS Event对象详解参考资料: js添加事件和移除事件:addEventListener()与removeEventListener() Event 对象 Event 对象代表事件的状态,比如事 ...
ES5和ES6数组遍历方法详解
ES5和ES6数组遍历方法详解在ES5中常用的10种数组遍历方法: 1.原始的for循环语句 2.Array.prototype.forEach数组对象内置方法 3.Array.prototype. ...
JS----window对象详解
一.说明他是JS中最大的对象,它描述的是一个浏览器窗口,一般要引用他的属性和方法时,不需要用"Window.XXX"这种形式,而是直接使用"XXX".一个框架 ...

JS 数组 Array 对象详解与 for...of 增强型迭代

Array 对象简介

Array 对象属性

Array 对象方法

数组迭代遍历

二维数组的创建与迭代

for ... of 增强型迭代

JS 数组 Array 对象详解与 for...of 增强型迭代相关推荐

最新文章

热门文章

JS 数组 Array 对象详解 与 for...of 增强型迭代

Array 对象简介

Array 对象属性

Array 对象方法

数组迭代遍历

二维数组的创建与迭代

for ... of 增强型迭代

JS 数组 Array 对象详解 与 for...of 增强型迭代相关推荐

最新文章

热门文章

JS 数组 Array 对象详解与 for...of 增强型迭代

JS 数组 Array 对象详解与 for...of 增强型迭代相关推荐