JS引用类型 --- 数组

一、数组概念

• 用[]包起来的，一组有序的、任意数据类型的数据集合

• 数组的长度：array.length

• JS 中的数组与其他语言的数组，有很大的区别

二、创建数组的方式

1. 通过构造函数

// 创建空数组
var array=new Array();

// 创建数组，并填充三个元素10,20,30
var array=new Array(10,20,30);

// 创建数组，里面存储7个值
var array=new Array(7); 

2.通过字面量

var arr = [];

三、检测是不是数组 （ 3种方法 ）

1、借用对象原型的toString() 方法 --->【最严谨，兼容性好】

<script>
    var arr = [];

    var result = toString.call(arr);
    console.log(result);
</script>

若是数组，输出： ‘[object Array]‘

2、Array.isArray(被检测对象) ---> ES5中新方法，有兼容问题

<script>
    var arr = [];

    var result = Array.isArray(arr);
    console.log(result);
</script>

// 结果：布尔值

3、使用instanceof 判断是哪种引用类型 ---> IE8及以下不兼容

• 用法： 被检测对象 instanceof 引用类型的构造函数

• 引用类型值有：Object、Array、RegExp、Data 等

• 任何对象 instanceof Object 值都是true （因为所有的对象都继承自：Object）

<script>
    var arr = [];

    var result1 = arr instanceof Array; // true
    var result2 = arr instanceof Object; // true
</script>

4. 检测数组兼容代码：方法1 、2 的结合

综上：测试数组兼容代码

if(typeof Array.isArray==="undefined"){
  Array.isArray = function(arg){
        return result = Object.prototype.toString.call(arg)==="[object Array] ? true : false"
    };  
}

四、转换方法

• 所有的对象都有 toString() 、 toLocaleString() 、 valueOf() 方法；
• 调用数组的 toString(): 将数组中每个值 以字符串拼接，中间逗号隔开
• 调用数组的 toLocaleString():
• 调用对象的 valueOf():

五、数组种方法

1.迭代方法 ----> 遍历

forEach( ) 遍历整个数组

• return也无法让其停止

• 遍历整个数组， 无法停止， return也不能让其停下来，影响性能

<script>
    var arr = [1,2,3,4];
    arr.forEach(function( value , index){
        
    })；
</script>

filter( ) 遍历全部，筛选整个数组；符合条件的组成新数组 并返回

• 创建新数组（将符合条件的），并返回

• 原数组不变

• 筛选条件的代码，写在 return 中

<script>
    var arr = [1,2,3,4,23,4,3,5,6];
    var result = arr.filter(function (value,index,array) {
        return (value < 10)
    });
    console.log(result);  // [1,2,3,4,4,3,5,6]
</script>

map( ) 遍历全部，集体操作；组成新数组 并返回

• 创建新数组（集体操作后的），并返回

• 原数组不变

• 集体操作的代码，写在 return 中

<script>
    var arr = [1,2,3,4];
    var newArr = arr.map(function(value,index){
        return value*10;
    })
    console.log(newArr);
    console.log(arr);
</script>

every( ) 遍历判断是否符合条件，返回布尔值

• 判断条件写在 return 中

• 判断数组中有一项不符合，就停止遍历，返回false

• 判断所有都符合，返回true

• 原数组不变

<script>
    var arr = [1,2,3,4];
    var result = arr.every(function (value, index) {
        return value < 3;
    });
    
    console.log(result); 
</script>

some( ) 遍历判断是否符合条件，返回布尔值

• 判断条件写在 return 中

• 判断数组中有一项符合，就停止遍历，返回true

• 判断所有都不符合，返回false

• 原数组不变

<script>
    var arr = [1,2,3,4];
    var result = arr.some(function (value, index) {
        return value > 3;
    });
    
    console.log(result); 
</script>

2. 栈方法（后进先出）

push( ) 末尾追加数组项，不能追加数组；原数组改变，返回新数组长度

• 原数组 改变

• 返回值：新数组的长度

• 不能追加数组（会出现数组嵌套）

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

pop 不用传参；末尾删除数组项；原数组改变，返回被删除的数组项

• 原数组 改变

• 返回值： 被删除的元素

<script>
    var arr = [1,2,3,4];
    var result = arr.pop();
    console.log(arr)；   // [1,2,3]
    console.log(result);    // 4
</script>

3. 队列方法 先进先出

unshift( ) 开头追加数组项，不能追加数组；原数组改变，返回新数组长度

• 原数组 改变

• 返回值：新数组的长度

• 不能追加数组（会出现数组嵌套）

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

shift( ) 不用传参；开头删除数组第一项；原数组改变，返回被删除的数组项

• 原数组 改变

• 返回值： 被删除的元素

<script>
    var arr = [1,2,3,4];
    var result = arr.shift();
    console.log(arr)；       // [2,3,4]
    console.log(result);    // 1
</script>

4. 操作方法

concat( ) 末尾添加 数组项 / 数组；组成新数组 并返回

• 原数组不变

• 返回值：添加 数组项 / 数组 之后的新数组

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

slice( ) 原数组不变；截取 数组项，组成新数组 并返回

• 原数组不变

• 返回值：被截取的数组项 构成的新数组

参数（start, end）: 截取数组项的首位、末尾索引，不包含末尾

参数（start）: 截取数组项的首位索引，末尾到最后

参数（）: 复制出一个新数组，可用于：将伪数组，转为真数组

* 实现：
var realArr = [].slice.apply(伪数组);

* 原理
var arr1 = arr.slice();

• 复制一个数组的方法

<script>
    var a1 = [1, 2];
    var a2 = a1.slice();
    
    console.log(a2); // [1, 2]
    console.log(a1 === a2);  // false
</script>

splice( ) 原数组改变（删除 、替换、添加）；被删除的数组项组成的新数组 并返回

• 原数组改变

• 返回值：被删除的数组项 做成的新数组

• 删除、插入、替换

参数（index, number）：要删除数组项的索引（包含）、删除数组项的个数

参数（index, number, item）：要删除数组项的索引、删除数组项的个数、插入的数组项（可多个）

参数 index、number 是必需的，参数item可有可无

添加的item数组项从 index 索引开始添加（直接顶替了index索引的位置）

// 删除

<script>
    var arr = [0, 1, 2, 3, 4, 5, 6];
    var result = arr.splice(1, 2);
    console.log(arr);       //[0, 3, 4, 5, 6]
    console.log(result);    // [1, 2]
</script>

// 替换

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

// 插入

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

5. 数组转字符串

• 与字符串转数组的方法对应 str.split(‘分隔符‘)

join(‘分隔符‘) 数组转为 分隔符 连接的字符串

• 原数组不改变

参数（‘分隔符‘）：转成一个由分割付链接各数组项的字符串

参数（‘‘）：转成一个字符串（各数组项没有福海链接）

参数（）：转成一个 逗号链接各数组项的字符串

<script>
    var arr = [1, 2, 6];
    console.log(arr); // [1,2,6]
    console.log(arr.join(‘--‘)); // ‘1--2--6‘
    console.log(arr.join(‘‘)); // ‘126‘
    console.log(arr.join()); // 1,2,6  这个多个字符串
</script>

6. 查找位置

indexOf( ) 从头开始：查找数组项，返回第一个符合条件数组项的索引

• 原数组不变，只是查找位置

• 只能查出：从查找起点第一个符合条件的数组项索引

• 查到返回符合条件的数组项索引

• 精确查找，查不到返回 -1

参数（value, startIndex）：value是被查找项、startIndex是开始查找的位置（含此位置的数组项）

参数（value）：默认从索引为0的开始查找

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

lastIndexOf( ) 从尾开始：查找数组项，返回第一个符合条件数组项的索引

• 精确查找，查不到返回 -1

7. 数组项排序

reverse( ) 数组项反转；原数组改变为反转后的数组

• 原数组改变：数组项被反转

• 返回值：原数组改变后的值

<script>
    var arr = [0, 1, 2, 3];
    var result = arr.reverse();
    console.log(arr);       // [3, 2, 1, 0]
    console.log(result);    // [3, 2, 1, 0]
    console.log(arr === result); // true
</script>

sort( ) 数组项排序（数字比大小、字符串比大小）；原数组改变为排序后的数组

• 原数组改变：数组项排序后

• 返回值：原数组改变后的值

参数（）：不传参，则按字符串的字符编码排序

参数（函数表达式） 【参数间使用 减号；严禁使用 大于等于号】

• 函数中，return 参数a - 参数b; ----> 升序
• 函数中，return 参数b - 参数a; ----> 降序

<script>
    var arr = [0, 1, 10, 12, 7, 22, 2, 3];
    var result = arr.sort(function (a, b) {
        return a - b;
    });
    console.log(arr);       // [0, 1, 2, 3, 7, 10, 12, 22]
    console.log(result);    // [0, 1, 2, 3, 7, 10, 12, 22]
    console.log(arr === result); // true
</script>

• 对象中某一项进行排序

<script>
    var obj = [{
        value: 10
    }, {
        value: 30
    }, {
        value: 20
    }];
    
    var result = obj.sort(function(a, b) {
        return b.value - a.value;
    });
    
    // 降序排列
    console.log(result);
</script>