2018-12-15

---

Array

数组：数组是一组有序的数据集合。
数组索引：数组的每一项都对应一个索引(下标)，索引从0开始。

---

定义数组：
语法一:
var arr = [element1,element2...]
--
语法二：
var arr = new Array(element,[,...[,elementN]])
语法三：
var arr = new Array(arrayLength)(不建议使用)

 <script>
        var arr = [];           //定义数组
        arr[0]=1;               //为数组元素赋值
        arr[1]=2;
        console.log(arr);

        var arr2 = new Array(1,[2,3,[10]]);     //定义三维数组
        console.log(arr2);
    </script>

---

数组对象的属性

length--->返回或设置一个数组钟元素的个数，当length=0,则代表清空数组。

<script>
        var arr = [1,2,{},5,6,[8,4]];
        console.log(arr.length);    //输出arr数组的元素个数
        
        arr.length=0;       //清空数组中的元素
        console.log(arr);
    </script>

---

数组的增删改查

  <script>
        var arr = [1,2,3,5,"b","d"];

        //Read
        for(item in arr){
            console.log(item);
        }

        //Create  js中数组可以自动扩容
        arr[6]="e";
        console.log(arr);

        //Update
        arr[2]="r";
        console.log(arr);

        //Delete
        /*
        delete arr[2];
        console.log(arr);      //只是将数组中的元素删除了，但位置还保留着，所以delete不能用于数组
        */     
    </script>

---

数组对象的方法(API)

数组的方法分为静态方法与实例方法。

--
静态方法(构造函数的调用方法)
isArray()

   <script>
        /*
         isArray:判断是否是数组
               obj：需要检测的值。
               返回值：如果对象是 Array，则为true; 否则为false。

              Array.isArray(obj)
    */
    
        var arr = [1,2,3];
        console.log(Array.isArray(arr));
    </script>

--
实例方法：实例对象的调用方法
push(参数)：将参数添加到指定数组的末尾。

<script>
       
   /*
       push() 方法将一个或多个元素添加到数组的末尾，并返回新数组的长度
       语法：arr.push(element1, ..., elementN)
       参数:被添加到数组末尾的元素
       返回值：当调用该方法时，新的 length 属性值将被返回
       是否影响老数组：影响
   */
   
       var arr = [1,2];
       arr.push(3);
       console.log(arr);
   </script>

unshift(参数)：将参数添加到指定数组的开头。

<script>
         /*
        unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度
        语法：arr.unshift(element1, ..., elementN)
        参数：要添加到数组开头的元素
        返回值：当一个对象调用该方法时，返回其 length 属性值
        是否影响老数组：影响
    */
        var arr=[3,5,7];
        console.log(arr.unshift(1),arr);
    </script>

pop()：将指定数组的最后一个元素删除。

<script>
         /*
        pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度
        语法：arr.pop()
        参数：无
        返回值：从数组中删除的元素(当数组为空时返回undefined)
        是否影响老数组：影响
    */
    
        var arr = [1,4,7];
        var size = arr.pop()
        console.log(arr,arr.length,size);
    </script>

shift()：将指定数组的第一个元素删除。

 <script>
         /*
        shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度
        语法：arr.shift()
        参数：无
        返回值：从数组中删除的元素; 如果数组为空则返回undefined 。
        是否影响老数组：影响
    */


        var arr = [3,4,7];
        var size = arr.shift();
        console.log(arr,arr.length,size);
    </script>

concat(数组1,...,数组N)：将参数数组1~数组N合并为一个数组。

<script>
        /*
        concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
        语法：arr.concat(arr1[, arr2[, ...[, arrN]]])
        参数：valueN-->待链接的数组
        返回值：新的 Array 实例
        是否影响老数组：不影响
    */
    
        var arr = [];
        var arr2 = arr.concat([1,2],[4,6],["a","b","c"]);
        console.log(arr2);
    </script>

indexOf(参数)：查找指定参数在数组中第一次出现的位置(索引/下标)。

 <script>
           /*
        indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
        语法：arr.indexOf(searchElement)
        参数：searchElement-->要查找的元素
        返回值：首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1
        是否影响老数组：不影响
    */

    var arr = [5,2,5,7,3,6,2,6,1,4,6,5];
    console.log(arr.indexOf(2));
    console.log(arr.indexOf(8));
    </script>

lastIndexOf(参数)：查找参数在指定数组中最后一次出现的位置(索引/下标)。

 <script>
          /*
        lastIndexOf() 方法返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1
        语法：arr.lastIndexOf(searchElement)
        参数：searchElement-->要查找的元素
        返回值：数组中最后一个元素的索引，如未找到返回-1
        是否影响老数组：不影响
    */


        var arr = [3,5,8,9,2,4,5,2,2,3,1];
        console.log(arr.lastIndexOf(2));
        console.log(arr.lastIndexOf(7));
    </script>

join(参数)：将指定数组中的所有元素按照参数符号连接成一个字符串并返回此字符串。

<script>
         /*
        join() 方法将一个数组的所有元素连接成一个字符串并返回这个字符串
        语法：arr.join(separator)
        参数：separator ---> 指定一个字符串来分隔数组的每个元素。如果省略()，数组元素用逗号分隔。默认为 ","。
        返回值：一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串
        是否影响老数组：不影响
    */

    var arr = [1,2,5,7,2,"a","_","%"];
    console.log(arr.join(">"));
    </script>

toString()：将指定数组中的所有元素用逗号连接成一个字符串并返回此字符串。

<script>
         /*
        toString() 返回一个字符串，表示指定的数组及其元素。
        语法：arr.toString()
        参数：无
        返回值：返回一个字符串。
        是否影响老数组：不影响
    */

    var arr = [3,6,3,2,6,1]
    console.log(arr.toString());
    
    </script>

--
forEach()：对指定数组中的每个元素执行一次提供的函数。

<script>
        /*
        forEach() 方法对数组的每个元素执行一次提供的函数。
        参数1:callback
            为数组中每个元素执行的函数，该函数接收三个参数：
                currentValue(当前值):数组中正在处理的当前元素。
                index(索引):数组中正在处理的当前元素的索引。
                array:forEach()方法正在操作的数组。
        参数2:thisArg
            可选参数。当执行回调 函数时用作this的值。
        返回值：undefined
        是否影响老数组：由callback决定
    */

        //注意：forEach将每一次运行后的新数组重新赋给函数中的array,并且新数组的item作为数组的下标，而不是索引
        var arr = [1,2,3,1,2,3];
        var res = arr.forEach(function(item,index,array){
            array[item]+=1;
        })
        console.log(res,arr);
    </script>

every()：测试指定数组的所有元素是否都通过指定函数的测试。

 <script>
        
        /*
            every() 方法测试数组的所有元素是否都通过了指定函数的测试
            参数1:callback
                为数组中每个元素执行的函数，该函数接收三个参数：
                    currentValue(当前值):数组中正在处理的当前元素。
                    index(索引):数组中正在处理的当前元素的索引。
                    array:every()方法正在操作的数组。
            参数2:thisArg
                可选参数。当执行回调 函数时用作this的值。
            返回值：true false
            是否影响老数组：看callback
        */

        var arr = [1,2,4,6,7,3];
        var res = arr.every(function(item,index,arr){
                if(item>5){
                   return true;
                }
        })
        console.log(res);
    </script>

some()：测试指定数组中的某些元素是否通过指定函数的测试。

<script>
        /*
            some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。
            参数1:callback
                为数组中每个元素执行的函数，该函数接收三个参数：
                    currentValue(当前值):数组中正在处理的当前元素。
                    index(索引):数组中正在处理的当前元素的索引。
                    array:forEach()方法正在操作的数组。
            参数2:thisArg
                可选参数。当执行回调 函数时用作this的值。
            返回值：true false
            是否影响老数组：不影响
        */

        var arr = [4,7,3,9];
        var res = arr.some(function(item,index,arr){
            if(item<5){
                return true
            }
        })
        console.log(res);
    </script>

filter()：测试指定数组中的元素是否通过指定函数的测试，并将通过测试的元素组成一个新数组。

 <script>
          /*
            filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
            参数1:callback
                为数组中每个元素执行的函数，该函数接收三个参数：
                    currentValue(当前值):数组中正在处理的当前元素。
                    index(索引):数组中正在处理的当前元素的索引。
                    array:forEach()方法正在操作的数组。
            参数2:thisArg
                可选参数。当执行回调 函数时用作this的值。
            返回值：  一个新的通过测试的元素的集合的数组
            是否影响老数组：看callback
        */

        var arr = [4,7,2,7,3,9];
        var res = arr.filter(function(item,index,arr){
            if(item>6){
                return true;
            }
        })
        console.log(res);
    </script>

sort()：对指定数组进行排序，默认升序。

<script>
            /*
        sort() 方法使用in-place算法对数组的元素进行排序，并返回数组。
                默认排序顺序是根据字符串Unicode码点。
        参数compareFunction 可选。
                用来指定按某种顺序进行排列的函数。如果省略，
                元素按照转换为的字符串的各个字符的Unicode位点进行排序。
        返回值：返回排序后的数组。
        是否影响老数组： 影响 原数组已经被排序后的数组代替。
        */
        
        
        var arr = [3,6,2,7,2,5,2,8,3,7,9]
        var res = arr.sort();
        console.log(res);
    </script>

reverse()：颠倒数组中元素的位置。

 <script>
        /*
            reverse 方法颠倒数组中元素的位置，并返回该数组的引用
            语法： arr.reverse()
            参数：无
            返回值：该数组的引用。
            是否影响老数组：影响
        */
        
        var arr = [3,4,2,7,4,1,7,5,3]
        var res = arr.reverse();
        console.log(res);
    </script>

map()：将数组中的每个元素遍历一遍，并生成一个新的数组。

<script>      

       /*
        callback
            生成新数组元素的函数，使用三个参数：
            currentValue
            数组中正在处理的当前元素。
            index可选
            数组中正在处理的当前元素的索引。
            array可选
            map 方法被调用的数组。
        thisArg可选
        执行 callback 函数时使用的this 值。
        返回值
            一个新数组，每个元素都是回调函数的结果。
        是否影响老数组：不影响。
        */

        var arr = [2,3,6];
        var res = arr.map(function(item,index,arr){
            return item**2;
        },0)
        console.log(res,arr);
    </script>

slice()：截取/拷贝数组元素。
在js中，如果指定一个范围，那么一般是左闭右开[)的形式。
slice中的参数指的是数组的索引(下标)。

 <script>
        /*
            slice() 方法返回一个从开始到结束（不包括结束，左闭右开）选择的数组的一部分浅拷贝到一个新数组对象
            参数
                begin 可选
                end
                slice(begin,end):[begin,end)

            返回值：一个含有提取元素的新数组
            是否影响老数组：不影响
        */
        var arr = [3,4,6,2,7,2,4,6]
        var res = arr.slice(2,5);
        console.log(res,arr);
        
        //如果指定slice的参数，那么就是复制功能，但两个数组并不相等
        var newArr = arr.slice();
        console.log(newArr,arr,newArr==arr);
    </script>

splice()：对指定数组中的元素进行删除/添加操作。

 /*
            splice() 方法通过删除现有元素/或添加新元素来更改一个数组的内容
            参数
                    start           从start开始删
                    deleteCount     删几个
                    item列表          删完之后在相同位置处加哪几个
            返回值：由被删除的元素组成的一个数组
            是否影响老数组：影响
        */

        var arr = [1,3,6,7,6,9];
        arr.splice(1,1,"w","c")
    </script>

---

稀疏数组(慎用，因为稀疏数组在使用API时会出现问题)

在数组中出现empty则认为数组是稀疏数组。

稀疏数组一：
var arr = new Array(2);

image.png

稀疏数组二：

  var arr = [1,2,3];
        arr[7]=8;
        console.log(arr);

var arr = [1,2,3];
arr[7]=8;
console.log(arr);

---

伪数组(类数组)

具有length属性的对象，属性名是字符串类型的数字。与数组有相同的结构但没有数组的方法。
伪数组转真数组：

<script>

    //创建伪数组
    var obj = {}
    obj.length = 4;
    obj["0"] = 0;
    obj["1"] = 1;
    obj["2"] = 2;
    obj["3"] = 3;

    //伪数组转真数组
    var arr = Array.prototype.slice.call(obj);    //call方法中的this指向伪数组obj
    console.log(arr);
    arr.map(function(item){
        console.log(item);
    })

</script>

数组实例：元素去重

<script>

    /*数组去重步骤：
        1.调用sort()方法对数组进行排序
        2.调用resuce()方法，将满足条件的元素放入累加器中(条件：下标等于0，或者当前元素item不等于当前元素的前一项)
        3.将累加器赋初值为一个空数组[]
        4.将累加器的结果给一个变量，让变量指向累加器的内存地址
        5.将变量返回并给新的变量filterArr,并输出
    */
    function demo(arr) {
        var res = arr.sort().reduce(function (conter, item, index, arr) {
            if (index === 0 || item !== arr[index - 1]) {
                conter.push(item);
                 return item;
            }
            return conter;      //conter数组保留每一次遍历返回的item值
        }, [])
         return res;        //将conter将内存空间中的地址给res变量，函数的返回值res赋值给filterArr
    }

    var arr = [1, 3, 4, 7, 2, 7, 8, 3, 2, 9];
    var fiterArr = demo(arr);
    console.log(fiterArr);
</script>