es6 数组合并_JavaScript学习笔记(十九)-- ES6

ES6新增的内容

  • 之前的都是 ES5 的内容
  • 接下来我们聊一下 ES6 的内容

let 和 const 关键字

  • 我们以前都是使用 var 关键字来声明变量的
  • 在 ES6 的时候,多了两个关键字 let 和 const,也是用来声明变量的
  • 只不过和 var 有一些区别

1、let 和 const 不允许重复声明变量

// 使用 var 的时候重复声明变量是没问题的,只不过就是后面会把前面覆盖掉 
// 使用 let 重复声明变量的时候就会报错了

2、let 和 const 声明的变量不会在预解析的时候解析(也就是没有变量提升)

// 因为预解析(变量提升)的原因,在前面是有这个变量的,只不过没有赋值
// 因为 let 不会进行预解析(变量提升),所以直接报错了
// 因为 const 不会进行预解析(变量提升),所以直接报错了

3、let 和 const 声明的变量会被所有代码块限制作用范围

// var 声明的变量只有函数能限制其作用域,其他的不能限制
// let 声明的变量,除了函数可以限制,所有的代码块都可以限制其作用域(if/while/for/...)
// const 声明的变量,除了函数可以限制,所有的代码块都可以限制其作用域(if/while/for/...)
  • let 和 const 的区别

1、let 声明的变量的值可以改变,const 声明的变量的值不可以改变

let 
const 

2、let 声明的时候可以不赋值,const 声明的时候必须赋值

let 
const 

箭头函数

  • 箭头函数是 ES6 里面一个简写函数的语法方式
  • 重点: 箭头函数只能简写函数表达式,不能简写声明式函数
function 
  • 语法: (函数的行参) => { 函数体内要执行的代码 }
const 

箭头函数的特殊性

  • 箭头函数内部没有 this,箭头函数的 this 是上下文的 this
// 在箭头函数定义的位置往上数,这一行是可以打印出 this 的
  • 按照我们之前的 this 指向来判断,两个都应该指向 obj
  • 但是 fun 因为是箭头函数,所以 this 不指向 obj,而是指向 fun 的外层,就是 window
  • 箭头函数内部没有 arguments 这个参数集合
const 
  • 函数的行参只有一个的时候可以不写 () 其余情况必须写
const 
  • 函数体只有一行代码的时候,可以不写 {} ,并且会自动 return
const 

函数传递参数的时候的默认值

  • 我们在定义函数的时候,有的时候需要一个默认值出现
  • 就是当我不传递参数的时候,使用默认值,传递参数了就使用传递的参数
function 
  • 在 ES6 中我们可以直接把默认值写在函数的行参位置
function 
  • 这个默认值的方式箭头函数也可以使用
const 
  • 注意: 箭头函数如果你需要使用默认值的话,那么一个参数的时候也需要写 ()

解构赋值

  • 解构赋值,就是快速的从对象或者数组中取出成员的一个语法方式

解构对象

  • 快速的从对象中获取成员
// ES5 的方法向得到对象中的成员
// 解构赋值的方式从对象中获取成员

解构数组

  • 快速的从数组中获取成员
// ES5 的方式从数组中获取成员
// 使用解构赋值的方式从数组中获取成员

注意

  • {} 是专门解构对象使用的
  • [] 是专门解构数组使用的
  • 不能混用

模版字符串

  • ES5 中我们表示字符串的时候使用 '' 或者 ""
  • 在 ES6 中,我们还有一个东西可以表示字符串,就是 ``(反引号)
let 
  • 和单引号好友双引号的区别

1、反引号可以换行书写

// 这个单引号或者双引号不能换行,换行就会报错了
let 

2、反引号可以直接在字符串里面拼接变量

// ES5 需要字符串拼接变量的时候
// 模版字符串拼接变量

`` 里面的 ${} 就是用来书写变量的位置

展开运算符

  • ES6 里面号新添加了一个运算符 ... ,叫做展开运算符
  • 作用是把数组展开
let 
  • 合并数组的时候可以使用
let 
  • 也可以合并对象使用
let 
  • 在函数传递参数的时候也可以使用
let 

Map 和 Set

  • 是 ES6 新增的两个数据类型
  • 都是属于内置构造函数
  • 使用 new 的方式来实例化使用

Set

  • 使用方式就是和 new 连用
const 
  • 就是一个数据集合
  • 我们可以在 new 的时候直接向内部添加数据
// 实例化的时候直接添加数据要以数组的形式添加
  • 看上去是一个类似数组的数据结构,但是不是,就是 Set 数据结构

常用方法和属性

  • size : 用来获取该数据结构中有多少数据的
const 

看上去是一个和数组数据类型差不多的数据结构,而且我们也看到了 length 属性

但是不能使用,想要获取该数据类型中的成员数量,需要使用 size 属性

  • add : 用来向该数据类型中追加数据
const 

这个方法就是向该数据类型中追加数据使用的

  • delete : 是删除该数据结构中的某一个数据
const 
  • clear : 清空数据结构中的所有数据
const 
  • has : 查询数据解构中有没有某一个数据
const 
  • forEach : 用来遍历 Set 数据结构的方法
const 
  • 方法介绍的差不多了,有一个问题出现了,那就是
  • 我们的方法要么是添加,要么是删除,要么是查询,没有获取
  • 因为要获取 Set 结构里面的数据需要借助一个 ... 展开运算符
  • 把他里面的东西都放到一个数组里面去,然后再获取
const 
  • 又一个问题出现了,new 的时候需要以数组的形式传递
  • 然后获取的时候又要转成数组的形式获取
  • 那么我为什么不一开始就定义数组,要这个 Set 数据类型干什么
  • 这就不得不提到一个 Set 的特点
  • Set 不允许存储重复的数据
const 

Map

  • 也是要和 new 连用
  • 是一个数据集合,是一个很类似于 对象 的数据集合
const 
  • 我们的对象中不管存储什么,key 一定是一个字符串类型
  • 但是再 Map 里面,我们的 key 可以为任意数据类型
  • 我们也管 Map 叫做 (值 = 值 的数据类型)
const 

常用方法和属性

  • size : 用来获取该数据类型中数据的个数
const 
  • delete : 用来删除该数据集合中的某一个数据
const 
  • set : 用来向该数据集合中添加数据使用
const 
  • get : 用来获取该数据集合中的某一个数据
const 
  • clear : 清除数据集合中的所有数据
const 
  • has : 用来判断数据集合中是否存在某一个数据
const 
千锋HTML5学院:JavaScript学习笔记(二十)-- DOM动画效果​zhuanlan.zhihu.com

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

常用的加密解密算法

import java.security.MessageDigest; import java.security.NoSuchAlgorithmException;/*** Java常用的对密码加密的方法 对摘要信息进行加密编码*/ public class PasswordUtil {private final static String[] hexDigits { "0", "1", "2", &q…

vue-cli4.x 中 配置允许跨域请求

在项目根目录下创建vue.config.js文件: vue.config.js: module.exports {devServer: {host: localhost,port: 8080,https: false,open: false, // 配置自动启动浏览器hotOnly: true, // 是否热更新proxy: {/api: { // 路径中有 /api 的请求都会走这个代理target: …

怎样不停请求接口实现实时刷新_快狗打车实时数仓和基于Hologres的数据服务建设...

前言 数据的实时化是最近几年数据行业很重要的趋势,我们在去年底也建立起新一代的实时数仓,但是在数据应用上一直没有取得很大的突破,我们希望实时数仓不仅仅是支撑大屏、核心实时报表、个别实时应用等简单的场景,希望更大…

c/c++参考文档

http://www.cplusplus.com/reference/cstdio/ 转载于:https://www.cnblogs.com/haxianhe/p/9271192.html

Vuex在项目中使用

案例1: 案例2: Token 是用户登录成功之后服务端返回的一个身份令牌,在项目中的多个业务中需要使用到 校验页面的访问权限 访问需要授权的 API 接口 … 但是我们只有在第一次用户登录成功之后才能拿到 Token。 所以为了能在其它模块中获取…

办公室分配方案python_Python自动化办公室(1),python,一

输出目录下所有文件及文件夹 创建临时文件及文件夹 输出目录下所有文件及文件夹 os模块简介 os是pyhon标准库,可以实现和操作系统有关的操作,例如创建,移动,复制文件和文件夹,文件路径和名称处理等等 注意:…

Vue移动端项目——Vant 移动端 REM 适配

Vant官方文档 Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 rem lib-flexible 用于设置 rem 基准值 下面我们分别将这两个工具配…

Win7_刻录DVD

1、刻录 临时文件夹: 1.1、C:\Users\具体的用户名\AppData\Local\Microsoft\Windows\Burn 1.2、双击 插入刻录盘的光驱,直接将文件复制到 这里,实际上也就是 复制到 上面的文件夹中。 2、UltraISO 的 路径: C:\Users\33\AppData\L…

findbugs使用_FindBugs,一个帮你找bug的IDEA插件

前言 Findbugs很多人都并不陌生,Eclipse中有插件可以帮助查找代码中隐藏的bug,IDEA中也有这款插件。这个插件可以帮助我们查找隐藏的bug,比较重要的功能就是查找潜在的null指针。 在编写代码的过程中,我们可能不会一直记得检查空的引用,在我们测试时可能…

Java常量的应用

所谓常量,我们可以理解为是一种特殊的变量,它的值被设定后,在程序运行过程中不允许改变。 语法:final 常量名 值; 使用fianl关键字 常量名 值final String a1 "道具卡";fin…

Vue移动端项目——字体图标的使用

使用 iconfont 制作字体图标 设计师为我们单独提供了设计稿中的图标,为了方便使用,我们在这里把它制作为字体图标。 制作字体图标的工具有很多,在这里我们推荐大家使用:https://www.iconfont.cn/。 (1)登…

docker 虚拟机搭建mongodb一主一从一复制_云计算学习路线图素材课件:Docker容器应用场景分析...

Docker容器是一个开源的应用容器引擎,它能够自动执行重复性任务,例如搭建和配置开发环境,用户可以方便地创建和使用容器,还可以进行版本管理、复制、分享、修改。有很多初学云计算的同学不清楚Docker容器的使用方法以及应用场景&a…

Vue项目中 css样式的作用域(深度作用选择器)

vue官方文档 父组件对子组件设置的样式,只能作用到子组件的根节点上!!!

沈逸老师ubuntu速学笔记(2)-- ubuntu16.04下 apache2.4和php7结合编译安装,并安裝PDOmysql扩展...

1、编译安装apache2.4.20 1 第一步: ./configure --prefix/usr/local/httpd --enable-so 2 第二步: make 3 第三步: sudo make install 2、编译安装libiconv 到这去下载,并编译安装 http://www.gnu.org/so…

git 提交文件_git原理与实战

一,序言之前在工作中也接触过git,但是没有在现公司这里用的功能这么多。主要的差异体现在如下两个方面:1,之前公司使用git主要基于图形用户界面,这对于处理冲突非常有帮助,不太容易改错地方;而现…

CSS——设置第一个以外的元素样式:not(:first-child),设置最后一个除外的元素样式:not(:last-child)

设置第一个以外的元素样式:not(:first-child),设置最后一个除外的元素样式:not(:last-child)

CPU结构与指令执行过程简介

CPU(Central Processing Unit)是计算机中进行算术和逻辑计算处理指令的主要部件. CPU结构 CPU由通用寄存器组,运算器,控制器和数据通路等部件组成. 寄存器包括 数据寄存器: AX,BX,CX,DX; 指针与变址寄存器:SP, BP, SI,…

mysql连接池_数据库技术:数据库连接池,Commons DbUtils,批处理,元数据

Database Connection PoolIntroduction to Database Connection Pool实际开发中“获得连接”或“释放资源”是非常消耗系统资源的两个过程,为了解决此类性能问题,通常情况我们采用连接池技术,来共享连接 Connection。这样我们就不需要每次都创…

关于第三方图片资源403问题

为什么文章列表数据中的好多图片资源请求失败返回 403? 这是因为我们项目的接口数据是后端通过爬虫抓取的第三方平台内容,而第三方平台对图片资源做了防盗链保护处理。 1. 第三方平台怎么处理图片资源保护的? 服务端一般使用 Referer 请求头…

单链表的初始化,整表创建,单个元素插入,单个元素删除,整表删除等操作...

很早之前学的数据结构,放了很久后,以致对里面的一些操作都有些遗忘,故而再次温习了一下数据结构,并整理了一点儿笔记,放在这里和大家分享, 我的代码注释的已经很详细了,对于容易出错的地方我也都…