ES6学习笔记(四):教你轻松搞懂ES6的新增语法

Wesley13
• 阅读 546

文章目录

let

ES6新增的用于声明变量的关键字

  • let声明的变量只在所处于的块级有效

  • 不存在变量提升

  • 暂时性死区

    // 使用let声明的变量具有块级作用域 if(true) {

    let a = 10
    

    console.log(a) // 10 if(true) {

    let c= 30 } console.log(c) // c is not defined } console.log(a) // a is not defined

注意: 使用let 关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特性。

在一个大括号中,使用let 关键字声明的变量才具有块级作用域,var关键字是不具备这个特点的。

if(true) {
   
    let num = 100
  var abc = 200
}
console.log(abc) // 200
console.log(num) // num is not defined

防止循环变量变成全局变量

for(var i=0; i<2; i++) {
   
    
}
console.log(i) //2 

for(let j=0; j<2; j++) {
   
    
}
console.log(j) //j is not defined

使用let声明的变量 不存在变量提升

console.log(a); //a is not defined
let a = 20

使用let声明的变量有暂时性死区特性

var tmp = 123;
if(true) {
   
    tmp = 'abc'
  let tmp;   // Cannot access 'tmp' before initialization
}

经典面试例子

  1. 用var 声明

    var arr = [] for(var i = 0; i<2; i++){

    arr[i] = function () {
    
      console.log(i)
    

    } } arr0; // 2 arr1; // 2

由于变量i具体有全局作用,所以最终循环后得到i都是2,执行完也是2,如下图
ES6学习笔记(四):教你轻松搞懂ES6的新增语法

  1. 用let声明变量

    let arr = [] for(let i = 0; i<2; i++){

    arr[i] = function () {
    
      console.log(i)
    

    } } arr0; // 0 arr1; // 1

代码每次循环都会产生一个块级作用域,每个块级作用域中的变量都是不同的,函数执行时输出的事自己上一级(循环产生的块级作用域)作用域下的i值
ES6学习笔记(四):教你轻松搞懂ES6的新增语法

const

作用: 声明常量,常量就是值(内存地址)不能变化的量

  • 与let一样,具有块级作用域

  • 声明常量时必须赋值

  • 常量赋值后,值不能修改

    // 使用const 关键字声明的常量必须赋初始值 const PI //Missing initializer in const declaration

const声明的常量赋值后,值不能再改变

const PI = 3.14
PI = 100  // Assignment to constant variable.

当const声明事数组或对象时候,内部值可以改变,但内存中存储地址没变

const arr = [100, 200];
arr[0] = 'a';
arr[1] = 'b';
console.log(arr) // ['a', 'b]
arr = ['c','d'] //Assignment to constant variable.

let、const、var的区别

  1. 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。
  2. 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。
  3. 使用 const 声明的是常量,在后面出现的代码中不能再修改该常量的值。

ES6学习笔记(四):教你轻松搞懂ES6的新增语法

解构赋值

ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构。

数组解构

数值解构允许我们按照一一对应的关系从数组中提取值然后将值赋值给变量

let [a, b, c] = [1, 2, 3]
console.log(a) // 1
console.log(b) //2
console.log(c) //3

如果解构不成功,变量值为undefined

let [foo] = [];
let [bar, foo] = [1]
console.log(bar) //1
console.log(foo) //undefined

对象解构

对象解构允许我们使用变量的名字匹配对象的属性,匹配成功将对象属性的值赋值给变量

let person = {
    name: 'lanfeng', age: 20 }
let {
    name, age} = person
console.log(name) //lanfeng
console.log(age) // 20

对象解构的另外一种写法

let person = {
    name: 'lanfeng', age: 20 } 
let {
    name: myName, age: myAge = 0} = person  //myName,myAge属于别名
console.log(myName) //lanfeng
console.log(myAge) // 20

箭头函数

ES6中新增的定义函数的方式

() => {
   }
const fn = () => {
   }

箭头函数事用来简化函数定义语法的

const fn = () => {
   
    console.log(123)
}
fn() //123

函数体中只有一个代码,且代码中的执行结果就是返回值,可以省略大括号

// ES6之前的定义方法
function sum(num1, num2) {
   
    return num1+ num2
}
const sum = (num1, num2) => num1 + num2

如果形参只有一个,可以省略小括号

function fn(v) {
   
 return v
}
const fn v => v

箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this

//箭头函数不绑定this,箭头函数没有自己的this关键字,
如果在箭头函数中使用this,this关键字将指向箭头函数定义位置中的this
const obj = {
   name: 'lanfeng'}
function fn() {
   
    console.log(this)
  return () => {
   
      console.log(this)
  }
}
const resFn = fn.call(obj) // 指向obj
resFn() //this指向obj

箭头函数的经典例子:

var obj = {
   
    age: 20,
  say: () => {
   
       console.log(this.age)
  }
}
obj.say() //undefined,因为指向的是window

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组,

function sum(first, ...args) {
   
    console.log(first) // 10
  console.log(args) //[20, 30]
}
sum(10, 20, 30)

剩余参数和解构配合使用

let arr = ['lanfeg','qianduan', 'yanfa']
let [s1, ...s2] = arr
console.log(s1) //lanfeg
console.log(s2) // ['qianduan', 'yanfa']

总结

本篇文章主要分享了ES6新增的一些语法,比如let、const声明变量常量,解构赋值、箭头函数、剩余函数等它们的各自用法及特点。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解2016年09月02日00:00:36 \牧野(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fme.csdn.net%2Fdcrmg) 阅读数:59593
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
2年前
Docker 部署SpringBoot项目不香吗?
  公众号改版后文章乱序推荐,希望你可以点击上方“Java进阶架构师”,点击右上角,将我们设为★“星标”!这样才不会错过每日进阶架构文章呀。  !(http://dingyue.ws.126.net/2020/0920/b00fbfc7j00qgy5xy002kd200qo00hsg00it00cj.jpg)  2
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
4个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这