本文为个人学习笔记整理，仅供交流参考，非专业教学资料，内容请自行甄别

---

一、let与var

  let与var是定义变量的两种方式。一般推荐使用前者，主要是考虑到以下的这些因素：

1.1、越狱问题

{var a = 10;let b = 20;
}
console.log(a);
console.log(b);

  这段代码的运行结果：

  a和b的作用域都应该是在大括号中的，而使用var定义的a变量，作用域超出了大括号。

1.2、变量的重复声明

var a = 1;
var a = 2;
var a = 3;
console.log(a)

  这段代码的运行结果，前两次赋值的a被覆盖了。

// 报错
let b = 4;
let b = 5;
console.log(b)

  这段代码的运行结果，let声明的同一个变量不能重复赋值

1.3、变量提升问题

console.log(a);
var a = 10;

  这段代码的运行结果，打印出的a为空：

console.log(b);
let b = 2;

  这段代码的运行结果，报错，因为使用let声明的变量，在打印时还没有进行赋值操作

二、解构

  解构分为数组解构，对象解构和方法解构

2.1、数组解构

let arr = [1,2,3];//如果需要获取数组中的某一个元素，常规写法
console.log(arr[0]);//解构
let [x,y,z] = arr;
console.log(x)
console.log(y)
console.log(z)

2.2、对象解构

let person = {name:"zhangsan",age:18,email:"2458677367@gmail.com"
}//获取对象中的某个属性，常规写法
console.log(person.name)
console.log(person.age)
console.log(person.email)//将对象解构
let {name,age}=person;
console.log(name)
console.log(age)

2.3、方法解构

//方法解构
function test({name,age}){console.log(name)console.log(age)
}//传入对象
test(person)

三、链判断

  我定义一个这样的对象：

let message = {body:{user:{name:'John',}}
};

  常规判空的写法，如果对象结构层级复杂，那么判空相对也会很复杂

let result = (message && message.body && message.body.user && message.body.user.name) || "default";
console.log(result)

  es6的链判断：

let result0 = message?.body?.user?.name || "default";
console.log(result0);

四、参数默认值

  假设我定义了一个方法，需要接收a和b两个参数，但是在调用时只传入了一个参数：

function test(a,b){// b = b || 1return a + b;
}console.log(test(1));

  会报错，因为1需要和空值做运算。

  传统的给参数默认值，可以是：

function test(a,b){b = b || 1return a + b;
}

  而es6规范，支持在函数的参数定义上，给予默认值：

function test1(a,b = 5){return a + b;
}console.log(test1(1));

  如果用户传递了值，则按照用户传递的为准：

function test1(a,b = 5){return a + b;
}console.log(test1(1,10));

  注意，默认值只能给函数中的最后一个参数设置。

五、箭头函数

  箭头函数就相当于JAVA中的lambda表达式，是函数式编程的体现：

//箭头函数
//传统做法
function print(arg){console.log(arg);
}print(2);//箭头函数
let print1 = arg => console.log(arg);
print1(3);

六、模板字符串

  如果需要进行字符串动态拼接，传统方式：

let arg1 = "1926";
let arg2 = "1848";
let info = "测试参数1:["+arg1+"],测试参数2:["+arg2+"]"console.log(info);

  采用es6的模板字符串，需要将""换成``，并且使用${}的方式取值。

let info1 = `测试参数1:[${arg1}],测试参数2:[${arg2}]`
console.log(info1);

七、异步操作

  在es6中，promise代表异步操作，并且封装了异步操作的结果：

//promise
//是js中的异步操作
console.log("start")
let promise = fetch("https://jsonplaceholder.typicode.com/posts/1")
//无需等待上一步操作的结果
console.log("finish")//promise操作成功之后
promise.then(success=>{console.log("success");
});
//promise操作失败之后
promise.catch(err=>{console.log("fail:" + err);
});

八、Async

  async也是将函数转换为异步的一种方式，如果需要将某个函数进行异步处理，可以使用自己封装promise的方式：

// 异步方式1
function test2(arg0){return new Promise((resolve,reject)=>{if (arg0 % 2 === 0){resolve(arg0)}else {reject("arg0不是偶数")}})
}//获取promise正确与错误的结果
test2(100).then(data=>console.log(data)).catch(error=>console.log(error));

  也可以直接在function前加入async关键字，被async关键字修饰的function，返回的依旧是一个promise对象。在处理异常时，最好的方式是直接使用throw new Error关键字进行抛出，否则async并不知道是then还是catch接收到的异常。

//异步方式2 async
async function test3(arg0){if (arg0 % 2 === 0){return arg0}else {// return "arg0不是偶数"throw new Error("arg0不是偶数")}
}//如果使用async 出现了异常但是没有抛出，async并不知道是then还是catch接收到的
test3(101).then(data=>console.log("then接收到" + data)).catch(error=>console.log("catch接收到" + error));

九、Await

  await是异步转同步的一种方式。还是以之前的fetch异步获取数据为例，首先fetch得到的是一个promise对象，需要通过then，catch进行处理。在将结果使用.json进行转换时，得到的又是另一个promise对象，依旧要进行then，catch的处理。

//读取网页数据案例，两个异步操作
function getFile() {let urlResult = fetch("https://jsonplaceholder.typicode.com/posts/1");urlResult.then((res) => {let urlResJson = res.json();urlResJson.then((res) => {console.log(res)})}).catch((err) => {console.log(err)})
}getFile()

  而使用await关键字，则是将promise的异步操作转为同步：

async function getFile1() {let urlResult = await fetch("https://jsonplaceholder.typicode.com/posts/1");let urlResJson = await urlResult.json();console.log(urlResJson)
}getFile1()

十、模块化

  如果一个js文件，需要导入另一个js文件中的内容，可以通过import和export关键字实现：
  user.js

const user = {username :"zhangsan",age:18
}const isAdult = (age) =>{if (age > 18){console.log("成年人")}else {console.log("未成年人")}
}//导出用户实体和方法
export {user,isAdult
}

  main.js

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

  如果在html中引入，则需要加上type="module"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试模块化</title><script src="lib/module/main.js" type="module"></script>
</head>