ECMAScript 6语法

1.ES6简介

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等。

ES6语法整理 - 新成 - 博客园

ES6 教程 | 菜鸟教程

2.ES6的基本使用案例

2.1 Let变量定义

var和let的作用域

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声明变量

function test1_1() {// var 可以声明多次// let 只能声明一次var m = 1;var m = 2;let n = 3;// let n = 4;console.log(m);  // 2console.log(n);  // Identifier 'n' has already been declared}

加上 let n=4;

变量提升的含义：

在 JavaScript 中，变量提升是指变量声明会被提升到它们所在的函数作用域（使用 var 声明的变量）或全局作用域（在函数外使用 var 声明的变量）的顶部。这意味着，无论你在函数中的何处声明变量，在代码执行之前，变量的声明会被移到函数或全局作用域的最开始处。

var和let变量提升

  function test2() {// var 会变量提升// let 不存在变量提升console.log(x);  // undefinedvar x = 10;console.log(y);  // ReferenceError: y is not definedlet y = 20;}

var变量的执行流程：

var x

console.log(x)

x=10

const的变量初始化

 function test3() {// 1. 声明之后不允许改变// 2. 一旦声明必须初始化，否则会报错const a = 1;a = 3;  // Uncaught TypeError: Assignment to constant variable.}

2.2 结构表达式

数组解构

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);}

对象解构

 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);}

字符串扩展

 function test3() {// 4、字符串扩展let str = "hello.vue";console.log(str.startsWith("hello")); // trueconsole.log(str.endsWith(".vue")); // trueconsole.log(str.includes("e")); // trueconsole.log(str.includes("hello")); // true}

字符串中插入变量和表达式

 function fun() {return "这是一个函数";}

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 函数优化

 function add2(a, b = 1) {return a + b;}console.log(add2(20));
//调用 add2 函数，并将 20 作为参数传递给 a。由于没有为 b 提供值，b 将使用默认值 1。

        // 2）、可变参数function fun(...values) {console.log(values.length);}fun(1, 2);      // 2fun(1, 2, 3, 4);  // 4

箭头函数

 // 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));

输出对象的属性

 const person = {name: "jack",age: 21,language: ['java', 'js', 'css']};function hello(person) {console.log("hello," + person.name);}hello(person);

箭头函数+解构

   // 箭头函数+解构var hello2 = ({ name }) => console.log("hello," + name);hello2(person);

2.4 对象优化

打印对象

 // 创建一个名为 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']]]

合并对象的属性

 // 创建三个对象 target、source1 和 source2const 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}

声明对象的简写形式

// 2）、声明对象简写const age = 23;const name = "张三";// 传统的对象声明方式，属性名和变量名相同const person1 = { age: age, name: name };// 简洁的对象声明方式，属性名和变量名相同时可直接使用变量名const person2 = { age, name };console.log(person2);

对象函数属性的简写

// 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("橘子");

拷贝对象

  // 1、拷贝对象（深拷贝）let p1 = { name: "Amy", age: 15 };let someone = {...p1 };console.log(someone);  //{name: "Amy", age: 15}

拷贝对象的方式

浅拷贝

浅拷贝会创建一个新对象，新对象的属性会复制原始对象的属性。但如果原始对象的属性是引用类型（如对象或数组），那么新对象和原始对象会共享这些引用类型的属性，即它们指向内存中的同一个对象。

1. 使用扩展运算符（...）

扩展运算符可以将一个对象的所有可枚举属性展开到另一个对象中。

2. 使用 Object.assign() 方法

Object.assign() 方法用于将一个或多个源对象的所有可枚举属性复制到目标对象，返回目标对象。

深拷贝

深拷贝会递归地复制对象及其所有嵌套的对象和数组，创建一个完全独立的新对象，新对象和原始对象在内存中是完全分离的，修改其中一个对象不会影响另一个对象。

1. 使用 JSON.parse() 和 JSON.stringify()

这是一种简单的实现深拷贝的方法，但有一些局限性，例如它不能处理函数、Symbol 类型的属性、Date 对象、RegExp 对象等

2. 自定义递归函数实现深拷贝

通过编写自定义的递归函数，可以处理更复杂的对象结构，包括函数、Date 对象、RegExp 对象等。

合并对象

 // 2、合并对象let age1 = { age: 15 };let name1 = { name: "Amy" };let p2 = { name: "zhangsan" };p2 = {...age1,...name1 }; console.log(p2);

2.5 Map 和Reduce

map方法

// 数组中新增了 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方法

// 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

<script>// 定义两个参数一个是 ajax 返回成功数据传递 resolve，一个是失败 rejectlet 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 模块化

export const util = {sum(a, b) {return a + b;}
}export default {sum(a, b) {return a + b;}
}
// export {util}// export不仅可以导出对象，一切 JS 变量都可以导出。比如：基本类型变量、函数、数组、对象。

var name = "jack";
var age = 21;
function add(a, b) {return a + b;
}export { name, age, add };

import abc from "./hello.js";
import { name, add } from "./use.js";abc.sum(1, 2);
console.log(name);
add(1, 3);