普歌-云言团队-ES6语法

本文详细介绍了ES6中的新特性,包括let和const声明变量及作用域,解构赋值的便利性,模板字符串的多行与表达式插入功能,对象简写与方法简写提高代码可读性,对象拓展运算符的拷贝与合并,以及箭头函数的简洁语法。通过这些特性,开发者能更高效地编写JavaScript代码。
摘要由CSDN通过智能技术生成

1.let声明变量

var 声明的变量没有局部作用域, let 声明的变量 有局部作用域

	{
		var a = 0
		let b = 1
	}
	console.log(a)  // 0
	console.log(b)  // ReferenceError: b is not defined

报错原因
var 可以声明多次,let 只能声明一次

	var m = 1
	var m = 2
	let n = 3
	let n = 4
	console.log(m)  // 2
	console.log(n)  // Identifier 'n' has already been declared

let只能声明一次

2.const声明常量

只读变量, 一旦定义,不能改变

	//定义常量
    const PI = "3.1415"
    //常量值一旦进行定义, 就不能再改变了
    PI = 3 //Uncaught TypeError: Assignment to constant variable.

    //定义常量必须初始化
    const AA//Uncaught SyntaxError: Missing initializer in const declaration

const声明量

3.解构赋值

解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。
在这里插入图片描述

4.模板字符串

模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式。

		//1.使用` 实现数据自动换行
		let str1 = `hello,
		es6 demo up!`
		//console.log(str1)		

在这里插入图片描述

		//2.在 ` 的符号中使用表达式获取变量值
		let name = "Mike"
		let age = 20
		let str2 = `hello,${name},age is ${age+1}`
		console.log(str2) //hello,Mike,age is 21
		
		
		//3.在 ` 符号中调用方法
		function f1(){
			return "hello f1"
		}
		let str3 = `demo,${f1()}` //用表达式${} f1这个方法执行, 就可以取到值
		console.log(str3) //demo,hello f1

5.声明对象简写

		const age = 12
		const name = "lucy"
		//传统方式定义对象
		const p1 = {name:name,age:age}
		console.log(p1)
		//es6
		const p2 = {name,age}
		console.log(p2)  //{age: 12, name: "Amy"}

6.定义方法简写

在这里插入图片描述


		// 传统
		const person1 = {
			sayHi:function(){
				console.log("Hi")
			}
		}
		//调用
		person1.sayHi();//"Hi"
		
		//es6 去掉了function
		const person2 = {
			sayHi(){
				console.log("Hi")
			}
		}
		//调用
		person2.sayHi();//"Hi"

7.对象拓展运算符

有可遍历属性然后拷贝到当前对象。

		//1.拷贝对象
		let person1 ={"name":"lucy","age":"21"}
		//person1中的内容赋值给person2
		let person2 ={...person1}
		console.log(person2) //age: "21" name: "lucy"
		
		
		//2.合并对象
		let name = {name:'marry'};
		let age = {age:20}
		let p2 = {...name,...age}
		console.log(p2) //age: 20 name: "marry"

8.箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是:
参数 => 函数体

	//传统方式创建方法
	var f1 = function(m){
		return m+1
	}
	console.log(f1(3)) //4
	//使用箭头函数改造
	var f2 = m => m
	console.log(f2(8)) //8

	
	//2.复杂一点的方法
	var f3 = function(a,b){
		return a+b
	}
	//console.log(f3(1,2)) //3
	//箭头函数简化
	var f4 = (a,b) => a+b
	console.log(f3(2,2)) //4
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

优雅猿人Sansan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值