JavaScript基础四、集合类型

news2024/9/20 14:52:30

零、文章目录

文章地址

  • 个人博客-CSDN地址：https://blog.csdn.net/liyou123456789
  • 个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn

代码仓库地址

  • Gitee：https://gitee.com/bluecusliyou/TechLearn
  • Github：https://github.com/bluecusliyou/TechLearn

JavaScript基础四、集合类型

1、Map

（1）Map是什么

  • Map 是一组键值对的结构，具有极快的查找速度。

（2）Map基本使用

  • Map声明：var m = new Map()

  • Map操作：

    • 增：m.set(key,value)，存在就被修改，不存在就添加

    • 删：m.delete(key)

    • 改：m.set(key,value)，存在就被修改，不存在就添加

    • 查：m.get(key)

    • 存在：m.has(key)

  • 注意事项：由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值覆盖

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map基本使用</title>
</head>

<body>
    <script>
        //声明且赋值
        let m1 = new Map([
            ['Michael', 95],
            ['Bob', 75],
            ['Tracy', 85]
        ])

        //初始化一个空Map，再进行设置
        let m2 = new Map(); // 空Map
        console.log(m2.set('Adam', 67)) //返回Map
        console.log(m22.set('Bob', 59)) //返回Map
        console.log(m2.has('Adam')) // 是否存在key 'Adam': true
        console.log(m2.get('Adam')) // 返回value 67
        console.log(m2.delete('Adam')) //删除key'Adam':true
        console.log(m2.get('Adam')) // undefined

        //由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值覆盖
        let m3 = new Map()
        m3.set('Adam', 67)
        m3.set('Adam', 88)
        console.log(m3.get('Adam')) // 88
    </script>
</body>

</html>

2、Set

  • Set 是一组key的集合，在 Set 中，没有重复的key。
  • 重复元素在 Set 中自动被过滤
  • 添加key：add(key)
  • 删除key：delete(key)

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map基本使用</title>
</head>

<body>
    <script>
        //声明
        let s1 = new Set(); // 空Set
        let s2 = new Set([1, 2, 3]); // 含1, 2, 3

        //重复元素在 Set 中自动被过滤 3 和 '3' 是不同的
        let s3 = new Set([1, 2, 3, 3, '3'])
        console.log(s3) // Set {1, 2, 3, "3"}

        //添加删除key
        let s4 = new Set([1, 2, 3])
        console.log(s4.add(4)) // Set {1, 2, 3, 4}
        s4.delete(3)
        console.log(s4) // Set {1, 2, 4 }
    </script>
</body>

</html>

3、Array

（1）数组是什么

  • 数组：(Array)是一种可以按顺序保存数据的引用数据类型。
  • 场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便

image-20230226174358164

（2）数组基本使用

  • 声明语法
    • 数组是按顺序保存，所以每个数据都有自己的编号
    • 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
    • 在数组中，数据的编号也叫索引或下标
    • 数组可以存储任意类型的数据

image-20230301094834421

image-20230301094848239

  • 数组长度：

    • 获取数组长度arr.length
    • 直接修改数组长度：arr.length=newlength，这个会引起数组的变化，一般不建议这样操作，防止索引越界数据丢失等情况。

  • 一些术语

    • **元素：**数组中保存的每个数据都叫数组元素

    • **下标：**数组中数据的编号

    • **长度：**数组中数据的个数，通过数组的length属性获得

  • 操作数组：数组本质是数据集合， 操作数据无非就是 增 删 改 查

image-20230301100237547

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验数组</title>
</head>

<body>
    <script>
        // let arr = [10, 20, 30]
        // 1. 声明数组 有序 
        let arr = ['刘德华', '张学友', '黎明', '郭富城', 'pink老师', 10]
            // 2. 使用数组  数组名[索引号] 从0
            // console.log(arr)
        console.log(arr[0]) // 刘德华
        console.log(arr[4])
            // 3. 数组长度 =  索引号 + 1 
        console.log(arr.length) // 6

        //修改数组长度
        arr.length = 3
        console.log(arr) //['刘德华', '张学友', '黎明']
        arr.length = 6
        console.log(arr) //['刘德华', '张学友', '黎明',undefined, undefined, undefined]
    </script>
</body>

</html>

（3）修改：数组[下标]=新值

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组操作-改</title>
</head>

<body>
    <script>        
        let arr = ['pink', 'red', 'green']
        // 修改
        arr[0] = 'hotpink'
        console.log(arr)
    </script>
</body>

</html>

（4）新增：push、unshift

  • arr.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)
  • arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

image-20230301100413257

image-20230301100512873

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组操作-增</title>
</head>

<body>
  <script>
    let arr = ['pink', 'hotpink']
    // 新增 push 推末尾
    console.log(arr.push('deeppink'))  // 3
    console.log(arr.push('deeppinnk', 'linghtpink'))//5
    // 新增 unshift 开头追加
    console.log(arr.unshift('red'))//6
  </script>
</body>

</html>

（5）删除：pop、shift、splice

  • arr. pop() 方法从数组中删除最后一个元素，并返回该元素的值

  • arr. shift() 方法从数组中删除第一个元素，并返回该元素的值

  • arr. splice(start,deleteCount) 方法 删除指定元素

    • start：指定修改的开始位置（从0计数）

    • deleteCount：表示要移除的数组元素的个数，可选， 如果省略则默认从指定的起始位置删除到最后

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组操作-删</title>
</head>

<body>
  <script>
    let arr = ['red', 'green', 'blue']
    // 1. pop() 删除最后一个元素
    console.log(arr.pop()) // blue

    // 2. shift() 删除第一个元素
    arr.shift()
    console.log(arr)

    // 3. splice 删除指定元素  
    // splice(起始位置-索引号, 删除几个)
    arr.splice(1, 1) // 从索引号1的位置开始删， 只删除1个
    arr.splice(1) // 从索引号1的位置开始删,删除到最后
    console.log(arr)
  </script>
</body>

</html>

（6）排序：sort

  • arr. sort() ：默认排序规则
  • 可以传入排序规则实现自定义排序

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组操作-排序</title>
</head>

<body>
    <script>
        let arr = [2, 4, 3, 5, 1]
        // arr.sort() 排序
        // sort 升序排列
        arr.sort(function(a, b) {
            return a - b
        })
        console.log(arr)

        // sort() 降序
        arr.sort(function(a, b) {
            return b - a
        })
        console.log(arr)
    </script>
</body>

</html>

（7）查索引：indexOf

  • indexOf(内容)：返回元素在数组中的索引

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组操作-查索引</title>
</head>

<body>
    <script>
        let arr = [10, 20, '30', 'xyz']
        console.log(arr.indexOf(10)) // 元素10的索引为0
        console.log(arr.indexOf(20)) // 元素20的索引为1
        console.log(arr.indexOf(30)) // 元素30没有找到，返回-1
        console.log(arr.indexOf('30')) // 元素'30'的索引为2
    </script>
</body>

</html>

（8）截取：slice

  • arr.slice(start, end)：返回索引start到end的新数组，不包含end
  • arr.slice(start)：返回索引start到数组结束的新数组
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组操作-截取</title>
</head>

<body>
    <script>
        let arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
        console.log(arr.slice(0, 3)) //从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
        console.log(arr.slice(3)) // 从索引3开始到结束: ['D', 'E', 'F', 'G']
    </script>
</body>

</html>

（9）拼接：concat

  • arr.concat(newArrary):arr拼接数组newArrary，返回一个拼接后的新数组，不会影响源数组

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组操作-拼接</title>
</head>

<body>
    <script>
        let arr = ['A', 'B', 'C']
        let added = arr.concat([1, 2, 3])
        console.log(added) // ['A', 'B', 'C', 1, 2, 3]
        //不会影响源数组
        console.log(arr) // ['A', 'B', 'C']
    </script>
</body>

</html>

（10）翻转：reverse

  • arr.reverse()，返回新数组

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组操作-翻转</title>
</head>

<body>
    <script>
        let arr = ['one', 'two', 'three']
        arr.reverse()
        console.log(arr) // ['three', 'two', 'one']
    </script>
</body>

</html>

（11）数组拼接字符串：join

  • arr.join('指定字符') 方法是一个非常实用的方法，它把当前 Array 的每个元素都用指定的字符串连接起来，然后返回连接后的字符串

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组操作-数组拼接字符串</title>
</head>

<body>
    <script>
        let arr = ['A', 'B', 'C', 1, 2, 3];
        console.log(arr.join('-')) // 'A-B-C-1-2-3'
    </script>
</body>

</html>

4、Iterable

  • 遍历 Array 可以采用下标循环，遍历Map 和 Set 就无法使用下标。
  • 为了统一集合类型，ES6标准引入了新的 iterable 类型，Array，Map，Set 属于继承 iterable 类型的集合可以通过新的 for … of 循环来遍历。
  • 更好的方式是直接使用 iterable 内置的 forEach 方法，它接收一个函数，每次迭代就自动回调该函数。
    • forEach() 方法是ES5.1标准引入的，你需要测试浏览器是否支持。
    • Set 没有索引，因此回调函数的前两个参数都是元素本身
    • Map 的回调函数参数依次为 value 、 key 和 map 本身

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历集合</title>
</head>

<body>
    <script>
        //for of  遍历 集合
        let a = ['A', 'B', 'C']
        let s = new Set(['A', 'B', 'C'])
        let m = new Map([
            [1, 'x'],
            [2, 'y'],
            [3, 'z']
        ])
        for (let x of a) { // 遍历Array
            console.log(x)
        }
        for (let x of s) { // 遍历Set
            console.log(x)
        }
        for (let x of m) { // 遍历Map
            console.log(x[0] + ':' + x[1])
        }

        //forEach 遍历数组
        a.forEach(function(element, index, array) {
            // element: 指向当前元素的值
            // index: 指向当前索引
            // array: 指向Array对象本身
            console.log(element + ', index = ' + index)
        });

        //forEach 遍历Set
        //Set 没有索引，因此回调函数的前两个参数都是元素本身
        s.forEach(function(element, sameElement, set) {
            console.log(element)
        })

        //forEach 遍历Map
        //Map 的回调函数参数依次为 value 、 key 和 map 本身
        m.forEach(function(value, key, map) {
            console.log(value)
        });
    </script>
</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/391821.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++源程序的构成————学习笔记

C++源程序的构成————学习笔记

以下内容为&#xff0c;在学校上课时的课堂总结&#xff0c;偶尔我也会扩展一些内容内容仅供参考&#xff0c;欢迎大佬的指正简单的C程序#include <iostream> using namespace std;int main() {int x0;int y 0;cout << "请输入x,y的值"<<endl;cin…
阅读更多...
计算机网络第八版——第二章课后题答案（超详细）

计算机网络第八版——第二章课后题答案（超详细）

第二章 该答案为博主在网络上整理&#xff0c;排版不易&#xff0c;希望大家多多点赞支持。后续将会持续更新&#xff08;可以给博主点个关注~ 第一章 答案 【2-01】物理层要解决哪些问题&#xff1f;物理层的主要特点是什么&#xff1f; 解答&#xff1a;物理层考虑的是怎…
阅读更多...
《C++代码分析》第二回：函数重载const char* ,char*,const char[],char[]汇编代码上的区别

《C++代码分析》第二回：函数重载const char* ,char*,const char[],char[]汇编代码上的区别

一、前言 C相比C是支持函数重载的&#xff0c;现在我们详细探讨一下C函数重载与类方法承载。 二、案例代码 我们编译如下代码&#xff0c;同样的我们关闭代码优化&#xff0c;删除符号链接文&#xff08;.pdb&#xff09; #include "windows.h" #include "w…
阅读更多...
php宝塔搭建部署实战兰空图床程序网站PHP源码

php宝塔搭建部署实战兰空图床程序网站PHP源码

大家好啊&#xff0c;我是测评君&#xff0c;欢迎来到web测评。 本期给大家带来一套Lsky Pro兰空图床程序网站PHP的源码。感兴趣的朋友可以自行下载学习。 技术架构 PHP8.0 nginx mysql5.7 JS CSS HTMLcnetos7以上 宝塔面板 文字搭建教程 下载源码&#xff0c;宝塔添加…
阅读更多...
开源监控服务uptime-kuma

开源监控服务uptime-kuma

好久没写文章了&#xff0c;刚好最近用了一个开源的监控服务&#xff0c;感觉蛮有意思的&#xff0c;记录一下 &#xff08;一&#xff09;安装 uptime-kuma安装方式有几种&#xff0c;这里当然是选择大家都爱的docker,一条命令搞定 docker run -d --restartalways -p 3001:…
阅读更多...
Linux内核调度策略、优先级、调度类

Linux内核调度策略、优先级、调度类

Linux内核调度策略、优先级、调度类一、Linux 内核支持调度策略二、进程优先级三、公平调度 CFS 与其它调度3.1、调度类3.2、公平调度类 CFS3.3、运行队列3.4、调度进程3.5、调度时机四、RCU机制与内存屏障一、Linux 内核支持调度策略 先进先出调度&#xff08;SCHED_FIFO&…
阅读更多...
Linux常用命令操作

Linux常用命令操作

文件目录操作 查看文件列表 ls #输出列表信息 ls -l #输出详细列表信息 ls -a #输出隐藏文件 ls -la #输出包含的隐藏文件及详细信息 ll # ls-l的缩写rwx分别对应读取&#xff0c;写入&#xff0c;执行权限&#xff0c;前面有d代表是文件夹 创建文件 touch file.txt #创建…
阅读更多...
java String类 万字详解（通俗易懂）

java String类 万字详解（通俗易懂）

目录 一、前言 二、介绍和溯源 三、String类常用构造器 1.String() 2.String(byte[] bytes) 3.String(char[] value) 4.String(char[] value, int offset, int count) 5.String(String original) Δ演示 : 四、不同方式创建String类对象的区别 1.直接赋值的方式 2.常规new…
阅读更多...
炫云渲染质量功能测试

炫云渲染质量功能测试

炫云已经支持优化渲染质量&#xff0c;分别是保守优化、中度优化和深度优化&#xff0c;使用后效果图的渲染时间会有所缩短&#xff0c;尤其对低版本V-Ray和参数设置不当的场景非常有效&#xff0c;能大幅提升渲染速度及节省渲染费用&#xff0c;当然最终效果图有可能有稍许差异…
阅读更多...
spark兼容性验证

spark兼容性验证

前言 Apache Spark是专门为大规模数据处理而设计的快速通用的计算引擎&#xff0c;Spark拥有Hadoop MapReduce所具有的优点&#xff0c;但不同于Mapreduce的是Job中间输出结果可以保存在内存中&#xff0c;从而不再需要读写HDFS&#xff0c;因此Spark能更好的适用于数据挖掘与…
阅读更多...
二分与三分(备赛中)

二分与三分(备赛中)

A.愤怒的牛儿 思路&#xff1a;找出最长距离&#xff0c;与最小距离&#xff0c;用二分法判断&#xff0c;如果当前距离满足放牛要求&#xff0c;就把距离区间lmid1;如果距离不合适就说明当前距离太大了&#xff0c;把区间变小rmid-1;最后直到l<r不满足时退出&#xff0c;输…
阅读更多...
Spark SQL优化机制

Spark SQL优化机制

Spark SQL优化机制Spark SQLCatalyst 优化器逻辑优化物理优化TungstenUnsafe RowWSCGRDD 缺点 : RDD的算子都是高阶函数 &#xff0c;Spark Core 不知函数内的操作&#xff0c;只能闭包形式发给 Executors&#xff0c; 无法优化 DataFrame 不同点&#xff1a; 数据的表示形式…
阅读更多...
AQS底层源码深度剖析-Lock锁

AQS底层源码深度剖析-Lock锁

目录 AQS底层源码深度剖析-Lock锁 ReentrantLock底层原理 为什么把获取锁失败的线程加入到阻塞队列中&#xff0c;而不是采取其它方法&#xff1f; 总结&#xff1a;三大核心原理 CAS是啥&#xff1f; 代码模拟一个CAS&#xff1a; 公平锁与非公平锁 可重入锁的应用场景&…
阅读更多...
C语言-基础了解-25-C强制类型转换

C语言-基础了解-25-C强制类型转换

C强制类型转换 一、强制类型转换 强制类型转换是把变量从一种类型转换为另一种数据类型。例如&#xff0c;如果您想存储一个 long 类型的值到一个简单的整型中&#xff0c;您需要把 long 类型强制转换为 int 类型。您可以使用强制类型转换运算符来把值显式地从一种类型转换为…
阅读更多...
【深度学习】BERT变体—ALBERT

【深度学习】BERT变体—ALBERT

ALBERT的初衷是想解决BERT中参数量过多的问题&#xff0c;论文全称为&#xff1a;ALBERT: A Lite BERT for Self-supervised Learning of Language Representations。 相较于BERT&#xff0c;ALBERT模型减少BERT模型的参数量&#xff1b;预训练中的Next Sentence Prediction&a…
阅读更多...
【面试系列】线程相关的面试题集锦

【面试系列】线程相关的面试题集锦

线程的状态 public enum State {/*** Thread state for a thread which has not yet started.*/NEW,/*** Thread state for a runnable thread. A thread in the runnable* state is executing in the Java virtual machine but it may* be waiting for other resources from …
阅读更多...
最简单的线性回归模型-标量

最简单的线性回归模型-标量

首先考虑yyy为标量&#xff0c;www为标量的情况&#xff0c;那么我们的线性函数为ywxbywxbywxb。每批输入的量batch size 为111&#xff0c;每批输入的xxx为一个标量&#xff0c;设为x∗x^*x∗&#xff0c;标签yyy同样为一个标量&#xff0c;设为y∗y^*y∗。因此每批训练的损失…
阅读更多...
直线模组的优势是什么？

直线模组的优势是什么？

直线模组是可以模拟人工操作的一些功能&#xff0c;通过固定程序来进行抓取&#xff0c;搬运、操作工具&#xff0c;实现自动变速&#xff0c;这也是为何直线模组使用率高的主要原因了&#xff0c;那么直线模组究竟有着怎样的优势呢&#xff1f; 1、整体结构紧凑&#xff0c;重…
阅读更多...
k8s-Kubernetes集群部署

k8s-Kubernetes集群部署

文章目录前言一、Kubernetes简介与架构1.Kubernetes简介2.kubernetes设计架构二、Kubernetes集群部署1.集群环境初始化2.所有节点安装kubeadm3.拉取集群所需镜像3.集群初始化4.安装flannel网络插件5.扩容节点6.设置kubectl命令补齐前言 一、Kubernetes简介与架构 1.Kubernetes…
阅读更多...
Spark 磁盘作用

Spark 磁盘作用

Spark 磁盘作用磁盘作用性能价值失败重试ReuseExchangeSpark 导航 磁盘作用 临时文件、中间文件、缓存数据&#xff0c;都会存储到 spark.local.dir 中 在 Shuffle Map 时&#xff0c; 当内存空间不足&#xff0c;就会溢出临时文件存储到磁盘上溢出的临时文件一起做归并计算…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023