ES6学习笔记(四):教你轻松搞懂ES6的新增语法
文章目录
- let
- const
- let、const、var的区别
- 解构赋值
- 数组解构
- 对象解构
- 箭头函数
- 剩余参数
- 总结
let
ES6新增的用于声明变量的关键字
- let声明的变量只在所处于的块级有效
- 不存在变量提升
- 暂时性死区
// 使用let声明的变量具有块级作用域
if(true) {let a = 10console.log(a) // 10if(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 = 100var 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
}
经典面试例子
- 用var 声明
var arr = []
for(var i = 0; i<2; i++){arr[i] = function () {console.log(i)}
}
arr[0](); // 2
arr[1](); // 2
由于变量i具体有全局作用,所以最终循环后得到i都是2,执行完也是2,如下图
- 用let声明变量
let arr = []
for(let i = 0; i<2; i++){arr[i] = function () {console.log(i)}
}
arr[0](); // 0
arr[1](); // 1
代码每次循环都会产生一个块级作用域,每个块级作用域中的变量都是不同的,函数执行时输出的事自己上一级(循环产生的块级作用域)作用域下的i值
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的区别
- 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。
- 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。
- 使用 const 声明的是常量,在后面出现的代码中不能再修改该常量的值。
解构赋值
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) // 10console.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声明变量常量,解构赋值、箭头函数、剩余函数等它们的各自用法及特点。
ES6学习笔记(四):教你轻松搞懂ES6的新增语法相关推荐
- 都2021年了,再不学ES6你就out了 —— 一文搞懂ES6
JS干货分享 -- 一文搞懂ES6 导语:ES6是什么?用来做什么? 1. let 与 const 2. 解构赋值 3. 模板字符串 4. ES6 函数(升级后更爽) 5. Class类 6. Map ...
- 学习笔记(01):150讲轻松搞定Python网络爬虫-爬虫介绍(资料在第一节中下载)
立即学习:https://edu.csdn.net/course/play/24756/280645?utm_source=blogtoedu 应用领域: 1.搜索引擎是一个巨大的爬虫程序:例如百度. ...
- ES6学习笔记(四)
数值的扩展和对象的扩展 ES6提供了二进制和八进制数值的新的写法,粉笔用前缀0b和0o表示 ES6在Number对象上新提供了Number.isFinite() 和Number.isNaN()两个方法 ...
- ES6学习笔记二arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- ES6学习笔记(五):轻松了解ES6的内置扩展对象
前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 <ES6学习笔记(一):轻松搞懂面向对象编程.类和对象> <ES6学习笔记(二):教你玩转类的继承和类的对象> ...
- ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
- C#可扩展编程之MEF学习笔记(四):见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
- es6学习笔记-字符串的扩展_v1.0_byKL
es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...
- MySQL高级学习笔记(四)
文章目录 MySQL高级学习笔记(四) 1. MySql中常用工具 1.1 mysql 1.1.1 连接选项 1.1.2 执行选项 1.2 mysqladmin 1.3 mysqlbinlog 1.4 ...
最新文章
- int (*a)[10] 和 int *a[10] 的区别
- Nacos配置的优先级
- Windows下查看端口被占用问题和解决办法
- 2017-3-19四校联考
- 下载ueditor-1.1.3.jar源码和源代码
- hc06发送at无回应_(完结)(温言穆霆琛)全章节~~全文阅读无弹窗广告
- NHibernate 3.x新功能实践(二) QueryOver(下)
- 会议上,如何分配任务
- 12.这就是搜索引擎:核心技术详解 --- 搜索引擎发展趋势
- 《WebGL编程指南》学习笔记——1.WebGL概述
- 2021年01月18号学习产品经理之电商项目从0-1
- 易佰USB转串口驱动
- 小米无线显示与电脑连接到服务器,小米手机和电脑进行怎么无线连接
- ckeditor java 取值_Jquery 对Ckeditor 取值
- 如何清除win10右下角输入法图标?
- Windows7正式版默认壁纸暗藏玄机!
- tableau免费版无法更新数据
- android+代码调用+相册+小米,Android调用系统相册选择图片,支持小米4云相册
- 官网稳定版微信小程序下载地址
- win10连Android机,win10系统Android手机或iPhone连接的操作方法
热门文章
- 计算机桌面上的公文包怎么加密,公文包的用法
- php 10分钟过期,如何在30分钟后过期PHP会话?
- 2018年网络规划设计师上午真题及答案解析
- C中不安全的函数以解决办法汇总
- phpcms attachment.class.php路径,解决phpcms上传不了图片的方法
- python创建矩阵_Python创建对称矩阵的方法示例【基于numpy模块】
- luogu_1495【题解】中国剩余定理
- tensorflow模型在实际上线进行预测的时候,使用CPU工作
- javasrcipt的作用域和闭包(二)续篇之:函数内部提升机制与Variable Object
- BZOJ 2818GCD