JavaScript-5(数组)

1.数组的概念

  • 数组是值的有序集合
  • 数组中的每个值 称之为 元素
  • 每个元素可以是任意数据类型的值
  • 每个元素都有索引(下标)
  • 元素的索引从0开始,按照顺序递增。 元素最大的索引 2^32-2

2.创建数组

  • 直接量 []

  • 构造函方式 new Array()

      <script>
      	
      	//直接量方式
      	console.log([1,2,3]);
      	var arr = [];
    
      	//构造函数方式
      	var arr1 = new Array();
      	console.log(arr1);
    
      	//Array(值)值为一个数字的时候,表示数组长度
      	var arr2 = new Array(5);
      	console.log(arr2);
    
      	//Array(值) 值为多个的时候,表示数组值
      	var arr3 = new Array(1,2,3,4,5,"heiehi");
      	console.log(arr3);
    
      	//只定义一个数组值的时候
      	var arr4 = new Array();
      	arr4[0] = 100;
      	console.log(arr4);
    
    
      	console.log(typeof arr4);//返回object
      	console.log(typeof arr);//返回object
    
      </script
    

3.读写数组中的元素

  • 数组名[索引]

4.稀疏数组

  • js数组的索引是连续的
  • 没有连续的给元素赋值 , 没有赋值的元素会自动赋值 undefined

5.添加和删除 数组的元素

  • 添加数组元素

    • 指定索引来添加元素

    • 把数组长度当做新元素的索引 arr[arr.length] = value

    • 在数组的最后添加元素(可以有多个) push() arr.push("值")

    • 在数组的前面添加元素(可以有多个) unshift() arr.unshift("值")

    • 在数数组的任意位置添加元素 splice(index, 0, value(可以有多个值))

       <script>
       		//创建数组
       		var arr = ["刘奶奶", "牛奶奶", "马奶奶", "羊奶奶", "司马奶奶"];
       
       		console.log(arr);
       		console.log(arr.length);
       
       		//给数组添加 元素
       		arr[5] = "欧阳奶奶";
       		
       		arr[arr.length] = "白奶奶"; //给数组追加元素
       
       		//在数组的最后一个位置 追加元素
       		arr.push("王奶奶");
       
       		//在数组的最后 追加(多个)元素
       		arr.push("刘姥姥", "马姥姥");
       
       		//在数组的最前面 添加(多个)元素
       		arr.unshift("酸奶奶");
       		arr.unshift("甜奶奶", "辣奶奶", "咸奶奶");
       
       
       		//在数组的任意位置 添加(多个)元素
       		arr.splice(4, 0, "姥姥");		
       		arr.splice(2, 0, "大姥姥", "小姥姥");	
       
       		console.log(arr);
       
       	</script>
      
  • 删除数组的元素

    • 改变数组的length属性 arr.length -= 1; arr.length -= n(删除后面n个元素)

    • 删除最后面的一个元素 pop()(没有参数)

    • 删除数组的第一个元素 shift()(没有参数)

    • 删除指定位置的指定个数的元素 splice(index, 删除个数)

    • 会把数组变稀疏,值删了但是位置还在delete arr[下标值]

       <script>
       		//创建数组
       		var arr = ["刘姥姥", "马姥姥", "赵姥姥", "张姥姥", "司马姥姥", "欧阳姥姥", "独孤姥姥", "东方姥姥", "西门姥姥"];
       		console.log(arr);
       
       		// 直接改变数组的长度
       		//arr.length = 5;
       		//arr.length = arr.length - 1;
       		arr.length -= 1;
       		console.log(arr);
       
       		// pop()  删除最后一个元素
       		arr.pop();
       		console.log(arr);
       
       		//shift() 删除第一次元素
       		arr.shift();
       		console.log(arr);
       
       		//删除任意位置的元素 的任意个数的元素
       		//arr.splice(1, 1);
       		arr.splice(1, 2);
       		console.log(arr);
       
       		//运算符 delete 会把我们数组搞得稀疏, 不会真正删除
       		delete arr[2];
       		console.log(arr);
       
       	</script>
      

6. 数组遍历

  • for 循环

  • for in

      //循环
      for (var i = 0; i < arr.length; i ++) {
      	console.log(arr[i]);
      }
      console.log("");
    
      //遍历的 另一种写法
      for (var i in arr) {
      	console.log(arr[i]);
      }
    

7.多维数组

8.数组的方法

  • join([间隔符号]) 把数组的每个元素拼接成一个字符串 返回字符串

  • slice(start, end) 截取数组中的一部分, 返回一个新数组

  • concat(arr, arr....) 合并数组. 返回一个新数组

  • toString() 把数组转换为字符串

  • reverse() 翻转数组 副作用

  • sort() 排序 副作用

  • push() pop() 副作用

  • shift() unshift() 副作用

      <script>
      		//创建数组
      		var arr = [100,200,300,400,500,600];
      		console.log(arr);
      
      		//把数组 变成 字符串
      		console.log(arr.join());
      		console.log(arr.join(""));
      		console.log(arr.join("-"));
      
      		//截取数组中的一部分
      		console.log(arr.slice(1, 4));
      
      		//合并多个数组
      		console.log(arr.concat(["奶奶", "姥姥"]));
      		console.log(arr.concat(["奶奶", "姥姥"], ["刘奶奶", "欧阳奶奶", "慕容奶奶"]));
      		console.log(["大奶奶", "二奶奶"].concat(arr))
      
      		//翻转数组 副作用
      		arr.reverse();
      		console.log(arr);
      
      		//splice  副作用
      		arr.splice(2, 2, "奶奶");
      		console.log(arr);
      
      		//排序
      		arr.sort();
      		console.log(arr)
      
      		console.log(arr.toString());
      </script>
    

9.类数组对象

  • arguments

  • Elementcollection 元素的集合

    document.getELementsByTagName()

    element.getElementsByTagName()

      <body>
      	<ul id="mylist">
      		<li>同志交友</li>
      		<li>同志交友</li>
      		<li>同志交友</li>
      		<li>同志交友</li>
      		<li>同志交友</li>
      		<li>同志交友</li>
      	</ul>
    
      <button onclick="changeRed()">变红</button>
      
      <li>我也是li</li>
      <script>
      	function changeRed(){
      		var ul = document.getElementById("mylist");
      		var lis = ul.getElementsByTagName("li");
    
      		for (var i = 0; i < lis.length; i ++) {
      		//for (var i in lis) {
      			lis[i].style.backgroundColor = "red";
      		}
      	}
      </script>
      </body>
    

10.作为数组的字符串

  • 字符串具有部分数组特性

  • 字符串也有length属性 获取字符串的长度

  • 也可以通过[索引值] 取出字符串中的一个字符

  • 不可以用str[i]="值";来修改字符串中的字符!

      <script>
      		//创建字符串
      		var str = "hello,丽丽";
      		console.log(str);
      
      		console.log("字符串长度:"+str.length);
      		console.log(str[4]);
      
      		str[4] = "A";  //无法修改
      		console.log(str);
      
      		//把字符串中 每个字符 遍历出来
      		for (var i = 0; i < str.length; i ++) {
      			console.log(str[i]);
      		}
      </script>
原文地址:https://www.cnblogs.com/1666818961-lxj/p/7390703.html