吃透JavaScript核心——内置对象:数组

565 阅读5分钟

什么是数组

数组是一组数据的集合,其中每个数据被称作元素,是一组数据存储在单个变量名下的优雅方式。

创建数组

利用new创建数组

var 数组名 = new Array();
var arr = new Array();//创建一个新的空数组
var arr = new Array(2);//创建一个空数组 里面有两个空元素
var arr = new Array(1,2);//等价于var arr = [1,2]

利用数组字面量[]创建数组

var arr = [];
var arr1 = [1,2,'hello',true];//数组中可以存放任何类型的数据

获取数组中的元素

数组名[索引号]

遍历数组

遍历把数组中每个元素从头到尾都访问一次

数组长度

数组名.length 动态检测数组元素个数

数组中新增元素

修改length长度

var arr=['red','yellow','green','blue'];
console.log(arr.length);
arr.length=5;
console.log(arr[4]);//undefined

修改数组索引 追加数组元素

var arr= ['red','yellow','green'];
arr[3] = 'blue';//追加
arr[1] = 'pink';//替换
arr = 'hellow world';
console.log(arr);//hello world 直接给数组名赋值 数组里边的原来的元素都没了

数组存放1~10个值

var arr = [];
for (var i=0; i < 10; i++) {
    arr[i]=i;
}

筛选数组

将数组中大于等于8的元素选出来放入新数组

//法1.
var arr = [2,9,4,8,4,3,6,5,7,8,9,9];
var newArr = [];
var j=0;
for (var i = 0; i < arr.length; i++) {
    if(arr[i] > 8) {
        newArr[j] = arr[i];
        j++
    }
}
//法2.
var arr = [2,9,4,8,4,3,6,5,7,8,9,9];
var newArr = [];
//刚开始newArr.length为0
for (var i = 0; i < arr.length; i++) {
    if(arr[i] >= 8) {
        newArr[newArr.length] = arr[i];
    }
}

数组案例

数组转换为字符串

input: ['red','yellow','green','blue']

output: 'red|yellow|green|blue'

var arr=['red','yellow','green','blue'];
var str='';
var sep='|';
for(var i=0; i<arr.length;i++){
    str += arr[i] + sep; 
}

翻转数组

function reverse(arr) {
    var newArr = [];
    for (var i = arr.length-1; i >= 0; i--) {
        newArr[newArr.length] = arr[i];
    }
    return newArr;
}
console.log(reverse(['red','yellow','green','blue']));

冒泡排序

简单的排序算法,重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来,走访数列的工作是重复地进行直到没有再需要交换。

  • 外层for循环 一共需要的躺数
  • 内层for循环 每一趟交换的次数
  • 交换两个变量
var arr = [5,4,3,2,1];
for (var i=0; i<arr.length; i++) {
    for (var j=0; j<arr.length-i; j++) {
        if(arr[j] < arr[j+1]) {
            var temp = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = temp;
        }
    }
}

常用数组方法

检测是否为数组

1.instanceof

var arr = [];
var obj = {};
console.log(arr instanceof Array);//true
console.log(obj instanceof Array);//false

2.Array.isArray()

新增方法 ie9 以上版本支持。

console.log(Array.isArray(arr));//true
console.log(Array.isArray(obj));//false

获取数组元素索引

方法名说明返回值
indexOf()数组中查找给定元素的第一个索引如果存在返回索引号 如果不存在 返回-1
lastIndexOf()在数组中的最后一个索引如果存在返回索引号 如果不存在 返回-1
var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 0
arr.indexOf(20); // 1
arr.indexOf(30); // 元素30没有找到,返回-1
arr.indexOf('30'); // 元素'30'的索引为2

添加和删除数组元素

push()和pop()

  • 添加push()Array末尾添加若干元素。返回值为新数组长度。原数组发生变化。

  • 删除pop()Array的最后一个元素删除掉。返回的是删除的那个元素,原数组发生变化。

var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []
arr.pop(); // 空数组继续pop不会报错,而是返回undefined
arr; // []

unshift()和shift()

  • 添加unshift()方法往Array头部添加若干元素。返回值为新数组长度。原数组发生变化。

  • 删除shift()方法把Array第一个元素删掉。返回的是删除的那个元素,原数组发生变化。

var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错,而是返回undefined
arr; // []

数组排序

sort()

sort()对当前Array进行排序,直接修改当前Array的元素位置,直接调用时,按照默认顺序排序。

var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']

var arr1 = [13, 4, 77, 1, 7];
arr1.sort();//🚗注意[1, 13, 4, 7, 77]

var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a,b) {
    return a-b ;//升序
    //return a-b ;//降序
})

reverse()

reverse()把整个Array的元素给调个个,反转:

var arr = ['one', 'two', 'three'];
arr.reverse(); 
arr; // ['three', 'two', 'one']

数组转换为字符串

toString()

把数组转换成字符串,逗号分隔每一项

join('分隔符')

把数组中所有元素转换为一个字符串。

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

var arr1 = ['green','blue','pink'];
console.log(arr1.join());//green,blue,pink
console.log(arr1.join('-'));//green-blue-pink

如果Array的元素不是字符串,将自动转换为字符串后再连接。

concat()

concat()方法把当前的Array和另一个Array连接起来,并返回一个新的Array

var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']

concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里:

var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4] 

slice()

var arr = ['A', 'B', 'C', 'D'];
arr.slice(0, 2); // [0,2) ['A', 'B']
arr.slice(2); // 从索引3开始到结束: ['C','D']

splice()

splice()方法是修改Array的“万能方法”,从指定的索引开始删除若干元素,然后再从该位置添加若干元素:

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

数组案例

数组去重

解: 遍历旧数组,查询旧数组中的每个元素是否在新数组中,如果在,就不添加,如果不在,就添加进新数组。

function unique(arr) {
    var newArr[];
    for( var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
        return newArr;
    }
}

参考

www.liaoxuefeng.com/wiki/102291…