深入解析JavaScript数组：构造、操作与实用技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/ImmortalSYM/article/details/120784795

JS-数组

数组简介
—内建对象由ES标准定义的对象（Object、Function）

—数组(Array)也是一个内建对象；

—它和普通对象功能类似，也是用来存储一些值；

—不同的是普通对象使用字符串作为属性名，而数组是使用数字作为索引操作元素；

—索引index：从0开始的整数是索引；

—数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据；

—使用typeof检查数组时，会返回object；

—构造函数创建数组对象语法：var arr = new Array();

—向数组中添加元素语法： 数组[索引] = 元素值

—读取数组中的元素语法： 数组[索引]

—如果读取不存在的索引，不会报错，返回undefined；

—数组内部数据是有序的；

—获取数组长度，使用Array对象的length属性；语法： 数组.length

—对于连续的数组，可以通过length属性获得数组的长度（元素的个数=最大索引+1）；

—对于非连续的数组，使用length会获取到最大的索引+1；

—尽量不要创建非连续的数组；非连续数组中会空出元素位置；

—可以利用length属性设置数组的长度，如果设置的数组长度大于原长度，则多余部分会空出来；如果数组长度小于原长度，则多出来的元素会被删除；

—向数组的最后一个位置添加元素语法：数组[数组.length] = 元素；

—可以通过isArray()判断是否为数组；
```
<script>
	//构造函数创建数组对象
var arr = new Array();
//向数组添加元素
arr[0] = 10;
//获取数组长度
console.log(arr.length);
//修改数组长度
arr.length=3;
//向数组最后一位添加元素
arr[arr.length]=8;
console.log(arr);
</script>
```
数组字面量

—使用字面量创建一个数组，语法：var 数组 = [元素1,元素2,元素3,...];

—使用字面量创建数组时，可以同时在创建时添加数组元素；

—使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数的参数传递；元素之间使用逗号隔开；区别，当只传递一个数值的时候，构造函数创建的是长度为数值的空数组；

—数组中的元素可以是任意数据类型，也可以是对象，也可以放置函数；数组中可以放置数组；
数组方法
1. push()
  
  —该方法会向数组中添加一个或者多个元素，并将数组新的长度作为返回值；
  
  —可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾；
  
  —直接在原数组上添加元素；
2. pop()
  
  —该方法可以删除数组的最后一个元素，并将删除的元素作为返回值返回；
  
  —不需要传递参数；
3. unshift()
  
  —向数组的开头添加一个或者多个元素，并且返回新的数组长度；
  
  —向数组前面添加元素后，其他元素的索引会依次调整；
4. shift()
  
  —删除数组的第一个元素，并将被删除的元素作为返回值返回；
5. slice()
  
  —可以用来从数组中提取指定元素；
  
  —需要参数：
  
  1. 截取开始的位置的索引（开始的索引包含在截取数组内）；
  
  2. 截取结束的位置的索引（结束的索引不包含在截取数组内）；
  
  —该方法不会改变原数组，而是将截取到的元素封装到一个新数组，并返回；
  
  —结束索引可以省略不写，此时会截取从开始索引往后的所有元素；
  
  —索引可以传递一个负值，如果传递一个负值，则从后往前计算，例如-1表示倒数第一个；
6. splice()
  
  —可以用来删除数组中的指定元素，并且向数组添加新元素；
  
  —使用splice()会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回；
  
  —需要参数：
  
  1. 开始位置的索引（删除元素包含开始位置索引）；
  
  2. 删除的数量；
  
  3. 第三个及以后的参数可以传递一些新的元素，这些元素将会自动插入到开始索引的位置的前面；
  
  —可以利用splice()删除、替换和插入元素；
```
<script>
	var arr = ["Tom","Jack","Simon"];
    //数组的删除
    result1 = arr.splice(0,1);//返回删除的元素
    //数组的替换
    result2 = arr.splice(0,1,"Marry");
    //数组的插入
    result3 = arr.splice(1,0,"Marry");
</script>
```
7. 数组的去重练习
```
<script>
	//创建一个数组
    var arr = [1,2,2,2,3,2,1,3,4,2,3,5];
    //获取数组中每一个元素
    for(var i=0;i<arr.lenght;i++){
        //获取当前元素后的所有元素
        for(var j=i+1;j<arr.length;j++){
            //判断两个元素的值是否相等
            if(arr[i]==arr[j]){
                //如果相等，证明出现了重复的元素，则删除j对应的元素
                arr.splice(j,1);
                //当删除了当前j所在的元素，后边的元素会自动补位，此时将
                //不会再比较这个元素，所以我们需要再比较一次j所在的位置元素
                //必须写入if语句中，只有删除了一个重复元素后，才会进行j--，然后
                //循环更新条件j++后，就可以访问当前j位置，j--后j++相当于位置不变
                j--;
            }
        }
    }
    console.log(arr);
</script>
```
8. 数组的剩余方法
  
  concat()
  
  —可以连接两个或者多个数组，并将新的数组返回；
  
  —该方法不会对原数组产生影响；
  
  —该方法中参数不仅可以传递数组，也可以传递单个元素；
  
  join()
  
  —该方法可以将数组转换为一个字符串；
  
  —该方法不会对原数组产生影响；而是将转换后的字符串返回；
  
  —该方法中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符；如果不指定连接符，则默认逗号为连接符；如果不需要连接符传递参数为一个空字符串""；
  
  reverse()
  
  —该方法用来反转数组；
  
  —该方法会直接修改原数组；
  
  sort()
  
  —该方法可以用来对数组中的元素进行排序；
  
  —该方法会影响原数组；
  
  —默认按照Unicode编码进行排序；但是对于纯数字排序按照Unicode编码排序可能会得到错误的结果；
  
  —可以自己指定排序规则；可以在sort()中添加一个回调函数，来指定排序规则；
  
  —回调函数中定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数；使用哪个元素调用不确定，但是肯定的是两个形参，第一个一定调用前面的元素；
  
  —浏览器会根据回调函数的返回值决定元素的顺序，如果返回一个大于0的值，则元素会交换位置；如果返回小于0的值，元素位置不变；如果返回等于0的值，两个元素相等，元素位置不变；
```
<script>
	var arr = [4,5,11,1,3,2,];
    //向sort()添加回调函数
    arr.sort(function(a,b){
        //升序
        return a-b;
        //降序
        return b-a;
    });
    console.log(arr);
</script>
```
数组遍历
—数组遍历就是将数组中的所有元素都读取；
```
<script>
	var arr = ["Tom","Jack","Simon"];
 //for循环进行数组遍历
 for(var i=0;i<arr.length;i++){
     console.log(arr[i]);
 }
</script>
```
—forEach循环遍历

—一般都是使用for循环去遍历数组，JS中还为我们提供了一个方法，用来遍历数组；

—forEach()方法只支持IE8以上的浏览器；如果要兼容IE8浏览器，则使用for循环；

—forEach()方法需要一个函数作为参数，因此在使用过程中可以传递一个匿名函数：arr.forEach(function(value,index,obj){});

—像这样的函数，由我们创建但不是由我们调用的，称为回调函数；

—数组中有几个元素，函数就会执行几次；每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以定义形参来读取这些内容；

—浏览器会在回调参数中传递三个参数；第一个参数为当前遍历的元素；第二个参数为当前遍历的元素的索引；第三个参数为正在遍历的数组（包含所有元素的数组）；
```
<script>
	var arr = [1,2,3,4];
 	arr.forEach(function(value,index,obj){
     	console.log(value);
     	console.log(index);
     	console.log(obj);
 	});
</script>
```

JS-Array

JS-数组