ES6语法

一、Let、const、var变量定义

1.let 声明的变量有严格局部作用域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){//var声明的变量往往会越域//let 声明的变量有严格局部作用域{var a=1;let b=2;}console.log(a);//1console.log(b);//Uncaught ReferenceError: b is not defined}</script>
</body>
</html>

可以查看控制台的输出：

在这里插入图片描述

2.let只能声明一次

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){//var可以声明多次//let只能声明一次var m=1var m=2let n=3//let n=4console.log(m);//2console.log(n);//3}</script>
</body>
</html>

3.let 不存在变量提升

什么是变量提升

变量提升（Hoisting）是指 JS在运行代码前，会将变量和函数的声明提升到当前作用域的顶部。这一特性源于 JS 的编译机制，在编译阶段就会为变量和函数分配内存。
具体为：

var 的提升：变量声明被提升到作用域顶部，并初始化为 undefined。
函数声明的提升：函数声明被完整提升到作用域顶部，可以在声明前调用。
let 和 const 的提升：声明会被提升，但不会初始化，在初始化之前的访问会触发临时死区（TDZ）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){//var会变量提升//let不存在变量提升console.log(x);//undefinedvar x=10;console.log(y);//Uncaught ReferenceError: Cannot access 'y' before initializationlet y=20;}</script>
</body>
</html>

查看控制台的输出：

在这里插入图片描述

4.const声明之后不允许改变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){var b=2;b=4;console.log(b);//4let c=5;c=7;console.log(c);//7//const声明之后不允许改变const a=1;a=3;console.log(a);//Uncaught TypeError: Assignment to constant variable.}</script>
</body>
</html>

查看控制台：
在这里插入图片描述

二、结构表达式

1.数组解构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){//数组解构let arr=[1,2,3];let a=arr[0];let b=arr[1];let c=arr[2];console.log(a,b,c);//1 2 3let[m,n,q]=arr;console.log(m,n,q);//1 2 3}</script>
</body>
</html>

查看控制台

在这里插入图片描述

2.对象解构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){//对象解构const person={name:"zhangsan",age:21,language:['java','html','css']}const name=person.name;const age=person.age;const language=person.language;console.log(name,age,language);//zhangsan 21 ['java','html','css']const person1={name1:"lisi",age1:21,language1:['java','C','python']}const {name1:abc,age1,language1}=person1;console.log(abc,age1,language1)//lisi 21 ['java','C','python']console.log(name1,age1,language1)//Uncaught ReferenceError: name1 is not defined}</script>
</body>
</html>

查看控制台：
在这里插入图片描述

3.字符串扩展

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){//字符串扩展let str="hello.vue";console.log(str.startsWith("hello"));//trueconsole.log(str.endsWith(".vue"));//trueconsole.log(str.includes("e"));//trueconsole.log(str.includes("hello"));//true}</script>
</body>
</html>

查看控制台：

在这里插入图片描述

4.字符串模板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){//字符串模板let ss = `<div><span>hello world<span></div>`;console.log(ss);}</script>
</body>
</html>

控制台：

在这里插入图片描述

5.字符串插入变量和表达式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>function test1(){const person = {name: "jack",age: 21,language: ['java', 'js', 'css']}//对象解构const { name: abc, age, language } = person;//  // 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;console.log(info);}function fun() {return "这是一个函数"}</script>
</body>
</html>

控制台：

在这里插入图片描述

三、函数优化

1.直接给参数写上默认值，没传就会自动使用默认值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton" onclick="test1()">点击我</button><script>// 现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值function test1(a ,b=1){return a+b;}// 调用函数console.log(test1(5, 3));    // 输出 8console.log(test1(5));       // 输出 6console.log(test1(a=10, b=5)); // 输出 15console.log(test1(b=5, a=10)); // 输出 15</script>
</body>
</html>

控制台：

在这里插入图片描述

2.可变参数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton">点击我</button><script>// 可变参数function test1(...values){console.log(values.length)}test1(1,2);//2test1(1,2,3,4);//4</script>
</body>
</html>

控制台：

在这里插入图片描述

3.箭头函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 箭头函数var print=function(obj){console.log(obj);//hello}print("hello");var print=obj => console.log(obj);print("hei");//heivar sum = function (a, b) {c = a + b;return a + c;}var sum2 = (a, b) => a + b;console.log(sum2(11, 12));//23var sum2 = (a, b) => a + b;console.log(sum2(11, 3));//14var sum3 = (a, b) => {c = a + b;return a + c;}console.log(sum3(10, 20));//40const person = {name: "jack",age: 21,language: ['java', 'js', 'css']}function hello(person) {console.log("hello," + person.name)}</script>
</body>
</html>

在这里插入图片描述

4.箭头函数+解构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>const person = {name: "jack",age: 21,language: ['java', 'js', 'css']}// 箭头函数+解构var hello2=({name})=>console.log("hello,"+name);//hello,jackhello2(person);</script>
</body>
</html>

在这里插入图片描述

四、对象优化

1.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>const person = {name: "jack",age: 21,language: ['java', 'js', 'css']}console.log(Object.keys(person));//['name', 'age', 'language']console.log(Object.values(person));//['jack', 21, Array(3)]console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]const target={a:1};const source1={b:2};const source2={c:3};//{a:1,b:2,c:3} 把对象合并到一起Object.assign(target,source1,source2);console.log(target);//{a: 1, b: 2, c: 3}console.log(source1);//{b: 2}</script>
</body>
</html>

在这里插入图片描述

2.声明对象简写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>//声明对象简写const age=23const name="张三"const person1={age: age, name: name}console.log(person1)//{age: 23, name: '张三'}const person2={age, name}console.log(person2)//{age: 23, name: '张三'}</script>
</body>
</html>

在这里插入图片描述

3.对象的函数属性简介

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>//对象的函数属性简介let person1={name: "zhangsan",//以前eat: function (food){console.log(this.name+"在吃"+food);//zhangsan在吃香蕉},//箭头函数this不能使用，对象.属性eat2: food => console.log(person1.name+"吃"+food),//zhangsan吃苹果eat3(food){console.log(this.name+"在"+food);//zhangsan在橘子}}person1.eat("香蕉");person1.eat2("苹果");person1.eat3("橘子");</script>
</body>
</html>

在这里插入图片描述

4.拷贝对象（深拷贝）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>//拷贝对象（深拷贝）let p1 = { name: "Amy", age: 15 }let someone = { ...p1 }console.log(someone)//{name: "Amy", age: 15}</script>
</body>
</html>

在这里插入图片描述

5.合并对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>//合并对象let age1 = { age: 15 }let name1 = { name: "Amy" }let p2 = {name:"zhangsan"}p2 = { ...age1, ...name1 }console.log(p2)//{age: 15, name: 'Amy'}</script>
</body>
</html>

在这里插入图片描述

五、Map和Reduce

数组中新增了map和reduce方法。

1.map()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>//数组中新增了map和reduce方法。///map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。let arr = ['1', '20', '-5', '3'];arr = arr.map((item)=>{return item*2});console.log(arr);//[2, 40, -10, 6]arr = arr.map(item=> item*2);//[4, 80, -20, 12]console.log(arr);</script>
</body>
</html>

在这里插入图片描述

2.reduce()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><title>Document</title>
</head>
<body><script>//数组中新增了map和reduce方法。/**1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））2、currentValue （数组中当前被处理的元素）3、index （当前元素在数组中的索引）4、array （调用 reduce 的数组）*/let arr = ['1', '20', '-5', '3'];let result = arr.reduce((a,b)=>{console.log("上一次处理后："+a);console.log("当前正在处理："+b);return a + b;},100);console.log(result);//100120-53</script>
</body>
</html>

在这里插入图片描述

六、promise

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><title>Document</title>
</head>
<body><script>//定义两个参数一个是ajax返回成功数据传递resolve, 一个是失败rejectlet p = new Promise((resolve, reject) => {//1、异步操作$.ajax({url: "mock/user.json",success: function (data) {console.log("查询用户成功:", data)resolve(data);},error: function (err) {reject(err);}});});p.then((obj) => {return new Promise((resolve, reject) => {$.ajax({url: `mock/user_corse_${obj.id}.json`,success: function (data) {console.log("查询用户课程成功:", data)resolve(data);},error: function (err) {reject(err)}});})}).then((data) => {console.log("上一步的结果", data)$.ajax({url: `mock/corse_score_${data.id}.json`,success: function (data) {console.log("查询课程得分成功:", data)},error: function (err) {}});});function get(url, data) {return new Promise((resolve, reject) => {$.ajax({url: url,data: data,success: function (data) {resolve(data);},error: function (err) {reject(err)}})});}get("mock/user.json").then((data) => {console.log("用户查询成功~~~:", data)return get(`mock/user_corse_${data.id}.json`);}).then((data) => {console.log("课程查询成功~~~:", data)return get(`mock/corse_score_${data.id}.json`);}).then((data)=>{console.log("课程成绩查询成功~~~:", data)}).catch((err)=>{console.log("出现异常",err)});</script>
</body>
</html>

在这里插入图片描述

七、模块化

hello.js

export default {sum(a, b) {return a + b;}
}

user.js

var name = "jack"
var age = 21
function add(a,b){return a + b;
}export {name,age,add}

main.js

import abc from "./hello.js"
import {name,add} from "./user.js"abc.sum(1,2);
console.log(name);
add(1,3);

index22.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"><script type="module" src="js/main.js"></script><title>Document</title>
</head>
<body></body>
</html>