1.ES6简介
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 。
另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等。
2.ES6的基本使用案例
2.1 Let变量定义
var和let的作用域
javascript
function test1() {
// var 声明的变量往往会越域
// let 声明的变量有严格局部作用域
{
var a = 1;
let b = 2;
}
console.log(a); // 1
// console.log(b); // ReferenceError: b is not defined
}执行结果：
如果打印b
var和let声明变量
javascript
function test1_1() {
// 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
}
加上 let n=4;
变量提升的含义：
在 JavaScript 中，变量提升是指变量声明会被提升到它们所在的函数作用域（使用
var声明的变量）或全局作用域（在函数外使用var声明的变量）的顶部。这意味着，无论你在函数中的何处声明变量，在代码执行之前，变量的声明会被移到函数或全局作用域的最开始处。
var和let变量提升
javascript
function test2() {
// var 会变量提升
// let 不存在变量提升
console.log(x); // undefined
var x = 10;
console.log(y); // ReferenceError: y is not defined
let y = 20;
}
var变量的执行流程：
var x
console.log(x)
x=10
const的变量初始化
javascript
function test3() {
// 1. 声明之后不允许改变
// 2. 一旦声明必须初始化，否则会报错
const a = 1;
a = 3; // Uncaught TypeError: Assignment to constant variable.
}
2.2 结构表达式
数组解构
javascript
function test1() {
// 数组解构
let arr = [1, 2, 3];
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
let [a, b, c] = arr;
console.log(a, b, c);
}
对象解构
javascript
function test2() {
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
};
// const name = person.name;
// const age = person.age;
// const language = person.language;
// 对象解构
const { name: abc, age, language } = person;
console.log(abc, age, language);
}
字符串扩展
javascript
function test3() {
// 4、字符串扩展
let str = "hello.vue";
console.log(str.startsWith("hello")); // true
console.log(str.endsWith(".vue")); // true
console.log(str.includes("e")); // true
console.log(str.includes("hello")); // true
}
字符串中插入变量和表达式
javascript
function fun() {
return "这是一个函数";
}
javascript
function test4() {
// 字符串模板
let ss = `<div>
<span>hello world</span>
</div>`;
console.log(ss);
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
};
// 对象解构
const { name: abc, age, language } = person;
// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let info = `我是${abc}，今年${age + 10}了, 我想说：${fun()}`;
console.log(info);
}
2.3 函数优化
javascript
function add2(a, b = 1) {
return a + b;
}
console.log(add2(20));
//调用 add2 函数，并将 20 作为参数传递给 a。由于没有为 b 提供值，b 将使用默认值 1。
javascript
// 2）、可变参数
function fun(...values) {
console.log(values.length);
}
fun(1, 2); // 2
fun(1, 2, 3, 4); // 4
箭头函数
javascript
// 3）、箭头函数
//单个参数
// 传统函数声明方式定义一个函数
//传统方式的内部逻辑：定义一个接受单个参数 obj 的匿名函数，然后将这个函数赋值给变量 print。
var print = function (obj) {
console.log(obj);
};
print("hello");
// 使用箭头函数重新定义 print 函数
// 采用箭头（=>）语法来定义函数，这是 ES6 引入的新特性。它可以更简洁地表达函数。
var print = obj => console.log(obj);
print("hello");
//两个参数
var sum = function (a, b) {
c = a + b;
return a + c;
};
var sum2 = (a, b) => a + b;
console.log(sum2(11, 12));
var sum3 = (a, b) => {
c = a + b;
return a + c;
};
console.log(sum3(10, 20));
输出对象的属性
javascript
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
};
function hello(person) {
console.log("hello," + person.name);
}
hello(person);
箭头函数+解构
javascript
// 箭头函数+解构
var hello2 = ({ name }) => console.log("hello," + name);
hello2(person);
2.4 对象优化
打印对象
javascript
// 创建一个名为 person 的对象，包含 name、age 和 language 属性
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
};
// 打印 person 对象的键名数组
console.log(Object.keys(person)); //["name", "age", "language"]
// 打印 person 对象的值数组
console.log(Object.values(person)); //["jack", 21, ['java', 'js', 'css']]
// 打印 person 对象的键值对数组
console.log(Object.entries(person)); //[["name", "jack"], ["age", 21], ["language", ['java', 'js', 'css']]]
合并对象的属性
javascript
// 创建三个对象 target、source1 和 source2
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
// 使用 Object.assign 将 source1 和 source2 的属性合并到 target 对象中
Object.assign(target, source1, source2);
// 打印合并后的 target 对象
console.log(target); //{a: 1, b: 2, c: 3}
声明对象的简写形式
javascript
// 2）、声明对象简写
const age = 23;
const name = "张三";
// 传统的对象声明方式，属性名和变量名相同
const person1 = { age: age, name: name };
// 简洁的对象声明方式，属性名和变量名相同时可直接使用变量名
const person2 = { age, name };
console.log(person2);
对象函数属性的简写
javascript
// 3）、对象的函数属性简写
let person3 = {
name: "jack",
// 传统的函数属性声明方式
eat: function (food) {
console.log(this.name + "在吃" + food);
},
// 箭头函数作为对象属性，this 不绑定到对象，可能导致问题
eat2: food => console.log(person3.name + "在吃" + food),
// 简洁的函数属性声明方式，this 绑定到对象
eat3(food) {
console.log(this.name + "在吃" + food);
}
};
// 调用对象的 eat 方法
person3.eat("香蕉");
// 调用对象的 eat2 方法
person3.eat2("苹果");
// 调用对象的 eat3 方法
person3.eat3("橘子");
拷贝对象
javascript
// 1、拷贝对象（深拷贝）
let p1 = { name: "Amy", age: 15 };
let someone = {...p1 };
console.log(someone); //{name: "Amy", age: 15}
拷贝对象的方式
浅拷贝
浅拷贝会创建一个新对象，新对象的属性会复制原始对象的属性。但如果原始对象的属性是引用类型（如对象或数组），那么新对象和原始对象会共享这些引用类型的属性，即它们指向内存中的同一个对象。
- 使用扩展运算符（
...）扩展运算符可以将一个对象的所有可枚举属性展开到另一个对象中。
- 使用
Object.assign()方法
Object.assign()方法用于将一个或多个源对象的所有可枚举属性复制到目标对象，返回目标对象。深拷贝
深拷贝会递归地复制对象及其所有嵌套的对象和数组，创建一个完全独立的新对象，新对象和原始对象在内存中是完全分离的，修改其中一个对象不会影响另一个对象。
- 使用
JSON.parse()和JSON.stringify()这是一种简单的实现深拷贝的方法，但有一些局限性，例如它不能处理函数、
Symbol类型的属性、Date对象、RegExp对象等
- 自定义递归函数实现深拷贝
通过编写自定义的递归函数，可以处理更复杂的对象结构，包括函数、
Date对象、RegExp对象等。
合并对象
javascript
// 2、合并对象
let age1 = { age: 15 };
let name1 = { name: "Amy" };
let p2 = { name: "zhangsan" };
p2 = {...age1,...name1 };
console.log(p2);
2.5 Map 和Reduce
map方法
javascript
// 数组中新增了 map 和 reduce 方法。
// map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
let arr = ['1', '20', '-5', '3'];
arr = arr.map((item) => {
return item * 2;
});
console.log(arr);
arr = arr.map(item => item * 2);
console.log(arr);
reduce方法
javascript
// arr.reduce(callback,[initialValue])
/**
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）
*/
let result = arr.reduce((a, b) => {
console.log("上一次处理后：" + a);
console.log("当前正在处理：" + b);
return a + b;
}, 100);
console.log(result);
2.6 promise
javascript
<script>
// 定义两个参数一个是 ajax 返回成功数据传递 resolve，一个是失败 reject
let p = new Promise((resolve, reject) => {
// 1、异步操作
$.ajax({
url: "mock/user.json",
success: function (data) {
console.log("查询用户成功:", data);
resolve(data);
},
error: function (err) {
reject(err);
}
});
});
p.then((obj) => {
return new Promise((resolve, reject) => {
$.ajax({
url: `mock/user_corse_${obj.id}.json`,
success: function (data) {
console.log("查询用户课程成功:", data);
resolve(data);
},
error: function (err) {
reject(err);
}
});
});
}).then((data) => {
console.log("上一步的结果", data);
$.ajax({
url: `mock/corse_score_${data.id}.json`,
success: function (data) {
console.log("查询课程得分成功:", data);
},
error: function (err) {
}
});
});
function get(url, data) {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: data,
success: function (data) {
resolve(data);
},
error: function (err) {
reject(err);
}
});
});
}
get("mock/user.json")
.then((data) => {
console.log("用户查询成功~~~:", data);
return get(`mock/user_corse_${data.id}.json`);
})
.then((data) => {
console.log("课程查询成功~~~:", data);
return get(`mock/corse_score_${data.id}.json`);
})
.then((data) => {
console.log("课程成绩查询成功~~~:", data);
})
.catch((err) => {
console.log("出现异常", err);
});
</script>2.7 模块化
javascript
export const util = {
sum(a, b) {
return a + b;
}
}
export default {
sum(a, b) {
return a + b;
}
}
// export {util}
// export不仅可以导出对象，一切 JS 变量都可以导出。比如：基本类型变量、函数、数组、对象。
javascript
var name = "jack";
var age = 21;
function add(a, b) {
return a + b;
}
export { name, age, add };
javascript
import abc from "./hello.js";
import { name, add } from "./use.js";
abc.sum(1, 2);
console.log(name);
add(1, 3);
