一、创建数组
- 用对象方式
let arr=new Array('1','2','3')
注：创建空数组：
//创建了一个长度为3的空数组
let arr=new Array(3)
- 用自变量创建
创建一维数组
let arr=['1','2','3']
创建多维数组
let arr=[['1','2','3'],['1','2','3'],['1','2','3']]
注：1. 数组是引用类型可以使用const声明并修改它的值
const arr=['1','2','3']
arr.push('2')
console.log(arr);//['1','2','3','2']
注：2. 直接设置3号数组，会将1/2索引的数组定义为空值
let hd = ["a"];
hd[3] = "d";
console.log(hd.length); //4
console.log(hd); //['a',empty*2,'d']
- 用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]
二、类型检测
可靠的检测数组方式
Array.isArray的方式
let list = [1,2,3];
Array.isArray(list); //true
利用Object的toString方法*****
var list = [1,2,3];
Object.prototype.toString.call(list); //[object Array]
注：1.为什么不用typeof？
//Array继承与Object，所以typeof 会直接返回object，所以不可以用typeof方法来检测
let list = [1,2,3];
typeof list //"object"
注：为什么不用instanceof?
//instanceof 表面上看确实是返回了true，但其实并不可靠。原因是Array实质是一个引用，用instanceof方法（包括下面的constructor方法）都是利用和引用地址进行比较的方法来确定的，但是在frame嵌套的情况下，每一个Array的引用地址都是不同的，比较起来结果也是不确定的，所以这种方法有其局限性。
let list = [1,2,3];
list instanceof Array //true
注：为什么不用constructor方法?*******
let list = [1,2,3];
list.constructor === Array; //true
三、类型转换
可以将数组转换为字符串也可以将其他类型转换为数组。
- 字符串
大部分数据类型都可以使用.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 = '123';
console.log(Array.from(str)); //["1", "2", "3"]
注：为对象设置length属性后也可以转换为数组，但要下标为数值或数值字符串
let user = {
0: 'ee',
'1': 18,
length: 2
};
console.log(Array.from(user)); //["ee", 18]
//--------------------------------------------------
let user = {
0: 'ee',
's': 18,
length: 2
};
console.log(Array.from(user)); //["ee", undefined]
DOM元素转换为数组后来使用数组函数
第二个参数类似于map 函数的方法，可对数组元素执行函数处理。
<body>
<button message="ee">button</button>
<button message="aa">button</button>
<div>hdcms</div>
<div>houdunren</div>
</body>
<script>
let btns = document.querySelectorAll('button');
console.log(btns); //包含length属性
Array.from(btns, (item) => {
item.style.background = 'red';
});
//---------------------------------------
//使用展开语法将 NodeList 转换为数组操作
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', 'bb', ...a];
console.log(b); //["a", "bb", 1, 2, 3]
- 函数参数
使用展示语法可以替代 arguments 来接收任意数量的参数
function hd(...args) {
console.log(args);
}
hd(1, 2, 3, "bb"); //[1, 2, 3, "bb"]
也可以用于接收部分参数
function hd(site, ...args) {
console.log(site, args); //bb (3) [1, 2, 3]
}
hd("bb", 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] = ['aa', 'bb'];
console.log(name);//aa
解构赋值数组
function hd() {
return ['aa', 'bb'];
}
let [a, b] = hd();
console.log(a); //aa
剩余解构指用一个变量来接收剩余参数****
let [a, ...b] = ['aa', 'bb', 'cc'];
console.log(b);//["bb", "cc"]
如果变量已经初始化过，就要使用() 定义赋值表达式，严格模式会报错所以不建议使用。
let web = "aa";
[web, url] = ["bb", "cc"];
console.log(web);
字符串解构****
"use strict";
const [...a] = "aa";
console.log(a); //["a", "a"]
- 严格模式
非严格模式可以不使用声明指令，严格模式下必须使用声明。所以建议使用 let 等声明。
"use strict";
[web, url] = ["hdcms.com", "houdunren.com"];
console.log(web);
- 简洁定义
只赋值部分变量
let [,url]=['aa','bb'];
console.log(url);//bb
使用展开语法获取多个值
let [name, ...arr] = ['aa', 'bb', 'cc'];
console.log(name, arr); //aa (2) ["bb", "cc"]
- 默认值
为变量设置默认值
let [name, site = 'aa'] = ['bb'];
console.log(site); //aa
函数参数
数组参数的使用
function hd([a, b]) {
console.log(a, b);
}
hd(['aa', 'bb']);//aa bb
参考连接：
网友评论