ES6简介

最新推荐文章于 2024-07-24 23:30:03 发布

WL磊0.0

最新推荐文章于 2024-07-24 23:30:03 发布

阅读量322

点赞数 7

文章标签： es6 前端 javascript

本文链接：https://blog.csdn.net/akedf/article/details/135336945

版权

1 let & const

1 let 作⽤：与var类似，⽤于声明⼀个变量

特点：块作⽤域内有效

不能重复声明

不会预处理，不存在变量提升

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>0</button>
<button>1</button>
<button>2</button>
<script>
//console.log(num); // Cannot access 'num' before initialization
let num = 1;
//let num = 2; // 'num' has already been declared
console.log(num);
let btns = document.getElementsByTagName("button");
// 这样写的话会每个按钮点击的时候都是3，因为点击函数是回调函数，回调函数会被放在事件队列⾥⾯，等
主线程函数执⾏结束后再执⾏，⽽主线程执⾏结束后i是3 
// for(var i = 0; i < btns.length; i++){
// var btn = btns[i];
// btn.onclick = function(){
// alert(i);
// }
// }
// ES5解决⽅案——闭包
// for (var i = 0; i < btns.length; i++) {
// var btn = btns[i];
// (function (i) {
// btn.onclick = function () {
// alert(i);
// }
// })(i)
// }
// ES6解决⽅案——let
for(let i = 0; i < btns.length; i++){
var btn = btns[i];
btn.onclick = function(){
alert(i);
 }
 }
</script>
</body>
</html>

1.2 const 作⽤：定义⼀个常量

特点：不能被修改

其他特点同let

const NUM = 4;
NUM = 5;
console.log(NUM); // Assignment to constant variable

3.2 解构赋值

作⽤：从对象或数组中提取数据，并赋值给变量

特点：定义的属性名字要和解构对象中属性的名字⼀致

不是⼀定要将结构对象中所有的属性都解构出来，⽤⼏个写⼏个即可

实例：

//以往拿到对象属性并进⾏操作：
var expense = {
 type:"ES6",
 amount:199
}
var type = expense.type;
var amount = expense.amount;
console.log(type);
console.log(amount);
//如果⽤ES6的解构去实现：
//注意，解构的时候如果是解构对象，则⽤{}，⽽且{}⾥⾯的名字和对象⾥⾯属性的名字要⼀样
const {type,amount} = expense;
console.log(type);
console.log(amount);
数组的解构赋值：
//{ }⾥⾯的名字需要和对象属性的名字⼀致，但是顺序可以不⼀致，⽽且如果结构函数中写了⼀个对象中没有的属性，则
该属性会被显示成undefind
const {amount,type,abc} = expense;
console.log(amount,type,abc);
// 需要使⽤⼏个数据就写⼏个，不是必须全部解构
let {amount} = expense;
console.log(amount);
==========================================
//在函数调⽤时使⽤解构赋值
//ES5写法：
function info5(expense){
 console.log(expense.amount,expense.type);
 }
// ES6写法：
function info6({type,amount}){
 console.log(amount,type);
 }

数组的解构赋值

//对象数组解构⽅法：
const people = [
 {name:"张三",age:20},
 {name:"李四",age:27},
 {name:"王五",age:32}
]
//ES5获取age的⽅式：
var age = people[0].age
console.log(age); //结果：20
//ES6解构⽅式获取age：
const [age] = people;
console.log(age); //结果：{name: "张三", age: 20}
//如果如上只解构⼀次，那么得到的是第⼀个数组people的第⼀个对象
//如果希望得到age的数值，需要解构两次，第⼀次解构数组，第⼆次解构对象，先结构的在外⾯
const [{age}] = people;
console.log(age); //结果：20

3.3 模板字符串

作⽤：简化字符串的拼接

特点：模板字符串必须使⽤``包含变量部分使⽤${...}定义

//以往的写html的拼接语句并插⼊到⻚⾯如下：
 var element = "<h1>Hello World!</h1>"
 +
 "<p>ES6语法学习</p>"
 
 document.getElementById("info").innerHTML = element;
Tips：模板字符串的⽤途⾮常⼴泛，常⽤在⻚⾯信息显示，请求URL参数拼接等
3.4 增强字⾯量
作⽤：简化对象写法
特点：省略同名属性及function
示例：
 //可以看出element写html语句时如果换⾏需要⽤“”配合+等等来实现，很麻烦也⾮常容易出错
 
 //ES6模式下写模版字符串如下：
 var element = `
 <h1>Hello World!</h1>
 <p>ES6语法学习</p>
 `;
 
 //直接⽤键盘Tab键上⾯的``即可，把html语句写在中间，可以任意换⾏，不⽤双引号不⽤加号，
 //如果需要再html⾥⾯动态的填⼊某个值则如下(⽤${ }接收)：
 var name = "moka"
 
 var element = `
 <h1>Hello ${name}!</h1>
 <p>ES6语法学习</p>
 `;
 document.getElementById("info").innerHTML = element;
 
 
 //在模板字符串``⾥⾯也可以使⽤⽅法（如下⾯的${makeUpperCase('Hello')}）：
 var name = "moka"
 
 function makeUpperCase(word){
 return word.toUpperCase();
 }
 
 var element = `
 <h1>${makeUpperCase('Hello')} ${name}!</h1>
 <p>ES6语法学习</p>
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 `;
 document.getElementById("info").innerHTML = element;

3.8 Promise

作⽤：解决"回调地狱"问题特点： Promise对象: 代表了未来某个将要发⽣的事件(通常是⼀个异步操作) 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数 ES6的Promise是⼀个构造函数, ⽤来⽣成promise实例

1.创建promise对象

// 两个形参resolve和reject都是函数
let promise = new Promise((resolve, reject) => {
//初始化promise状态为 pending
//执⾏异步操作，通常是发送Ajax请求，开启定时器，等等
if(异步操作成功) {
resolve();//修改promise的状态为fullfilled，修改完状态后才能执⾏then⾥⾯对应的成功函
数，否则状态还是pending，不会执⾏then⾥⾯的函数
 } else {
reject();//修改promise的状态为rejected，修改完状态后才能执⾏then⾥⾯对应的成功函数，否
则状态还是pending，不会执⾏then⾥⾯的函数
 }
 })

2.调⽤promise的then(）

promise.then(() => {
// then⾥⾯有两个函数，此函数是成功的回调
},() => {
// 此函数是失败的回调
})

promise状态：

pending: 初始化状态

fullfilled: 成功状态

rejected: 失败状态

WL磊0.0

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
ES6简介

作⽤：解决"回调地狱"问题特点： Promise对象: 代表了未来某个将要发⽣的事件(通常是⼀个异步操作) 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数 ES6的Promise是⼀个构造函数, ⽤来⽣成promise实例。特点：模板字符串必须使⽤``包含变量部分使⽤${...}定义。不是⼀定要将结构对象中所有的属性都解构出来，⽤⼏个写⼏个即可。特点：定义的属性名字要和解构对象中属性的名字⼀致。1 let 作⽤：与var类似，⽤于声明⼀个变量。
复制链接

扫一扫