javascript-数组的基本操作

本文主要介绍js数组元素的一些基本操作,常用的一些方法

关键词:创建数组、新增数组元素、删除数组元素、将数组变成字符串、数组对象常用属性、合并数组、拷贝数组、数组排序,以及数组和Set之间的关系等

1. 创建数组

1.1 使用Array构造函数

var arr1 = new Array(); //创建一个空数组
var arr2 = new Array(20); // 创建一个包含20项的数组
var arr3 = new Array("lily", "lucy", "Tom"); // 创建一个包含3个字符串的数组

1.2 使用数组字面量表示

var arr4 = []; //创建一个空数组
var arr5 = [20]; // 创建一个包含1项的数组
var arr6 = ["lily", "lucy", "Tom"]; // 创建一个包含3个字符串的数组

1.3 类数组对象转换为数组

let obj = {
        0: 1,
        1: 2,
        2: 6,
        length: 3
 };
let arr1 = Array.from(obj); // [1. 2, 6]
let arr2 = Array.prototype.slice.call(obj); // [1. 2, 6]

2. 数组常用方法

2.1 数组元素的添加

  • push将一个或多个新元素添加到数组结尾,并返回数组新长度
  • unshift将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度
  • splice(2, 0, arr6)将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回””
var arr7 = [1, 2];
arr7.push(8);
arr7.push(9, 10, 11);
arr7.unshift("00", "01");
arr7.splice(2, 0, arr6);
console.log(arr7); // ["00", "01", Array(3), 1, 2, 8, 9, 10, 11] 数组长度为9

2.2 数组元素的删除

  • pop移除最后一个元素并返回该元素值
  • shift移除最前一个元素并返回该元素值,数组中元素自动前移
  • splice(2, 1)删除从指定位置(2,从0开始)开始的指定数量(1)的元素,数组形式返回所移除的元素
var arr8 = [1, 2, 5, 8, 10, "123lili", "9087tt", 20];
arr8.pop();
arr8.shift();
arr8.splice(2, 1);
console.log(arr8); // [2, 5, 10, "123lili", "9087tt"]

2.3 数组的截取和合并

  • 截取:slice(start, [end])截取指定位置的数组元素,以数组的形式返回数组的一部分,不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素
  • 合并:concat([item1[, item2[, … [,itemN]]]]);将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组
var arr9 = ["12yu", "i", "am", "ada", "~"];
console.log(arr9.slice(1, 4)); //  ["i", "am", "ada"]
console.log(arr9.slice(1)); // ["i", "am", "ada", "~"]

console.log(arr9.concat("啦啦啦", 666)); // ["12yu", "i", "am", "ada", "~", "啦啦啦", 666]
console.log(arr9.concat("啦啦啦", ["啦啦啦", 999])); // ["12yu", "i", "am", "ada", "~", "啦啦啦", "啦啦啦", 999]

2.4 数组的拷贝(浅拷贝)

  • 返回数组的拷贝数组,注意是一个新的数组,不是指向。可以用concat()、.slice()、splice()、数组的解构赋值来实现
var arr10 = arr9.slice(0); // ["12yu", "i", "am", "ada", "~"]
arr9[0] = "hello";
console.log(arr10); // ["12yu", "i", "am", "ada", "~"]
console.log(arr9.concat()); // ["hello", "i", "am", "ada", "~"]
console.log(arr9.splice(0, arr9.length)); // ["hello", "i", "am", "ada", "~"]
console.log([...arr9]); // ["hello", "i", "am", "ada", "~"]

2.5 数组元素的排序

  • reverse()反转元素(最前的排到最后、最后的排到最前),返回数组地址
  • sort():按升序排列数组项——即最小的值位于最前面,最大的值排在最后面。返回数组地址。
    • 在排序时,sort()方法会调用每个数组项的 toString()转型方法,然后比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值, sort()方法比较的也是字符串,
    • sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回 0,如果第一个参数应该位于第二个之后则返回一个正数。
var arr11 = ["you", "and", "me"];
console.log(arr11.reverse()); // ["me", "and", "you"] 
console.log(arr11.sort()); // ["and", "me", "you"]
arr11.sort(function (a, b) {

    return a - b;
});

2.6 数组转为字符串

var arr12 = [1, 2, 3, 4];
// join(separator)返回字符串,这个字符串将数组的每一个元素值用separator连接在一起
console.log(arr12.join("--")); // 1--2--3--4
console.log(arr12.toLocaleString()); // 1,2,3,4
console.log(arr12.toString()); // 1,2,3,4
// 注:数组使用arr12.valueOf()方法依旧是数组

2.7 数组中是否存在指定元素

  • indexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中,从数组的开头(位置 0)开始向后查找,判断条件是强等于“===”
  • lastIndexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中,从数组的末尾开始向前查找。
    这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回1。在比较第一个参数与数组中的每一项时,会使用全等操作符。
  • some:至少有一个元素通过由提供的函数实现的测试。
  • includes:返回一个布尔值,表示某个数组是否包含给定的值,判断条件是强等于“===”(Same-value-zero equality),NaN是特殊情况
  • find:返回数组中满足提供的测试函数中的第一个元素的值。否则,返回undefined。
  • findIndex:返回数组中满足提供的测试函数中的第一个元素的索引。否则,返回-1。
console.log(arr12.indexOf(2)); // 1
console.log(arr12.lastIndexOf(2)); // 1
console.log(arr12.indexOf(2, 2)); // -1
console.log(arr12.lastIndexOf(2, 2)); // 1
console.log([1, 2, 3, 'ada~'].some((element, index, arr) => element == 'ada~')); // true

// es6写法
let isExist = [1, 2, 3, 'ada~'].includes('1');
console.log(isExist); // false
let val = [1, 2, 3, 'ada~'].find((element, index, arr) => element == 'ada~');
console.log(val); // ada~
let index = [1, 2, 3, 'ada~'].findIndex((element, index, arr) => element == 'ada~');
console.log(index); // 3

注意: 在判断某数值在数组中是否存在时,用数组的includes方法更好

console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log([NaN].includes(NaN)); // true
console.log([NaN].indexOf(NaN)); // false

3. 数组的基本属性

3.1 length

length属性表示数组的长度,即其中元素的个数。数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。javascript数组的length属性是可变的。当length属性被设置得更大时,整个数组的状态事实上不会发生变化,仅仅是length属性变大;当length属性被设置得比原来小时,则原先数组中索引大于或等于length的元素的值全部被丢失。

var arr13 = [1, 90, 22, "111"];
console.log(arr13.length); // 4;
arr13.length = 6;
console.log(arr13[5]); // [1, 90, 22, "111", undefined, undefined]
arr13.length = 3;
console.log(arr13); // [1, 90, 22]

3.1 Array.prototype

声明原型属性后所有数组对象共有

Array.prototype.max = function () {

    this.sort(function (a, b) {

        return a - b;
    });
    return this[this.length - 1];
};
var arr14 = [5, 78, 48, 19, 8];
console.log(arr14.max()); // 78

4. Set与数组的差异

4.1 Set

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

[...new Set([1, 2, 3, 4, 4])]; // [1, 2, 3, 4]
[...new Set('ababbc')].join(''); // "abc"

Set 实例的属性和方法:

  • Set.prototype.size:返回Set实例的成员总数。
  • add(value):添加某个值,返回 Set 结构本身。
  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • has(value):返回一个布尔值,表示该值是否为Set的成员。
  • clear():清除所有成员,没有返回值。
  • keys():返回键名的遍历器。
  • values():返回键值的遍历器。
  • entries():返回键值对的遍历器。
  • forEach():使用回调函数遍历每个成员。

4.2 Set与数组的互相转换

// 数组转换为set
let set = new Set([3, 4, 5, 4, 6, 7, 7]); // Set(4) [3, 4, 5, 6, 7 ]

// set转换为数组
let arr1 = [...set]; // [3, 4, 5, 6, 7 ]
let arr2 = Array.from(set); // [3, 4, 5, 6, 7 ]

5. 相关文章

    原文作者:家里有棵核桃树
    原文地址: https://www.jianshu.com/p/392ea0ab1f36
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞