第二章前端开发ES6基础

news/2024/7/11 1:56:36 标签: es6, 前端

目录

扩展运算符

概述

语法

应用

模板字符串

概述

应用

内置对象扩展

概述

数组扩展方法

字符串扩展方法

set数据结构

概述

基本使用

操作方法

遍历方法

认识symbol

概述

作用

基本使用

项目


扩展运算符

概述

扩展运算符(spread operator)是 ES6 中新增的一种运算符,用三个点(...)表示。它可以将一个类似数组可迭代对象(例如字符串、Set、Map)的对象展开成逗号分隔的值列表

扩展运算符可以用于函数调用、数组字面量、对象字面量等多种场景

语法
  1. 数组的展开操作
// 基本语法
[...array]

// 将两个数组合并
[...array1, ...array2]

// 将数组和其他元素合并
[...array, element1, element2, ..., elementN]
  1. 对象的展开操作
// 基本语法
{...object}

// 将两个对象合并
{...object1, ...object2}

// 将对象和其他属性合并
{...object, key1: value1, key2: value2, ..., keyN: valueN}
  1. 函数的传递参数
// 基本语法
functionname(...args)

// 将数组或类数组对象作为参数传递给函数
functionname(...array)

// 将对象作为参数传递给函数
functionname({...object})

需要注意的是,扩展运算符只能展开可迭代对象,即拥有 Symbol.iterator 属性的数据类型。因此,不能将普通的对象或类似对象的 null 和 undefined 进行展开。

应用

扩展运算符可以应用在很多地方,下面列举几个较常见的应用:

  1. 数组合并

可以使用扩展运算符将两个或多个数组合并成一个数组。示例代码如下:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];

console.log(arr3);  // [1, 2, 3, 4, 5, 6]
  1. 数组复制

可以使用扩展运算符复制一个数组。示例代码如下:

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

console.log(arr2);  // [1, 2, 3]
  1. 函数传参

可以使用扩展运算符将数组作为函数的参数传递进去。示例代码如下:

function myFunction(x, y, z) {
  console.log(x, y, z);
}

const arr = [1, 2, 3];
myFunction(...ar

http://www.niftyadmin.cn/n/5132784.html

相关文章

批量去除影视剧中的片头片尾

1. 下载ffmpeg并配置环境变量 ffmpeg下载地址 Windows下配置ffmpeg环境变量 2. 运行脚本 Git下载地址 Windows系统下如何运行.sh脚本文件 在Windows上面可以安装git,然后使用Git Bash运行此脚本。 视频目录一定要用英文双引号括起来。 ./cut.sh "视频目录&q…

2024王道考研计算机组成原理——输入输出系统

7.1.1 输入输出系统和几种IO控制方式 输入设备:把数据从主机外部输入主机内部 输出设备:把数据从主机内部输出到主机外部 现在的IO接口(芯片)通常被集成在南桥芯片的内部 DMA接口其实也是IO接口(芯片)的一种,磁盘准备的数据先一个字一个字…

ES6中数值扩展

目录 二进制和八进制表示法 Number.isFinite() Number.isNaN() Number.parseInt()和Number.parseFloat() Number.isInteger() Math.trunc() Math.sign() Math.cbrt(): Math.clz32(): Math.imul(): Math.fround(): ES6中…

PostgreSQL 的 Replication Slot分析研究

PostgreSQL 9.4 开始支持Replication Slot新功能。对于Replication Slot,文档上介绍的不多,乍一看让人比较难理解是做什么的。其实,Replication Slot的出现,主要是为最终在PG内核实现逻辑复制和双向复制铺路的(目前&am…

吴恩达《机器学习》2-5->2-7:梯度下降算法与理解

一、梯度下降算法 梯度下降算法的目标是通过反复迭代来更新模型参数,以便最小化代价函数。代价函数通常用于衡量模型的性能,我们希望找到使代价函数最小的参数值。这个过程通常分为以下几个步骤: 初始化参数: 随机或设定初始参数…

Yolo-Z:改进的YOLOv5用于小目标检测

目录 一、前言 二、背景 三、新思路 四、实验分析 论文地址:2112.11798.pdf (arxiv.org) 一、前言 随着自动驾驶汽车和自动驾驶赛车越来越受欢迎,对更快、更准确的检测器的需求也在增加。 虽然我们的肉眼几乎可以立即提取上下文信息,即…

探索Apache HttpClient超时时间如何设定?

目录 一、Apache HttpClient模拟POST请求,调用第三方接口1、发起POST请求:2、模拟服务端3、通过postman测试一下4、Apache HttpClient 二、HTTP超时时间1、众所周知,HTTP使用的是TCP/IP 协议。2、TCP/IP超时时间设置3、HTTP连接超时时间如何设…

APP升级

1、概述 APP升级分为两种类型 强制升级。 APP不升级,将无法使用。非强制升级。 提示用户升级,用户可以选择不升级。 1.1 设计实现 版本控制 APP:当前安装的版本号。数据库:记录所有的版本号。升级检测 启动APP:用户…