JS笔记1.4--数组

1.数组的基本属性

#数组的创建，添加元素和数组的长度

<script type="text/javascript">
	/*
	* 数组
	* 数组也是对象，也是用来存储数据的
	* 区别是：普通对象一般使用字符串作为属性名，数组使用下标作为索引(从0开始)操作元素
	*/ 
	var arr = new Array(); //创建数组对象
	console.log(typeof arr);//使用typeof检查一个数组时,返回object(数组也是对象)
	/*
        * 1.如果数组中对应的索引中没有存储数据，默认存储的是undefined
	* 2.向数组中添加元素
	* 语法： 数组名[索引] = 值
	* 3.读取数组中的元素
	* 语法： 数组名[索引]
	* 4.如果读取的索引大于数组长度，不会报错，返回undefined
        * 5.如果数组的存储空间不够，数组会自动扩容
        * 6.数组可以存储不同类型的数据
        * 7.数组分配的存储空间不一定连续：如果存储的都是相同类型的数据，则会尽量分配连续的存储空间；
            如果存储的数据类型不同，则不会分配连续的存储空间
	*/ 
        arr[0] = 1;
	arr[1] = 2;
	console.log(arr); //输出是 [1, 2]
	console.log(arr[1]);//输出是 2
	console.log(arr[5]);//输出是 undefined
	
	/*
	* 获取数组长度，使用length属性
	* 语法： 数组名.length
	* 对于连续数组，使用length能获取数组长度
	* 对于非连续数组，使用length能获取数组的最大索引+1
	*/ 
        console.log(arr.length); // 2
	
	/*
	* 修改数组的长度
	*  -- 如果修改后的数组长度大于原数组的长度，则多出来的元素为0
	*  -- 反之，如果修改后的length小于原长度，则删除多出的元素
	*/ 
	arr.length = 5; //将原长度为2的数组修改成长度为5
	console.log(arr.length);// 5
	console.log(arr);//[1, 2] 大于原数组长度的元素值初始化为0
	arr.length = 1;
	console.log(arr);//输出是 [1]
	
	//向数组的最后位置添加元素
	//最后位置 = length 
	//语法: 数组名[数组名.length] = 值
	arr[arr.length] = 2;
	console.log(arr);//[1, 2]
</script>

2. 使用字面量和构造函数创建数组，数组的元素类型任意

        // 1. 通过构造函数创建数组
        // let 变量名称 = new Array(size); 创建一个指定大小数组
        // let 变量名称 = new Array();     创建一个空数组
        // let 变量名称 = new Array(data1, data2, ...);     创建一个带数据的数组

        // 2. 通过字面量创建数组
        // let 变量名称 = [];  创建一个空数组
        // let 变量名称 = [data1, data2, ...];  创建一个带数据的数组

<script type="text/javascript">
	/*
	* 使用字面量创建数组
	*  语法： 数组名 = []
	*/ 	
	//使用字面量创建数组,可以在创建时指定数组中的元素
	var arr1 = [1,2,3,4,5];
	 
	/*使用构造函数创建数组,也可以添加元素,将要添加的元素作为构造函数要传递的参数
	*元素之间使用","隔开
	*/ 
	var arr2 = new Array(1,2,3);
	
	/*
	* 使用字面量创建数组和使用构造函数创建数组的区别：
	*/ 
	arr1 = [10]; // 数组中只有一个元素 10
	console.log(arr1.length); // 1
	arr2 = new Array(10); // 数组长度是 10
	console.log(arr2.length); // 10
	
	/*
	* 数组中的元素类型值任意,也可以是对象 或者函数，也可以是数组
	*/ 
        var arr3 = [{name:"孙悟空"},{name:"白龙马"},{name:"唐三藏"}]; //元素是 对象
	console.log(arr3); // [Object, Object, Object]
	console.log(arr3[1].name); // 输出是 白龙马
	
	var arr4 = [function(){},function(){},function(){}]; // 元素是 函数
	console.log(arr4[0]);// 输出是 function(){}
	
	var arr5 = [[1,2,3],[4,5,6],[7,8,9]];
	console.log(arr5[1]);//输出是 [4,5,6]
</script>

3.数组的解构赋值

        let arr = [1, 3, 5];
        let [a, b, c] = arr;
        console.log("a = " + a); a=1
        console.log("b = " + b); b=3
        console.log("c = " + c); c=5

        1.在数组的解构赋值中, 等号左边的格式必须和等号右边的格式一模一样, 才能完全解构
        let [a, b, c] = [1, 3, 5];
        let [a, b, [c, d]] = [1, 3, [2, 4]];
        let [a,b,c] = [1,2,[3,4]]
        console.log(c) //[3,4]

        2.在数组的解构赋值中, 左边的个数可以和右边的个数不一样
        let [a, b] = [1, 3, 5];
        console.log("a = " + a); a=1
        console.log("b = " + b); b=3

        3.在数组的解构赋值中, 右边的个数可以和左边的个数不一样
        let [a, b, c] = [1];
        console.log("a = " + a); a=1
        console.log("b = " + b); b=undefined
        console.log("c = " + c); c=undefined

        4.在数组的解构赋值中,如果右边的个数和左边的个数不一样, 可以给左边指定默认值
        let [a, b = 666, c = 888] = [1];
        console.log("a = " + a); a=1
        console.log("b = " + b); b=666
        console.log("c = " + c); c=888

        5.在数组的解构赋值中, 如果左边的个数和右边的个数不一样, 那么如果设置默认值会被覆盖
        let [a, b = 666] = [1, 3, 5];
        console.log("a = " + a); a=1
        console.log("b = " + b); b=3

        6.左右个数相同，默认值也被覆盖的情况
        let [a, b = 666,c] = [1, 3, 5];
        console.log("a = " + a); a=1
        console.log("b = " + b); b=3
        console.log(c);          c=5
        
        7.使用ES6的扩展运算符打包剩余的数据
        扩展运算符：... 
        如果用到了...，则...必须放在最后
        let [a, ...b] = [1, 3, 5];
        console.log("a = " + a);//a=1
        console.log(b);//b=[3,5]

4. 数组的方法之：添加push()和unshift()，删除pop()+shift()

<script type="text/javascript">
	/*1. 添加元素
	* 1.1. 向数组的末尾添加新元素 push()方法：
	*   向数组的末尾添加一个或者多个元素，并返回新的数组的长度
	*   可以将要添加的元素作为方法的参数传递，这样这些元素就会自动添加到数组的末尾
    *   push方法可以接收1个或多个参数
	*/ 
        var arr = ["孙悟空","猪八戒","沙和尚"];
	var result = arr.push("白龙马","唐僧");
	console.log(arr);//输出是 ["孙悟空", "猪八戒", "沙和尚", "白龙马", "唐僧"]
	console.log(result); //返回数组的新长度 5
	
	/* 1.2 向数组的开头添加新元素 可以接受1+个参数
	* unshift()方法：
	*   向数组的开头添加一个或者多个元素，并返回新的数组的长度
	*   向数组的前边插入元素，原来数组的元素索引会依次调整
	*/ 
	result = arr.unshift("铁扇公主","红孩儿");
	console.log(arr); // ["铁扇公主", "红孩儿", "孙悟空", "猪八戒", "沙和尚", "白龙马"]
	console.log(result); // 6

	/*2. 删除元素
	* 2.1 删除数组末尾的元素 pop()方法：
	*   删除数组的最后一个元素，并将被删除的元素作为返回值返回
	*/ 
        result = arr.pop();
	console.log(arr);//输出是 ["孙悟空", "猪八戒", "沙和尚", "白龙马"]
	console.log(result); // 唐僧
	

	
	/*2.2 删除数组开头的第一个元素
	* shift()方法：
	*   删除数组的第一个元素，并将被删除的元素作为返回值返回
	*/
        result = arr.shift();
	console.log(arr); //["红孩儿", "孙悟空", "猪八戒", "沙和尚", "白龙马"]
	console.log(result); // 铁扇公主
</script>

5.  数组的方法之：修改和删除splice()

splice()方法，只传递两个参数是删除操作，传递三个及以上参数是替换操作
1.替换元素
参数1: 从什么位置开始
参数2: 需要替换多少个元素
参数3开始: 新的内容
let arr = ["a", "b", "c"];
arr.splice(1, 2, "d", "e");
console.log(arr);  ["a", "d", "e"]

2.删除元素
参数1: 从什么位置开始
参数2: 需要删除多少个元素
let arr = ["a", "b", "c"];
arr.splice(1, 1);
console.log(arr); ["a"]

	/*
	* splice()方法：删除元素会修改原数组的索引和长度
	*  删除数组中的指定元素，并向数组添加新元素
	*  影响原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
	*  参数：
	*    第一个参数：表示从第几个元素开始删除
	*    第二个参数：一共删除几个元素
	*    第三个参数及以后：替换删除的元素
	*/
	result = arr.splice(0,2); //从第一个元素开始删除,一共删除两个元素
	console.log(result); // ["孙悟空", "唐僧"]
	console.log(arr); // ["猪八戒", "牛魔王"]

6.数组的方法之：清空数组 

let arr = [1, 2, 3, 4, 5];
1. arr = [];
2. arr.splice(0, arr.length)
3. arr.length = 0;

7.数组的方法之：将数组转换成字符串 

    1. 使用toString()方法，会将字符串返回，不会改变原数组
        let arr = [1,2,3,4,5];
        let res =arr.toString();
        console.log(res) // 1,2,3,4,5
        console.log(arr) //(5) [1, 2, 3, 4, 5]
        console.log(typeof res) //string
        let arr1 = ['a', 'b', 'c'];
        console.log(arr1.toString());//a,b,c

    2. 使用join()方法：在没有传递参数的情况下，join()方法等同于toString()方法
       join方法如果传递了参数, 就会将传递的参数作为元素和元素的连接符号
       join()方法同样返回字符串，不会改变原数组
        let arr = [1,2,3,4,5];
        let res = arr.join('+');
        console.log(res) //1+2+3+4+5
        console.log(arr) //(5) [1, 2, 3, 4, 5]
        console.log(typeof res) //string

8.数组的方法之：数组拼接 

         1. 数组不能使用 + 进行拼接，“+” 会将数组先转换成字符串再拼接
         let arr1 = [1, 3, 5];
         let arr2 = [2, 4, 6];
         let res= arr1 + arr2;
         console.log(res);// 1,3,52,4,6
         console.log(typeof res);//string

        2. 使用concat()方法拼接数组，不会改变原始数组，而是将拼接后的新数组返回
        let arr1 = [1, 3, 5];
        let arr2 = [2, 4, 6];
        let res = arr1.concat(arr2);
        console.log(res);// [1, 3, 5, 2, 4, 6]
        console.log(typeof res);// object

        3. 使用扩展运算符...
        扩展运算符在解构赋值中(等号的左边)表示将剩余的数据打包成一个新的数组
        扩展运算符在等号右边, 那么表示将数组中所有的数据解开, 放到所在的位置
        let arr1 = [1, 3, 5];
        let arr2 = [2, 4, 6];
        let res = [...arr1,...arr2]
        console.log(res) //[1, 3, 5, 2, 4, 6]

9.数组的方法之：内容反转 

        reverse()方法：将数组的元素倒序排列，会修改原数组
        let arr = [1, 2, 3, 4, 5];
        let res = arr.reverse()
        console.log(res) //[5, 4, 3, 2, 1]

10.数组的方法之：slice()方法截取数组指定部分的内容

        slice方法是包头不包尾(包含起始位置, 不包含结束的位置)，不会修改原数组
        let arr = [1, 2, 3, 4, 5];
        let res = arr.slice(1, 3)
        console.log(res); [2,3]
        console.log(arr); [1, 2, 3, 4, 5]


	/*
	* slice方法
	*   从数组中返回已有的选定元素
	*   语法：数组名.slice(start,end)
	*   start是要选取的开始位置。
	*   end是要选取的结束位置（可选）。
	*   end可以取负值， -1 表示 数组的最后一个元素
	*   将选取的（start，end-1）数组返回，但并不改变原数组。
	*/
        var arr =["孙悟空","唐僧","猪八戒","牛魔王"];
	var result = arr.slice(0,2);
	console.log(result); // ["孙悟空", "唐僧"]
	result = arr.slice(1); //end不写，选取从start开始到最后一个元素
	console.log(result);// ["唐僧", "猪八戒", "牛魔王"]
	result = arr.slice(1,-1); 
	console.log(result);// ["唐僧", "猪八戒"]

参考文章：数组遍历forEach、map、filter、find、some、every、reduce等区别

11.数组的方法之：查找某个元素的位置

indexOf()和lastIndexOf() 

        let arr = [1, 2, 3, 4, 5, 3];
        // indexOf方法如果找到了指定的元素, 就会返回元素对应的位置。如果没有找到，返回-1
        // 注意点: indexOf方法默认是从左至右的查找, 一旦找到就会立即停止查找（找到该元素在数组中第一次出现的位置）
        // 传递一个参数：需要查找的元素
        let res = arr.indexOf(3); //res=2
        let res = arr.indexOf(6); //res=-1
        // 参数1: 需要查找的元素
        // 参数2: 从什么位置开始查找
        let res = arr.indexOf(3, 4); //res=5
        // 注意点: lastIndexOf方法默认是从右至左的查找, 一旦找到就会立即停止查找
        let res = arr.lastIndexOf(3); //res=5
        let res = arr.lastIndexOf(3, 4); //res=2

findIndex()和find() 

       findIndex()查找数组中某个元素的索引。找到就返回索引值，找不到返回-1
        let arr = [3, 2, 6, 7, 6];
        let index = arr.findIndex(function(value,index,arr){
            if(value === 6){
                return true;
            }
        })
        console.log(index);//2

        //find()查找数组中的元素值。找到返回元素值，找不到返回undefined
        let arr = [3, 2, 6, 7, 6];
        let value = arr.find(function(value,index,arr){
            if(value === 1){
                return true;
            }
        })
        console.log(value);//undefined

12.数组的方法之：判断数组中是否包含某个元素includes() 

        1.通过indexOf和lastIndexOf的结果, 返回-1就是不存在
        let arr = [1, 2, 3, 4, 5];
        let res = arr.indexOf(8); //-1
        let res = arr.lastIndexOf(8); //-1
        2. includes()方法，存在返回true，不存在返回false
        let res = arr.includes(4);
        console.log(res);//res=true

13.数组的方法之：遍历时删除整个数组 

使用splice方法：删除元素会修改原数组的长度和元素的索引值

        let arr =[1,2,3,4,5];
        for(let i =arr.length - 1; i >=0;i--){
            arr.splice(i,1);
            console.log(arr)
        }

 

使用delete方法： 

        let arr =[1,2,3,4,5];

        //使用delete方法不会修改数组的长度，被删除的数组索引位置的元素为empty
        for(let i = 0 ; i < arr.length ; i ++){
            delete arr[i];
            console.log(arr);
        }

 

14.数组的方法之：数组的遍历

 数组不使用for-in方法遍历：

for-in方法是遍历对象的专用方法。因该方法具有无序的性质，所以不适用于对数组进行排序。

使用for-of遍历数组：

        let arr = [1,2,3,4,5];
        for(let value of arr){
            console.log(value)
        }

 

使用Array的forEach方法遍历：

        let arr = [1,2,3,4,5];
         //使用Array的forEach方法。传入的第一个参数是数组的元素值，第二个参数是数组的索引，第三个参数是要遍历的数组
        arr.forEach(function (value,key,arr) {
            console.log(value +" " + key + " " + arr)
        })

 

15.数组的方法之：过滤filter()

        //过滤不满足条件的元素，并将满足条件的元素添加到新数组中并返回
        let arr = [3, 2, 6, 7, 6];
        let newArr = arr.filter(function (value,index,arr) {
            if(value %2 ===0){
                return true;
            }
        })
        console.log(newArr);//[2, 6, 6]

16.数组的方法之：排序sort()

        //如果数组的元素都是数值型
        let arr = [3, 2, 6, 7, 1];
        arr.sort(function (a,b) {
            //如果需要升序排序, 那么就返回a - b;
            //如果需要降序排序, 那么就返回b - a;
            return b-a;
        });
        console.log(arr);// [7, 6, 3, 2, 1]

        //如果数组的元素是对象型，要比较对象.属性值的大小
        let arr=[{age:34},{age:12},{age:1},{age:100}]
        arr.sort(function (o1,o2) {
            return o1.age-o2.age;
        });
        console.log(arr);
        // 0: {age: 1}
        // 1: {age: 12}
        // 2: {age: 34}
        // 3: {age: 100}

17. 二维数组 

二维数组：数组的每一个元素都是一个数组

在定义二维数组的时候, 将来需要存储多少个一维数组, 就写上多少个[]即可

let arr = [[],[]];

练习：

<script type="text/javascript">
	/*
	* 数组遍历的练习 :
	*   找到数组中年龄大于18的元素，存入新的数组中并返回
	*/
        function Person(name,age)
	{
		this.name = name;
		this.age = age;
	}
	var p1 = new Person("张三",17);
	var p2 = new Person("李四",27);
	var p3 = new Person("王五",14);
	var p4 = new Person("赵六",20);
	var p5 = new Person("招财",15);
	var p6 = new Person("进宝",31);
	
	var arr = [p1,p2,p3,p4,p5,p6];
	
	function getAdult(array)
	{
		var newArr = [];
			
		for(var i = 0 ; i < array.length ; i++)
		{
			if(array[i].age >= 18)
			{
				newArr.push(array[i].name) ;
			}
		}
		return newArr;		
	}
	var result = getAdult(arr);
	console.log(result);// 输出是 ["李四", "赵六", "进宝"]
</script>

练习：删除一个数组中的重复的元素，并返回没有重复的元素的数组

<script type="text/javascript">
	/*
	* 思路：对数组进行两次遍历，如果第二次遍历的元素与第一次的重复，删除第二个
	*/
        var arr= [1,2,2,3,3,2,2,1,4,3,3,4,4,1,5,5];
	for(var i = 0 ; i < arr.length; i ++)
	{
		for(var j = i + 1 ; j < arr.length ; j ++)
		{
			if(arr[i] == arr[j])
			{
				/*当删除j元素之后,后边的元素会自动补位,此时
				不会再比较当前位置的元素,会有漏网之鱼,
				所以需要再比较一次当前j位置的元素
				*/
				arr.splice(j,1);
				j--;
			}
		}
	}
	console.log(arr); // [1, 2, 3, 4, 5]
</script>