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);  // 2
            console.log(n);  // Identifier 'n' has already been declared
        }

加上 let n=4;

变量提升的含义：

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

var和let变量提升 

  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的变量初始化 

 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")); // true
            console.log(str.endsWith(".vue")); // true
            console.log(str.includes("e")); // true
            console.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);      // 2
        fun(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 和 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}
    

声明对象的简写形式 

// 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，一个是失败 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 模块化

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