ECMA-262_6th_edition_june_2015,也被称为ECMAScript 2015或ES6,为JavaScript语言带来了许多重要的升级和改进。它引入了许多新的语言特性和语法改进,为JavaScript开发者带来了更强大、更现代化的编程能力。以下是对ES6的一些主要特性的简要介绍:
一、ES6的变量和模板字符串
ES6新增了let和const,用来声明变量
1.1、let和var的差别
<script>
//声明变量
let a;
let b,c,d;
let name="zs"
let age = 18,sex='男',like=[]
//变量不能重复
let name;
//不允许作用域范围外使用
{
let bookName = '葵花宝典'
//var bookName = '葵花宝典'
}
console.log(bookName)
//不允许提前使用(变量提升)
console.log(goodsName)
let goodsName = '牙膏'
//不影响内部作用域的使用
{
let goodsSal = 900
function fun() {
console.log(goodsSal)
}
fun()
}
</script>
1.2、const和var差别
<script>
//声明常量
const PI = 3.14
//必须赋初始值
const a;
//不允许重复赋值
const PI = 1.12
//作用域外无法访问
{
const MENU = 1
}
console.log(MENU)
//const声明对象或数组可以重复赋值
const MENU = ['首页','新闻列表','热门新闻']
MENU.push('明星爆料')
console.log(MENU)
</script>
1.3、模板字符串是增强版字符串,用反引号(`)表示
<script>
//创建字符串,单引号、双引号、`
let str = `ES6中提供的新的字符串符号`
//换行不需要拼接符号
let str1 = `<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ul>`
let str2 = '星期天'
//字符串插槽
let outStr = `${str2},要玩的很开心`
console.log(outStr)
</script>
二、ES6的解构表达式
ES6引入了解构赋值,这是一种表达式,它允许你将数组或对象中的数据解构到不同的变量中。这是一种从数组或对象中提取数据,并将其赋值给声明的变量的语法糖,可以大大简化数据访问的代码。
2.1、数组解构赋值
对于数组,解构赋值允许你直接从数组中提取值赋给声明的变量。
// 对数组解构
const names = ['小沈阳','刘能','赵四','宋小宝']
let [a,b,c,d] = names
console.log(a)
console.log(b)
console.log(c)
console.log(d)
2.2、对象解构赋值
对于对象,解构赋值同样强大,允许你根据对象的属性名来提取值。
//对象解构
const goods = {
name:'苹果',
sal:10,
message:function(){
console.log("美容养颜抗衰老")
}
}
let {name,sal,message} = goods
console.log(name)
console.log(sal)
message()
三、ES6的箭头函数声明及特点
3.1、箭头函数简易写法
let add = n =>{}//参数列表中只有一个参数可以省略小括号
let show = (n) => n*n //代码块中只有一行代码可以省略大括号
console.log(show(10))
3.2、应用场景
<div id="div" style="width: 200px; height: 200px; background-color: aqua;">
</div>
<script>
let divObj = document.getElementById("div")
divObj.addEventListener("click",function(){
let _this = this;
//两秒后变色
setTimeout(function(){
_this.style.backgroundColor="pink"
},2000)
})
let divObj = document.getElementById("div")
divObj.addEventListener("click",function(){
//两秒后变色
setTimeout(()=>{
this.style.backgroundColor="pink"
},2000)
})
</script>
3.3、rest和spread
在JavaScript中,rest
参数(也称为剩余参数)和spread
操作符(也称为展开语法)是两个非常有用且强大的特性,它们分别用于函数参数和数组/对象操作中。虽然它们的作用不同,但它们都是基于ES6(ECMAScript 2015)引入的,并且都以某种方式处理数组(对于spread
操作符,还包括对象)的多个元素。
//支持rest参数 接收不定数量的参数
function date() {
console.log(arguments)
}
date('小沈阳','赵四','刘能','宋小宝')
function date(...args) {
console.log(args)
}
date('小沈阳','赵四','刘能','宋小宝')
function date(a,b,c,...args) {
console.log(a)
console.log(b)
console.log(c)
console.log(args)
}
//其他对数组的操作
const f1 = ['小沈阳','赵四']
const f2 = ['刘能','宋小宝']
// const username = f1.concat(f2)
// console.log(username)
const username = [...f1,...f2]
console.log(username)
四、Symbol
Symbol是es6提供的新数据类型,是在es5的6种数据类型基础之上增加的第7种数据类型
es5的6种类型:string、number、Boolean、object、undefined、null
es6的新数据类型: Symbol
特征: symbol的值是唯一的,解决命名冲突的问题
symbol不能进行数学运算
symbol定义的对象属性,无法使用for遍历
let name = Symbol('张三')
let name1 =Symbol('张三')
console.log(name == name1)
let obj1 = {name:'zs',age:20}
let obj2 = {name:'ls',sex:'男',address:'辽宁省沈阳市'}
Object.assign(obj1,obj2)//assign将两个对象合并
console.log(obj1)
五、迭代器
迭代器协议定义了一个标准的迭代器必须具有next()
方法,该方法返回一个对象,这个对象包含两个属性:
value
:表示迭代器返回的当前值。
done
:一个布尔值,表示迭代器是否已经遍历完其迭代对象
const obj1 ={
name:'小强',
like:[
'吃饭',
'玩游戏',
'旅游',
'rap'
],
[Symbol.iterator](){
let index = 0;
let _this = this;
return{
next:function(){
if(index < _this.like.length){
const result = {value:_this.like[index],done:false}
index++
return result
}
else{
return{value:undefined,done:true}
}
}
}
}
}
for(let v of obj1){
console.log(v)
}
console.log(obj1.name)
六、Promise封装读取文件
在JavaScript中,使用Promise
封装读取文件的功能可以让我们以异步的方式处理文件读取,并且以更加现代和优雅的方式处理回调地狱问题。这里以Node.js环境为例,因为Node.js原生支持文件系统(fs)模块,它提供了读取文件的异步API,尽管这些API已经返回了Promise(在Node.js的较新版本中),但我们仍然可以手动封装它们以展示如何构建自己的Promise。
<script>
// Promise是es6中用于异步提交(局部提交)的工具,该工具内部Ajax
const fs = require('fs')
fs.readFile('new1.md',(err,data)=>{
if(err) throw err;
console.log(data.toString())
})
</script>
const fs = require('fs')
// fs.readFile('new1.md',(err,data)=>{
// if(err) throw err;
// console.log(data.toString())
// })
//封装Promise
const p = new Promise(function (resolve,reject) {//参数一表示访问成功,参数二表示访问失败
fs.readFile('new1.mda',(err,data)=>{
if(err) reject(err);//如果出现异常则通过reject响应错误信息
resolve(data)//如果没有异常则通过resolve响应正确数据
})
})
//调用promise
//参数一:函数,用于接受正确的值
//参数二:函数,用于接收异常的值
p.then(function (value) {
console.log(value.toString())
},function (reject) {
console.log("读取失败~")
})