JavaScript常用内置对象之Array

510 阅读6分钟

数组 (Array)

1. 作用:

Array 对象用于在单个的变量中存储多个值

2. 概念:

a.下标 -- 编号,从 0 开始,到 (长度-1) 结束,索引

b.元素 -- 数组中存放数据的空间

c.长度 -- 数组中存放数据的个数

3. 创建数组对象:

   a.  var array = []; // 使用直接量的方式创建
    b.  var array = new Array(); // 使用构造函数创建

    // 创建的同时添加数组元素
    c.  var array = [value1, value2, value3, ...]; 
    d.  var array = new Array(value1, value2, value3, ...);

    e.  var array = new Array(size);  // size 表示指定数组长度

4. 引用数组元素:

数组名[下标] --> arr[0]

-- 下标以数字0开始

5. 遍历数组元素:

a. 普通循环

   for (var i = 0; i < array.length; i++) {
        // array[i]
    }

b. for - in

   for (var i in array) { // i 表示数组下标的字符串内容,比如下标为 0,那i就是"0", i 表示数组下标的字符串内容,比如下标为 0,那i就是"0"
        // array[i]
    }
    
    // 拓展:使用for - in 遍历对象属性
    for (var attrName in obj) { // attrName 表示对象属性名
        var value = obj[attrName]; // obj[attrName] 表示对象属性值
    }

c. for - of

ES6 新增语法,学习可参考: developer.mozilla.org/zh-CN/docs/…

7. 常用数组API总结

length属性 -- 获取数组长度


push() -- 将一个或多个元素添加到数组的末尾,并返回新数组的长度。该方法和 call() 或 apply() 一起使用时,可应用在类数组的对象上。

unshift() -- 将一个或多个元素添加到数组的开头,并返回新数组的长度。

splice() -- 指定索引处添加/删除

           // 第二个参数为0时做添加
            arrayObject.splice(index, 0, item1,.....,itemX)
            
            // 第二个参数不是0则做删除
            arrayObject.splice(index, howmany, item1,.....,itemX)

     -- 注意:添加/删除元素都会动态改变数组长度及数组下标

pop() -- 从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

shift() -- 从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

reverse() -- 反转,将数组中元素的位置颠倒。

sort(sortBy) -- 排序(升序,默认字符串Unicode编码顺序)。

     sortBy : 可选排序函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

     -- 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。

     -- 若 a 等于 b,则返回 0。

     -- 若 a 大于 b,则返回一个大于 0 的值。

   // 简单的栗子:升序排列数字数组
    function sortNumber(a,b) {return a - b;}


concat() -- 数组连接,返回值为新数组

     var arrNew = arr1.concat(arr2);

join() -- 连接数组元素,返回字符串,默认使用 ,(逗号) 连接数组元素


slice(start, end)

     -- 截取 start 开始到 end 结束之间的数组元素,省略 end 表示截取到数组末尾。

     -- 包括开始索引处元素,但不包括结束索引处元素。

     -- start,end 也可以取负值

     -- 返回新数组,不影响原数组

toString()

     -- 返回一个字符串,表示指定的数组及其元素。

     -- 该字符串由数组中的每个元素的 toString() 返回值经调用 join() 方法连接(由逗号隔开)组成。



8. 数组排序算法(了解):

冒泡排序

   -- A. 相邻两个元素比较,按升序(降序)排序,如果相邻两个元素不满足排序规则,则交换顺序。

   -- B. 会经过多轮的排序,每轮会经过多次排序,通常规则是:轮数 + 当前轮比较次数 == 元素个数

   -- c. 二重循环,外层控制比较的轮数,内层控制每轮比较的次数,外层循环 N-1,内层循环 N-1-i (N表示数组长度,i表示外层循环变量,外/内层循环变量都从0开始)

       for(let i = 0; i < len-1; i++){
            for(let j = 0; j < len-1-i; j++){
                if(arr[j] < arr[j+1]){
                    var mid = arr[j+1];
                    arr[j+1] = arr[j];
                    arr[j] = mid;
                }
            }
        }

**选择排序插入排序快速排序顺序查找二分查找......**

9. 数组ES5-ES6新增API

Array.isArray(arr)

  -- 判断 arr 是否为数组

  拓展: 其他判断 arr 是否为数组的方法

  -- Object.prototype.toString.call(arr)

  -- arr instanceof Array

arrayObject.forEach(callback)

  -- 对数组的每个元素执行一次提供的函数

  -- callback(currentValue, index, array)

currentValue : 数组中遍历到的当前值

index : 当前值在数组中的下标

array : 调用 forEach() 方法的数组

注意: 没有返回一个新数组! 没有返回值!

arrayObject.map(callback)

  -- 对数组的每个元素执行一次提供的函数后返回其结果。

  -- 返回一个新数组,由所有返回的结果组成。

           var newarr = arr1.map(callback)

arrayObject.some(callback)

  -- 测试数组中的某些元素是否通过由提供的函数实现的测试。

       [2, 5, 8, 1, 4].some(function(curr){
                            return curr 9;
        }) // false
        
        [2, 5, 8, 1, 4].some(function(curr){
                            return curr 7;
        }) // true

arrayObject.every(callback)

  -- 测试数组的所有元素是否都通过了指定函数的测试。和some()一样用法

arrayObject.filter(callback)

  -- 返回一个新数组, 其包含通过所提供函数实现的测试的所有元素。

       [2, 5, 8, 1, 4].filter(function(curr){
                        return curr > 4;
        }) // [5,8]

arrayObject.indexOf(searchElement[, fromIndex])

  -- 查找数组中某元素第一次出现的索引

  -- 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

       [2, 5, 8, 1, 4].indexOf(8)  // 2
        [2, 5, 8, 1, 4].indexOf(8,3) // -1,因为从索引 3 开始,找不到8

arrayObject.lastIndexOf()

  -- 查找数组中某元素最后一次出现的索引,不传参数返回-1

       [2,5,4,6,5,8,7,6,5].lastIndexOf(5) // 8

arrayObject.reduce(callback,initialValue) -- 归并

  -- 对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。

  -- callback(accumulator,curr,currIndex,array)

  -- accumulator 累加器,累加回调的返回值; 它是上一次调用callback时返回的累积值

  -- 提供初始值通常更安全

arrayObject.reduceRight() -- 从右到左

       [2, 5, 8, 1, 4].reduce((a,b) => a+b) // 20 == 2 + 5 +8 + 1 + 4;
       [2, 5, 8, 1, 4].reduce((a,b) => a-b) // -16 == 2 - 5 - 8 - 1 -4;
       [2, 5, 8, 1, 4].reduce((a,b) => a*b) // 320 == 2*5*8*1*4;
       // 计算数组中元素出现的次数
        arr1.reduce(function(accumulator,curr){
            if(curr in accumulator)
                accumulator[curr]++;
            else
                accumulator[curr] = 1;
            return accumulator;
        },{})

        // 数组去重
        let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
        let result = arr.sort().reduce((init, current)=>{
            if(init.length===0 || init[init.length-1]!==current){
                init.push(current);
            }
            return init;
        }, []);
        console.log(result); //[1,2,3,4,5]

        更多案例 : [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)

Array.from()

  --从一个类似数组或可迭代对象中创建一个新的数组。

  -- 伪数组对象(拥有一个 length 属性和若干索引属性的任意对象)

  -- 可迭代对象(可以获取对象中的元素,如 Map和 Set 等)

       let newArr = Array.from(arr);

arrayObject.fill() -- 方法用一个固定值填充一个数组。

       arr.fill(0)
        // [0,0,0,0,...]