前端基础-01.ES6_es6 walk

前后端技术栈对比

1.简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。
　　目标:是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

2.什么是ECMAScript

ECMAScript是浏览器脚本语言的规范;
ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现;
Node 是 JavaScript 的服务器运行环境（runtime）。

3.ES6新特性与VSCode的使用

shift+!生成html头
alt+shift+f格式化代码

3.1let

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

// var 声明的变量往往会越域
// let 声明的变量有严格局部作用域
         {
             var a = 1;
             let b = 2;
         }
         console.log(a);  // 控制台输出1
         console.log(b);  // 会报错,b未被定义
1
2
3
4
5
6
7
8

• let 只能声明一次

// var 可以声明多次
// let 只能声明一次
         var m = 1
         var m = 2
         let n = 3
         let n = 4
         console.log(m)  // 控制台打印2
         console.log(n)  // 报错已经被定义

1
2
3
4
5
6
7
8
9

• let 不存在变量提升

// var 会变量提升
// let 不存在变量提升
         console.log(x);  // 未定义
         var x = 10;
         console.log(y);   //报错没找到y变量
         let y = 20;
1
2
3
4
5
6

3.2const声明常量

• const声明之后不允许改变,一但声明必须初始化，否则会报错

// 1. 声明之后不允许改变
// 2. 一但声明必须初始化，否则会报错
        const a = 1;
        a = 3; //Uncaught TypeError: Assignment to constant variable.
1
2
3
4

3.3解构表达式

• 数组解构

         let arr = [1,2,3];
         //将数组放入abc;
         let a = arr[0];
         let b = arr[1];
         let c = arr[2];
		 console.log(a,b,c)
         //解构写法将arr赋值给abc
		 let [a,b,c] = arr;
		 //打印结果相同
		 console.log(a,b,c)
1
2
3
4
5
6
7
8
9
10

• 对象解构

//声明一个对象
const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
//将对象中属性分别赋值给各个常量
const name = person.name;
const age = person.age;
const language = person.language;
console.log(name, age, language)
//解构写法
const { name: abc, age, language } = person;
//打印结果相同
console.log(abc, age, language)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 字符串扩展
  1.几个新的API模板

  let str = "hello.vue";
  		//是否以hello开头
        console.log(str.startsWith("hello"));//true
        //是否以.vue开头
        console.log(str.endsWith(".vue"));//true
        //是否包含e字符
        console.log(str.includes("e"));//true
        //是否包含hello
        console.log(str.includes("hello"));//true
1
2
3
4
5
6
7
8
9

2.字符串模板

• 多行字符串使用``符号

let ss = `<div>
             <span>hello world<span>
          </div>`;
        console.log(ss);
1
2
3
4

打印的格式如下:保留了字符串原来的格式

• 字符串插入变量和表达式。变量名写在$中,${ }中可以放JavaScript表达式

const name = 'jack';
const age = 20;
let info = `我是${name }，今年${age + 10}了`;
console.log(info);
//打印:我是jack,今年30岁了
1
2
3
4
5

• 字符串中调用函数(接上例)

function fun() {
            return "这是一个函数"
        }

        let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;
        console.log(info);//我是jack,今年30岁了,我想说这是一个函数
1
2
3
4
5
6

3.4箭头函数(函数优化)

• 给函数参数一个默认值

//在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
        function add(a, b) {
            // 判断b是否为空，为空就给默认值1
            b = b || 1;
            return a + b;
        }
        // 传一个参数
        console.log(add(10));//输出11


        //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
        function add2(a, b = 1) {
            return a + b;
        }
        console.log(add2(20));//输出21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 不定参数:用来表示不确定参数个数,格式为**…变量名**,由…加上一个具名参数标识符组成。具名参数只能放在参数列表的后面,并且有且只有一个不定参数

 function fun(...values) {
            console.log(values.length)
        }
        fun(1, 2)      //2
        fun(1, 2, 3, 4)  //4
1
2
3
4
5

• 箭头函数
  1.单个参数

 //以前声明一个方法
         var print = function (obj) {
             console.log(obj);
         }
         print("hello");//打印hello
//箭头函数写法
        var print1 = obj => console.log(obj);
        print1("hello");//打印hello
1
2
3
4
5
6
7
8

2.多个参数

        var sum = function (a, b) {
            c = a + b;
            return a + c;
        }
        console.log(sum(10, 20))//30
        //箭头函数写法
        var sum2 = (a, b) => {
            c = a + b;
            return a + c;
        }
        console.log(sum2(10, 20))//30
1
2
3
4
5
6
7
8
9
10
11

3.5对象优化

• 新增的api

const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
//Object.keys()将对象中的属性封装成一个数组返回
        console.log(Object.keys(person));//["name", "age", "language"]
//Object.values()将对象中属性对应的值封装成一个数组返回
        console.log(Object.values(person));//["jack", 21, Array(3)]
//Object.entries()将对象中属性和值的键值对封装成数组返回
        console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
		//声明三个对象
        const target = { a: 1 };
        const source1 = { b: 2 };
        const source2 = { c: 3 };

        //想要将target对象编程这种格式{a:1,b:2,c:3}
// Object.assign()方法的第一个参数是目标对象,后面的参数都是源对象
        Object.assign(target, source1, source2);
        console.log(target);//["name", "age", "language"]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

• 声明对象的简写方式

        const age = 23
        const name = "张三"
        const person1 = { age: age, name: name }
//当变量或常量名与对象中属性名相同可以简写成以下方式
        const person2 = { age, name }
        console.log(person2);//{ age: 23, name: 张三 }
1
2
3
4
5
6

• 对象的函数属性简写

let person3 = {
            name: "jack",
            // 以前：
            eat: function (food) {
                console.log(this.name + "在吃" + food);
            },
            //箭头函数this不能使用，使用对象.属性
            eat2: food => console.log(person3.name + "在吃" + food),
            eat3(food) {
                console.log(this.name + "在吃" + food);
            }
        }
        person3.eat("香蕉");//jack在吃香蕉
        person3.eat2("苹果");//jack在吃苹果
        person3.eat3("橘子");//jack在吃橘子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 对象扩展运算符

        // 1、拷贝对象（深拷贝）
        let p1 = { name: "Amy", age: 15 }
        let someone = { ...p1 }
        console.log(someone)  //{name: "Amy", age: 15}
          // 2、合并对象
        let age1 = { age: 15 }
        let name1 = { name: "Amy" }
        let p2 = {name:"zhangsan"}
        //会覆盖之前的属性值
        p2 = { ...age1, ...name1 } 
        console.log(p2)//{ name: "Amy", age: 15 }
1
2
3
4
5
6
7
8
9
10
11

• map和reduce方法

//map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
         let arr = ['1', '20', '-5', '3'];
         //将数组中每个参数乘以二并返回,item属性指每个元素
         arr = arr.map((item)=> item*2);
         console.log(arr);//[2, 40, -10, 6]
//reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
		//arr.reduce(callback,[initialValue(初始执行的值)])
		 let result = arr.reduce((a,b)=>{
            console.log("上一次处理后："+a);
            console.log("当前正在处理："+b);
            return a + b;
        },100);
        console.log(result)
1
2
3
4
5
6
7
8
9
10
11
12
13

输出如下

3.6Promise异步编排

• Promise为什么出现?
  在Promise之前，在js中的异步编程都是采用回调函数和事件的方式，但是这种编程方式在处理复杂业务的情况下，很容易出现callback hell(回调地狱)，使得代码很难被理解和维护。

• Promise是什么?
  　Promise是ES6中的一个内置的对象（实际上是一个构造函数，通过这个构造函数我们可以创建一个Promise对象）, Promise就是改善这种回调地狱的异步编程的解决方案。

• Promise的三种状态
  1.pending[待定]初始状态
  2.fulfilled[实现]操作成功
  3.rejected[被否决]操作失败
  注 : 当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；

• Promise对象的状态改变，只有两种可能：
  从pending变为fulfilled
  从pending变为rejected。
  注 : 这两种情况只要发生，Promise状态就凝固了，不会再变了。

• resolve()与reject()
  resolve() 作用: 将Promise对象的状态从“未完成”变为“成功”在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
  reject() 作用: 将Promise对象的状态从“未完成”变为“失败”，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

• then()
  then()的作用:是为Promise实例添加状态改变时的回调函数。then方法的第一个参数是Resolved(成功)状态的回调函数，第二个参数（可选）是Rejected(失败)状态的回调函数(不建议使用第二个参数我们可以选择catch(),catch()方法返回的还是一个Promise对象，我们可以在后面继续使用then进行链式调用。)。
  --------->.then()返回一个新的Promise实例，所以它可以链式调用
  --------->then()会根据Promise的状态改变结果,选择特定的状态响应(成功或失败回调)函数执行。
  --------->状态响应函数可以返回新的promise，或其他值，不返回值也可以我们可以认为它返回了一个null；
  --------->如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行
  --------->如果返回其他任何值，则会立即执行下一级.then()

• Promise.all()
  方法用于将多个Promise实例包装成一个新的Promise实例，如下所示：
  var p = Promise.all([p1, p2, p3]);
  p的状态由p1,p2,p3决定， 分成下面的两种情况：
  只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
  只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

function promiseClick(){
		let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				var num = Math.ceil(Math.random()*20); //生成1-10的随机数
				console.log('随机数生成的值：',num)
				if(num<=10){
					resolve(num);
				}
				else{
					reject('数字太于10了即将执行失败回调');
				}
			}, 2000);
		   })
		   return p
	   }
 
	promiseClick().then(
		function(data){
			console.log('resolved成功回调');
			console.log('成功回调接受的值：',data);
		}
	)
	.catch(function(reason, data){
		console.log('catch到rejected失败回调');
		console.log('catch失败执行回调抛出失败原因：',reason);
	});	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3.7模块化

• 什么是模块化?
  1.模块可以理解为函数代码块的功能，是封装对象的属性和方法的javascript代码，它可以是某单个文件、变量或者函数。
  2.模块实质上是对业务逻辑分离实现低耦合高内聚，也便于代码管理而不是所有功能代码堆叠在一起，模块真正的魔力所在是仅导出和导入你需要的绑定，而不是将所有的东西都放到一个文件。
  3.理想状态下我们只需要完成自己部分的核心业务逻辑代码，其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可。
• export 导出 与import导入命令
  一个模块就是一个独立的文件。如果想从外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。分为以下几种情况：
  1.在需要导出的hello.js文件中， 使用 export{接口名} 导出变量,常量或函数，接口名就是hello.js的变量名或函数名,对应的导入命令import {接口名} from "导入接口所在文件位置"
  导出命令user.js

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

export {name,age,add}

1
2
3
4
5
6
7
8

导入到main.js

import {name,age,add} from "./user.js"
1

2.在export接口的时候， 也可以使用 export { var1 as num1, var2 as num2};修改导出的接口名字,在导入时直接使用重新定义的接口名

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

export {name as name1,age as age1,add as add1}

1
2
3
4
5
6
7
8

导入到main.js

import {name1,age1,add1} from "./user.js"
1

3.直接在变量或函数声明前面加上export命令可以实现直接导出(书写简易):导入命令同上1.

export const util = {
    sum(a, b) {
        return a + b;
    }
}
1
2
3
4
5

4.不需要知道变量名字（相当于是匿名的）的情况，可以 直接把开发的接口给export。如果一个js模块文件就只有一个功能， 那么就可以使用export default导出。导入时可自定义变量或者函数名
user.js

export default {
    sum(a, b) {
        return a + b;
    }
}
1
2
3
4
5

导入到main.js

import fun1 from "user.js"
1