Es6新增声明变量的方式

最新推荐文章于 2023-03-07 12:47:38 发布

璨嵘

最新推荐文章于 2023-03-07 12:47:38 发布

阅读量507

点赞数

本文链接：https://blog.csdn.net/Mrcanrong/article/details/102553860

版权

Es6新增声明变量的方式

一、es6新增声明变量的方式

// var 声明的变量，函数级别作用域变量，
// if (1==1){
// 	var a = 10
// 	
// }
// 变量提升，局部变量提升为全局变量
// console.log(a)

1.let 声明的变量是块级作用域变量，仅仅在当前的代码{}块
使用for循环推荐使用let声明变量
for (let i=0;i<10;i++){
2. const用于声明常量
使用const声明的常量，声明赋值之后不允许修改
3.字符串模板
使用反撇号声明字符串的插值模板，在字符串模板中，可以使用${}插入一个变量的值

let name = "张三"
let age = 22

// let str = "我叫" + name + "，\n今年" + age + "岁"
// console.log(str)

新的对象字面量语法

let p1 = {
	name:name,
	age:age,
	speak:function(){
		console.log("123")
	}
}
let p2 = {
	name,
	age,
	speak(){
		console.log(123)
	}
}
p2.speak()

5.对象和数组的解构赋值

let obj = {
	title:"华为Meta30Pro",
	price:6999
}

// let title = obj.title
// let price = obj.price
// console.log(title,price)

// 对象的结构赋值,将对象的属性分别赋值给若干变量
// 解构赋值的变量名必须和对象中的属性名保持一致
let {price, title} = obj
console.log(title,price)

// 数组的解构赋值
let arr = ["苹果", "香蕉", "梨"]

// let apple = arr[0]
// let banana = arr[1]
// let pear = arr[2]
// console.log(apple,banana,pear)
let [apple, banana, pear] = arr
console.log(apple, banana, pear)

// 函数参数的结构赋值，当函数的参数是一个对象时，可以直接在形参中进行解构赋值，可以直接在形参中设置某个变量的默认值
function f1({a,b=10,c,d}){

	// let {a,b,c,d} = obj
	console.log(a)
	console.log(b)
	console.log(c)
	console.log(d)
}

// f1({
// 	a:1,
// 	c:2,
// 	d:3
// })

6.循环

// 6.循环
// for ... of 循环 循环取出数据
// for ... in 循环 循环取出索引

let arr2 = [1,3,5,7,9]
// for (let i=0;i<arr2.length;i++){
// 	console.log(arr2[i])
// }

// for (let n of arr2){
// 	console.log(n)
// }
// for (let idx in arr2){
// 	console.log(idx)
// }
arr2.forEach(function(el, idx){
	console.log(el, idx)
})

// 可以循环字符串
for (let s of "hello world"){
	console.log(s)
}

二、箭头函数

<body>
	<button id="btn">2秒后输出你好</button>
	<script>
		// 匿名函数
		// let f1 = function(){
		// 	console.log("匿名函数")
		// }
		// f1()
		
		// 箭头函数,也是匿名函数的一种写法
		// 语法: (参数)=>{函数体}
		let f2 = (a,b)=>{
			console.log(a+b)
		}
		f2(10,20)
		
		// 箭头函数如果只有一个参数,参数外的()括号可以省略
		let f3 = a=>{
			console.log(a)
		}
		f3(100)
		
		let f4 = a=>{
			if (a<10){
				return a*10
			}else{
				return a
			}
		}
		let rs =f4(10)
		console.log(rs)
		// 当箭头函数的函数体中只有一句return表达式,函数{}和return都可以省略不写
		let f5 = (a,b)=>a+b
		console.log(f5(10,20))
		// ======================
		let btn = document.getElementById("btn")
		// 箭头函数中this总是指向当前代码中的this
		btn.onclick = ()=>{
			// 这里的this指向window,为什么？箭头函数中this总是指向当前代码中的this
			console.log(this)
			// 定时器中的箭头函数,相当于普通函数+bind(this)
			setTimeout(()=>{
				console.log(this)
			}, 2000)
		}	
		// 普通函数绑定
		btn.onclick = function(){
			// this执行btn对象
			console.log(this)
			setTimeout(()=>{
				
				console.log(this)
			}, 2000)
		}
	</script>
</body>

三、构造函数（class声明类）

// 构造函数创建类型
// function People({name, age}){
// 	// console.log(arguments)
// 	this.name = name
// 	this.age = age
// }
// 添加函数,将函数添加到类的原型对象中
// People.prototype.speak = function(){
// 	console.log(`我叫${this.name},今年${this.age}岁`)
// }
// 
// let p1 = new People({name:"张三", age:22})
// p1.speak()

// 构造函数+原型  继承
// function Man({phone}){
// 	// 构造函数继承，先执行父类中的构造函数，初始化父类中的属性
// 	People.call(this,arguments[0])
// 	// console.log(arguments)
// 	this.phone = phone
// }

// 原型继承：为了继承父类原型中的函数
// Man.prototype =Object.create(People.prototype)
// 
// let m = new Man({name:"李四", age:23, phone:110})
// 
// console.log(m)
// m.speak()

// ----------------------------------

// es6中声明类使用class关键字
class People{
	constructor({name, age}) {
	    this.name = name
		this.age = age
	}
	
	speak(){
		console.log(`我叫${this.name}`)
	}
}

// var p1 = new People({name:"王五", age:22})
// console.log(p1)
// p1.speak()

class Man extends People{
	constructor({phone}){
		// super 调用父类构造函数
		super(arguments[0])
		this.phone = phone
	}
	
	study(){
		console.log(`${this.name}在学习JS`)
	}
}

let m = new Man({name:"赵六", age:22, phone:120})
console.log(m)
m.speak()
m.study()

// class关键字新增的ES6语法，本质还是通过原型链实现的

四、async+await解决代码多重嵌套

const fs = require("fs")
// 下载任务
function downloadMp3(filename){
	
	return new Promise((resolve, reject)=>{
		setTimeout(()=>{
			
			resolve(filename)
		}, 3000)
	})
}
// 解压任务
function unZipFile(filename){
	return new Promise((resolve, reject)=>{
		
		setTimeout(()=>{
			
			resolve(filename)
		}, 2000)
		
	})
}
// async 在函数前添加async是一个异步执行的函数
async function main(){

	// downloadMp3("两只老虎")
	// .then(data=>{
	// 	console.log(data)
	// })
	// 使用await调用的函数，必须是一个返回promise对象的函数，函数执行完成后，返回的结果就是.then(data)中的参数
	let data = await downloadMp3("两只老虎")
	console.log(`${data}下载完成`)
	
	// async和await仅仅是Promise的一个语法糖，表面上看起来任务像同步执行，本质上还是异步执行，await调用就相当将promise中的所有的代码放入了promise.then()
	let data2 = await unZipFile("两只老虎")
	console.log(`${data2}解压完成`)
	
	console.log("播放")
}
main()
// 异步函数不会阻塞当前程序继续向下执行
console.log(123)

五、promise函数

let fs = require("fs")
// fs.readFile("./1.txt", function(err,data){
// 	
// 	let str1 = data.toString()
// 	
// 	fs.readFile("./2.txt", function(err, data){
// 		
// 		let str2 = data.toString()
// 		console.log(str1 + str2)
// 		
// 	})
// })

// promise 异步任务对象，用于将一个异步任务封装成一个对象
// promise 对象必须使用构造函数创建，构造函数参数是一个函数，函数参数就是resolve，reject两个参数
// 
const p1 = new Promise(function(resolve, reject){
	
	fs.readFile("./1.txt", function(err, data){
		
		if (err){
			// 当异步任务执行失败时，调用reject，调用reject，promise对象就会变为失败状态,将错误对象传入reject
			reject(err)
		}else{
			// 当异步任务执行成功时时，调用resolve，调用resolve，promise对象就会变为成功状态，可以成功信息传入
			resolve(data)
		}
	})
})

// promise对象.then() 用于为promise对象添加处理函数
// 1.如果promise对象处于待定状状态，处理函数会在promise对象进入成功状态的那一刻执行
// 2.如果promise对象已经处于成功状态，处理函数会立即执行
// 处理函数中有一个参数，参数就是在promise中执行resolve时传递过来的对象
// p1.then(function(data){
// 	
// 	console.log(data.toString())
// })

// promise对象.catch() 用于为promise添加处理函数
// 如果promise对象处于待定状态，处理函数会在promise对象进入失败状态的那一刻执行
// 如果promise对象已经处于失败状态，处理函数会立即执行
// 处理函数中有一个参数，参数就是在promise中执行reject时传递过来的错误对象
// p1.catch(function(err){
// 	
// 	console.log(err)
// })

const p2 = new Promise(function(resolve,reject){
	
	fs.readFile("./2.txt", function(err, data){
		if (err){
			reject(err)
		}else{
			resolve(data)
		}
	})
})

// Promise.all()方法，用于将多个promise对象合并为一个总的promise，参与合并的promise都处于成功状态时，总promise才会进入成功状态
const p3 = Promise.all([p1,p2])
p3.then(function(data){
	// 参数data是一个数组，数组中分别存放参数合并每个promise.resolve传递的值
	let s = ""
	data.forEach(el=>{
		s += el.toString()
	})
	console.log(s)
})
p3.catch(function(err){
	
	console.log(err)
})

// 可以在任何时候通过.then()或.catch() 获取promise状态，执行处理函数
// p3.then(data=>{
// 	console.log(data)
// })
// 异步任务函数可以直接返回一个promise对象
function readMyFile(filePath){
	return new Promise(function(resolve,reject){
		fs.readFile(filePath, function(err, data){
			if (err){
				reject(err)
			}else{
				resolve(data)
			}
		})
	})
}

// readMyFile("./3.txt").then(data=>{
// 	console.log(data.toString())
// }).catch(err=>{
// 	console.log(err)
// })

Promise.all([readMyFile("./1.txt"),readMyFile("./2.txt"),readMyFile("./3.txt")])
.then(data=>{
	console.log(data)
})
.catch(err=>{
	console.log(err)
})

璨嵘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Es6新增声明变量的方式

Es6新增声明变量的方式一、es6新增声明变量的方式// var 声明的变量，函数级别作用域变量，// if (1==1){// var a = 10// // }// 变量提升，局部变量提升为全局变量// console.log(a)1.let 声明的变量是块级作用域变量，仅仅在当前的代码{}块使用for循环推荐使用let声明变量for (let i=0;i<1...
复制链接

扫一扫