【前端JS】ES6的几种新特性

前端项目技术栈： js语言 || es6、7、8等新特性 || 框架 JQuery 、Vue、 React || 工具 Webstorm 、vscode || 项目构建 webpack || 依赖管理 npm

ES6

是 JavaScript 语言的下一代标准，每一年都会发布一个新版本。意思就是 ES 是浏览器脚本语言的规范，JavaScript 是具体实现，其具有如下几个特性：

let

let 不会逾域，var 会逾域
let 不能多次声明，var 可以多次声明
let 不存在变量提升，var 存在变量提升

        {
            var a = 1;
            let b = 2;
        }
        console.log(a);
        console.log(b);

扩展： const —— 用于声明常量，不能改变

解构表达式

       // 1. 数组解构
         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);

        // 2. 对象解构
        const person = {
            name : "waniqng",
            age : 20,
            language : ["java", "js", "vue"]
        }

		// 寻常写法
        // const name = person.name;
        // const age = person.age;
        // const language = person.language;

		// 使用解构表达式的写法
        const {name, age, language} = person;

        console.log(name, age, language);
        // 对象解构用法二： 将 name 改名为 abc
        // const {name : abc, age, language} = person;

对字符串的扩展

        // 字符串 API 的扩展
        let str = "hello, wanqing";
        let age = 20;
        console.log(str.startsWith("hello"));
        console.log(str.endsWith("qing"));
        console.log(str.includes("wanqing"));
        console.log(str.includes("hello"));

        // 字符串模板
        let ss = `<div>
            <span></span>
            </div>
        `
        console.log(ss);

        // 字符串插值
        let info = `我是${str}, 我要加油！`;
        console.log(info)

        // 字符串中插入表达式
        let info2 = `我是${str}, 我${age + 1}岁了！`;

        // 字符串中插入方法
        let info3 = `我是方法返回值， ${fun()}`;

        console.log(info2)

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

        console.log(info3)

函数优化

            // ES6 之前写法 —— 若 b 为null, 则默认值为 1
            function add(a,b){
                b = b | 1;
                return a + b;
            }
            console.log(add(10));

            // 1. ES6 之后，自己赋值一个默认值
            function add2(a, b=1) {
                return a + b;
            }
            console.log(add2(20));
            
            // 2. 不定参数
            function fun(...values){
                console.log(values.length)
            }
            fun(1, 2);
            fun(1, 2, 3);

            // 3. 箭头函数
            var print = obj => console.log(obj);

            print("hello")

            var addAB = (a, b) => a + b;

            console.log(addAB(1, 2))

            var sum3 = (a, b) => {
                c = a + b;
                return a + c;
            }

            console.log(sum3(10, 20));

            const person = {
                name: "wangqing",
                love: "java"
            }
            function hello(person) {
                console.log("hello" + person.name)
                console.log(person.name + "like" + person.love)
            }

            hello(person);

            var hello2 = ({name, love}) => {
                console.log("hello" + name)
                console.log(name + "like" + love)
            }
            hello2(person);

对象优化

            const person = {
                name: "wangqing",
                love: "java"
            }

            // 获取当前对象中所有属性
            Object.keys(person)
            // 获取当前对象所有属性的值
            Object.values(person)
            // 获取当前对象所有键值对 
            Object.entries(person)

            // assign 用于对象的合并
            const target = {a : 1};
            const source1 = {b : 2};
            const source2 = {c : 3};
            Object.assign(target, source1, source2);
            console.log(target);

            // 声明对象的简写方式
            const age = 20;
            const name = "wangqing"
            const person2 = { age, name}
            console.log(person2)

            // 对象函数的简写
            let person3 = {
                name : "wanqing",

                like: function(love){
                    console.log( this.name + " love" + love );
                },

                // 注意，箭头函数 this 不能获取到，要使用对象名.属性名
                like2: love => {
                    console.log( this.name + " love" + love );
                } ,
                // 简写写法 3
                like3(love){
                    console.log( this.name + " love" + love );
                }
            }

            person3.like("打代码");
            person3.like2("打代码")
            person3.like3("打代码")

            // 对象的扩展运算符

            // 1. 拷贝对象 深拷贝
            let p1 = {name: "wanqing" , age : 20}
            let someone = {...p1} // 将 p1 中的内容拷贝给 someone

            console.log(someone)


            // 2. 合并对象
            let age1 = {age : 20};
            let name2 = {name: "wanqing"}
            let p2 = {...age1, ...name2}
            console.log(p2); // 若是 p2 中之前已经含有 age 和 name 的值，使用新值覆盖原来的值

map - reduce 方法

        // ES6 为数组中新增了 map 和 reduce 方法
        // map —— 接收一个函数，将数组中所有值用这个函数处理后返回
        let arr = [1, 20, 30];
        // arr = arr.map((item) => {
        //     return item*2;
        // })
        // 更简洁的写法
        arr = arr.map(item => item*2)
        console.log(arr)

        // reduce —— 为数组中每一个元素执行回调函数
        // 传入一个回调函数，我们这里里传入一个箭头函数为例子
        // 回调函数其参数为： 上一次处理后的值（调用回调函数返回的值）， 当前正常处理的值， 当前函数在数组中的索引， 调用 reduce 的数组
        let res = arr.reduce((a, b)=>{
            console.log("上一次处理后变为" + a);
            console.log("当前正在处理" + b)
            return a + b;
        }, 100) // 可以指定初始值

        console.log(res)

promise

        console.log("合理处理嵌套请求")
        // 查出当前用户信息
        // 根据 id 查询当前用户的课程
        // 更加课程 id 得到当前用户的成绩
        $.ajax({
            url : "mock/user.json",
            success: function(data) {
                console.log(data)
                // 查询课程
                    // 查询课程成功，查询成绩
                        // —— 嵌套查询非常凌乱 ~~
            },
            error: function(error){
                console.log("失败")
            }
        })

        // promise 可以封装异步操作
        let p = new Promise((resovle, reject)=>{
            console.log("进入")
            // 异步操作
            $.ajax({
                url : "mock/user.json",
                success: function(data) {
                    console.log("查询用户成功", data)
                    resovle(data)
                },
                error: function(error){
                    reject(error)
                    console.log("失败")
                }
            })
        });

        // promise 操作成功
        p.then((obj) => {

            return new Promise((resovle, reject)=>{
                    $.ajax({
                    url : `mock/user_course_${obj.id}.json`,
                    success: function(data) {
                        console.log("查询用户课程成功", data)
                        resovle(data)
                    },
                    error: function(error){
                        reject(error)
                    }
                })
            });

        }).catch((error)=>{

        }).then((data)=>{
            console.log("上一步的结果" + data);
            $.ajax({
                url : `mock/user_score_${obj.id}.json`,
                success: function(data) {
                    console.log("查询用户课程成绩成功", data)
                    resovle(data)
                },
                error: function(error){
                    reject(error)
                }
            })
        })

模块化
模块化就是将代码进行拆分，可以随意导入和导出需要用的代码。

需要导出给其他模块用的代码

const util =  {
    sum(a, b) {
        return a + b;
    }
}

// export 可以导出一切类型
export {util}

// 写法二
export const util2 =  {
    sum(a, b) {
        return a + b;
    }
}

// 使得导入时可以随意起名字
export default {
    sum(a, b) {
        return a + b;
    }
}

var name = "waniqng"
var love = "js"

export{name, love}

需要导入其他模块的代码

import util from "./hello.js"
import {name, love} from "./user.js"

util.sum(1, 2);
console.log(name);
console.log(love)

尾注：所有的不自信，所有的痛苦，所有的失望，都是因为技术不够强，我热爱我所学的，不后悔走上这条路，我也一定会坚持走下去，与君共勉

【前端JS】ES6的几种新特性

ES6

悦读