04 ES6

参考资料

1. 尚硅谷-前端速通
2. 网道 doc-ES6

ES6 语法规范

• let const

• 解构赋值

• 模板字符串

• 箭头函数 ES6 模块化

• 默认暴露

• 分别暴露

• 统一暴露

• import 、export

• 包管理器

• npm、yarn 或者是 cnpm

• 原型、原型链（重点）

• 数组常用方法

• 过滤数组、加工数组、筛选最值

• axios

• promise

变量声明

let 关键字 推荐使用let关键字，var 存在诸多问题。

• 越域
• 重复声明
• 变量提升

const

链判断

const firstName = message?.body?.user?.firstName || 'default';

参数默认值

//在 ES6 以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
function add(a, b) {
  // 判断 b 是否为空，为空就给默认值 1
  b = b || 1;
  return a + b;
}
// 传一个参数
console.log(add(10));
 
//现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
function add2(a, b = 1) {
  return a + b;
}
 
// 传一个参数
console.log(add2(10));

解构赋值

• 数组解构

let a = 1;
let b = 2;
let c = 3;
 
let [a, b, c] = [1, 2, 3];

• 对象解构 按属性取值

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
 
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

参数默认值

var {x = 3} = {};
x // 3
 
var {x, y = 5} = {x: 1};
x // 1
y // 5
 
var {x: y = 3} = {};
y // 3
 
var {x: y = 3} = {x: 5};
y // 5
 
var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

箭头函数

let sum2 = (a, b) => a + b;

模版字符串

let info = "你好，我的名字是：【"+name+"】，年龄是：【"+age+"】，邮箱是：【】"
console.log(info);
 
# 模板字符串的写法
let info = `你好，我的名字是：${name}，年龄是：${person.age}，邮箱是：${person.email}`
console.log(info);

Primise Api

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // 模拟成功或失败
      if (success) {
        resolve('Data received');
      } else {
        reject('Failed to fetch data');
      }
    }, 2000);
  });
}
 
fetchData()
  .then((data) => {
    console.log(data); // "Data received"
  })
  .catch((error) => {
    console.error(error); // "Failed to fetch data"
  });
 

自定义Promise

new Promise((resolve, reject) => {
	try{
		// 业务操作
		data = 'xxx';
		resolve（data）
	}catch(err){
		reject(err)
	}
})

Async 函数

async function func(){
	try{
		// do something
		return 'data'
	} catch(err) {
		throw err
	}
}

await

async关键字

前端 模块化

方法一

export function list() {  
    console.log('list....')  
}  
  
export function add() {  
    console.log('add....')  
}

//引入  
import {list,add} from "./1.js"  
//调用  
list()  
add()

方法二

// 一个文件里只能有一个默认导出
export default {  
    getList() {  
        console.log('获取数据列表2')  
    },  
    save() {  
        console.log('保存数据2')  
    }  
}

//引入  
import m from "./01.js"  
//调用  
m.getList()  
m.save()