商场项目之前端基础

var和let和const的区别

1. var有作用域，let没有

    {
        var a = 1;
        let b = 1;
    }
    console.log(a);
    console.log(b);//报错未定义

2. let不能重复定义，var可以

    var a = 10;
    var a = 100;
    console.log(a);
    let b = 10;
    let b = 100;//重复定义
    console.log(b);//报错

3. let不能变量提升

console.log(x);
var x = 10；//undefined
console.log(y);
let y = 10;//报错

4. const 定义了后面不能改

reduce和map用法

需要注意的是第一波 没有上一个值，所以直接从索引1开始遍历数组

    let arr = ['1','2','10','-20'];
       arr = arr.map(i=> i*2) //每个值都*2
       console.log(arr);
       arr.reduce((a,b,c)=>{
        // a为上一个值，b为当前值，c为当前值索引，d为该数组
        // 第一波打印 2,4，1，返回4
        // 第二波打印 4,20，2 返回20 （如果没有return，这就该undefined，20,2）
        // 第三波打印 20，-40,3 返回-40 
        console.log(a);
        console.log(b);
        console.log(c);
        return b;
       })

如果在reduce（callback，初始值） 给个初始值，那么就会从数组0开始遍历，前值为给的初始值

    let arr = ['1','2','10','-20'];
       arr = arr.map(i=> i*2) //每个值都*2
       console.log(arr);
       arr.reduce((a,b,c)=>{
        console.log(c);//0,1,2,3
        return b;
       }，2)

Promise的用法

<script >
    $(function(){
        function get_data(url){
            return new Promise((resolve, reject) => {
                $.ajax({
                    url:url,
                    success: function(d){
                        resolve(d);
                    },
                    error: function(e){
                        reject(e);
                    }
                });
             })
      }
      get_data("resouces/user.json") 
        .then((d)=>{
            console.log("用户查询成功, 用户名字：",d.name);
            return get_data(`resouces/info_${d.id}.json`)})
        .then((d)=>{
            console.log("用户地址查询成功, 地址名字：",d.addr);
            return get_data(`resouces/country_${d.id}.json`)})
        .then((d)=>{
            console.log("用户所属国家查询成功, 国家名字：",d.name);})
        .catch((e)=>{
            console.log("查询失败")
        })
    })
      

    </script>

运行结果如下：

如果不使用Promise那么写法势必是嵌套查询，可读性差，代码冗余，使用Promise进行封装明显感觉好多了
用法就是，Promise构造是个箭头函数，里面两个值，一个是成功的revolve，一个是失败的error，而成功与失败的标准可以根据传回数据自己定义
promise对象.then() 是成功后执行，而catch是失败后执行，这两个里面也是箭头函数，参数就是revolve或者error括号里的值，then里面可以return对象，如果return一个promise对象那么就可以接着then，只要有一个catch接着就ok
所以封装的写法得以实现。

在写这个小demo的时候碰到些许问题，第一是我在下面script后面直接加jQuery路径没有引到，导致运行不出来东西，放到头部添加jQuery解决
在一个就是好久不写前端，忘记了在大$(function(){} ) 里面写jQuery的代码
然后就是js拼接字符串不能写“ ”， 得反引号· ·里面用钱花括号去拼

前端不太熟，每次都会碰到很多很多问题