JS数组基础学习

最新推荐文章于 2022-08-13 22:22:45 发布
最新推荐文章于 2022-08-13 22:22:45 发布
阅读量880 收藏
点赞数 1
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61718994/article/details/122714627
版权

学习内容：forEach、slice和splice、数组的剩余方法

学习笔记

forEach

一般我们都用for循环遍历数组
            JS中还为我们提供了一个方法,用来遍历数组
            forEach() 只支持IE8以上的浏览器
            forEach()方法需要一个函数作为参数；这种函数是由我们创建，但不是由我们调用的，称之为回调函数

语法：

arr.forEach(function(){}）

   数组中有几个元素，函数就执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以来定义形参读取这些内容
            浏览器会在回调函数中传递三个参数；第一个参数就是当前正在遍历的元素，第二个参数就是当前正在遍历的元素的索引；第三个元素就是正在遍历的数组

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript">
			
			var arr=["张三","李四","王五","李六"];
			arr.forEach(function(value,index,obj){
		        document.write("value= "+value+"<br>");
				document.write("index= "+index+"<br>");
				document.write("obj= "+obj+"<br>");
			});		
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

结果

slice和splice

slice

slice()用来从某个数组返回某个特定的元素；
             参数：
             1.截取开始的位置的索引，包含开始索引
             2.截取结束的位置的索引，不包含结束索引；第二个参数可以省略不写，此时会截取从开始索引往后的所有元素

索引可以传递负值，如果传递负值，则从后往前计算

-1倒数第一个，-2倒数第二个，...

语法：

arr.slice(start，end);

该方法不会改变元素数组，而是将 截取到的元素封装到一个新数组中返回

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">	
			var arr=["张三","李四","王五","李六"];
			var result=arr.slice(1,3);
			document.write(result);
		</script>
	</head>
	<body>
	</body>
</html>

结果：

 splice

splice()可以用于删除数组中的指定元素
        使用splice()会影响到原数组,会将指定元素从原数组中删除,并将删除的元素作为返回值 
        参数：
        第一个表示开始位置的索引
        第二个表示删除的数量
        splice()还有第三个及以后的参数，可以传递一些新的元素，这些元素会自动插入到开始位置索引前面

语法：

arr.splice(start,num,"添加的新元素",...);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">	
		
			var arr=["张三","李四","王五","李六"];
			var result=arr.splice(1,2,"赵七","黄sir");
			document.write(result+"<br>");
			document.write(arr);
			
		</script>
	</head>
	<body>
	</body>
</html>

 结果：

 数组的剩余方法

concat()

concat()可以连接两个或多个数组，并将新的数组返回
             该方法不会对原数组产生影响

语法

var arr =["张三","李四","王五","李六"];
var arr1=["小刘","小赵","小李"];
var result=arr.concat(arr1);

 实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			var arr =["张三","李四","王五","李六"];
			var arr1=["小刘","小赵","小李"];
			var result=arr.concat(arr1);
			document.write(result);
		</script>
	</head>
	<body>
	</body>
</html>

结果 

join()

该方法可以将数组转化为一个字符串 ；该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回
在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符,如果不指定连接符,则默认使用","作为连接符

语法

    var arr =["张三","李四","王五","李六"];
    var result=arr.join("——");
    document.write(result);

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr =["张三","李四","王五","李六"];
			var result=arr.join("——");
			document.write(result);

		</script>
	</head>
	<body>
	</body>
</html>

结果

 reverse()

 reverse()方法可以将一个数组反转(前边的去后边,后边的去前边);该方法会改变原数组

 语法

var arr =["张三","李四","王五","李六"];
arr.reverse();
document.write(arr);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr =["张三","李四","王五","李六"];
			arr.reverse();
			document.write(arr);
		</script>
	</head>
	<body>
	</body>
</html>

 结果

sort()

sort()可以用来对数组中的元素进行排序;也会影响原数组,默认会按照Unicode编码进行排序

 var arr =["f","a","s","d","e","k"];

arr.sort();

实例

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            var arr =["f","a","s","d","e","k"];
            arr.sort();
			document.write(arr);
        </script>
	</head>
	<body>
	</body>
</html>

即使对于纯数字的数组,是使用sort()排序时,也会按照Unicode编码进行排序,所以对数字进行排序时可能会得到错误的结果;我们可以自己指定排序的规则
            我们可以在sort()中添加一个回调函数,来指定排序规则,回调函数中需要定义两个形参,浏览器将会分别使用数组中的元素作为实参去调用回调函数
             使用哪个元素调用不确定，但肯定的是在数组中a一定在b前边
             浏览器会根据回调函数的返回值来决定元素的排序，
             如果韩慧一个大于0的值，则元素会交换位置
             如果返回一个小于0的值，则元素位置不变
             如果返回一个0，则认为两个元素相等，也不交换位置

语法

升序：

var arr1=[5,6,8,2,4,9,1,54,36,15];
            arr1.sort(function(a,b){
                return a-b;
            });

 降序：

var arr1=[5,6,8,2,4,9,1,54,36,15];
            arr1.sort(function(a,b){
                return b-a;
            });

升序实例

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            var arr1=[5,6,8,2,4,9,1,54,36,15];
			arr1.sort(function(a,b){
				return a-b;
			});
			document.write(arr1); 
        </script>
	</head>
	<body>
	</body>
</html>

结果

begin 专注
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript数组Array基础介绍
10-22
本文只是对JavaScript数组Array的基础介绍，后续的内容会更深入地探讨数组的各种方法和高级特性，帮助开发者更好地理解和运用这一强大的工具。在JavaScript的世界里，不断学习和探索，你会发现更多的魅力。
整理Javascript数组学习笔记
11-22
JavaScript中的数组是一种特殊的数据结构，...总的来说，理解JavaScript数组的基本概念和操作对于编程至关重要，它们是实现各种数据处理和逻辑控制的基础。通过熟练掌握数组的使用，开发者可以更高效地处理和组织数据。
JS 数组方法学习汇总
weixin_33994444的博客
12-19 93
前言 在 JS 中我们数组用的是比较多的了，它自带了很多方法可以用，省去了我们时间，特别是 ES6 当中对数组的扩展让数组具有了更强大的功能，为了以后使用数组的时候能够充分发挥数组的特性，在这里对数组的方法进行一次汇总吧。 说明 标题后的标识 * 是说明该方法会改变原数组 对数组元素的操作 push() & pop() * pus...
js学习之数组学习
独狼的博客
06-20 281
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js的数组学习</title> <!-- js的数组学习： 1、数组的声明 var arr=new Array();//声明一个空数组对象 var arr=new Array(length)//声明一个指定长度的数组 var arr=[元素]//声明数组(
js基础(8)--数组
mocoll的博客
08-15 142
六、数组 6.1、数组的概念 数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将-组数据存储在单个变量名下的优雅方式。 6.2、数组的创建 JS中创建数组有两种方式: ● 利用new创建数组。 ● 利用数组字面量创建数组。 1.利用 new 创建数组 var 数组名 = new Array () ； var arr = new Array(); // 创建一个新的空数组 ● 这种方式暂且了解,。 2.利用数组字面量创建数组 //（1）使用数组字面量方式创
JS数组学习
qq_16839925的博客
06-15 285
数组 1.数组的概念 一个变量只能存储一个数据，如果我们有一组数据，比如 1 到 100 一百个数字， 定义 100 个变量来存储就太痛苦了，这时候我们就需要数组来存储这样的数据。 数组类似于数学概念中的中的集合。 2.数组的定义 数组为引用类型，创建时可通过构造方法创建。 堆和栈及索引思维 注意：堆和栈及索引思维,数组元素在内存中的存储方式，画内存图 构造方法 1.无参构造函数，创建一空数组 var a1=new Array(); 2.一个数字参数构造函数，指定数组长度（由于数组长度可以动态调整，
js数组学习整理
weixin_34124651的博客
06-22 64
原文地址：js数组学习整理 常用的js数组操作方法及原理 1、声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); //长度为3 var colors = new Array('red','blue');//初始化 　　 其中，在声明数组的时候，去掉new操作符，也...
Javascript基础之数组的使用
10-22
主要介绍了Javascript基础之数组的使用的相关资料，介绍的非常详解，具有参考借鉴价值，感兴趣的朋友一起学习吧
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
JS数组求和的常用方法总结【5种方法】
10-17
学习和掌握这些JavaScript数组求和的技巧，对于提升你的JavaScript编程能力大有裨益。同时，还可以结合其他数组操作技巧，如《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》等，进一步提升...
JS数组（学习整理）
Eliauk的博客
09-02 119
js数组 数组的定义：一段连续的有序的数据集合 变量大的盒子 可以通过下标（索引）来访问 数组创建方式 1. let arr = new Array() //构造函数创建数组对象 2. let arr = [] //字面量方式创建数组对象 数组的遍历 let arr = ['张三', '李四', '王五'] for ( let i = 0; i < arr.length; i++) { console.log(arr[i]); console.log(
学习js中的数组
L1234561008的博客
04-20 133
//声明一个数组 let array=[]; //声明一个有长度的数组 let array=new Array(7); //访问一个数组 for(let i=0;i<array.length;i++){ console.log(array[i]); } //添加数组末尾一个元素 array.push(1); //删除数组末尾一个元素 array.pop(1); //添加数组开头一个元素 ar...
js学习-数组(1)
qq_15058425的博客
04-08 369
创建数组的基本方式有两种： 1、使用Array构造函数： var colors=new Array(); 如果预先知道数组要保存的项目数量，可以给构造函数传递该数量，该数量会自动变成length属性的值 var colors=new Arra0(20); 也可以向Array构造函数传递数组中应该包含的项： var colors=new Array("red","blue","black
【JS】Array数组学习
star_light9682的博客
09-17 122
ECMAscript数组的独特之处 1. 数组中的每一项可以保存任何类型的数据 2. 数组的大小可以动态调整，随数据的添加减少自动变更长度,length不是只读的 - 数组的创建 1.Array构造函数 var arr = new Array() /** * 可向Array构造函数传递传递一个值，该值为数值时，表示所创建数组的项数；若是其他，表示包含那个值 * 的数组 **/ v...
Javascript学习笔记（8） --Js中的数组
weixin_39209728的博客
06-09 364
Js中的数组一、数组是什么使用单独的变量名来存储一系列的值二、数组可以干什么存放内容三、数组的使用两种创建数组的方式1》  构造函数的形式： new Array()2》  字面量形式：[]获取数组的长度数组.length获取数组中的某一个值数组[0]四、js 中的二维数组格式：[         []         []]五、js 中的三维数组格式：[[                 []  ...
JavaScript数组的学习
weixin_53027472的博客
08-13 206
数组的基本定义、基本方法学习
js数组学习方法汇总
weixin_33883178的博客
09-15 49
定义一个数组 var =new Array(); 可以直接给他初始化 var A = new Array("Sunday", "Monday", "Tuesday"); 但此时他的位置还是默认的位置即0对应Sunday 1对应Monday 依次类推 当你用document.write(a[1]);输出的时候此时打应出来的是Monday 1.concat();可以将数组与参数相连接...
Js中Array数组学习总结
weixin_30872157的博客
01-18 53
第一次写博客。。。有点方。。。 小白一枚（是真的小白），自学前端，下面来说说我在学习过程中总结的一些数组操作，如果说哪有错误，请各位大神多多指出，小的虚心接受。 引用类型分为Object类型（所谓的对象），Array类型（本文谈的数组），Function类型等。 那么，数组是干啥的呢？在我看来，它是用来保存数据的。 一、声明一个数组： 1、构造函数 var colors=new...
JavaScript数组学习
qq_66198247的博客
04-20 901
一.数组概念 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。 二.创建数组 1.JS中创建数组有两种方式∶ 利用new创建数组 这种方式暂且了解，等学完对象再看 注意Array 0 ，A要大写 利用数组字面量创建数组 2.我们数组里面的数据一定用逗号分隔 3.数组里面的数据比如1,2，我们称为数组元素 4.数组中可以存放任意类型的数据，例字符串，数字，布尔值等。 三.获取数组中...
JavaScript程序设计-JavaScript数组.pptx
最新发布
11-02
JavaScript程序设计

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值