JS系列 · 数组(二)

184 阅读11分钟

前言

创建数组的两种方式:

一、使用字面量:

var arr = [1, 2, 3];

二、使用 new Array() 构造函数

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


以上是创建数组的常用方法,接下来是对数组的操作

下面是关于 操作 数组对象 的一些 内置对象

instanceof

instanceof 运算符用于检测 构造函数 的 prototype 属性是否出现在某个实例对象的原型链上。返回值:true 或 false 。

语法:

object instanceof constructor

参数:

object :某个实例对象

constructor :某个构造函数

描述:

instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

实例:

// 数组对象:检测数组类型
console.log(arr instanceof Array); // true

// 函数对象:定义构造函数
function fun() {}

var f = new fun();

console.log(f instanceof fun); // true

toString()

toString() 方法:将数组转成字符串,用逗号隔开每一项数据

实例:

var arr = [1, 2, 3, 4, 5, 6];
// 转 字符串
console.log(arr.toString()); // 1,2,3,4,5,6

首尾操作数组常见的四种方法:

首尾操作数组:

push()

push() 在数组末尾添加一个或多个元素,并返回数组操作后的长度

pop()

pop() 删除数组最后一项,返回删除项

shift()

shift() 删除数组第一项,返回删除项

unshift()

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

实例:

var arr = [1, 2, 3, 4, 5, 6];

// 尾部添加一项或多项
arr.push(8, 9, 10);
console.log(arr); // [1, 2, 3, 4, 5, 6, 8, 9, 10]

// 尾部删除最后一项。不需要传参
arr.pop();
console.log(arr); // [1, 2, 3, 4, 5, 6, 8, 9]

// 删除第一项。不需要传参
arr.shift();
console.log(arr); // [2, 3, 4, 5, 6, 8, 9]

// 开头添加一项或多项
arr.unshift(6, 6, 6);
console.log(arr); // [6, 6, 6, 2, 3, 4, 5, 6, 8, 9]

小应用:

var arr2 = [1, 2, 3];
// 第一项添加到最后一项
console.log(arr2.push(arr2.shift()));
console.log(arr2); // [2, 3, 1]

concat()

concat() 方法:合并数组。concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

语法:

    var new_array = old_array.concat(value1[, value2[, ...[, valueN]]]);

参数:

数组和/或值,将被合并到一个新的数组中。如果省略了所有 valueN 参数,则 concat 会返回调用此方法的现存数组的一个浅拷贝。

返回值:

新的 Array 实例。

实例:

// 数组合并  concat()方法

// 合并两个数组
var arr_num = [1, 2, 3];
var aar_str = ["a", "b", "c"];
var arr = arr_num.concat(aar_str);
console.log(arr); // [1, 2, 3, "a", "b", "c"]

// 合并三个数组
var arr_num = [1, 2, 3],
  aar_str = ["a", "b", "c"],
  arr_num = [8, 9, 10];
var arrs = arr_num.concat(aar_str, arr_num);
console.log(arrs); // [8, 9, 10, "a", "b", "c", 8, 9, 10]

// 将值连接到数组中
var arrNum = [1, 2, 3];
var newArr = arrNum.concat("tom", 6, [7, 8]);
console.log(newArr); // [1, 2, 3, "tom", 6, 7, 8]

slice()

slice() 方法:拆分数组。slice(begin,end) 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括 end)。原始数组不会被改变。

语法:

arr.slice([begin[, end]]

参数: begin: 提取起始处的索引(从 0 开始),从该索引开始提取原数组元素。

如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。

如果省略 begin,则 slice 从索引 0 开始。

如果 begin 超出原数组的索引范围,则会返回空数组。

end: 提取终止处的索引(从 0 开始),在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素(包含 begin,但不包含 end)。

slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 (索引为 1, 2, 3 的元素)。

如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。

如果 end 被省略,则 slice 会一直提取到原数组末尾。

如果 end 大于数组的长度,slice 也会一直提取到原数组末尾。

返回值:

一个含有被提取元素的新数组。

描述

slice 不会修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。原数组的元素会按照下述规则拷贝:

  • 如果该元素是个对象引用 (不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。

  • 对于字符串、数字及布尔值来说(不是 String、Number 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。

实例:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// 调用 slice() 方法。
// 截取:3下标开始(包含),7下标结束(不包含)
var newArr = arr.slice(3, 7);
console.log(newArr); // [4, 5, 6, 7]

var newArr = arr.slice(-5, 2);
console.log(newArr); // []

var newArr = arr.slice(-7, 5);
console.log(newArr); // [3, 4, 5]

var newArr = arr.slice(-7);
console.log(newArr); // [3, 4, 5, 6, 7, 8, 9]

splice()

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

语法:

array.splice(start[, deleteCount[, item1[, item2[, ...]]]]);

参数:

start:指定修改的开始位置(从 0 计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从-1 计数,这意味着-n 是倒数第 n 个元素并且等价于 array.length-n);如果负数的绝对值大于数组的长度,则表示开始位置为第 0 位。

deleteCount:整数,表示要移除的数组元素的个数。

如果 deleteCount 大于 start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。

如果 deleteCount 被省略了,或者它的值大于等于 array.length - start(也就是说,如果它大于或者等于 start 之后的所有元素的数量),那么 start 之后数组的所有元素都会被删除。

如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。

item1, item2, ... :要添加进数组的元素,从 start 位置开始。如果不指定,则 splice() 将只删除数组元素。

返回值:

由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。

描述:

如果添加进数组的元素个数不等于被删除的元素个数,数组的长度会发生相应的改变。

实例:

// 操作数组 综合方法:删除、插入、替换
// 使用 splice()  方法

var arr = [1, 2, 3, 4, 5, 6];

// 删除。传入两个参数:第一个参数代表从下标为几的位数开始删除,第二个参数代表删除后面的几项。
var del_arr = arr.splice(2, 4); // [3, 4, 5, 6]
console.log("删除:" + del_arr); // 删除:3,4,5,6
console.log(arr); // 新数组:[1,2]

// 替换。至少传入三个参数:第一个参数代表从下标为几的位数开始删除,第二个参数代表删除后面的几项。第三个参数:要替换的参数数据。
var ch_arr = arr.splice(1, 4, "小明", 0);
console.log(ch_arr); // 删除:[2, 3, 4, 5]
console.log(arr); // 新数组:[1, "小明", 0, 6]

// 插入。在删除的基础上将参数二设置为0:代表不删除任何数据,要新增的数据从参数3位置依次书写,会从参数1之后开始插入。
var cr_arr = arr.splice(2, 0, "A", 9);
console.log(cr_arr); // 因为删除个数是0,所以返回空数组:[]
console.log(arr); // 新数组:[1, 2, "A", 9, 3, 4, 5, 6]

indexOf()

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

lastIndexOf()

lastIndexOf() 方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。

实例:

var num = [2, 4, 2, 6, 8, 6, 8, 7, 9, 0, 8];

// 查找某个元素在数组中第一次出现位置的下标
console.log(num.indexOf(8)); // 4

// 查找某个元素在数组中最后一次出现位置的下标
console.log(num.lastIndexOf(6)); //5

// 数组中没查找到该元素,就返回 -1。
console.log(num.lastIndexOf(5)); // -

数组排序

revese() 方法

reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。

语法:

arr.reverse()

返回值:

颠倒后的数组。

实例:

var arr = [1, 2, 3, 4, 5, 6];
console.log(arr.reverse()); // [6, 5, 4, 3, 2, 1]

sort() 方法

sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的

由于它取决于具体实现,因此无法保证排序的时间和空间复杂性。

语法:

arr.sort([compareFunction])

参数:

compareFunction:函数可选,用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。
firstEl:第一个用于比较的元素。 secondEl:第二个用于比较的元素。

返回值:

排序后的数组。请注意,数组已原地排序,并且不进行复制。

描述:

指明arr.sort() 方法中的 function 是可选的。

  • 如果没有指明 compareFunction ,不写函数,那么元素会按照转换为的字符串的诸个字符的Unicode位点进行排序。
    例如 "Banana" 会被排列到 "cherry" 之前。当数字按由小到大排序时,9 出现在 80 之前,但因为(没有指明 compareFunction),比较的数字会先被转换为字符串,所以在Unicode顺序上 "80" 要比 "9" 要靠前。

  • 如果指明了 compareFunction ,那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素:

    • 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
    • 如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变。备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);
    • 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。
    • compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。

实例:

    // sort() 方法的应用
    // 顺序: sort()方法不传参数默认根据字符编码集顺序排序
    var arr2 = [5, 6, 9, 62, 88, 12, 22, 30, 0.5, 10, 21];
    console.log(arr2.sort()); // [0.5, 10, 12, 21, 22, 30, 5, 6, 62, 88, 9]

    // 降序:使用函数传参
    var arr3 = [5, 6, 9, 62, 88, 12];
    arr3.sort(function (a, b) {
        if (a > b) {
            return -1; // 返回 -1 ,表示 a 排在 b 前面
        } else if (a < b) {
            return 1; // 返回 1 ,表示 a 排在 b 后面
        } else {
            return 0; // 返回 0 ,表示 a 和 b 位置不变
        }
    });
    console.log(arr3); // [88, 62, 12, 9, 6, 5]

    // 升序:变换a,b条件
    arr3.sort(function (a, b) {
        if (a < b) {
            return -1;
        } else if (a > b) {
            return 1;
        } else {
            return 0;
        }
    });
    console.log(arr3); // [5, 6, 9, 12, 62, 88]

数组转字符串

join 方法

join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

语法:

arr.join([separator])

参数:

separator 可选 指定一个字符串来分隔数组的每个元素。如果需要,将分隔符转换为字符串。如果缺省该值,数组元素用逗号(,)分隔。如果separator是空字符串(""),则所有元素之间都没有任何字符。

返回值

一个所有数组元素连接的字符串。如果 arr.length 为0,则返回空字符串。

描述:

所有的数组元素被转换成字符串,再用一个分隔符将这些字符串连接起来。

实例:

    var arr = [1,2,3,4,5,6];

    // 数组对象直接调用 join 方法,返数:组元素变为字符串格式中间逗号隔开
    var arr_toString = arr.join();
    console.log(arr_toString); // 1,2,3,4,5,6

    // join 方法内传参:穿一个字符的话,就用它字符隔开元素
    var arr_toString = arr.join("-");
    console.log(arr_toString); // 1-2-3-4-5-6

    // join 方法内传参:穿一个空字符的话,返回就是连续的元素
    var arr_toString = arr.join("");
    console.log(arr_toString); // 123456