当前位置:   article > 正文

前端基础-01.ES6_es6 walk

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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/131138
推荐阅读
相关标签
  

闽ICP备14008679号