javaScript的数组详细介绍

一事
145 阅读6分钟

数组是多个变量值的集合，数组是Array 对象的实例，所以可以像对象一样调用方法。

创建数组

使用对象方式创建数组

console.log(new Array(1, '后盾人', 'hdcms')); //[1, "后盾人", "hdcms"]

使用字面量创建是推荐的简单作法

const array = ["hdcms", "houdunren"];

多维数组定义

const array = [["hdcms"], ["houdunren"]];
console.log(array[1][0]);  // houdunren

数组是引用类型可以使用const声明并修改它的值

const array = ["hdcms", "houdunren"];
array.push("houdunwang");
console.log(array);

使用原型的 length属性可以获取数组元素数量

let hd = ["后盾人", "hdcms"];
console.log(hd.length); //2

数组可以设置任何值，下面是使用索引添加数组

let hd = ["后盾人"];
hd[1] = "hdcms";

下面直接设置3号数组，会将1/2索引的数组定义为空值

let hd = ["后盾人"];
hd[3] = "hdcms";
console.log(hd.length); //4

声明多个空元素的数组

let hd = new Array(3);
console.log(hd.length);
console.log(hd);

Array.of

使用Array.of 与 new Array 不同是设置一个参数时不会创建空元素数组

let hd = Array.of(3);
console.log(hd); //[3]

hd = Array.of(1, 2, 3);
console.log(hd); //[1, 2, 3]

类型检测

检测变量是否为数组类型

console.log(Array.isArray([1, "后盾人", "hdcms"])); //true
console.log(Array.isArray(9)); //false

类型转换

可以将数组转换为字符串也可以将其他类型转换为数组。

字符串

大部分数据类型都可以使用.toString() 函数转换为字符串。

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

也可以使用函数 String 转换为字符串。

console.log(String([1, 2, 3]));

或使用join连接为字符串

console.log([1, 2, 3].join("-"));//1-2-3

Array.from

使用Array.from可将类数组转换为数组，类数组指包含 length 属性或可迭代的对象。

  • 第一个参数为要转换的数据，第二个参数为类似于map 函数的回调方法
let str = '后盾人';
console.log(Array.from(str)); //["后", "盾", "人"]

为对象设置length属性后也可以转换为数组，但要下标为数值或数值字符串

let user = {
  0: '后盾人',
  '1': 18,
  length: 2
};
console.log(Array.from(user)); //["后盾人", 18]

DOM元素转换为数组后来使用数组函数，第二个参数类似于map 函数的方法，可对数组元素执行函数处理。

<body>
    <button message="后盾人">button</button>
    <button message="hdcms">button</button>
</body>

<script>
    let btns = document.querySelectorAll('button');
    console.log(btns); //包含length属性
    Array.from(btns, (item) => {
        item.style.background = 'red';
    });
</script>

展开语法

使用展开语法将 NodeList 转换为数组操作

<style>
    .hide {
      display: none;
    }
</style>

<body>
  <div>hdcms</div>
  <div>houdunren</div>
</body>

<script>
  let divs = document.querySelectorAll("div");
  [...divs].map(function(div) {
    div.addEventListener("click", function() {
      this.classList.toggle("hide");
    });
  });
</script>

展开语法

数组合并

使用展开语法来合并数组相比 concat 要更简单，使用... 可将数组展开为多个值。

let a = [1, 2, 3];
let b = ['a', '后盾人', ...a];
console.log(b); //["a", "后盾人", 1, 2, 3]

函数参数

使用展示语法可以替代 arguments 来接收任意数量的参数

function hd(...args) {
  console.log(args);
}
hd(1, 2, 3, "后盾人"); //[1, 2, 3, "后盾人"]

也可以用于接收部分参数

function hd(site, ...args) {
  console.log(site, args); //后盾人 (3) [1, 2, 3]
}
hd("后盾人", 1, 2, 3);

节点转换

可以将DOM节点转为数组，下面例子不可以使用 filter 因为是节点列表

<body>
    <button message="后盾人">button</button>
    <button message="hdcms">button</button>
</body>

<script>
    let btns = document.querySelectorAll('button');
    btns.map((item) => {
        console.log(item); //TypeError: btns.filter is not a function
    })
</script>

使用展开语法后就可以使用数据方法

<body>
  <div>hdcms</div>
  <div>houdunren</div>
</body>

<script>
  let divs = document.querySelectorAll("div");
  [...divs].map(function(div) {
    div.addEventListener("click", function() {
      this.classList.toggle("hide");
    });
  });
</script>

学习后面章节后也可以使用原型处理

<body>
    <button message="后盾人">button</button>
    <button message="hdcms">button</button>
</body>

<script>
    let btns = document.querySelectorAll('button');
    Array.prototype.map.call(btns, (item) => {
        item.style.background = 'red';
    });
</script>

解构赋值

解构是一种更简洁的赋值特性，可以理解为分解一个数据的结构

  • 建设使用 var/let/const 声明

基本使用

下面是基本使用语法

//数组使用
let [name, url] = ['后盾人', 'houdunren.com'];
console.log(name); // 后盾人

解构赋值数组

function hd() {
	return ['houdunren', 'hdcms'];
}
let [a, b] = hd();
console.log(a); //houdunren

剩余解构指用一个变量来接收剩余参数

let [a, ...b] = ['后盾人', 'houdunren', 'hdcms'];
console.log(b); //  ['houdunren', 'hdcms']

如果变量已经初始化过，就要使用() 定义赋值表达式，严格模式会报错所以不建议使用。

let web = "后盾人";
[web, url] = ["hdcms.com", "houdunren.com"];
console.log(web);

字符串解构

"use strict";
const [...a] = "houdunren.com";
console.log(a); //Array(13)

严格模式

非严格模式可以不使用声明指令，严格模式下必须使用声明。所以建议使用 let 等声明。

"use strict";

[web, url] = ["hdcms.com", "houdunren.com"];
console.log(web);

简洁定义

只赋值部分变量

let [,url]=['后盾人','houdunren.com'];
console.log(url);//houdunren.com

使用展开语法获取多个值

let [name, ...arr] = ['后盾人', 'hdcms', 'houdunren.com'];
console.log(name, arr); //后盾人 (2) ["hdcms", "houdunren.com"]

默认值

为变量设置默认值

let [name, site = 'hdcms'] = ['后盾人'];
console.log(site); //hdcms

函数参数

数组参数的使用

function hd([a, b]) {
	console.log(a, b);
}
hd(['后盾人', 'hdcms']);

管理元素

基本使用

使用从0开始的索引来改变数组

let arr = [1, "后盾人", "hdcms"];
arr[1] = '后盾人教程';
console.log(arr); //[1, "后盾人教程", "hdcms"]

向数组追回元素

let arr = [1, "后盾人", "hdcms"];
arr[arr.length] = 'houdunren.com';
console.log(arr); //[1, "后盾人", "hdcms", "houdunren.com"]

扩展语法

使用展示语法批量添加元素

let arr = ["后盾人", "hdcms"];
let hd = ["houdunren"];
hd.push(...arr);
console.log(hd); //["houdunren", "后盾人", "hdcms"]

push

压入元素，直接改变原数组，返回值为数组元素数量

let arr = ["后盾人", "hdcms"];
console.log(arr.push('向军大叔', 'houdunren')); //4
console.log(arr); //["后盾人", "hdcms", "向军大叔", "houdunren"]

根据区间创建新数组

function rangeArray(begin, end) {
  const array = [];
  for (let i = begin; i <= end; i++) {
    array.push(i);
  }
  return array;
}
console.log(rangeArray(1, 6));

pop

从末尾弹出元素，直接改变元数组，返回值为弹出的元素

let arr = ["后盾人", "hdcms"];
console.log(arr.pop()); //hdcms
console.log(arr); //["后盾人"]

shift

从数组前面取出一个元素

let arr = ["后盾人", "hdcms"];
console.log(arr.shift()); //后盾人
console.log(arr); //["hdcms"]

unshift

从数组前面添加元素

let arr = ["后盾人", "hdcms"];
console.log(arr.unshift('向军大叔', 'houdunren')); //4
console.log(arr); //["向军大叔", "houdunren", "后盾人", "hdcms"]

fill

使用fill 填充数组元素

console.dir(Array(4).fill("后盾人")); //["后盾人", "后盾人", "后盾人", "后盾人"]

指定填充位置

  let arr = [2, 3, 4, 56, 89, 0]
  console.log(arr.fill('猪八戒', 2, 4)); // (6) [2, 3, '猪八戒', '猪八戒', 89, 0]

slice

使用 slice 方法从数组中截取部分元素组合成新数组（并不会改变原数组），不传第二个参数时截取到数组的最后元素。

let arr = [0, 1, 2, 3, 4, 5, 6];
console.log(arr.slice(1, 3)); // [1,2]

不设置参数是为获取所有元素

let arr = [0, 1, 2, 3, 4, 5, 6];
console.log(arr.slice()); //[0, 1, 2, 3, 4, 5, 6]

splice

使用 splice 方法可以添加、删除、替换数组中的元素，会对原数组进行改变，返回值为删除的元素。

删除数组元素第一个参数为从哪开始删除，第二个参数为删除的数量。

let arr = [0, 1, 2, 3, 4, 5, 6];
console.log(arr.splice(1, 3)); //返回删除的元素 [1, 2, 3] 
console.log(arr); //删除数据后的原数组 [0, 4, 5, 6]

通过修改length删除最后一个元素

let arr = ["后盾人", "hdcms"];
arr.length = arr.length - 1;
console.log(arr); // 后盾人、

通过指定第三个参数来设置在删除位置添加的元素

let arr = [0, 1, 2, 3, 4, 5, 6];
console.log(arr.splice(1, 3, 'hdcms', '后盾人')); //[1, 2, 3]
console.log(arr); //[0, "hdcms", "后盾人", 4, 5, 6]

向末尾添加元素

let arr = [0, 1, 2, 3, 4, 5, 6];
console.log(arr.splice(arr.length, 0, 'hdcms', '后盾人')); //[]
console.log(arr); // [0, 1, 2, 3, 4, 5, 6, "hdcms", "后盾人"]

向数组前添加元素

let arr = [0, 1, 2, 3, 4, 5, 6];
console.log(arr.splice(0, 0, 'hdcms', '后盾人')); //[]
console.log(arr); //["hdcms", "后盾人", 0, 1, 2, 3, 4, 5, 6]

数组元素位置调整函数

 //  数组位置调整
  let arr = [1, 2, 3, 4, 5, 6, 3, 21]

  function adjust(arr, begin, to) {
    if (begin < 0 || to > arr.length) {
      console.error('参数错误')
      return
    }
    // 首先我们先复制一份数组
    let newArr = [...arr]
    let item = newArr.splice(begin, 1)
    newArr.splice(to, 0, ...item)
    return newArr
  }
  console.log(arr); // [1, 2, 3, 4, 5, 6, 3, 21]
  console.log(adjust(arr, 1, 2)); // (8) [1, 3, 2, 4, 5, 6, 3, 21]

清空数组

将数组值修改为[]可以清空数组，如果有多个引用时数组在内存中存在被其他变量引用。

let user = [{ name: "hdcms" }, { name: "后盾人" }];
let cms = user;
user = [];
console.log(user);
console.log(cms);

将数组length设置为0也可以清空数组

let user = [{ name: "hdcms" }, { name: "后盾人" }];
user.length = 0;
console.log(user);

使用splice方法删除所有数组元素

let user = [{ name: "hdcms" }, { name: "后盾人" }];
user.splice(0, user.length);
console.log(user);

使用pop/shift删除所有元素，来清空数组

let user = [{ name: "hdcms" }, { name: "后盾人" }];
while (user.pop()) {}
console.log(user);

合并拆分

join

使用join连接成字符串

let arr = [1, "后盾人", "hdcms"];
console.log(arr.join('-')); //1-后盾人-hdcms 使用join可以指定转换的连接方式

split

split 方法用于将字符串分割成数组，类似join方法的反函数。

let price = "99,78,68";
console.log(price.split(",")); //["99", "78", "68"]

concat

concat方法用于连接两个或多个数组，元素是值类型的是复制操作，如果是引用类型还是指向同一对象

let array = ["hdcms", "houdunren"];
let hd = [1, 2];
let cms = [3, 4];
console.log(array.concat(hd, cms)); //["hdcms", "houdunren", 1, 2, 3, 4]

也可以使用扩展语法实现连接

console.log([...array, ...hd, ...cms]);

copyWithin

使用 copyWithin 从数组中复制一部分到同数组中的另外位置。 语法说明

array.copyWithin(target, start, end)

参数说明

参数描述
target必需。复制到指定目标索引位置。
start可选。元素复制的起始位置。
end可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。
const arr = [1, 2, 3, 4];
console.log(arr.copyWithin(2, 0, 2)); //[1, 2, 1, 2]

查找元素

数组包含多种查找的函数，需要把这些函数掌握清楚，然后根据不同场景选择合适的函数。

indexOf

使用 indexOf 从前向后查找元素出现的位置，如果找不到返回 -1。

let arr = [7, 3, 2, 8, 2, 6];
console.log(arr.indexOf(2)); // 2 从前面查找2出现的位置

如下面代码一下，使用 indexOf 查找字符串将找不到，因为indexOf 类似于===是严格类型约束。

let arr = [7, 3, 2, '8', 2, 6];
console.log(arr.indexOf(8)); // -1

第二个参数用于指定查找开始位置

let arr = [7, 3, 2, 8, 2, 6];
//从第二个元素开始向后查找
console.log(arr.indexOf(2, 3)); //4
avatar
文章
阅读
粉丝