1.前端技术栈与后端技术栈的类比
image.png
2.ES6是什么
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
由于一些历史原因，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。
ECMAScript是浏览器脚本语言的规范，而各种js语言，如JavaScript则是规范的具体实现，类似于JDBC是标准，各种驱动如mysql则是实现
ES6文档
3. ES6新特性
3.1 let声明变量与var的区别
-var 声明的变量往往会越域
-let声明的变量有严格的局部作用域
{
var a = 1;
let b = 2;
}
console.log(a); // 1
console.log(b);//Uncaught 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);//Uncaught SyntaxError: Identifier 'n' has already been declared
-var 会变量提升
-let 不存在变量提升
console.log(x);//undefined
var x = 10;
console.log(y);//Uncaught ReferenceError: Cannot access 'y' before initialization
let y = 20;
3.2 const声明常量（只读变量）
const a = 1;
a = 0;//Uncaught TypeError: Assignment to constant variable.
3.3 结构表达式
数组结构
//数组结构
let arr = [1,2,3];
// 传统赋值方式
let a = arr[0];
let b = arr[1];
let c = arr[2];
// es6
let [a,b,c] = arr;
console.log(a,b,c);
对象结构
const person = {
name: "abc",
age:21,
language: ["java","js","css"]
}
//传统方式
const name = person.name;
const age = person.age;
const language = person.language;
//es6新特性
const {name,age,language} = person
// 给name重命名
const {name:abc,age,language} = person
console.log(name,age,language);
3.4 字符串扩展
A. 扩展几个API
image.png
B. 字符串模板
image.png
字符串插入变量和表达式，变量名写在${}中
image.png
3.5 函数
A. 给参数设置默认值
//es6以前，无法给一个函数参数设置默认值，只能采用变通写法
function add(a,b){
b = b ||1;
return a+b;
}
//只传一个参数
console.log(add(10));// 11
//es6的写法，直接给参数写上默认值，没传就会自动使用默认值
function add2(a,b=1){
return a+b;
}
console.log(add2(20));// 21
B. 给函数设置不定参数
// 不定参数
function fun(...values){
console.log(values.length);
}
console.log(fun(1,2));//2
console.log(fun(1,2,3));//3
C. 箭头函数
//箭头函数
//es6以前的声明方法
var print = function (obj){
console.log(obj);
}
// es6
var print = obj => console.log(obj);
print("hello");
//------------------------------
// 多参数
//es6以前
var sum = function(a,b){
return a+b;
}
//es6
var sum2 = (a,b) => a+b;
console.log(sum2(1,2));
//es6以前
var sum3 = function(a,b){
c = a+b;
return a+c;
}
//es6
var sum4 = (a,b) => {
c = a+b;
return a+c;
};
console.log(sum4(1,2));
D. 箭头函数+解构
// 箭头函数+解构
const person = {
name: "abc",
age:21,
language: ["java","js","css"]
}
// 常规方式
var fun1 = (param) => console.log("hello,"+param.name);
// 箭头函数+解构方式
var fun2 = ({name}) => console.log("hello,"+name);
fun1(person);
fun2(person);
3.6 对象优化
A. 新增许多新方法
image.png
B. 声明对象简写
const age = 23;
const name = "zhangshan";
//传统声明对象方式
const person = {name:name,age:age}
//es6
const person1 = {name,age}
C. 对象的函数属性简介
image.png
D.对象扩展运算符
image.png
3.7 map、reduce方法
A. map方法
image.png
B. reduce方法
image.png
image.png
3.8 Promise
image.png
image.png
使用Promise优化
image.png
image.png
3.9模块化
A. 概念
image.png
B. import导入
image.png
C. export导出
image.png