JavaScript中数组的一些基本性质和方法(小白保证看了就会懂的代码)

前言：很开心今天可以分享一些Web前端小知识给大家，这也是我第一次在CSDN中写的第一篇博客给大家呈现,希望大家能够喜欢,且帮助一些代码人。代码如有表现不尽人意,也希望大家能够在评论区里面告诉我,我会在之后的书写博客中加以改进。
本章主要讲述了JavaScript中数组的一些基础的性质和方法,虽然是基础但也是很重要的,只有基础掌握好了,后面才能展示自己的代码能力,也希望本章内容能够帮助一些人。那话不多说,开始本章的旅程。

1.什么是数组

数组是值一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将数据存储在单个变量名下的优雅方式

2.创建数组

下面介绍两种创建数组的方法

   // 1.利用 new 创建数组
   var arr = new Array();//创建了一个空数组
   console.log(typeof arr);//object
   console.log(arr.length);//0

   // 2.利用数组字面量创建数组[]
   var arr = [];//创建了一个空数组
   var arr1 = [1,2,'数组',true];
   console.log(typeof arr1);//object
   console.log(arr1.length);//4
   console.log(arr1);// [1, 2, '数组', true]
   console.log(arr1[2]);//数组
   // 1.我们数组里面的数据一定用逗号分隔
   // 2.数组里面的数据,比如1,2,'科比' 我们称为数组元素
   // 3.获取数组元素 格式:数组名[索引号] 索引号从0开始的
   // 4.数组可以通过索引来访问、设置、修改对应的数组元素,我们可以通过**"数组名[索引号]"**的形式来获取数组中的元素
   // 5.这里的访问就是获取得到的意思

上面两种创建数组的方法有一定的区别,在这里就不过多叙述,想了解的朋友可以自己去查看了解

3.遍历数组

就是把数组的元素从头到尾访问一次,使用"数组名.length"可以访问数组元素的数量（数组长度）

 var arr = ['red','green','blue'];
 	for(var i = 0;i<arr.length;i++){
       console.log(arr[i]);
     }
    // 1.因为我们的数组索引号从0开始,所以 i 必须从 0 开始 不能等于
    // 2.输出的时候 arr[i] i计数器当索引号来用
    // 3.数组的长度是元素个数 不要跟索引号混淆
    // 4.arr.length 动态监测数组元素的个数

4.新增数组元素

    // 1.新增数组元素 修改length长度
        var arr = ['red', 'green', 'blue'];
        console.log(arr.length);
        arr.length = 5;
        //把我们数组的长度修改为了5,里面应该有5个元素,后面两个元素呈现的是空数组['red', 'green', 'blue', empty × 2]
        console.log(arr);
        console.log(arr[3]);//undefined
        console.log(arr[4]);//undefined

    // 2.新增数组元素 修改索引号
        var arr1 = ['red', 'green', 'blue'];
        arr1[3] = 'pink';//这里是追加原来的数组元素
        arr1[0] = 'yellow';//这里是替换原来的数组元素
        console.log(arr1);// ['yellow', 'green', 'blue', 'pink']
        arr1 = '科比';
        console.log(arr1);//不要直接给 数组名赋值 否则里面原来的数组元素都没有了,输出的只有刚刚赋值的值

5.数组冒泡

		方法一：
        var arr = [5,16,26,62,84,9,16,49];
        for (var i = 0; i < arr.length - 1; i++) {//外层循环管趟数
             for (var j = 0; j <= arr.length - i - 1; j++) {//里层的循环管每一趟的交换次数
                 // 内部交换两个变量的值
                 if (arr[j] > arr[j + 1]) { //把 > 改成 < 则是从大到小
                     var temp = arr[j];
                     arr[j] = arr[j + 1];
                     arr[j + 1] = temp;
                 } 
             }
         }
       });    

6.检测是否为数组的方法

在JavaScript中给我们提供了两种方法来检查数组是否为数组

  		var arr = [1,2,3,4,5];
        var arr1 = (12345)
        // (1) instanceof 运算符 它可以用来检测是否为数组
        console.log(arr instanceof Array); //返回true
        // (2) Array.isArray(参数);
        console.log(Array.isArray(arr1)); //返回false

7.配合数组的一些常用方法

1.push(newelement1,newelement2,…,newelementX) 在我们数组的末尾 添加一个或者多个数组元素 push(推)

        var arr = [1, 2, 3];
        console.log(arr.push(4));
      	console.log(arr);//[1, 2, 3, 4]
        var arr1 = [1 ,2, 3];       
        console.log(arr1.push(4, '添加数组'));
        console.log(arr1);//[1, 2, 3, 4, '添加数组']
        // 使用方式：push(newelement1,newelement2,....,newelementX) 
        // newelement1必需→要添加到数组的第一个元素；newelement2可选→要添加到数组的第二个元素；newelementX可选→可添加多个元素。
        // 1. push() 是可以给数组追加新的元素
        // 2. push() 参数直接写,数组元素就可以了
        // 3. push() 完毕之后,返回的结果是,新数组的长度
        // 4. 原数组也会发生变化

2.unshift() 在我们数组的开头 添加一个或者多个数组元素

	    var arr = [1, 2, 3];
	    console.log(arr.unshift(0));//4
      	console.log(arr);//[0, 1, 2, 3]
        var arr1 = [1 ,2, 3];    
        console.log(arr1.unshift(-1, 0));//5
        console.log(arr1);//[-1，0, 1，2, 3]
        // 使用方式： unshift(x1,x2,x3) x1必需→向数组添加的第一个元素；x2可选→向数组添加的第二个元素;x3可选→可添加若干个元素。
        // 1. unshift() 是可以给数组追加新的元素
        // 2. unshift() 参数直接写,数组元素就可以了
        // 3. unshift() 完毕之后,返回的结果是,新数组的长度
        // 4. 原数组会发生变化

3.pop() 它可以删除数组的最后一个元素

	    var arr = [1, 2, 3];
        console.log(arr.pop());//输出的是删除数组的最后一个元素 3
        console.log(arr);//[1,2]
        var arr1 = [];
        console.log(arr1.pop())//undefined
        console.log(arr1)//输出一个空数组 []
        // 使用方式：pop() 没有参数
        // 1. pop() 是可以删除数组的最后一个元素 记住一次只能删除一个元素
        // 2. pop() 如果数组已经为空，则pop()不改变数组,并返回 undefined 值。
        // 3. pop() 完毕之后,返回的结果是删除的元素
        // 4. 原数组会发生变化

4.shift() 它可以删除数组的最后一个元素

 	    var arr = [1, 2, 3];
        console.log(arr.shift());//输出的是删除数组的第一个元素 1
        console.log(arr);//[2,3]
        var arr1 = [];
        console.log(arr1.shift())//undefined
        console.log(arr1)//输出一个空数组 []
        // 使用方法：shift() 没有参数
        // 1. shift() 是可以删除数组的第一个元素 记住一次只能删除一个元素 
        // 2. shift() 完毕之后,返回的结果是删除的元素
        // 3. 原数组会发生变化

5.reverse 翻转数组

 	    var arr = [1, 2, 3];
        arr.reverse();
        console.log(arr);//[3, 2, 1]

6.slic(start,end) 从已有的数组中返回选定的元素

		var arr = [1, 2, 3, 4, 5];
		console.log(arr.slice(2));[3, 4, 5]
		console.log(arr.slice(-2));[4, 5]
		console.log(arr);//[1, 2, 3, 4, 5]
		var arr1 = [1, 2, 3, 4, 5];
		console.log(arr1.slice(2,4));[3, 4]
		console.log(arr1.slice(-1,-3));//[]
		console.log(arr1);[1, 2, 3, 4, 5]
		// 使用方法：slice(start,end)
		// 1.如果只写一个参数start,则slice将是选定start到数组最后的元素
		// 2.如果只写一个参数start且参数为负数  例：-1，则slice将是选定数组最后的元素
		// 3.如果只写一个参数start且参数为负数  例：-2，则slice将是从数组倒数第二个选定到数组最后一个（以此类推）
		// 4.如果同时写了两个参数start、end，则从第一个参数选定到第二个参数(选定不到第二个参数所指的元素)
		// 5.如果同时写了两个参数start、end，且都为负数，则最后选定到的是一个空数组	
		// 6.返回值：返回一个新的数组，包含从 start 到 end （不包括该元素）
		// 7.slice() 不会影响原来的数组,而是返回一个子数组
		

7.splice(index1,index2,item1, …, itemX) 从数组中添加/删除项目，然后返回被删除的项目

	    //下面的案例能体现出splice性质,看清楚下面的案例了,不要乱晕了哦！！！
		var arr = [1, 2, 3, 4, 5];
        console.log(arr.splice(2));//[2, 3, 4, 5]
        console.log(arr);//[1]
        var arr1 = [1, 2, 3, 4, 5]
        console.log(arr1.splice(1, 2)); //[2, 3]
        console.log(arr1);//[1, 4, 5]
        var arr2 = [1, 2, 3, 4, 5]
        arr2.splice(1, 0);
        console.log(arr2);//[1, 2, 3, 4, 5]
        var arr3 = [1, 2, 3, 4, 5];
        arr3.splice(2, 0, "数组");
        console.log(arr3);//[1, 2, '数组', 3, 4, 5]
        var arr4 = [1, 2, 3, 4, 5];
        arr4.splice(2, 2, "数组", "数组2");
        console.log(arr4);//[1, 2, '数组', '数组2', 5]
        var arr5 = [1, 2, 3, 4, 5]
        arr5.splice(-2)
        console.log(arr5);//[1, 2, 3]
        var arr6 = [1, 2, 3, 4, 5]
        arr6.splice(-2, 0, "数组",)
        console.log(arr6);// [1, 2, 3, '数组', 4, 5]
        var arr7 = [1, 2, 3, 4, 5]
        arr7.splice(-3, 2, "数组",)
        console.log(arr7);// [1, 2, '数组', 5]
        // 使用方法：splice(index1,index2,item1, ..., itemX); 
        // index1参数表示数组的索引；index2参数表示删除的个数；参数item1……itemX表示添加的项目
        // 1.如果写一个参数，则输出的是索引index1到数组最后一个索引的值,（输出的值中包括index1）,原数组是索引index1前的值
        // 2.如果写了两个参数,则输出的是索引index1到个数index2之间的值，原数组变成剩下的值
        // 3.如果第二个参数index2是0的话,则不会删除项目,原数组不会发现变化
        // 4.如果写了三个参数,则输出的是index1到个数index2之间的值被替换成item1	
        // 5.如果参数为负数的话，从数组结尾处规定位置。原理以参数为整数相同,如上面的代码呈现,在这就不过多的说了

8.join(separator) 用于把数组中的所有元素放入一个字符串(分隔符)

 		var arr1 = ['green','blue','pink'];
        console.log(arr1.join()); //green,blue,pink
        console.log(arr1.join('-')); //green-blue-pink
        console.log(arr1.join('&')); //green&blue&pink
        // 使用方法：join(separator) 
        // separator可选,指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

结束语：那到这里,本章的知识也就到此结束了,希望可以帮助一些小白对JavaScript中的数组的理解,不在惧怕数组。