本文是关于ES6的学习笔记，重点介绍了let和const的使用，模板字符串的便利性，更强大的函数特性如默认参数、剩余参数和箭头函数，特别是箭头函数的this指向。此外，还讲解了解构赋值、扩展运算符、原始数据类型Symbol、Map和Set，以及Promise和async异步操作的基础知识。
ES6学习笔记
ES6: ECMAScript 6.0,泛指2015年6月后发布的JavaScript标准，目前已经到es12
一、let
let用于解决es5中var声明变量时变量提升的问题
1、使用let声明的变量没有变量提升
2、let声明的变量是一个块作用域
3、使用var声明的变量同名会被覆盖，而使用let声明的变量名不可重复，具有不可重复性。
二、const
1、const特性和let类似，但是const仅用于声明常量。常量一旦被声明则无法被修改，不可被被再次赋值。
2、const可以声明对象，如果使用const声明对象，常量对象内部的属性是可以被修改。但是const声明的对象名也不能被修改。
// 案例一、定义一个数组循环10次，每一次循环的时候往数组中添加一个函数。
const arr =[]
for(let i = 0; i<10; i++){
arr[i] = function(){
return i
}
}
console.log(arr[5]())
// 输出的结果为5
var arr =[]
for(var i = 0; i<10; i++){
arr[i] = function(){
return i
}
}
console.log(arr[5]())
// 输出的结果为10
3、不会污染全局变量
建议：在开发中，默认情况下用const，只有在我明确变量值需要被修改的时候才使用let
ES6模板字符串
利用``反引号来对会html进行包裹对页面结构进行追加。利用**${变量}**对内容进行插入，提高便利
<body>
<div class="box"> </div>
<script>
const box = document.querySelector(".box")
let id = 1,name = 'hello赵欣'
let htmlStr = `
<ul>
<li>
<p id=${id}>${name}</p>
</li>
</ul>
`
box.innerHTML = htmlStr
</script>
</body>
更强大的函数
一、带参数默认值的函数
function add(a = 10, b = 20){
return a + b
}
console.log(add(30))
// 输出结果50
二、默认的表达式也可以是一个函数
<script>
function add(a, b = getVal(5)){
return a + b
}
function getVal(val){
return val + 10
}
console.log(add(10))
// a是调用函数传入的参数10，b为函数的返回值 val+10=15，所以输出结果为25，
</script>
三、ES6中剩余参数写法...和一个紧跟着的具名参数指定解决了arguments的问题。
//es5写法，利用arguments来对参数进行遍历取值，很麻烦
function pick(obj){// 定义一个函数，函数传入对象，
let result = Object.create(null)//创造一个空对象
for(let i = 1; i < arguments.length; i++){
//遍历循环伪数组
result[arguments[i]] = obj[arguments[i]]
//arguments来对传入的参数进行取值
}
return result
}
let book = { // 定义一个book对象
title: '笔记',
author: '赵欣',
year: 2022,
}
let bookData = pick(book,'title','year','author')
//通过pick方法来选择book的title和year并保存到一个对象中
console.log(bookData)
//es6写法
function pick(obj,...keys){
//es6的剩余参数写法会自动将参数保存到数组keys中
let result = {};
keys.forEach(function(value){
result[value] = obj[value]
})
return result
}
let book = { // 定义一个book对象
title: '笔记',
author: '赵欣',
year: 2022,
}
let bookData = pick(book,'title','year','author')
//通过pick方法来选择book的title和year并保存到一个对象中
console.log(bookData)
扩展运算符 . . .
剩余运算符：把多个独立的参数合并到一个数组当中。
扩展运算符：将一个数组进行分割，并将各个项作为分离的参数传给函数。
const arr = [10,20,50,80,100]
//ES5中取最大值
console.log(Math.max.apply(null,arr))
//ES6中取最大值
console.log(Math.max(...arr))
ES6的箭头函数**（重点）**
一、使用**=>**来定义，等价于 function( ){ }与( ) => { }
let add1 = function(a,b){
return a+b
}
console.log(add1(10,20))
// 使用箭头函数后
let add2 =(a,b) => {
return a+b
}
console.log(add2(10,20))
// 如果只传入一个参数，和只有返回一个值，可以直接写成
let add = val => val+5;
console.log(add(10,20))
//结果等于15
// 如果没有参数，()不可省略
let fn = () =>'hello,world'+123
console.log(fn())
//结果等于函数fn的返回值 hellordworld123
二、ES6中箭头函数没有自己的this指向，没有自己的作用域链。this会会一直向上查找。
ES5中的this指向取决于调用该函数的上下文对象
四、箭头函数的使用注意事项：
1、使用箭头函数，函数内部不会有arguments，
2、箭头函数不能使用new关键字来实例化对象
3、function函数也是一个对象，但箭头函数并不是一个对象，可以将箭头函数理解为一个函数语法糖，表达式
解构赋值
一、解构赋值，是对赋值运算符的一种扩展
解构赋值：只要等号两边的模式相同，等号左边的变量就会被赋予右边对应的值
通畅是对数组和对象来进行操作，代码简洁易读。
//定义一个对象
let node = {
type:'abc',
name:'foo'
}// 取值
let type = node.type
let name = node.name
//结构赋值的取值方法
let{type,name} = node
console.log(type,name)
对数组解构
//对数组解构
let arr = [1,2,3]
let [a,b,c] = arr
console.log(a,b,c)
// 输出结果123
解构分为完全解构和不完全解构
扩展的对象的功能
ES6允许直接写书变量和函数作为对象的属性和方法
const name = 'zhaoxin'
,age = 20
const person = {
name,// 属性名和属性值一样 可以省略，等价于name:name,
age,// 属性名和属性值一样 可以省略，等价于age:age,
sayName: function(){
console.log(this.name)
}
}
person.sayName()
原始数据类型Symbol
原始数据类型symbol，表示它是一个独一无二的值。
const name = Symbol('name')
const name2 = Symbol('name')
console.log(name === name2)//结果是false
Symbol一般用来定义对象的私有变量
Map和Set，es6新数据类型
Set：集合：表示一个没有重复值的有序列表
// 创建集合
let set = new set()
// 添加元素
set.add(1,'zhaoxin',1,5,3)//会被忽略掉相同的重复的元素
// 删除元素
set.delete('zhaoxin')
// 校验某个值是否在集合中
set.has(1)
// 访问集合的长度
set.size
// 遍历
set.forEach((val,key)=>{
console.log(val)
console.log(key)
// 无意义，键和值是一样的
})
// 将set转换为数组
let arr = [...set]
Map类型：是一个键值对的有序列表，键和值可以是任意类型
let map = new Map()
map.set('key','value')
map.set('name','zhaoxin')
console.log(map)
console.log(map.get('name'))// 通过键获取值
map.delete('key')// 通过键清除键值对
map.clear() // 清除整个map
ES6中对数组的扩展功能
一、from( )方法
from方法能够将维数组arguments对象转换成真正的数组
转换成真正数组后便可以使用数组的方法，如push、pop等
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
let lis = document.querySelectorAll('li')
//将伪数组arguments转换为真数组的方法
console.log(Array.from(lis)) // 方式一，使用from方法
console.log([...lis])// 方式2，使用看炊具运算符的方法
</script>
</body>
Promise
相当于一个容器，保存着未来才会结束的事件（异步操作）的一个结果
各种异步操作都可以用同样的方法进行处理 axios
特点
一、对象的状态不受外界影响， 处理异步的三个状态：pending：进行，resolved：成功，rejected：失败
二、一旦状态改变，就不会在变，任何时候都可以得到这个结果。
promise基本用法相关用法示例：
<script>
let pro = new Promise(function(resolved, rejected){
// 执行异步操作
let res = {
// 模拟后台发送过来的数据
code: 200,
data:{
name:'abc',
}
}
setTimeout(()=>{
if(res.code === 200){
resolved(res.data)
// 返回成功
}else{
rejected(res.error)
// 返回失败
}
},1000)
})
console.log(pro)
pro.then((val)=>{
// 如果调用then方法，val参数接收到的值就是resolved得到的值
console.log(val);
},(err)=>{
console.log(err)
})
</script>
封装异步操作的更常用的方法
function timeOut(ms){
//先封装一个函数
return new Promise((resolved,rejected)=>{
// 返回一个promise
setTimeout(()=>{
resolved('成功了！')
},ms)
})
}
timeOut(2000).then((val)=>{
//通过promise链式调用
console.log(val)
})
async异步操作的用法
作用：async使异步操作更加方便
基本操作：async会返回一个promise对象，所以可以在其中调用then和chatch等方法
async是一个Generator的一个语法糖
async function f(){
return await 'hello async'
}// await命令必须在async中才能使用，
// await后的代码会被async自动转换为一个Promise对象
f().then(v=>{
console.log(v)
}).catch(e=>console.log(e))
// 可以调用promise的then或者catch方法
// 如果async函数中有多个await那么then函数会等待所有的await 指令运行完成才执行
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
