谷粒商城之ES6语法学习

目录

前端技术栈简介

ES6之let、const关键字

ES6之解构、字符串

ES6之函数优化

ES6之对象优化

ES6之map、reduce操作

promise异步处理

ES6之模块化 

---

前端技术栈简介

使用vscode创建新的文件夹 

快捷键：shift+！   -> 快速创建html标签

ES6之let、const关键字

作用：声明变量

1.var声明的变量会越域，let声明的变量不会越域

 <script>
        {
            var a=1;
            let b=1;
        }
        console.log(a); // 1
        console.log(b); // b is not defined
</script>

点击鼠标右键，点击Open with Live Server

按F12打开控制台

2. var可以声明多次，let只能声明一次

var m=1;
var m=2;
let n=6;
console.log(m);
console.log(n);

var m=1;
var m=2;
let n=6;
let n=66;
console.log(m);
console.log(n);

 3.var会变量提升，let不会变量提升

console.log(a);
var a=10;
console.log(b);
let b=20;

const声明的是常量，一旦声明不可更改

const a=99;
a=88;
console.log(a);

ES6之解构、字符串

1.数组解构

以前我们要获取数组中的元素时这样的

let arr =[1,2,3];
let a=arr[0];
let b=arr[1];
let c=arr[2];
console.log(a,b,c);

现在我们可以使用数组解构来简化代码

let arr =[1,2,3];
let [a,b,c]=arr;  //会自动将数组中的元素赋值给变量
console.log(a,b,c);

2. 对象解构

以前我们想要获取对象中的属性需要这样

const Person={
     name:'jason',
     age:18,
     language:['java','js','css']
}
const name=Person.name;
const age=Person.age;
const language=Person.language;
console.log(name,age,language);

现在我们可以使用对象解构

const Person={
      name:'jason',
      age:18,
      language:['java','js','css']
}
const {name,age,language}=Person;
console.log(name,age,language);

还可以给给变量取别名

const Person={
      name:'jason',
      age:18,
      language:['java','js','css']
}
const {name:abc,age,language}=Person;
console.log(abc,age,language);

字符串之常用函数

let str='hello.vue';
console.log(str.startsWith('hello')); //true
console.log(str.endsWith('vue')); //true
console.log(str.includes('hello')); //true
console.log(str.includes('vue')); //true

字符串模板

使用一对``

let str=`<div>
               <span>hello world</span>
         </div>`;
console.log(str);

字符串里面插入变量、表达式、函数 

使用${}

<script>
     let name='jason';
     let age=18;
     let info=`我是${name},今年${age}岁`;
     console.log(info);
</script>

 

 <script>
     function fun(){
         return '这是一个函数';
     }
     let name='jason';
     let age=18;
     let info=`我是${name},今年${age+10}岁,我想说${fun()}`;
     console.log(info);
</script>

 

快捷键：alt+shift+f  快速整理代码格式

ES6之函数优化

1.函数参数默认值设置

在ES6以前我们无法为函数参数设置默认值，只能采用变通写法

function add(a,b) {
     b=b || 1;
     return a+b;
    }
console.log(add(10));

使用ES6新的语法规则

function add(a,b =1) {
      return a+b;
    }
console.log(add(10));

2.不定参数

function print(...vals) {
     console.log(vals.length);
}
print(1,2,3);
print(1,2,3,4,5,6);

3.箭头函数，类比java中lambda表达式

以前声明一个函数

let f1=function (obj){
     console.log(obj);
}
f1(10);

现在声明一个函数

let f1=(obj) => console.log(obj);
f1(10);

let f1=() => console.log('这是一个无参函数');
f1();

let f2=obj => console.log(obj);
f2('666');

let f3=(o1,o2) => {
      let o3=o1+10;
      return o3+o2;
};
console.log(f3(10,20));

const Person={
  name:'jason',
  age:18
};
let f4=function (person){
    console.log(person.name);
}
f4(Person);

let f5=({age}) => console.log(age);  // =>函数与解构一起搭配使用
f5(Person);

ES6之对象优化

获取对象的键、值、键-值

 const person={
      name:'jack',
      age:21,
      language:['java','js','css']
}
console.log(Object.keys(person)); //获取对象的所有key
console.log(Object.values(person)); //获取对象的所有value
console.log(Object.entries(person)); //获取对象的所有map

将对象进行合并成一个新的对象

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

声明对象简写 

以前给对象的属性赋值

const name='jack';
const age=18;
const person={name:name,age:age};
console.log(person);

现在给对象的属性赋值 

const name='jack';
const age=18;
const p1={name,age};  //对象的属性名和变量一致，可以省略:和变量名
console.log(p1);

对象的函数简写

以前

 let person={
       name:'jason',
       set:function (food){
       console.log(this.name+"在吃"+food);
    }
}
person.set("苹果");

现在

let person={
    name:'jason',
    eat:function (food){
    console.log(this.name+"在吃"+food);
    },
    eat2:(food)=> console.log(this.name+"在吃"+food)
}
person.eat("苹果");
person.eat2("香蕉");

名字丢失了， 在箭头函数中使用this调用属性将会失效，解决方案：对象.属性

 eat2:(food)=> console.log(person.name+"在吃"+food)

对象扩展运算符

1.拷贝对象(深拷贝)

let p1={name:'lebron',age:18};
let p2={...p1};
console.log(p2);

2.合并对象

let name={name:'java'};
let age={age:18};
let p={name:'python'};
p={...name,...age};
console.log(p);

ES6之map、reduce操作

类比：java中的lamdba表达式中的map和reduce

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

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

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

reduce(callback,[initialValue])

initialValue:

1.previousValue(上一次调用回调的返回值，或者是提供的初始值)

2.currentValue(数组中当前被处理的元素)

3.index(数组下标的索引)

4.array(调用reduce的数组)

let arr=[1,20,-5,3];
arr=arr.map((item)=>{
    return item*2;
})
console.log(arr);
let result=arr.reduce((a,b)=>{
     console.log("被处理前的数："+a);
     console.log("被处理后的数："+b);
     return a+b;
});
console.log(result);

promise异步处理

以前使用$.ajax进行异步访问

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <script>
        $.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.score);
                            },
                            error(err){
                                console.log(err);
                            }
                        });
                    },
                    error(err){
                        console.log(err);
                    }
                });
            },
            error(err){
                console.log(err);
            }
        });
        
    </script>
</body>

</html>

 现在

let p = new Promise((resolve,reject)=>{
            $.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((obj)=>{
                $.ajax({
                url: `mock/corse_score_${obj.id}.json`,
                success: function(data){
                    console.log(`查询用户成绩成功`,data.score);
                    resolve(data);
                },
                error:function(err){
                    reject(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.score);
        })
        .catch((err)=>{
            console.log(`出现异常`,err);
        });

ES6之模块化 

什么是模块化？类似于java中导包，在js中没有导包的概念，换来的是模块

使用export和import关键字，export：规定模块对外的接口   import：导入其它模块的功能

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

简化 

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

起别名 

 

export default{
    sum(a,b){
        return a+b;
    }
}

let name=`jack`;
let age=18;
function sub(a,b){
    return a-b;
}
export {name,age,sub}

 

import { util } from "./hello";
import { name,age,sub } from "./user";

util.sum(10,20);
console.log(name,age);
sub(21,16);