JS基础数组类型

最新推荐文章于 2022-03-17 10:40:12 发布

web18484626332

最新推荐文章于 2022-03-17 10:40:12 发布

阅读量181

点赞数

分类专栏：前端 html 文章标签： javascript 排序算法开发语言

本文链接：https://blog.csdn.net/web18484626332/article/details/123190684

版权

阅读目录

声明数组
- 创建数组
- Array.of
- 类型检测
类型转换
- 字符串转数组
- Array.from 将类数组转换为数组
展开语法
- 数组合并
- 函数参数
- 节点转换
解构赋值
- 基本使用
- 严格模式
- 简洁定义
- 默认值
- 函数参数
管理数组元素
- 基本使用
- 扩展语法
- push 压入元素
- pop 从末尾弹出元素
- shift 从数组前面取出一个元素
- unshift 从数组前面添加元素
- fill 填充数组元素
- slice 从数组中截取部分元素组合成新数组
- splice 添加、删除、替换数组中的元素
- 清空数组
合并拆分
- join 数组连接成字符串
- split 将字符串分割成数组
- concat 连接两个或多个数组
- copyWithin 从数组中复制一部分到同数组中的另外位置
数组查找元素
- indexOf 从前向后查找元素出现的位置
- lastIndexOf 从后向前查找元素出现的位置
- includes 查找字符串返回值是布尔类型
- find 方法找到后会把值返回出来
- findIndex 返回索引值
- find 原理
数组排序
- reverse 反转数组顺序
- sort 每次使用两个值进行比较
- 排序原理
循环遍历
- for 根据数组长度循环来遍历数组
- forEach 使函数作用在每个数组元素上，但是没有返回值。
- for/in 遍历时的 key 值为数组的索引
- for/of 每次循环取其中的值而不是索引
迭代器方法
- keys 通过迭代对象获取索引
- values 通过迭代对象获取值
- entries 返回数组所有键值对
扩展方法
- every 用于递归的检测元素
- some 递归的检测元素
- filter 滤数据中元素
- map 映射在数组所有元素上应用函数
- reduce 迭代数组的所有元素
动画案例

声明数组

数组是多个变量值的集合，数组是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

最低0.47元/天解锁文章

web18484626332

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础数组类型

阅读目录声明数组创建数组Array.of类型检测类型转换字符串转数组Array.from 将类数组转换为数组展开语法数组合并函数参数节点转换解构赋值基本使用严格模式简洁定义默认值函数参数管理数组元素基本使用扩展语法push 压入元素pop 从末尾弹出元素shift 从数组前面取出一个元素unshift 从数组前面添加元素fill 填充数组元素slice 从数组中截取部分元素组合成新数组splice 添加、删除、替换数
复制链接

扫一扫