谷粒商城–前端基础–es6–笔记三

1.let声明变量

	是否有局部作用域	是否多次声明	是否变量提升
let	是	否	否
var	否	是	是

		//var 声明的变量往往会越域
        //let 声明的变量有严格局部作用域
        {
    
    
            var a = 1;
            let b = 2;
        }
        console.log(a);  // 1
        console.log(b);  // 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)  // Identifier 'n' has already been declared

		// var 会变量提升
        // let 不存在变量提升
        console.log(x);  // undefined
        var x = 10;
        console.log(y);   //ReferenceError: y is not defined
        let y = 20;

2.const 声明常量（只读变量）

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

3.解构表达式

1.数组解构

		//原来数取值操作
		// let a = arr[0];
        // let b = arr[1];
        // let c = arr[2];		
		//数组解构
        let arr = [1,2,3];
        let [a,b,c] = arr;

        console.log(a,b,c)

结果:

2.对象解构

		//初始化对象用来取值
		const person = {
    
    
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

		//原来对象取值操作
        //const name = person.name;
        //const age = person.age;
        //const language = person.language;
		//对象解构
        //扩展： 如果想要将 name 的值赋值给其他变量， 可以如下,abc 是新的变量名
		const {
    
     name: abc, age, language } = person;

        console.log(abc, age, language)

结果:

4.字符串扩展

1.几个新的api

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

		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

2…字符串模板

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

		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 表达式。
		function fun() {
    
    
            return "这是一个函数"
        }

        let info = `我是${
      
      abc}，今年${
      
      age + 10}了, 我想说： ${
      
      fun()}`;
        console.log(info);

结果:

5.函数优化

1.函数参数设置默认值

		//在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
        function add(a, b) {
    
    
            // 判断b是否为空，为空就给默认值1
            b = b || 1;
            return a + b;
        }
        // 传一个参数
        console.log(add(10));


        //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
        function add2(a, b = 1) {
    
    
            return a + b;
        }
        console.log(add2(20));

结果:

2.不定参数

不定参数用来表示不确定参数个数，形如， ...变量名，由…加上一个具名参数标识符组成。具名参数只能放在参数列表的最后，并且有且只有一个不定参数

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

结果:

3.箭头函数

单参数,功能代码代码为一行(大括号只是可以省略不写,加上也没错)

   		//以前声明一个方法
        // var print = function (obj) {
    
    
        //     console.log(obj);
        // }
        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)
        }

        //箭头函数+解构
        var hello2 = ({
     
     name}) => console.log("hello," +name);//从person中解构出name
        hello2(person);//此处传的person,参数需要的person.name

结果:

6.对象优化

1.新增的 API

-keys(obj)：获取对象的所有 key 形成的数组
- values(obj)：获取对象的所有 value 形成的数组
- entries(obj)：获取对象的所有 key 和 value 形成的二维数组。格式： [[k1,v1],[k2,v2],...]
- assign(dest, ...src) ：将多个 src 对象的值拷贝到 dest 中。（第一层为深拷贝，第二层为浅
拷贝）

		const person = {
    
    
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
		//keys(obj)
        console.log(Object.keys(person));//["name", "age", "language"]
		//values(obj)
        console.log(Object.values(person));//["jack", 21, Array(3)]
		//entries(obj)
        console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]

 		const target = {
    
     a: 1 };
        const source1 = {
    
     b: 2 };
        const source2 = {
    
     c: 3 };

        //{a:1,b:2,c:3}
        Object.assign(target, source1, source2);

        console.log(target);//{a:1,b:2,c:3}

结果:

2.声明对象简写

		const age = 23
        const name = "张三"
        //之前写法
        //const person1 = { age: age, name: name }
        
		// ES6： 属性名和属性值变量名一样， 可以省略
        const person2 = {
    
     age, name }
        console.log(person2);

结果:

3.对象函数属性简写

		let person3 = {
    
    
            name: "jack",
            // 以前：
            eat: function (food) {
    
    
                console.log(this.name + "在吃" + food);
            },
            //箭头函数this不能使用，对象.属性
            //箭头函数版： 这里拿不到 this
            eat2: food => console.log(person3.name + "在吃" + food),
            //类似于java写法,以后普遍用这个
            eat3(food) {
    
    
                console.log(this.name + "在吃" + food);
            }
        }
        
        person3.eat("香蕉");

        person3.eat2("苹果")

        person3.eat3("橘子");

结果:

4.对象拓展运算符

拓展运算符... 用于取出参数对象所有可遍历属性然后拷贝到当前对象。

1.拷贝对象（深拷贝）

		let p1 = {
    
     name: "Amy", age: 15 }
        let someone = {
    
     ...p1 }
        console.log(someone)  //{name: "Amy", age: 15}

2.合并对象

        let age = {
    
     age: 15 }
        let name = {
    
     name: "Amy" }
        let person2 = {
    
     ...age, ...name } //如果两个对象的字段名重复， 后面对象字段值会覆盖前面对象的字段值
        console.log(person2) //{age: 15, name: "Amy"}

7.map 和 reduce

数组中新增了 map 和 reduce 方法 .

1.map方法

map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

		let arr = ['1', '20', '-5', '3'];
		arr = arr.map(item=> item*2);
        console.log(arr);

结果:对数组中的所有元素乘2操作并且返回一个新的数组

2.reduce方法

reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，

语法:arr.reduce(callback,[initialValue])

callback （执行数组中每个值的函数，包含四个参数）

previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
currentValue （数组中当前被处理的元素）
index （当前元素在数组中的索引）
array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

		let arr=[2, 40, -10, 6]
        let result = arr.reduce((a,b)=>{
    
    
            console.log("上一次处理后："+a);
            console.log("当前正在处理："+b);
            return a + b;
        },100);
        console.log(result)

结果:有四个元素,循环4次.

第一次:初始值我们赋值100,所以上一次处理后的值为100,正在处理第一个元素2,得到result102
第二次:上一次处理后的值为102,正在处理第二个元素40,得到result142
第三次:上一次处理后的值为142,正在处理第三个元素-10,得到result132
第四次:上一次处理后的值为132,正在处理第四个元素6,得到result138,得到最终结果138并返回

8.Promise

Promise 是为了解决嵌套请求,造成的回调地狱

		$.ajax({
    
    
            url: "mock/user.json",
            success(data) {
    
    
                console.log("查询用户：", data);
                $.ajax({
    
    
                    url: `mock/user_corse_${
      
      data.id}.json`,
                    success(data) {
    
    
                        console.log("查询到课程：", data);
                        $.ajax({
    
    
                            url: `mock/corse_score_${
      
      data.id}.json`,
                            success(data) {
    
    
                                console.log("查询到分数：", data);
                            },
                            error(error) {
    
    
                                console.log("出现异常了：" + error);
                            }
                        });
                    },
                    error(error) {
    
    
                        console.log("出现异常了：" + error);
                    }
                });
            },
            error(error) {
    
    
                console.log("出现异常了：" + error);
            }
        });

1.Promise 语法

		const promise = new Promise(function (resolve, reject) {
    
    
            // 执行异步操作
            if (/* 异步操作成功 */) {
    
    
                resolve(value);// 调用 resolve， 代表 Promise 将返回成功的结果
            } else {
    
    
                reject(error);// 调用 reject， 代表 Promise 会返回失败结果
            }
        });

使用箭头函数可以简写为：

		 const promise = new Promise((resolve, reject) => {
    
    
            // 执行异步操作
            if (/* 异步操作成功 */) {
    
    
                resolve(value);// 调用 resolve， 代表 Promise 将返回成功的结果
            } else {
    
    
                reject(error);// 调用 reject， 代表 Promise 会返回失败结果
            }
        });

2.处理异步结果

如果我们想要等待异步执行完成，做一些事情，我们可以通过 promise 的 then 方法来实现。

如果想要处理 promise 异步执行失败的事件，还可以跟上 catch：

        promise.then(function (value) {
    
    
        	// 异步执行成功后的回调
        }).catch(function (error) {
    
    
        	// 异步执行失败后的回调
        })

3.Promise 改造以前嵌套方式

		new Promise((resolve, reject) => {
    
    
            $.ajax({
    
    
                url: "mock/user.json",
                success(data) {
    
    
                    console.log("查询用户： ", data);
                    resolve(data.id);
                },
                error(error) {
    
    
                    console.log("出现异常了： " + error);
                }
            });
        }).then((userId) => {
    
    
            return new Promise((resolve, reject) => {
    
    
                $.ajax({
    
    
                    url: `mock/user_corse_${
      
      userId}.json`, success(data) {
    
    
                        console.log("查询到课程： ", data);
                        resolve(data.id);
                    },
                    error(error) {
    
    
                        console.log("出现异常了： " + error);
                    }
                });
            });
        }).then((corseId) => {
    
    
            console.log(corseId);
            $.ajax({
    
    
                url: `mock/corse_score_${
      
      corseId}.json`,
                success(data) {
    
    
                    console.log("查询到分数： ", data);
                },
                error(error) {
    
    
                    console.log("出现异常了： " + error);
                }
            });
        });

4.优化处理

promise 封装成通用方法，如下：封装了一个通用的 get 请求方法；

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

9.模块化

1.什么是模块化

模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。而 JS 中没有包的概念，换来的是模块。
模块功能主要由两个命令构成： export和import。

export命令用于规定模块的对外接口。
import命令用于导入其他模块提供的功能。

2.export&import

export不仅可以导出对象，一切 JS 变量都可以导出。比如： 基本类型变量、 函数、 数组、对象。

对象导出:

普通写法
明确指定了导出的变量名，这样其它人在导入使用时就必须准确写出变量名，否则就会出错。

//============export=========
//导出单个值
export const util = {
    
    
    sum(a, b) {
    
    
        return a + b;
    }
}
export {
    
    util}
//当要导出多个值时， 还可以简写。 
var name = "jack"
var age = 21
function add(a,b){
    
    
    return a + b;
}
export {
    
    name,age,add}

//============import=========
import {
    
    name,age,add} from "./user.js"

简写
js 提供了default关键字，可以对导出的变量名进行省略

//============export=========
export default {
    
    
    sum(a, b) {
    
    
        return a + b;
    }
}
//============export=========
// 当使用者导入时， 可以任意起名字
import abc from "./hello.js"