JavaScript数组的使用详解

目录
  • 一、数组的创建
  • 二、数组的元素和长度
  • 三、数组的遍历
  • 四、数组的常用方法

一、数组的创建

第一种:

var 数组名 = new Array();创建一个空数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var arr=new Array();
			console.log(arr)//以日志形式打印到浏览器控制台
		</script>
	</head>
	<body>
	</body>
</html>

第二种:

var arr2 = new Array(10);创建一个定长为10的数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var arr2 = new Array(10);
			arr2[0]="h";
			arr2[9]="l"
			console.log(arr2)
		</script>
	</head>
	<body>
	</body>
</html>

第三种

var arr3 = new Array(a,b,c);创建时直接指定元素值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var arr3 = new Array("hello","world","JavaScript",10,true)
			console.log(arr3)
		</script>
	</head>
	<body>
	</body>
</html>

第四种

var arr4 = ["hello","world","Flyme awei"];相当于第三种的简写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var arr4 = ["hello","world","Flyme awei"]
			console.log(arr4)
		</script>
	</head>
	<body>
	</body>
</html>

二、数组的元素和长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var arr = [1,2,3,4,5];
			console.log(arr);
			console.log(arr[0]);
			console.log(arr.length)
		</script>
	</head>
	<body>
	</body>
</html>

控制台

1.通过修改length属性来改变数组长度的。

2.通过索引改变数组长度。

三、数组的遍历

1.普通for循环遍历数组

!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var arr = [0,1,2,3,4,5,6,7,8,9];
			for(var i=0;i<=arr.length;i++){
				console.log(i)
			}
		</script>
	</head>
	<body>
	</body>
</html>

2.for each遍历数组

js中的for each写法：for( var i in 数组)i不是元素，是索引

四、数组的常用方法

1.查询元素索引

2.合并两个数组

3.合并多个数组

4.合并字符串

5.删除数组最后一个元素

6.在数组结尾添加元素

7.反转数组

8.删除数组第一个元素

9.向第一个位置添加元素

10.截取子数组

11.删除数组中的某些元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var arr = [0,1,2,3,4,5,6,7,8,9];
			var index = arr.indexOf(7);//查询元素索引的方法
			console.log(index);
			//合并两个数组
			var hege = ["Cecilie","Lone"];
			var stale = ["Email","Tobias","Linus"];
			var childer = hege.concat(stale);
			console.log(childer);
			//合并三个数组
			var family = hege.concat(stale,childer);
			console.log(family);
			//合并字符串
			var fruits = ["Banana","Orange","Apple"];
			var fs = fruits.join();
			console.log(fs);
			//删除数组的最后一个元素
			fruits.pop();
			console.log(fruits);
			//在数组结尾增加元素
			fruits.push("Grape");
			console.log(fruits);
			//翻转数组
			fruits.reverse();
			console.log(fruits);
			//删除数组第一个元素
			var ss = fruits.shift();
			console.log(fruits);
			console.log(ss);
			//向第一个位置添加元素
			fruits.unshift("Per");
			console.log(fruits);
			//截取子数组;
			//从三开始，到六结束
			fruits.slice(3,6);
			console.log(fruits);
			//删除数组中某些元素
			//从2开始，删除5个
			numbers = [1,2,3,4,5,6,7,8,9]
			numbers.splice(2,5);
			console.log(numbers);
			//如果第二个元素是0，那么就变成在指定索引位置添加元素
			numbers.splice(2,0,100);
			console.log(numbers);
	</script>
	</head>
	<body>
	</body>
</html>

到此这篇关于JavaScript数组的使用详解的文章就介绍到这了,更多相关JS数组内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 一文掌握JavaScript数组常用工具函数总结

    目录 一. 实现Array.isArray 二. 将类数组转换为数组 1. 借用数组的方法进行转换 2. es6的方式转换 三. 判断是否为数组 四. 数组方法实现 1.forEach 2. filter 3. every 4. some 5. findIndex 6. Reduce 五. 实现数组扁平化 1. 普通递归+concat 2. reduce+concat 3. while+concat 4. toString+split 5. flat 6. 正则 六. 去重 1. 利用 ES6 

  • 前端进阶JS数组高级用法大全教程示例

    前端进阶JS数组高级用法大全教程示例

    目录 1.批量制造数据 2.数组合并去重 3.创建数组的几种方式 4.类数组 常见的类数组 判断是否是类数组 类数组如何转换为数组 如何让类数组使用上数组丰富的内建方法 类数组和数组的区别 5.数组方法的使用注意事项 数组的长度 数组的空元素 empty 基于值进行运算,空位的值作为undefined join和toString,空位怎么处理 数组不会自动添加分号 indexOf与includes 数组可变长度问题 数组查找和过滤 改变自身的方法 delete误区 push vs concat

  • JavaScript稀疏数组示例教程

    目录 前言 什么是稀疏数组? 创建带有孔洞的稀疏数组 删除元素的映射 现象 稀疏数组的快速映射(强制创建映射关系) 总结 前言 最近有空在看一本关于 JS 数据结构和算法的书,里面有提到数组,却对数组的基本概念轻轻带过,虽然用了 JS 很久但是一直忙于需求业务的实现从未停下好好回视一下这个 既熟悉又陌生的朋友,于是查阅了一些资料,尤其是密集数组和稀疏数组的区别,意犹未尽之下,写了这篇文章,以便更好地帮助理解书中的要点,稍显浅显,也有不足望各位提点. 什么是稀疏数组? 通常编程语言中(C.JAVA

  • JavaScript数组实例的9个方法

    JavaScript数组实例的9个方法

    目录 前言 map filter some every reduce forEach find和findIndex join 总结 前言 手写JS原生API在面试中很常见,今天努力工作之余(摸鱼的时候)翻到了MDN文章中关于数组实例方法这部分,正好无聊就手写几个实例方法玩玩,复习一下基础内容,并记录一下. 如果你还不知道数组实例中迭代方法有什么区别,可以看下面这张图: map 这个方法会返回一个新的数组,数组中的每一项都是执行过map提供的回调函数结果. 实现代码如下: const map =

  • JavaScript数组常用方法解析及数组扁平化

    目录 前言 一.常用数组操作方法 push末尾追加元素 pop删除数组末尾元素 sort排序 shift数组开头添加元素 && unshift数组开头删除元素 数组合并concat indexOf查找元素 && includes查找元素是否存在 reverse反转数组 数组切割成字符串join slice操作数组,替换,删除,新增 every校验数组所有元素 some 测试数组中是不是至少有1个元素通过了被提供的函数测试.返回值是布尔值 深层次递归数组flat map遍历数

  • JavaScript稀疏数组与孔hole示例详解

    JavaScript稀疏数组与孔hole示例详解

    目录 稀疏数组是什么 JavaScript数组天生就是稀疏数组 JavaScript数组稀疏特性带来的“怪异现象” slice会复制孔 forEach.every会跳过孔(不对孔调用回调函数) map不对孔调用回调函数,但是孔会保留 filter不对孔调用回调函数,但是孔会被过滤掉 join会将孔转化为一个空字符串进行拼接,与undefined一样 初始化无孔数组的方法 Array.apply(null, Array(n))的原理 稀疏数组是什么 在绝大多数JavaScript的实现中,数组是稀

  • js实现数组转树示例

    js实现数组转树示例

    目录 原生 封装工具函数 getTree 结构图: 原生 封装工具函数 getTree 1.1 定义 -映射对象 map 数组 treeList=[] 1.2 遍历后端返回的数组 list 为 每个数组对象item 添加 children 属性 值为空数组 1.3 为映射对象 map 添加属性 并赋值key:id值 value:item 1.4 遍历数组对象list 当item.pid为空时 为一级目录 将该一级目录数组对象 添加到treeList中 1.5 通过 item.pid获取到 id

  • JavaScript 数组方法filter与reduce

    目录 前言 filter reduce 数组求和 筛选首字母是否是含有b字母 结语 前言 在ES6新增的数组方法中,包含了多个遍历方法,其中包含了用于筛选的filter和reduce filter 主要用于筛选数组的filter方法,在使用中,不会改变原数组,同时会将符合筛选条件的元素,放入新的数组进行返回. /*** * @item 数组元素 * @index 遍历数组下标 * @thisArr 当前数组 */ let arr1 = [1, 2, 3, 4, 5]; let newArr1 =

  • JavaScript数组方法实例详解

    JavaScript数组方法实例详解

    目录 简介 创建数组 创建方法 详解 方法大全 join() push()和 pop() shift() 和 unshift() sort() reverse() concat() slice() splice() indexOf()和 lastIndexOf() forEach() map() filter() fill()  (ES6 新增) every() some() includes() (ES7) reduce()和 reduceRight() toLocaleString() 和

  • JavaScript数组的使用详解

    JavaScript数组的使用详解

    目录 一.数组的创建 二.数组的元素和长度 三.数组的遍历 四.数组的常用方法 一.数组的创建 第一种: var 数组名 = new Array();创建一个空数组 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var arr=new Array(); console.log(arr)//以日志

  • javaScript数组迭代方法详解

    本文为大家介绍了javaScript数组迭代方法,供大家参考,具体内容如下 每个方法都接收两个参数:要在每一项上运行的函数  和  (可选的)运行该函数的作用域对象. 传入这些方法中的函数会接收三个参数:数组项的值,该项在数组中的位置,数组对象本身. forEach()  对数组中的每一项运行 给定函数.该方法没有返回值. every()  对数组中的每一项运行 给定函数,如果数组的每一项都返回true,则返回true. some()  对数组中的每一项运行 给定函数,如果数组的任意一项返回tr

  • JavaScript数组和循环详解

    数组是元素的一个有序组合.在JavaScript中,数组可以使用正式的对象表示法来创建,或者可以使用直接量表示法来初始化. 复制代码 代码如下: var arrObject = new Array("val1", "val2"); // 作为对象的数组 var arrLiteral = ["val1", "val2"]; // 数组直接量 对于开发者来说,这没有区别:在直接量和对象上都可以调用一个Array方法.对于JavaS

  • JavaScript数据结构链表知识详解

    最近在看<javascript数据结构和算法>这本书,补一下数据结构和算法部分的知识,觉得自己这块是短板. 链表:存储有序的元素集合,但不同于数组,链表中的元素在内存中不是连续放置的.每个元素由一个存储元素本身的节点和一个指向下一个元素的引用(也称指针或链接)组成. 好处:可以添加或移除任意项,它会按需扩容,且不需要移动其他元素. 与数组的区别: 数组:可以直接访问任何位置的任何元素: 链表:想要访问链表中的一个元素,需要从起点(表头)开始迭代列表直到找到所需的元素. 做点小笔记. funct

  • JavaScript String 对象常用方法详解

    字符串是不可变的.字符串方法,不会改变原有字符串的内容,而是返回一个新字符串. charAt():返回在指定位置的字符. concat():连接两个字符串文本,并返回一个新的字符串. indexOf(): indexOf() 方法返回指定值在字符串对象中首次出现的位置. match(): 使用正则表达式与字符串相比较. replace(): 被用来在正则表达式和字符串直接比较,然后用新的子串来替换被匹配的子串. slice(): 摘取一个字符串区域,返回一个新的字符串. split(): 通过分

  • jquery 遍历数组 each 方法详解

    JQuery拿取对象的方式 $('#id') :通过元素的id $('tagName') : 通过元素的标签名 $('tagName tagName') : 通过元素的标签名,eg: $('ul li') $('tagName#id): 通过元素的id和标签名 $(':checkbox'):拿取input的 type为checkbox'的所有元素: Eg: <input type="checkbox" name="appetizers" value="

  • ajax响应json字符串和json数组的实例(详解)

    ajax响应json字符串和json数组的实例(详解)

    最近上班太忙,晚上抽空整理一下ajax请求中,后台返回json字符串和json数组的场景,以及前台的处理示例. 直接看代码. json字符串的后台响应 package com.ajax; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.serv

  • JavaScript This指向问题详解

    JavaScript This指向问题详解

    这篇文章主要介绍了JavaScript This指向问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 各位小伙伴在面试中被面试官问道this指向问题一定不少吧,同时还被问道apply,call和bind的用法区别,现在,就来简单的聊一聊this到底指向何方. 1.基本概念 MDN的官方解释:与其他语言相比,函数的 this 关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别.在绝大多数情况下,

  • javascript异常处理实现原理详解

    这篇文章主要介绍了javascript异常处理实现原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.什么是例外处理 当 JavaScript程序在运行中发生了诸如数组索引越界.类型不匹配或者语法错误时,JavaScript解释器就会引发例外处理. ECMAScript定义了六种类型的错误,除此之外,我们可以使用Error对象和throw语句来创建并引发自定义的例外处理信息. 通过运用例外处理技术,我们可以实现用结构化的方式来响应错误事

随机推荐