ES6 笔记01

最新推荐文章于 2024-06-04 17:51:07 发布

♡静

最新推荐文章于 2024-06-04 17:51:07 发布

阅读量1.2k

点赞数 15

文章标签： es6 笔记前端

本文链接：https://blog.csdn.net/m0_47045804/article/details/138615252

版权

01 ES6概述

ECMA组织制定了js标准

es6是js最大的语法糖

语法糖: 又叫糖衣语法又称假语法

在写法上有变更写法更简单易读但是本质没有改变

Babel编译器就是能够将es6语法编译成es5语法的一个程序让es6语法兼容低版本的

目前主流的浏览器的最近两个版本基本都支持es6语法内置好了babel编译器

02 let 创建变量

es6推出了let声明变量

let声明的变量只能在当前大括号里面使用出了大括号变量被销毁

for循环的变量是全局变量

let可以轻松解决for循环嵌套异步代码丢失数据的问题

for(let i=0;i<10;i++){
    setTimeout(function(){
        console.log(i);
    },2000)
}

不在任何一个大括号里面的声明的let变量就是全局变量

let 变量不存在提升所以不能提前调用

let变量字同一个块级(大括号)里面不能重名

在局部位置使用let声明变量会形成暂时性死区

暂时性死区是指:

在局部作用域内有声明变量但是在声明变量前面去使用这个变量就会形成暂时性死区

局部里面有这个变量就不会去全局作用域里面找但使用的时候还没有定义所以会报错

如果有语句体大括号省略的情况下不能使用let声明变量

03 const 声明变量

const 声明的变量值为常量值不可以被更改

const 声明(修饰)的基本数据类型值不能被修改

const声明(修饰)的引用数据类型地址不能被修改

const的特点和let一样:

不存在变量提升

同一个块级(大括号)里面不能重名

会形成暂时性死区

04 变量的解构赋值

解构赋值:就是把变量按照一定的解构解析出来放到对应的变量里面去

1.数组的解构赋值

解构赋值分为完全解构和不完全解构。

完全解构就是等号左边的变量都能匹配到等号右边的数组。

不完全解构是指等号左边的变量，只匹配等号右边的一部分的数组。

如果解构不成功，变量的值就等于undefined。

解构赋值允许定义变量的默认值默认值的执行是惰性加载

只有当前解构失败值为undefind的时候默认值才生效

如果默认值是调用函数的一个方法也是惰性加载

2.对象的解构赋值

按照属性名的结构匹配进行解构

对象解构赋值如果属性名匹配失败则解构失败

对象的解构赋值可以很方便的将现有的对象的方法赋值到某个变量

还可以从对象中解构出来指定的方法

可以对对象解构赋值并改名

对象的解构赋值也可以定义默认值

以上所学都是变量声明的同时解构

如果要把已经声明好的变量作为解构赋值的变量

如果是数组的解构赋值那么等号左边就不要写let 直接写[变量1,变量2,....]

如果是对象的解构赋值那么对于已经声明好的变量要使用解构 ,

需要将解构的这个等式用小括号包起来 , 无法直接在等号右边直接写大括号

直接写大括号会出现语法错误大括号被当成了代码块处理。

3.字符串的解构赋值

字符串的解构赋值是按照数组的格式进行的解构出来的数据是字符串的每一个字符

4.函数的参数的解构赋值

5.解构赋值的实际应用

交换两个变量的值

let a=10;
let b=20;
[a,b]=[b,a];

返回多个值接受的时候可以解构赋值

// 例1
function show(){
    let a=10;
    let b=20;
    let c=30;
    return [a,b,c]
}
let [m,n,o]=show()

// 例2
function offset(){
    return{
        left:180,
        top:256
    }
}
let {left,top}=offset()

05 函数的扩展之参数默认值

函数参数可以声明默认值

构造函数也可以写默认值

在调用函数的时候如果传入了实参形参的值就是实参传过来的值如果在调用的时候没有传入实参或者传的参数不够那么接收不到实参传递参数的形参的值是给他声明的默认值

参数默认值除了简洁 es6的写法还有两个优点

首先阅读代码的人可以立即意识到那些参数是可以省略的不用查看函数体或者文档

其次有利于将来的代码优化即使将来的版本在对外接口中彻底拿掉了这个参数也不会导致之前的代码无法运行

一般有默认值的参数都是尾参数

实参是从左网友匹配的无法跳着传参所以带有默认值的一般都是尾参数

06 函数扩展之rest参数

es6之前利用arguments对象(伪数组) 来使得函数可以传入任意个数的实参

es6使用 rest 参数

rest 参数就是一个数组可以匹配到任意个数的实参

rest 参数就是用来获取函数的剩余参数的

rest 参数是可以和其他形参在一起使用的但是rest参数必须是尾参数

07 箭头函数

箭头函数的优点:

函数定义简单

函数内部的this不在善变

箭头函数本身就是一个匿名函数所以有些函数是无法使用箭头函数代替的

没有形参的箭头函数:

多个形参的箭头函数:

只有一句代码的箭头函数（如果函数体里面只有一行代码那么大括号可以省略，

如果只有一行代码并且这行代码是 return 那么return和大括号都可以省略。）

如果函数体代码有多行大括号就不可以省略

箭头函数内部没有this

一旦箭头内部使用this 那么当前作用域没有就去上级作用域查找找到就直接使用。

在某些情况下不适合使用箭头函数

1.字面量对象绑定的方法不适合使用箭头函数

2. dom 绑定事件的驱动函数不适合使用箭头函数

3.箭头函数不能用来定义构造函数

箭头函数一般都用在：

函数的参数（回调函数）用的最多

函数的返回值

给变量赋值

08 数字扩展之扩展运算符

数组的...扩展运算符把数组展开编程数组元素1 数组元素2 数组元素3... 格式

扩展之后的格式可用于方法传参数组合并等操作

使用扩展运算符(...)实现数组合并

数组复制

扩展运算和结构赋值结合使用

字符串也可以使用扩展运算符

使用了扩展运算符的字符串会将字符串中的数据拆分成单个字符,以数组的形式存放

把伪数组编程真正数组的方法:

Array.from(伪数组)

♡静

关注

15
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
ES6 笔记01

ECMA组织制定了js标准es6是js最大的语法糖语法糖: 又叫糖衣语法又称假语法在写法上有变更写法更简单易读但是本质没有改变Babel编译器就是能够将es6语法编译成es5语法的一个程序让es6语法兼容低版本的目前主流的浏览器的最近两个版本基本都支持es6语法内置好了babel编译器。
复制链接

扫一扫