ES6快速入门

一、ECMAScript 6.0简介

二、ES6新特性-let&字符串

1 <script>
2 const a=3
3 a=4
4 //Uncaught TypeError: Assignment to constant variable. at let&const.html:36
5
6 </script>


1 <script>
2 //var声明的变量往往会越域
3 //let声明的变量有严格的局部作用域
4 {
5 var a=1
6 let b=2
7 }
8 console.log(a)
9 console.log(b)
10 //Uncaught ReferenceError: b is not defined at let&const.html:19
11 </script>


1 <script>
2 //var可以声明多次,let只可以声明一次
3 var a=1
4 var a=3
5 let b=2
6 let b=4
7 console.log(a)
8 console.log(b)
9 //Uncaught SyntaxError: Identifier 'b' has already been declared
10 </script>


1 <script>
2 //var会变量提升
3 //let不会变量提升
4 console.log(a)
5 var a=1
6 console.log(b)
7 let b=2
8 //let&const.html:33 Uncaught ReferenceError: b is not defined at let&const.html:33
9 </script>

三、ES6新特性-结构&字符串

1 <script>
2 //数组解构
3 let arr=[1,2,3];
4
5 let d=arr[0];
6 let b=arr[1];
7 let c=arr[2];
8 let [d,b,c]=arr;
9 console.log(d,b,c);
10 </script>

1 <script>
2 //对象解构
3 let person={
4 name: "jack",
5 age: 21,
6 language: ['java','js','css'],
7
8 }
9 let {name,age,language}=person
10 console.log(name,age,language)
11 </script>

1 <script>
2 //字符串扩展
3 let str="hello.vue";
4 console.log(str.startsWith("hello"))//true
5 console.log(str.endsWith(".vue"))//true
6 console.log(str.includes("e"));//true
7 console.log(str.includes("hello"))//true
8 </script>

1 <script>
2 //字符串模板
3 let ss=`<div>
4 <a>11</a>
5 </div>`
6 console.log(ss)//<div><a>11</a></div>
7
8
9
10 </script>

1 <script>
2 let person={
3 name: "jack",
4 age: 21,
5 language: ['java','js','css'],
6
7 }
8
9 let {name,age,language}=person
10 console.log(name,age,language)
11
12 //字符串插入变量和表达式.变量名写在${},${}中可以放入js表达式
13 function fun(){
14 return "这是一个函数"
15 }
16
17 let info=`我是${name},今年${age+10},我想说${fun()}`
18 console.log(info)
19 </script>

四、ES6新特性-箭头函数

1 <script>
2
3 //函数默认值
4 //在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
5 function add(a, b) {
6 // 判断b是否为空，为空就给默认值1
7 b = b || 1;
8 return a + b;
9 }
10 // 传一个参数
11 console.log(add(10));
12
13
14 //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
15 function add2(a, b = 1) {
16 return a + b;
17 }
18 console.log(add2(20));
19
20 //可变长度参数
21 function fun(...values){
22 console.log(values.length)
23 }
24 fun(5)
25 fun(5,5,6)
26 //简单的箭头函数
27 function fun(a,b){
28 return a+b;
29 }
30 var sum=(a,b) => a+b
31 console.log(sum(11,11))
32
33
34
35 //箭头函数
36 const person={
37 name: "jack",
38 age: 21,
39 language: ['java','js','css'],
40
41 }
42 function hello (person) {
43 console.log(person.name)
44 }
45
46 let hellos=(obj) => console.log(obj.name)
47 hellos(person)//jack
48 </script>

五、ES6新特性-对象优化

1 <script>
2 // 对象的内置函数
3 const person = {
4 name: "jack",
5 age: 21,
6 language: ['java', 'js', 'css']
7 }
8
9 console.log(Object.keys(person));//["name", "age", "language"]
10 console.log(Object.values(person));//["jack", 21, Array(3)]
11 console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
12
13 // 对象合并
14 const target = { a: 1 };
15 const source1 = { b: 2 };
16 const source2 = { c: 3 };
17
18 //{a:1,b:2,c:3}
19 Object.assign(target, source1, source2);
20
21 console.log(target);//{a:1,b:2,c:3}

1 //2）、声明对象简写
2 const age = 23
3 const name = ""
4 const person1 = { age: age, name: name }
5
6 const person2 = { age, name }
7 console.log(person2);

1
2 //3）、声明对象书写方式
3 let person={
4 name: "xushu",
5 eat: function(food){
6 console.log("我吃了"+food)
7 },
8 eat1: food => console.log("我吃了"+food),
9 eat3(food){
10 console.log("我吃了"+food)
11
12 }
13 }
14 person.eat("香蕉")
15 person.eat1("苹果")
16 person.eat3("肥肠")
17 </script>
18 //对象优化.html:12 我吃了香蕉
19 //对象优化.html:14 我吃了苹果
20 ///对象优化.html:16 我吃了肥肠

1 //4）、对象拓展运算符
2 <script>
3 //拷贝对象
4 let p1={
5 name: "zlj",
6 age: 19
7 }
8 let someone={...p1}
9 console.log(someone)
10 //{name: "zlj", age: 19}
11 </script>

1 <script>
2 //对象合并
3 let name={name: "zlj"}
4 let age={age: 19}
5
6 let someone={...name,...age}
7 console.log(someone)
8 //{name: "zlj", age: 19}
9 </script>

六、map、reduce

1. map

map()方法：map，映射，即原数组映射成一个新的数组；
map方法接受一个新参数，这个参数就是将原数组变成新数组的映射关系。

1 //map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
2 let arr = [1, 20, ‐5, 3];
3
4 arr = arr.map((item)=>{
5 return item*2
6 });
7 arr = arr.map(item=> item*2);

2. reduce

语法：

1 arr.reduce(callback,[initialValue])

reduce为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：
初始值(或者上一次回调函数的返回值)，当前元素值，当前索引，调用reduce 的数组。
callback ( 执行数组中每个值的函数，包含四个参数)
1、previousValue ( 上一次调用回调返回的值，或者是提供的初始值(initialalue) )
2、currentValue (数组中当前被处理的元素)
3、index (当前元素在数组中的索引)
4、array (调用reduce 的数组)
initialValue (作为第 一次调用callback 的第一个参数。 )

1 <script>
2 //map():接受一个函数,将原来这个数组中的所有元素处理以后返回
3
4 let arr=[1,2,3]
5 arr1=arr.map(item => item*2)
6 console.log(arr1)
7
8
9 //reduce()：维数组中的每一个元素依次执行回调函数（不包括已删除的）
10 arr=arr.reduce((a,b) => {
11 console.log("上一次处理后："+a)
12 console.log("当前正在处理："+b)
13 return a+b
14 },1)
15 console.log(arr)
16 </script>

1 (3) [2, 4, 6]
2 map,reduce.html:18 上一次处理后：1
3 map,reduce.html:19 当前正在处理：1
4 map,reduce.html:18 上一次处理后：11
5 map,reduce.html:19 当前正在处理：2
6 map,reduce.html:18 上一次处理后：112
7 map,reduce.html:19 当前正在处理：3
8 map,reduce.html:22 1123

七、promise异步编排

我们作如上的操作发现是非常复杂的嵌套程序，无限嵌套的方式总是让人感觉到非常凌乱，不工整，我们希望
有一种操作来给他们从新编排一下，让我们感觉到操作的顺序性，逻辑性，es6就给我提供了promise功能，
如下演示

1 <head>
2 <meta charset="utf‐8">
3 //要导入script
4 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
5 </head>
6 <script >
7 //1.promise可以封装异步操作
8 //resolve操作成功以后解析数据
9 //reject操作失败来拒绝
10 let p=new Promise((resolve,reject) => {
11 //1.异步操作
12 $.ajax({
13 url: "/mock/user.json",
14 //操作成功以后解析数据
15 sucess:function(data){
16 console.log("查询用户成功："+data)
17 resolve(data)
18 },
19 //操作失败来拒绝
20 failure:function(err){
21 console.log("查询用户失败："+err)
22
23 reject(err)
24 }
25 });
26 });
27 p.then((obj) => {
28 return new promise((resolve,reject) => {
29 console.log("接受到前面传来的信息："+obj);
30 $.ajax({
31 url: "mock/user_corse_${obj.id}.json",
32 //操作成功以后解析数据
33 sucess:function(data){
34 console.log("查询用户课程成功："+data)
35 resolve(data)
36 },
37 //操作失败来拒绝
38 failure:function(err){
39 console.log("查询用户课程失败："+data)
40
41 reject(err)
42 }
43 })
44 })
45
46 }).then((data) => {
47 console.log("上一步的结果"+data)
48 $.ajax({
49 url: "mock/user_score_${data.id}.json",
50 //操作成功以后解析数据
51 sucess:function(data){
52 console.log("查询用户课程分数成功："+data)
53 resolve(data)
54 },
55 //操作失败来拒绝
56 failure:function(err){
57 console.log("查询用户课程分数失败："+data)
58
59 reject(err)
60 }
61 })
62 })
63 </script>

我们对上面的方法进行改造，把ajax的请求封装成一个方法，并返回.

1 <script>
2 //对上面的方法进行封装
3 function get(url,data){
4 return new Promise((resolve,reject) => {
5 $.ajax({
6 url: url,
7 data: data,
8 //操作成功以后解析数据
9 sucess:function(data){
10 console.log("查询用户课程分数成功："+data)
11 resolve(data)
12 },
13 //操作失败来拒绝
14 failure:function(err){
15 console.log("查询用户课程分数失败："+data)
16
17 reject(err)
18 }
19 })
20 })
21 }
22
23 get("mock/user.json")
24 .then( (data) => {
25 console.log("用户查询成功‐‐‐‐‐")
26 return get("mock/user_corse_${data.id}",data)
27 })
28 .then((data) => {
29 console.log("用户课程查询成功‐‐‐‐‐‐")
30 return get("mock/user_score_${data.id}",data)
31 })
32 .then((data)=>{
33 console.log("用户课程成绩查询成功‐‐‐‐‐‐‐")
34
35 })
36 </script>

八、模块化

1. 什么是模块化

模块化就是把代码进行拆分，方便重复利用。类似java中的导包:要使用一一个包，必须先导包。而JS中没有包
的概念，换来的是模块。
在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的模块功能主要由两个命令构成: ‘export’ 和import’。
'export’命令用于规定模块的对外接口，如果你希望外部可以读取模块当中的内容，就必须使用
export来对其进行暴露（输出）
export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型
变量、函数、数组、对象。
import 命令永固导入模块
hello.js

1 // 到处指定组件
2 export const util = {
3 sum(a, b) {
4 return a + b;
5 }
6 }
7
8 // 到处默认组件
9 export default {
10 sum(a, b) {
11 return a + b;
12 }
13 }

user.js

1 var name = "jack"
2 var age = 21
3 function add(a,b){
4 return a + b;
5 }
6
7 export {name,age,add}

main.js

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

注：
1.模块化一定要以web服务器方式运行
2.如果要在html中运行要在<script 加上 type=“module”文章来源地址https://www.toymoban.com/news/detail-796049.html

到了这里，关于ES6快速入门的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！