JavaScript - Array对象，数组

Posted 2020-11-17 Rocinante

1. 创建数组

方式1. new关键字

var arr = new Array(1, 2, 3);

方式2. 使用字面量创建数组对象

var arr = [1, 2, 3];

2. 检测一个对象是否是数组

1. instanceof（运算符），[] instanceof Array
2. Array.isArray()，html5方法，有兼容性问题

3. 数组常用方法

具体查MDN

// 1 栈操作(先进后出)
push()
pop()       //取出数组中的最后一项，修改length属性
// 2 队列操作(先进先出)
push()
shift()     //取出数组中的第一个元素，修改length属性
unshift()   //在数组最前面插入项，返回数组的长度
// 3 排序方法
reverse()   //翻转数组
sort();     //即使是数组sort也是根据字符，从小到大排序
// 带参数的sort是如何实现的？
// 4 操作方法
concat()    //把参数拼接到当前数组
slice()     //从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
splice()    //删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)
// 5 位置方法
indexOf()、lastIndexOf()   //如果没找到返回-1
// 6 迭代方法 不会修改原数组(可选)
every()、filter()、forEach()、map()、some()
// 7 方法将数组的所有元素连接到一个字符串中。
join()

4. 实现array.join方法

input：一个数组，例如var arr = [1, 2, 3, 4, 5]
output：1|2|3|4|5

Version 1：字符串拼接法

function myJoin(array, seperator) {
  seperator = seperator || ‘,‘;
  array = array || [];
  if (array.length == 0){
    return ‘‘;
  }
  var str = array[0];
  for (var i = 1; i < array.length; i++) {
    str += seperator + array[i];
  }
  return str;
}
var array = [6, 3, 5, 6, 7, 8, 0];
console.log(myJoin(array, ‘-‘));

console.log(array.join(‘-‘))

5. 实现array.reverse方法

将一个字符串数组的元素的顺序进行反转
input：["a", "b", "c", "d"]
output：[ "d","c","b","a"]

Version 1：第i个元素和第length-i-1个元素交换，for循环中i < 数组的一半即可

    function myReverse(arr) {
        // 数组为空即返回空数组
        if (!arr || arr.length === 0) {
            return [];
        }

        // 遍历到数组长度的一般即可
        for (var i = 0; i < arr.length / 2; i++) {
            var tmp = arr[i];
            arr[i] = arr[arr.length - i - 1];
            arr[arr.length - i -1] = tmp;
        }
        return arr;
    }

    var array = [‘a‘, ‘b‘, ‘c‘, ‘d‘];
    console.log(array);
    console.log(myReverse(array));
    console.log(array.reverse());

6. 清空数组

// 方式1 推荐 
arr = [];
// 方式2 
arr.length = 0;
// 方式3
arr.splice(0, arr.length);

案例1. 工资的数组[1500, 1200, 2000, 2100, 1800],把工资超过2000的删除

方式1：使用辅助数组，遍历和if过滤。（缺点：不是原地操作）

var array =  [1500,1200,2000,2100,1800];
var tmpArray = [];
for (var i = 0; i < array.length; i++) {
  if(array[i] < 2000) {
    tmpArray.push(array[i]);
  }
}
console.log(tmpArray);

方式2：使用filter高阶函数（函数式编程）

var array =  [1500, 1200, 2000, 2100, 1800];
array = array.filter(function (item, index) {
  if (item < 2000) {
    return true;
  }
  return false;
});
console.log(array);

案例2. ["c", "a", "z", "a", "x", "a"]找到数组中每一个a出现的位置

方式1. 用到array.indexOf方法，也是缺点

var array =  [‘c‘, ‘a‘, ‘z‘, ‘a‘, ‘x‘, ‘a‘];
do {
  var index = array.indexOf(‘a‘,index + 1);
  if (index != -1){
    console.log(index);
  }
} while (index > 0);

案例3. 去掉一个数组中重复的元素

方式1. 使用k-v容器，k保存原数组中的元素，v保存原数组中元素出现的次数；不管次数多少次，都保存在新的数组一次。

        // 新建数组
        var arr = [‘c‘, ‘a‘, ‘z‘, ‘a‘, ‘x‘, ‘a‘];

        // 清除重复元素
        function clear(array) {
            // 1. 用key-value的容器保存元素出现的次数
            var tmpDict = [];
            // var tmpDict = {};
            for (var i = 0; i < array.length; i++) {
                var item = array[i];
                if (tmpDict[item]) {
                    tmpDict[item]++;
                } else {
                    tmpDict[item] = 1;
                }
            }

            // 2. 保存在一个新的数组中。容器中出现次数大于1和等于1的元素都只添加一次到新的数组中。
            var tmpArray = [];
            for (var key in tmpDict) {
                if (tmpDict[key] == 1) {
                    tmpArray.push(key);
                } else {
                    // 如果新的数组中没有原本数组的元素，则添加
                    if (tmpArray.indexOf(key) == -1) {
                        tmpArray.push(key);
                    }
                }
            }
            return tmpArray;
        }
        // 测试
        console.log(clear(arr));