前端知识点-数组的理解

最新推荐文章于 2022-01-26 18:36:11 发布

yuanbochen

最新推荐文章于 2022-01-26 18:36:11 发布

阅读量264

点赞数

文章标签： javascript reactjs html html5 css

本文链接：https://blog.csdn.net/yuanbochen/article/details/108882599

版权

一、创建数组

用对象方式

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

参考连接：

https://houdunren.gitee.io/note/js/4%20%E6%95%B0%E7%BB%84%E7%B1%BB%E5%9E%8B.html#%E5%A3%B0%E6%98%8E%E6%95%B0%E7%BB%84
https://zhuanlan.zhihu.com/p/29514159

yuanbochen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端知识点-数组的理解

一、创建数组用对象方式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(
复制链接

扫一扫