Front-end engineering
菜单
本页目录

ES6

ECMAScript（ES） 是规范、 JavaScript 是 ES 的实现 ES6 的第一个版本 在 2015 年 6 月发布，正式名称是《ECMAScript 2015 标准》（简称 ES2015） ES6 指是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等

let

推荐使用let关键字替代 var关键字声明变量，因为 var存在诸多问题，比如：

越狱

即，变量在其作用域外也会被访问

{
    var a = 1;
    let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined

重复声明

// var 可以声明多次
// let 只能声明一次
var m = 1
var m = 2
let n = 3
// let n = 4
console.log(m) // 2
console.log(n) // Identifier 'n' has already been declared

变量提升

即声明提前，可以理解为在console.log前加入了一个var x;

// var 会变量提升
// let 不存在变量提升
console.log(x); // undefined
var x = 10;
console.log(y); //ReferenceError: y is not defined
let y = 20;

const

常量

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

解构

//====3.1 数组解构
let arr = [1, 2, 3];
// 传统的以下标形式取得元素
// console.log(arr[0])
let [x, y, z] = arr;
console.log(x)
console.log(y)
console.log(z)

//====3.2 对象解构
let person = {
    name: "张三",
    age: 18,
    email: "haha@atguigu.com"
}

// console.log(person.name)
// console.log(person.age)

let {name, age} = person;
console.log(name)
console.log(age)

function haha({name, age,email}) {
    console.log(name)
    console.log(age)
    console.log(email)
}

haha(person)

链判断

// 即如果要访问message对象的firstName的值，如果body不存在或user不存在，那么会直接报错，因此需要对象内容进行判断，
//而常规方法过于繁琐，es6提供了语法糖?如下演示
let message = {
    body: {
        user: {
            firstName: "哈哈"
        }
    }
};
// console.log(message.body.user.firstName)

let content =
    (message && message.body && message.body.user && message.body.user.firstName) || 'default'

// console.log(content)

// 每一步都要判断是否存在
let first = message?.body?.user?.firstName || 'default';
console.log(first)

参数默认值

按照位置传参，不传则为默认值5

function add(a, c, b = 5) {
    return a + b + c;
}

console.log(add(1, 2))

箭头函数

// 函数声明
function print(arg){
console.log(arg)
}
// 函数表达式
let print1 = function(arg){
console.log(arg)
}
// 箭头函数，即将创建方式2的参数部分复制下来再加上=> ，或者可以说=后是参数，=>后是方法体费，单参数的时候可以省略参数括号
let print2 = (arg) => {
  console.log(arg)
}
// 使用箭头函数的时候若方法体只有一句那么可以直接写在箭头后
let print3 = (arg) => console.log(arg)

let sum = (a,b) => {
 let x=a+b;
 console.log(x)
}

模板字符串

使用反引号包裹字符串，则可以再字符串中通过${}的形式使用变量，也可使用传统字符串拼接的形式拼接字符串

let info = `你好，我的名字是：【${name}】，年龄是：【${age}】，邮箱是：【${person.email}】`
console.log(info)

Promise

代表 异步对象，类似Java中的 CompletableFuture Promise 是现代 JavaScript 中异步编程的基础，是一个由异步函数返回的可以向我们指示当前操作所处的状态的对象。在 Promise 返回给调用者的时候，操作往往还没有完成，但 Promise 对象可以让我们操作最终完成时对其进行处理（无论成功还是失败） 首先，Promise 有三种状态： 待定（pending）：初始状态，既没有被兑现，也没有被拒绝。这是调用 fetch() 返回 Promise 时的状态，此时请求还在进行中。 已兑现（fulfilled）：意味着操作成功完成。当 Promise 完成时，它的 then() 处理函数被调用。 已拒绝（rejected）：意味着操作失败。当一个 Promise 失败时，它的 catch() 处理函数被调用。 fetch 是浏览器支持从远程获取数据的一个函数，这个函数返回的就是 Promise 对象

let url = "http:/daddadad.com"
console.log(1)
let promise = fetch(url)
// 响应成功后执行的方法
promise.then( res => {
  console.log("响应数据",res)
}
)
//响应失败后执行的方法
promise.catch(error =>{
  console.log(error)
})
console.log(2)

在这个例子中，log(1)和log(2)是会立即执行的而不会等待promise对象

自定义promise对象

<!-- new Promise((resolve, reject)=>{
    //某段业务
    resolve(data); //成功以后
    reject(err); //失败以后
}) -->

function get(url){
    return new Promise((resolve, reject)=>{
        $.ajax({
            url: url,
            type: "GET",
            success(result) {
                resolve(result); //成功结果
            },
            error(error) {
                reject(error); //失败结果
            }
        });
    })
}

get('aaa').then(resp=>{}).catch(err=>{})

Async 函数

async function 声明创建一个绑定到给定名称的新异步函数。函数体内允许使用 await 关键字，这使得我们可以更简洁地编写基于 promise 的异步代码，并且避免了显式地配置 promise 链的需要。 async 函数是使用async关键字声明的函数。async 函数是 AsyncFunction 构造函数的实例，并且其中允许使用 await 关键字。 async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为，而无需刻意地链式调用 promise。 async 函数 返回的还是 Promise对象 由于使用async指定的异步函数不能指定resolve和reject方法，因此相应成功返回结果，失败则抛出错误即可

async function func1(){
  let x =101;
  if(x%2===00){
  retuen x;
}else{
 throw new Error("x不是偶数")
}
}
func1().then(data => console.log(data)).catch(err=> console.log(err))

await

使用await可以将异步函数中的某些异步操作转为通过操作，因为异步操作返回的promise对象想要获取内容需要使用.then,则可能会造成调用链条很长的情况，编写麻烦，并且阅读性差 使用await关键字后，得到的结果是promise对象解决后实际的值，而不是promise对象

async function fun(){
 let promise1 = await fetch(url);
 let promise2 = await promisse.json();
 console.log('promise2',promise2)
}

模块化

在js中，对某一个类的操作都放在一个js文件中，若想引入其他js文件的内容，则需要使用import 和 export

const user = {
    username: "张三",
    age: 19
}

const isAdult = (age) => {
    if (age > 18) {
        console.log('成年人')
    } else {
        console.log('未成年')
    }
}

// export
export {user,isAdult}

import {user,isAdult} from './lib/user.js'
isAdult(user.age);

// Java 怎么模块化； 1、 druid.jar 2、import 导入类

// JS 模块化； 1、 xxx.js 2、 xxx.js 暴露功能； 3、import 导入 xxx.js 的功能 xxx.js 暴露的功能，别人才能导入

下一篇 Npm