javaScript之ES6

ES6新增的内容

新增的let和const

    let num1 = 10
    console.log(num1) //10
    
    const num2 = 10
    console.log(num2) //10

let const声明变量和 var声明变量的区别:

  • 用let 和const 声明的变量不会进行预解析,只能先声明后使用
  • 用let 和const 不能重复声明同一个变量
  • 用let 和const声明 变量在{}都属于 局部作用域的变量

let const声明变量的区别:

  • let声明式变量,后续可以更改变量值,声明的时候也可以不赋值
  • const声明的是常量,声明时候必须赋值,赋值之后不可以改变

    let num;
    console.log(num); //undefined
    
    const num1;
    console.log(num1); //报错 Uncaught SyntaxError: Missing initializer in const declaration

let 和 const 关键字总结

  • 我们以前都是使用 var 关键字来声明变量的

  • 在 ES6 的时候,多了两个关键字 letconst,也是用来声明变量的

  • 只不过和 var 有一些区别

  1. letconst 不允许重复声明变量
// 使用 var 的时候重复声明变量是没问题的,只不过就是后面会把前面覆盖掉
var num = 100
var num = 200
// 使用 let 重复声明变量的时候就会报错了
let num = 100
let num = 200 // 这里就会报错了
// 使用 const 重复声明变量的时候就会报错
const num = 100
const num = 200 // 这里就会报错了
  1. letconst 声明的变量不会在预解析的时候解析(也就是没有变量提升)
// 因为预解析(变量提升)的原因,在前面是有这个变量的,只不过没有赋值
console.log(num) // undefined
var num = 100
// 因为 let 不会进行预解析(变量提升),所以直接报错了
console.log(num) // undefined
let num = 100
// 因为 const 不会进行预解析(变量提升),所以直接报错了
console.log(num) // undefined
const num = 100
  1. letconst 声明的变量会被所有代码块限制作用范围
// var 声明的变量只有函数能限制其作用域,其他的不能限制
if (true) {
  var num = 100
}
console.log(num) // 100
// let 声明的变量,除了函数可以限制,所有的代码块都可以限制其作用域(if/while/for/...)
if (true) {
  let num = 100
  console.log(num) // 100
}
console.log(num) // 报错
// const 声明的变量,除了函数可以限制,所有的代码块都可以限制其作用域(if/while/for/...)
if (true) {
  const num = 100
  console.log(num) // 100
}
console.log(num) // 报错

letconst 的区别

  1. let 声明的变量的值可以改变,const 声明的变量的值不可以改变
 let num = 100
  num = 200
  console.log(num) // 200
  const num = 100
  num = 200 // 这里就会报错了,因为 const 声明的变量值不可以改变(我们也叫做常量)
  1. let 声明的时候可以不赋值,const 声明的时候必须赋值
  let num
  num = 100
  console.log(num) // 100
const num // 这里就会报错了,因为 const 声明的时候必须赋值

箭头函数

  • 箭头函数是 ES6 里面一个简写函数的语法方式

  • 重点: 箭头函数只能简写函数表达式,不能简写声明式函数

 function fn() {} // 不能简写
 const fun = function () {} // 可以简写
 const obj = {
   fn: function () {} // 可以简写
 }
  • 语法: (函数的行参) => { 函数体内要执行的代码 }
const fn = function (a, b) {
  console.log(a)
  console.log(b)
}
// 可以使用箭头函数写成
const fun = (a, b) => {
  console.log(a)
  console.log(b)
}
const obj = {
  fn: function (a, b) {
    console.log(a)
    console.log(b)
  }
}
// 可以使用箭头函数写成
const obj2 = {
  fn: (a, b) => {
    console.log(a)
    console.log(b)
  }
}

箭头函数的特殊性

  • 箭头函数内部没有 this,箭头函数的 this 是上下文的 this
// 在箭头函数定义的位置往上数,这一行是可以打印出 this 的
// 因为这里的 this 是 window
// 所以箭头函数内部的 this 就是 window
const obj = {
  fn: function () {
    console.log(this)
  },
  // 这个位置是箭头函数的上一行,但是不能打印出 this
  fun: () => {
    // 箭头函数内部的 this 是书写箭头函数的上一行一个可以打印出 this 的位置
    console.log(this)
  }
}

obj.fn()
obj.fun()
  • 按照我们之前的 this 指向来判断,两个都应该指向 obj

  • 但是 fun 因为是箭头函数,所以 this 不指向 obj,而是指向 fun 的外层,就是 window

  • 箭头函数内部没有 arguments 这个参数集合

const obj = {
  fn: function () {
    console.log(arguments)
  },
  fun: () => {
    console.log(arguments)
  }
}
obj.fn(1, 2, 3) // 会打印一个伪数组 [1, 2, 3]
obj.fun(1, 2, 3) // 会直接报错
  • 函数的行参只有一个的时候可以不写 () 其余情况必须写
const obj = {
  fn: () => {
    console.log('没有参数,必须写小括号')
  },
  fn2: a => {
    console.log('一个行参,可以不写小括号')
  },
  fn3: (a, b) => {
    console.log('两个或两个以上参数,必须写小括号')
  }
}
  • 函数体只有一行代码的时候,可以不写 {} ,并且会自动 return
const obj = {
  fn: a => {
    return a + 10
  },
  fun: a => a + 10
}

console.log(fn(10)) // 20
console.log(fun(10)) // 20

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

  • 我们在定义函数的时候,有的时候需要一个默认值出现

  • 就是当我不传递参数的时候,使用默认值,传递参数了就使用传递的参数

function fn(a) {
  a = a || 10
  console.log(a)
}
fn()   // 不传递参数的时候,函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候,函数内部的 a 就是 20
  • 在 ES6 中我们可以直接把默认值写在函数的行参位置
function fn(a = 10) {
  console.log(a)
}
fn()   // 不传递参数的时候,函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候,函数内部的 a 就是 20
  • 这个默认值的方式箭头函数也可以使用
const fn = (a = 10) => {
  console.log(a)
}
fn()   // 不传递参数的时候,函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候,函数内部的 a 就是 20
  • 注意: 箭头函数如果你需要使用默认值的话,那么一个参数的时候也需要写 ()

解构赋值

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

解构对象

  • 快速的从对象中获取成员
// ES5 的方法向得到对象中的成员
const obj = {
  name: 'Jack',
  age: 18,
  gender: '男'
}

let name = obj.name
let age = obj.age
let gender = obj.gender
// 解构赋值的方式从对象中获取成员
const obj = {
  name: 'Jack',
  age: 18,
  gender: '男'
}

// 前面的 {} 表示我要从 obj 这个对象中获取成员了
// name age gender 都得是 obj 中有的成员
// obj 必须是一个对象
let { name, age, gender } = obj

解构数组

  • 快速的从数组中获取成员
// ES5 的方式从数组中获取成员
const arr = ['Jack', 'Rose', 'Tom']
let a = arr[0]
let b = arr[1]
let c = arr[2]
// 使用解构赋值的方式从数组中获取成员
const arr = ['Jack', 'Rose', 'Tom']

// 前面的 [] 表示要从 arr 这个数组中获取成员了
// a b c 分别对应这数组中的索引 0 1 2
// arr 必须是一个数组
let [a, b, c] = arr

注意

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

模版字符串

  • ES5 中我们表示字符串的时候使用 '' 或者 ""

  • 在 ES6 中,我们还有一个东西可以表示字符串,就是 ``(反引号)

let str = `hello world`
console.log(typeof str) // string
  • 和单引号好友双引号的区别
  1. 反引号可以换行书写
// 这个单引号或者双引号不能换行,换行就会报错了
let str = 'hello world' 

// 下面这个就报错了
let str2 = 'hello 
world'
let str = `
	hello
	world
`

console.log(str) // 是可以使用的
  1. 反引号可以直接在字符串里面拼接变量
// ES5 需要字符串拼接变量的时候
let num = 100
let str = 'hello' + num + 'world' + num
console.log(str) // hello100world100

// 直接写在字符串里面不好使
let str2 = 'hellonumworldnum'
console.log(str2) // hellonumworldnum
// 模版字符串拼接变量
let num = 100
let str = `hello${num}world${num}`
console.log(str) // hello100world100
  • `` 里面的 ${} 就是用来书写变量的位置

展开运算符

  • ES6 里面号新添加了一个运算符 ... ,叫做展开运算符

  • 作用是把数组展开

let arr = [1, 2, 3, 4, 5]
console.log(...arr) // 1 2 3 4 5
  • 合并数组的时候可以使用
let arr = [1, 2, 3, 4]
let arr2 = [...arr, 5]
console.log(arr2)
  • 也可以合并对象使用
let obj = {
  name: 'Jack',
  age: 18
}
let obj2 = {
  ...obj,
  gender: '男'
}
console.log(obj2)
  • 在函数传递参数的时候也可以使用
let arr = [1, 2, 3]
function fn(a, b, c) {
  console.log(a)
  console.log(b)
  console.log(c)
}
fn(...arr)
// 等价于 fn(1, 2, 3)

推荐阮一峰大佬的ECMAScript 6 入门教程

热门文章

暂无图片
编程学习 ·

实战:SpringBoot分布式验证码登录方案

本文大纲 文章目录本文大纲前言前后端未分离的验证码登录方案验证码生成流程如下登录验证流程如下前后端分离的验证码登录方案验证码生成流程如下登录验证流程如下动手撸轮子Kaptcha介绍新建项目并加入依赖Redis配置类`RedisConfig`验证码配置类`KaptchaConfig`验证码控制层`Ca…
暂无图片
编程学习 ·

车载TBOX标准-用于和后台系统/手机APP通信,实现手机APP车辆控制

基于新能源汽车控制数据智能终端T-BOX对于共享汽车(汽车分时租赁)场景中司机通过手机APP实现预订车辆、查找车辆、无线开门、启动车辆、还车等操作。 手机APP、云端平台与车辆实现信息互通。 T-Box作为车辆与云端平台实现互通的关键设备,不仅能把采集到的车辆数据(如新能源汽车…
暂无图片
编程学习 ·

Spring boot的项目文件

1.src–>main–>java 是用来放Java文件2.resources是用来放配置文件 application.properties用来放配置文件的信息3.test用来放一些测试用例4.新建一个Java类5.解决@RequestMapping报Cannot resolve symbol RestController’错误 解决办法: 在错误处按alt+enter 选择a…
暂无图片
编程学习 ·

基于SSM的在线考试系统的毕业设计

一、启动说明项目为maven管理,最近集成了redis,所以在运行项目是先要下载redis并启动客户端,方可正常运行项目,除了基本的maven,mysql外,只需要下载redis,无需其他配置,这里就不做过多说明。 二、相关技术说明集成redis来保存用户登录信息,添加过滤器重置用户登录有效…
暂无图片
编程学习 ·

centos7.5通过yum安装docker

1.docker安装 1.安装docker yum install -y yum-utils device-mapper-persistent-data lvm2 yum-utils:yum管理工具包 device-mapper-persistent-data:设备映射包 lvm2:lvm包 2.安装docker源 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/cent…
暂无图片
中恒嘉业 ·

关于主从复制的超详细解析(全)

目录前言1. 主从复制1.1 方式2. Mysql的主从复制2.1 一主一从2.1.1 window和linux通讯2.1.2 linux和linux的通讯2.2 双主双从3. Redis的主从复制3.1 哨兵模式3.2 java代码结合前言 主要介绍mysql的主从复制以及redis的主从复制 能由浅入深的明白原理以及如何操作 再者&#xf…
暂无图片
郑州普通话 ·

scratch质数判断器 电子学会图形化编程scratch等级考试四级真题和答案解析2021-12

scratch质数判断器 一、题目要求 质数又叫素数,是在大于1的自然数中,除1和其本身以外没有其他因数的自然是,请设计一个质数判断器 1、准备工作 保留小猫角色,白色背景 2、功能实现 通过询问并等待输入一个大于1的自然数 判断输入的数是否是质数,并说出判断结果 二、案例…
暂无图片
郑州普通话 ·

android面试题app,2021最新阿里Android高级面试题总结

正文 面试总共花费30天左右,才拿到了offer。 一面 1.自我介绍2.项目3.四大组件4.activity生命周期5.启动模式6.线程状态7.网络协议(每一层、还有TCP和UDP)8.会不会网络编程9.handler10.JVM,内存模型那些11.GC(有哪些方法那种问题)12.项目中的数据库13.HashMap、HashTable…
暂无图片
代理记账 ·

在web应用中发送和接收Jakarta消息

Running the websimplemessage Example To Package and Deploy websimplemessage Using Maven _1、Make sure that GlassFish Server has been started (see Starting and Stopping GlassFish Server). _2、In a terminal window, go to: tut-install/examples/jms/websimp…
暂无图片
cgfy ·

C++学习日记2——函数、封装、对象特性

一、函数 1.1 函数默认参数 1.1.1 简介 在C中&#xff0c;函数的形参列表中的形参是可以有默认值的 1.1.2 语法 返回值类型 函数名 (参数 默认值) {} 1.1.3 代码 #include <iostream> using namespace std;// 函数的默认参数 int func(int a, int b 20, int c 30…
暂无图片
coreui ·

视频水印怎么去除?超简单 千万不要错过

小编在知乎看到很多大佬分享的视频去水印的方法&#xff0c;但是感觉都有点太复杂了&#xff0c;今天就来分享一下小编自己私藏的几个针对于视频去水印的软件和网站~建议大家收藏哦~ 1、爱给网-视频去水印小工具&#xff08;免费 在线&#xff09; 推荐点 1、在线操作&#…
暂无图片
coreui ·

Mac 安装 tomcat10

Mac 安装 tomcat10 1、下载tomcat tomcat官网&#xff1a;https://tomcat.apache.org/ 点击我下载的tomcat10&#xff1a; 2、下载解压,给bin下的*.sh文件添加可执行权限 3、修改webapps下的ROOT中的index文件查看效果
暂无图片
未来博客 ·

视频水印怎么去除?超简单 千万不要错过

小编在知乎看到很多大佬分享的视频去水印的方法&#xff0c;但是感觉都有点太复杂了&#xff0c;今天就来分享一下小编自己私藏的几个针对于视频去水印的软件和网站~建议大家收藏哦~ 1、爱给网-视频去水印小工具&#xff08;免费 在线&#xff09; 推荐点 1、在线操作&#…
暂无图片
未来博客 ·

Mac 安装 tomcat10

Mac 安装 tomcat10 1、下载tomcat tomcat官网&#xff1a;https://tomcat.apache.org/ 点击我下载的tomcat10&#xff1a; 2、下载解压,给bin下的*.sh文件添加可执行权限 3、修改webapps下的ROOT中的index文件查看效果
暂无图片
建站日记 ·

惠州实验室建设选址、勘察事项

惠州实验室建设选址、勘察事项&#xff0c;SICOLAB技术员带您从实验室建设启动前思考问题考虑如下&#xff1a;一、不同实验室建设选址要求 1.化学实验室 &#xff08;1&#xff09;清洁安静环境 &#xff08;2&#xff09;远离住宅、生活区 &#xff08;3&#xff09;锅炉房与…
暂无图片
建站日记 ·

NLP聊天机器人原理(seq2seq模型)

一、seq2seq模型 1.概念 seq2seq是一个Encoder-Decoder结构的网络&#xff0c;它的输入是一个序列&#xff0c;输出也是一个序列。Encoder中将一个可变长度的信号序列变为固定长度的向量表达&#xff0c;Decoder将这个固定长度的向量变成可变长度的目标的信号序列。这个结构最…
暂无图片
mfbz ·

惠州实验室建设选址、勘察事项

惠州实验室建设选址、勘察事项&#xff0c;SICOLAB技术员带您从实验室建设启动前思考问题考虑如下&#xff1a;一、不同实验室建设选址要求 1.化学实验室 &#xff08;1&#xff09;清洁安静环境 &#xff08;2&#xff09;远离住宅、生活区 &#xff08;3&#xff09;锅炉房与…
暂无图片
mfbz ·

全渠道会员通-天猫会员通3: 会员运营内容准备

在天猫会员通技术对接开发过程中&#xff0c;为了通知存量会员的通知工作&#xff0c;发挥会员通的优势&#xff0c;品牌需要做好以下事宜&#xff1a; 会员体系暂停公告&#xff1a;因会员通技术升级期间&#xff0c;会员服务将被暂停&#xff0c;店铺tab中会员入口将被下线&…
暂无图片
珊珊日记 ·

C# 执行Javascript脚本

c#教程https://www.xin3721.com/eschool/CSharpxin3721/ 前一阵子使用C#编写SCXML状态机&#xff0c;需要解析EMCScript表达式&#xff0c;使用了Jint库&#xff08;https://github.com/sebastienros/jint/)&#xff0c;当时感觉与C#之间的数据转换不是很方便。这两天有时间又关…
暂无图片
珊珊日记 ·

第九届“图灵杯”NEUQ-ACM程序设计竞赛个人赛

A.大学期末现状 题目描述 作为一名大学生的你&#xff0c;现在又到了期末查成绩的时候&#xff0c;当你的成绩大于等于60时请输出“jige,haoye!”,否则输出"laoshi,caicai,laolao"。 输入描述: 一行&#xff0c;一个整数x代表你的成绩&#xff08;0<x<100&a…