JS 中的 数组（ES5 中方法最全解析）

一、数组概念

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

  • 数组的长度：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() 方法 --->【最严谨，兼容性好】

var arr = [];

var result = toString.call(arr);
console.log(result);

若是数组，输出： '[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"
    };  
}

四、数组几种方法

1. 遍历 方法

（1）forEach( )：遍历数组

  • 语法： arr.forEach(function(item, index) { })

  • 参数：

    • 回调中的 item ：数组项

    • 回调中的 index ：当前数组项的索引值

  • return false： 停止本次循环，继续下一次循环

var arr = [1, 2, 3, 4];
arr.forEach(function( value , index){
    if (item > 3) {
        return false;
    }

    console.log(item);
})；

// 输出：1 2 3
（2）filter( )：筛选数组；原数组不变，返回新数组： 符合条件的项构成的

  • 语法： arr.filter(function (item, index) { return 筛选条件})

    • 返回值： 符合条件的项构成的 新数组

    • 筛选条件，写在 return 中

  • 原数组不变

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]
（3）map( )：集体操作数组项；原数组不变，返回新数组： 集体操作后的数组项构成的

  • 语法： arr.map(function (item, index) { return 集体操作})

    • 返回值： 集体操作后的数组项构成的 新数组

    • 集体操作，写在 return 中

  • 原数组不变

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

console.log(newArr);    // [10, 20, 30, 40]
console.log(arr);       // [1, 2, 3, 4]
（4）every( )：判断 数组项是否符合条件；原数组不变；有一项不符合，就返回 false

  • 语法： arr.every(function (item, index) { return 判断条件})

    • 返回值： 布尔值

      • true：所有项都符合条件

      • false：有一项 或 多项 不符合条件

    • 判断条件，写在 return 中

  • 原数组不变

var arr = [1,2,3,4];
var result = arr.every(function (value, index) {
    return value < 3;
});
    
console.log(result);    // false
（5）some( )：判断 数组项是否符合条件；原数组不变；只要有一项符合，就返回 true

  • 语法： arr.some(function (item, index) { return 判断条件})

    • 返回值： 布尔值

      • true：只要有一项符合，就返回 true

      • false：所有项都不符合

    • 判断条件，写在 return 中

  • 原数组不变

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

2. 增加、删除 方法

（1）push( )：末尾追加数组项；原数组改变；返回：新数组的长度

  • 语法： arr.push(item)，arr.push(item1, item2);

    • 参数（item）：追加一项

    • 参数（item1, item2）：追加多项

    • 注意： 参数个数不定，只能是数组项，不能是数组

    • 返回值： 新数组的长度

  • 原数组改变： 追加后的数组

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
（2）unshift( )：开头追加数组项；原数组改变；返回：新数组的长度

  • 语法： arr.unshift(item)，arr.unshift(item1, item2);

    • 参数（item）：追加一项

    • 参数（item1, item2）：追加多项

    • 注意： 参数个数不定，只能是数组项，不能是数组

    • 返回值： 新数组的长度

  • 原数组改变： 追加后的数组

var arr = [1,2,3,4];
var result = arr.unshift(5,6,7);
console.log(arr)；	    // [5,6,7,1,2,3,4]
console.log(result);    // 7
（3）pop：末尾删除数组项；原数组改变；返回 被删除的数组项

  • 语法： arr.pop()

    • 不用传参

    • 返回值： 被删除的元素

  • 原数组改变： 删除数组项后的数组

var arr = [1,2,3,4];
var result = arr.pop();
console.log(arr)；	// [1,2,3]
console.log(result);    // 4
（4）shift( )：开头删除数组项；原数组改变；返回 被删除的数组项

  • 语法： arr.shift()

    • 不用传参

    • 返回值： 被删除的元素

  • 原数组改变： 删除数组项后的数组

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

3. 合并、截取、删除 替换 增加 方法

（1）concat( )：末尾追加 数组 / 数组项；原数组不改变；返回 合并后的新数组

  • 语法： arr.concat(item) 、 arr.concat(arr1) 、arr.concat(item, arr1)

    • 参数：

      • 可以是 一个 或 多个 数组项：arr.concat(item) 、 arr.concat(item1, item2)

      • 可以是 一个 或 多个 数组：arr.concat(arr1) 、arr.concat(arr1, arr2)

      • 可以是 一个 或 多个 数组 / 数组项：arr.concat(arr1, item)

    • 返回值： 合并后的新数组

  • 原数组不改变

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]
（2）slice( )：截取数组；原数组不变；返回 截取出来的数组项 构成的新数组

  • 语法： arr.slice()

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

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

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

    • 注意： 不包含结束索引 endIndex 的数组项

  • 原数组不改变

  • 伪数组 变 真数组：

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

* 原理
var arr1 = arr.slice();
（3）splice( ) 删除 、替换、插入 数组项；原数组改变；返回：被删除的数组项组成的新数组

  • 语法： arr.splice()

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

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

    • 注意：

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

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

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

  • 原数组改变： 被修改后的数组

// 删除

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]

// 替换

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]

// 插入

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);    // []

4. 排序 方法

（1）sort( )数组项 排序；原数组改变 【非常重要】

  • 语法： arr.sort(function (a, b) {return a - b})

    • 回调 参数（a, b）：数组比较项

    • 回调 返回值：

      • retrun a - b：由小到大排列（升序）

      • retrun b - a：由大到小排列（降序）

    • 返回值： 排序后的数组

  • 原数组改变： 排序后的

  • 应用一： 简单数组 的排序

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]
  • 应用二： 数组对象 的排序
var obj = [{
    value: 10
}, {
    value: 30
}, {
    value: 20
}];
    
var result = obj.sort(function(a, b) {
    return b.value - a.value;
});
    
// 降序排列
console.log(result);
（2）reverse( )：数组项 反转；原数组改变：反转后的数组

  • 语法： arr.reverse()

    • 参数： 不用传参

    • 返回值： 反转后的数组

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


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

5. 转换 方法：数组转字符串

（1）join('分隔符')：数组转为 分隔符 连接的字符串；原数组不改变；返回字符串

  • 语法： arr.join()

    • 参数（'分隔符'）：转成一个 由分隔符连接各数组项的字符串

    • 参数（''）：转成一个字符串（各数组项没有任何分隔符、空字符串 连接）

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

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  这个多个字符串
  • 对比： 字符串 转 数组的：str.split('分隔符')

7. 位置查找 方法

（1）indexOf( )：正数查找位置 / 查找数组中是否有这一项；原数组不变；返回：索引值
  • 语法： arr.indexOf(item)

    • 参数 (item)：要查找的数组项；默认从第 0 项开始查找

    • 参数 (item, startIndex)：item是要查找的数组项；startIndex是开始查找的位置（含此位置的数组项）

    • 返回值： 返回第一个符合体检的索引值

      • 返回值 > -1，证明 数组中有这一项

      • 返回值 === -1，证明 数组中没有这一项

var arr = [0, 1, 2,3,4,5,6];
var result = arr.indexOf(3,3);
console.log(result);    // 3
（2）lastIndexOf( )：倒数查找位置 / 查找数组中是否有这一项；原数组不变；返回：索引值
posted @ 2017-12-23 00:02  执着的程序员~  阅读(232)  评论(0)  编辑  收藏  举报