【day4】谷粒商城-前端相关（不全，没认真看）

本文链接：https://blog.youkuaiyun.com/qq_15046309/article/details/128880925

ES6引入了let和const关键字改进变量声明，解构赋值简化对象和数组处理，还有字符串模板、箭头函数、Promise解决回调地狱问题，以及模块化和Vue框架的基础应用。文章还提到了npm安装Vue和使用v-html指令避免插值表达式的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

es6

es6是一个标准，而js是es标准的具体实现。

使用let关键字声明变量，let关键字更加的严谨，类似于Java的声明方式让js变得不那么奇怪。建议以后都使用let
const声明常量。const a =1 ，类似于C++
解构表达式：
```
let arr=[1,2,3];
const[a,b,c]=arr; //这样a,b,c就被对应赋值了。
```
对象解构，注意使用的是大括号

const{name,age}=object 自动取出object对象中的name，age属性
字符串拓展，类似于与java的字符串了
字符串模板，使用来包括``字符串模板。可能是为了避免转义？
字符串插入变量和表达式，变量名写在了${js表达式（变量，变量运算，函数）}

函数优化

不定参数，类似与Java的不定参数 …args
函数的参数有默认值了，写法类似于python。

箭头函数

var pri=obj(参数) =>console.log(obj)
等价于
fun pri(obj)
{
    console.log(obj);
}
多参数版本是
var sum2=(a,b)=>a+b;

回调地狱

就是在ajax在success中再次发送其他的请求，这就是很乱的嵌套查询，也成为回调地狱。es6为了解决这个问题，提出了promise功能。

promise 可以封装异步操作，将之前的嵌套操作，更改为了顺序操作。

let p = new Promise( (resolve,reject)=>{
	//1. 异步操作
   $.ajax({
   url:"mooc/user.json",
   success:function(data){
       resolve(data);
   },
   error:function(err){
       reject(err);
   }
   });
});

p.then((obj)=>{
//成功，对应的是resolve
    在这里可以继续发送ajax请求。
}).catch((err)=>{
    //失败了，对应的是 reject
})；

//封装一下
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("url").then((data)=>{
    return get("url2")； //让下一个查
}).then((data)=>
       {
    console.log("第二个")
}).catch((err)=>{
    //出错了，在这里处理
})

模块化

类似于Java的导包， export 将指定的模块到处去，import 将模块导进来。
```
export{一切js东西都可以导出，name,age}

import {} from "./hello.js"
```

Vue

看的是Vue2*的东西，不是最新的。但是想到效率第一，还是先看这个吧。

npm init -y
npm install vue@2.6.10

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

<body>
    <div id ='app'>
        <h1>{{name}}，非常帅</h1>
    </div>

    <script src="./dist/vue.js "></script>
    <script>
        let vm =new Vue({
            el:"#app",
            data:{name:"张三"}
        });

    </script>
</body>

</html>