JS基础 数组类型
Posted wgchen~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS基础 数组类型相关的知识，希望对你有一定的参考价值。
阅读目录
声明数组
数组是多个变量值的集合，数组是Array 对象的实例，所以可以像对象一样调用方法。
创建数组
使用对象方式创建数组
console.log(new Array(1, 'wgchen', 'willem')); // [1, 'wgchen', 'willem']
使用字面量创建是推荐的简单作法
const array = ["wgchen", "willem"];
多维数组定义
const array = [["wgchen"], ["willem"]];
console.log(array[1][0]); // willem
数组是引用类型可以使用 const 声明并修改它的值
const array = ["wgchen", "willem"];
array.push("ycc");
console.log(array); // ['wgchen', 'willem', 'ycc']
使用原型的 length 属性可以获取数组元素数量
let hd = ["wgchen", "willem"];
console.log(hd.length); //2
数组可以设置任何值，下面是使用索引添加数组
let hd = ["wgchen"];
hd[1] = "willem";
console.log(hd) // ['wgchen', 'willem']
下面直接设置 3 号数组，会将 1/2 索引的数组定义为空值
let hd = ["wgchen"];
hd[3] = "willem";
console.log(hd.length); //4
console.log(hd); // ['wgchen', 空 ×2, 'willem']
声明多个空元素的数组
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, "wgchen", "willem"])); //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 = 'wgcehn';
console.log(Array.from(str)); // ['w', 'g', 'c', 'e', 'h', 'n']
为对象设置 length 属性后也可以转换为数组，但要下标为数值或数值字符串
let user =
0: 'wgchen',
'1': 18,
length: 2
;
console.log(Array.from(user)); // ["wgchen", 18]
DOM元素转换为数组后来使用数组函数，
第二个参数类似于map 函数的方法，可对数组元素执行函数处理。
<body>
<button message="wgchen">button</button>
<button message="willem">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>wgchen</div>
<div>willem</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', 'wgchen', ...a];
console.log(b); // ['a', 'wgchen', 1, 2, 3]
函数参数
使用展示语法可以替代 arguments 来接收任意数量的参数
function hd(...args)
console.log(args);
hd(1, 2, 3, "wgchen"); // [1, 2, 3, 'wgchen']
也可以用于接收部分参数
function hd(site, ...args)
console.log(site, args); //
hd("wgchen", 1, 2, 3);
节点转换
可以将DOM节点转为数组，下面例子不可以使用 filter 因为是节点列表
<body>
<button message="wgchen">button</button>
<button message="willem">button</button>
</body>
<script>
let btns = document.querySelectorAll('button');
btns.map((item) =>
console.log(item); //TypeError: btns.filter is not a function
)
</script>
使用展开语法后就可以使用数据方法
<style>
.hide
display: none;
</style>
<body>
<div><button message="wgchen">button</button></div>
<div><button message="willem">button</button></div>
</body>
<script>
let divs = document.querySelectorAll("div");
[...divs].map(function (div)
div.addEventListener("click", function ()
this.classList.toggle("hide");
);
);
</script>
学习后面章节后也可以使用原型处理
<body>
<button message="wgchen">button</button>
<button message="willem">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] = ['wgchen', 'ycc'];
console.log(name); // wgchen
解构赋值数组
function hd()
return ['wgchen', 'willem'];
let [a, b] = hd();
console.log(a); // wgchen
剩余解构指用一个变量来接收剩余参数
let [a, ...b] = ['wgchen', 'ycc', 'willem'];
console.log(b); // ['ycc', 'willem']
如果变量已经初始化过，就要使用 ()定义赋值表达式，严格模式会报错所以不建议使用。
let web = "wgchen";
[web, url] = ["wgchen", "ycc"];
console.log(web); // wgchen
字符串解构
"use strict";
const [...a] = "wgchen";
console.log(a); // ['w', 'g', 'c', 'h', 'e', 'n']
严格模式
非严格模式可以不使用声明指令，严格模式下必须使用声明。
所以建议使用 let 等声明。
"use strict";
[web, url] = ["wgchen", "ycc"];
console.log(web); // Uncaught ReferenceError: web is not defined
简洁定义
只赋值部分变量
let [,url]=['ycc','wgchen'];
console.log(url); // wgchen
使用展开语法获取多个值
let [name, ...arr] = ['wgchen', 'willem', 'ycc'];
console.log(name, arr); // wgchen ['willem', 'ycc']
默认值
为变量设置默认值
let [name, site = 'wgchen'] = ['willem'];
console.log(site); // wgchen
console.log(name); // willem
函数参数
数组参数的使用
function hd([a, b])
console.log(a, b); // wgchen ycc
hd(['wgchen', 'ycc']);
管理数组元素
基本使用
使用从0开始的索引来改变数组
let arr = [1, "wgchen", "willem"];
arr[1] = 'wgchen.blog';
console.log(arr); // [1, 'wgchen.blog', 'willem']
向数组追回元素
let arr = [1, "wgchen", "willem"];
arr[arr.length] = 'wgchen.blog';
console.log(arr); // [1, 'wgchen', 'willem', 'wgchen.blog']
扩展语法
使用展示语法批量添加元素
let arr = ["wgchen", "willem"];
let hd = ["wgchen.blog"];
hd.push(...arr);
console.log(hd); // ['wgchen.blog', 'wgchen', 'willem']
push 压入元素
压入元素，直接改变元数组，返回值为数组元素数量
let arr = ["wgchen", "willem"];
console.log(arr.push('ycc', 'haoren')); // 4
console.log(arr); // ['wgchen', 'willem', 'ycc', 'haoren']
根据区间创建新数组
function rangeArray(begin, end)
const array = [];
for (let i = begin; i <= end; i++)
array.push(i);
return array;
console.log(rangeArray(1, 6)); // [1, 2, 3, 4, 5, 6]
pop 从末尾弹出元素
从末尾弹出元素，直接改变元数组，返回值为弹出的元素
let arr = ["wgchen", "willem"];
console.log(arr.pop()); // willem
console.log(arr); // ['wgchen']
shift 从数组前面取出一个元素
从数组前面取出一个元素
let arr = ["wgchen", "willem"];
console.log(arr.shift()); // wgchen
console.log(arr); // ['willem']
unshift 从数组前面添加元素
从数组前面添加元素
let arr = ["wgchen", "willem"];
console.log(arr.unshift('ycc', 'wg')); //4
console.log(arr); // ['ycc', 'wg', 'wgchen', 'willem']
fill 填充数组元素
使用 fill 填充数组元素
// Array(4) 0: "wgchen" 1: "wgchen" 2: "wgchen" 3: "wgchen" length: 4
console.dir(Array(4).fill("wgchen"));
指定填充位置
console.log([1, 2, 3, 4].fill("wgchen", 1, 2)); // [1, 'wgchen', 3, 4]
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以上是关于JS基础 数组类型的主要内容，如果未能解决你的问题，请参考以下文章