前端学习笔记

140 阅读1分钟

看看这两天学了啥

5-6

迭代方法

数组对象都可以用

 let arr = [
           {
               name:"Simba",
               age:20
           },{
               name:"Ace",
               age:30
           },{
               name:"Roger",
               age:40
           }
       ]
    //    遍历
    arr.forEach(r=>{
        r.gender = "男"
    })
    // 通过旧数组映射出新数组
    console.log(arr.map(r=>"姓名:"+r.name));
    console.log(arr.map(r=>r.age));

    // 过滤筛选
    console.log(arr.filter(r=>r.age>=30));

    // 是否存在
    console.log(arr.some(r => r.age ===20));
    // 是否都是
    console.log(arr.every(r => r.gender ==="男"));

    // 统计操作
    console.log(arr.reduce((total,current) => total + current.age,0));


对象转换为数组

let obj = {
        length:30
    }
    // 对象转换为数组
    console.log(Array.from(obj));

批量生产随机数据(还有mock.js)

let arr2 = Array.from(obj).map((r,i)=> ({
        id:i+1,
        name: "用户"+i,
        age:Math.floor(Math.random()*50),
        gender:Math.round(Math.random())?"男":"女"
    }))

解构赋值

// 解构赋值
    let obj2= {
        a:10,
        b:10
    }


    let {a,b} = obj2
    console.log(a,b); //可以拿出来单独使用

数组也可以用

let arr3 = [1,2,3,4]
    let [c,d,e,f]  = arr3
    console.log(d,e);
    
    //不需要的元素就空着
    let [,g,h] =arr3 
    console.log(g,h);

展开运算符

// 展开运算符 ...
    console.log(arr3);//(4) [1, 2, 3, 4]
    console.log(...arr3);//1 2 3 4
    
    let obj3 = {
        ...obj2
        ,c:20
    }
        
    console.log(obj3); //{a: 10, b: 10, c: 20}

5-7

ajax

原生js

let ajax = new XMLHttpRequest()

        ajax.open("GET","a.json",true)
        ajax.send()
        ajax.onreadystatechange  = ()=>{
            if (ajax.readyState === 4) {
                if (ajax.status  === 200) {
                    console.log(
                        JSON.parse(ajax.response)
                        );
                    
                    
                }
                
            }
        }

jq

$.ajax({
            type: "GET",
            url: "a.json",
            data: "data",
            dataType: "json",
            success: function (data) {
                console.log(data);
                
            }
        });//使用前要引入jq

不引入jq(jq里大概也是这么写的)

let $ = {
            get(url, success) {
                this.ajax({
                    url,
                    success
                })
            },
            ajax({ type, url, async, success }) {
                let ajax = new XMLHttpRequest()
                ajax.open(type || 'GET', url, async || true)
                ajax.send()
                ajax.onreadystatechange = () => {
                    if (ajax.readyState === 4) {
                        if (ajax.status === 200) {
                            success(JSON.parse(ajax.response))
                        }
                    }
                }
            }
        }

        $.get("/a.json", function (data) {
            console.log('打印', data);
        })

git

国内就用的gitee

使用流程

安装软件(next……next……)

在指定位置右键,选择菜单中的git bash here

打开界面输入指令

git config --global user.name xxxx 用户名

git config --global user.email "xxxxx@xx.com" 邮箱

git config --global credential.helper manager 记住用户

= = 以上3条不用重复操作

git clone xxxxxxxxxxxxxx 克隆仓库

把下载下来的文件夹拖入vscode

进行些许更改

左侧第三个标签里,输入框填写备注(必填),按勾号进行提交(确认),右边的菜单进行推送(发布)

初次使用要输入gitee账号密码