web前端——笔记5：一维数组

最新推荐文章于 2024-01-31 15:35:52 发布

原创最新推荐文章于 2024-01-31 15:35:52 发布 · 570 阅读

1 ·

CC 4.0 BY-SA版权

计算机前端专栏收录该内容

5 篇文章

订阅专栏

本文深入讲解JavaScript数组的概念，包括数组的定义、初始化、元素访问及修改，遍历方式，字符串转换，连接、排序及栈操作等高级特性。通过具体示例，帮助读者掌握数组在实际编程中的应用。

了解什么是数组？
数组（array）,就是一种常用的保存批量数据的数据结构
多个元素组合的集合——在一个变量名中存储多个值。
JS数组中元素的数据类型可以相同，也可以不同
元素按照线性顺序排列，所有线性书序指除了第一个元素外，每一个元素都有唯一的前驱元素；除最后一个元素外，每一个元素都有唯一的后继元素（一个跟一个）
可以通过元素所在位置的顺序号（下标）做标识来访问每个元素（下标从0开始，最大到元素个数-1）
定义一维数组
可以使用如下四种格式定义一个数组变量：

	var arr1 = [];	             //定义一个不包含元素的数组
	var arr2 = [97,85,29];	     //定义一个包含3个元素的数组
	var arr3 = new Array();	     //定义一个不包含元素的数组
	var arr4 = new Array(“a”,”b”,”c”);	//定义一个三个字符的元素的数组
    var arr5 = [3];     //定义一个只包含一个整数元素的数组，下标为0，值为3
    var arr6 = new Array(3);//定义一个包含三个元素的数组，下标分别为0/1/2,三个元素的均为undefined;
    var arr7 = new Array(3,true,”abc”); //定义包含三个元素的数组，下标分别为0/1/2

初始化数组
数组中的元素可以在定义时初始化
var salaryArray = [1,2,3];
var nameArray = new Array(“张三”,”李四”);
也可以先声明一个空数组，随后再向其中添加元素
var emptyArray = [];
emptyArray[0] = “1”;
emptyArray[1] = “2”;
混合元素类型数组
var mixedArray = new Array();
mixedArray[0] = “中文”;
mixedArray[1] = 123;
mixedArray[2] = true;
访问数组元素
设置数组元素的值
var score = [88,92,67];
score[2] = 90; //将值为67的元素重新赋值为90；
score[3] = 100; //在数组尾部添加一个新的元素
获取数组元素的值
var city = new Array(“西安”,”北京”,”上海”);
document.write(city[0]); //西安
document.write(city[2]); //上海
遍历数组元素
遍历数组元素，通常选择for循环语句，元素的下标作为循环变量：

	var nums = [1,2,3,4];
    	len = nums.length;
    	for(var i=0;i<len;i++){
    		document.write(nums[i]+"<br/>");
    	}
也可以倒叙或者跳序遍历
for(var i=len-1;i>=0;i--){
	document.write(nums[i]+"<br/>");
}
for(var i=0;i<len;i+=2){
	document.write(nums[i]+"<br>");
}

获取数组字符串
valueOf()方法返回数组的元素字符串
toString()方法可以把数组转换为字符串，并返回结果
toLocaleString()返回数组中每个元素本地化表示形式
join(seperator) 返回一个字符串，由每个元素转换而成的字符串使用指定的separator拼接而成

 var numbers = [2123,'hello',new Date()];
 document.write(numbers);
 document.write(numbers.valueOf());
 document.write(numbers.toString());
 document.write(numbers.toLocaleString());
 document.write(numbers.join("-"));

连接数组
concat()拼接两个或更多的数组，并返回结果
语法：arrObject.concat(arr1,arr2,…);
该方法不会改变现有数组，仅仅返回一个拼接后的副本；
每个参数可以是一个值，也可以是一个数组
可以接收任意多个参数

var arr1 = [1,2,3];
    var arr2 = [9,8,7];
    var arr3 = [10,11,23];
    var arr4 = arr1.concat(100,200,arr2,arr3);
    console.log(arr1);
    console.log(arr4);

数组排序
sort() 用于对数组中元素由小到大进行排序
语法：arrObject.sort(sortby);
若未指定参数，则按元素的Unicode码排序；也可以指定元素比较函数sortby,按其返回的正负值作排序的依据。
现有数组内容会改变

    var arr1 = [10,90,30,50,40];
    arr1.sort();
    console.log(arr1);
    var arr2 = ["中文","aa","ab","AA","AB",1,2];
    arr2.sort();
    console.log(arr2);

进出栈操作—栈是一种LIFO(Last-In-First-Out, 后进先出 )的数据结构
push()入栈，在栈顶添加指定的元素，并返回新的长度

 var arr1 = [10,20];
    len = arr1.push(30);
    len = arr1.push(40,50);
    console.log(arr1);
    console.log(len);

pop()出栈，删除并返回栈顶的元素

  var top = arr1.pop();
    top = arr1.pop();
    top = arr1.pop();
    console.log(arr1);

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数组模块</title>
		<style type="text/css">
			mark{display: block;}
		</style>
	</head>
	<body>
	 <mark>for循环遍历数组          </mark>
            <script type="text/javascript">
            	cars = ["BMW","Benz","Volkswagen","Porsche","Cadillac","Jeep"];
                for(var i = 0; i < cars.length ;i++){
            	    document.write(cars[i]+"<br>")
                }
                cars_1 = [10,22,38,41,55,67,74,82,9];
                function sortBy(a,b){
                	return a -b;
                }
                console.log(cars_1.sort(sortBy));  //从小到大排序
                //输出数组的最大最小值
                console.log("最小值："+cars_1[0]);
                console.log("最大值："+cars_1.slice(-1));
                console.log(cars_1.reverse())//倒转数组    从大到小排序
                 console.log("最大值："+cars_1[0]);
                console.log("最小值："+cars_1.slice(-1));
                //添加或删除元素
                cars_1.splice(2,0,7);  //第二位后添加元素
                cars_1.splice(3,1,93,32);  //删除第三位元素，并且在此位置加入两个元素
                for(var i = 0; i < cars_1.length ;i++){
            	    document.write(cars_1[i]+"<br>")
                }
                var arr = cars.concat(100,cars_1);  //拼接数组
                for(var i = 0; i < arr.length ;i++){
            	    document.write(arr[i]+"<br>")
                }
                //获取数组中的某个元素   语法：数组.slice(开始哪一位，结束哪一位)；获取开始到结束的元素
                arr.slice(1,3);
                console.log(arr.slice(1,-1));   //长度16
                /* 入栈与出栈 */
                //数组添加元素    入栈
                len = arr.push(97,28);  //数组.push(num值)
                console.log(len);   //返回数组新的长度
                console.log(arr);   //返回数组所有元素
                //数组顺序删除元素  出栈\n
                var top = arr.pop();   //删除最后一位元素
                top = arr.pop();       //删除倒数第二位元素
                console.log(arr);      //比之前的数组元素少一位
                console.log(top);      //比之前的数组元素少两位
                var a = arr.shift();   //移除并获取数组的第一位元素
                console.log(a);  
              	arr.unshift('a',23,63,'f');//在数组之前加入元素 ，并返回长度，添加元素的方法与push()方法相反
              	console.log(arr);
            </script>
	</body>
</html>

重要的一点是方法与思路，而不是代码！