ES6 语法

let/const

var存在变量提升，污染全局变量等缺陷，因此建议全面拥抱 let/const;

• 变量使用 let
• 常量使用 const

//越域
{
    var a = 1
    let b = 1
}
console.log(a) // 1
console.log(b) // b is not defined

//重复声明
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

链判断

let message = null
//读取 message.body.user.firstName 安全写法 老代码
const firstName = (message 
    && message.body 
    && message.body.user 
    && message.body.user.name) || 'default'

//链判断语法写法
const firstName = message?.body?.user?.name || 'default'

参数默认值

//如果参数 b 为空就取默认值 1
function add(a,b = 1) {
    return a + b;
}

变量的解构赋值

//数组的解构
const F4 = ["本田","川崎","铃木","雅马哈"]
let [b,c,l,y] = F4
console.log(b) //本田
console.log(c) //川崎
console.log(l)  //铃木
console.log(y) //雅马哈

//对象的解构
const cat = {
    name : "小橘",
    bite : function () {
        console.log("我会咬人")
    }
}
let {bite} = cat
bite() //我会咬人

模板字符串

单引号声明的字符串中不能出现换行符，反引号声明的模板字符串可以换行，并且可以包含表达式。

let str = `<ul>
                  <li>沈腾</li>
                  <li>玛丽</li>
           </ul>`

// 原来的字符串拼接方式
const age = 18;
let introduce = '大家好，我今年' + age + '岁了'
//使用模板字符串方式 （必须使用反引号）
let newIntroduce = `大家好，我今年${age}岁了`

简化对象写法

const cat = {
    name,
    bite(){

    }
}

箭头函数

//声明一个函数
// let fn = function () {
//  
// }
let fn = (a,b) => {
return a + b
}

• this 是静态的，this 始终指向函数声明时所在作用域下的 this 的值
• 不能作为构造函数去构造实例对象
• 不能使用 arguments 变量
• 箭头函数的简写
  • 当形参只有一个时可以省略小括号’
  • 当代码体只有一条语句时，可以省略花括号和 return

箭头函数适合与 this 无关的函数回调，如定时器、数组的方法等、

rest

rest 参数用来获取函数的实参，用来代替 arguments

function fn(a,b,...args)

扩展运算符

//1、数组的合并
const kuaizi = ['王太利' , '肖央']
const fenghuang = ['曾毅','凌华']
const arr =  [...kuaizi,...fenghuang]
console.log(arr) //['王太利', '肖央', '曾毅', '凌华']

//2、数组克隆
const master = ['叔本华','尼采','加缪']
const copy = [...master]
console.log(copy) //['叔本华', '尼采', '加缪']

//3、将伪数组转化为真数组
const divs = document.querySelectorAll('div')
const realArr = [...divs]
console.log(realArr)

Promise

代表 异步对象，类似Java中的 CompletableFuture

Promise 是现代 JavaScript 中异步编程的基础，是一个由异步函数返回的可以向我们指示当前操作所处的状态的对象。

在 Promise 返回给调用者的时候，操作往往还没有完成，但 Promise 对象可以让我们操作最终完成时对其进行处理（无论成功还是失败）

//fetch 是浏览器支持从远程获取数据的一个函数，这个函数返回的就是 Promise 对象
const fetchPromise = fetch(
    "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json"
);

console.log(fetchPromise);

fetchPromise.then((response) => {
    /**
     * promise 有三种状态
     *      待定： pending 初始状态，表示请求还在进行中
     *      已兑现： fulfilled 意味着操作完成，Promise 完成时，它的 then() 被调用
     *      已拒绝: rejected 意味着操作失败， 它的 catch() 被调用
     * 
     */
    console.log(`已收到响应：${response.status}`);
    const jsonPromise = response.json();
    jsonPromise.then((json) => {
        console.log(json[0].name)
    })
});

console.log("已发送请求……");

Promise对象

const promise = new Promise((resolve, reject) => {
// 执行异步操作
if (/* 异步操作成功 */) {
      resolve(value);// 调用 resolve，代表 Promise 将返回成功的结果
    } else {
      reject(error);// 调用 reject，代表 Promise 会返回失败结果
    }
});

示例：

let get = function (url, data) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: url,
                type: "GET",
                data: data,
                success(result) {
                    resolve(result);
                },
                error(error) {
                    reject(error);
                }
            });
        })
    }

Async 函数

async 函数声明创建一个绑定到给定名称的新异步函数。函数体内允许使用 await 关键字，这使得我们可以更简洁地编写基于 promise 的异步代码

async function fetchProducts() {
  try {
    // 在这一行之后，我们的函数将等待 `fetch()` 调用完成
    // 调用 `fetch()` 将返回一个“响应”或抛出一个错误
    const response = await fetch(
      "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
    );
    if (!response.ok) {
      throw new Error(`HTTP 请求错误：${response.status}`);
    }
    // 在这一行之后，我们的函数将等待 `response.json()` 的调用完成
    // `response.json()` 调用将返回 JSON 对象或抛出一个错误
    const json = await response.json();
    console.log(json[0].name);
  } catch (error) {
    console.error(`无法获取产品列表：${error}`);
  }
}

fetchProducts();

模块化

将 JavaScript 程序拆分为可按需导入的单独模块的机制。

• 在 js 文件中定义对象

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

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

// 对外暴露 
export {user,isAdult}

• 其他地方按需导入

// 所有的功能不用写在一个JS中
import {user,isAdult} from './libs/user.js'


alert("当前用户："+user.username)

isAdult(user.age);