js基础复习

js基础数据类型有哪些

        string   number   boolean   bull   undefind    symblo (ES6)

数组的常用方法

        改变数组长度： 

                push  pop   unshift   shift   splice

        返回新数组： 

               concat   findIndex   slice    map    sort

        其他： 

                include   

JS有哪些内置对象

        Array     

        String :  trim   /   concat  /  split  /  slice  /  substr

        Math  :  round  /   random

        RegExp 

        Boolean  

        Date :  getDay /  getMonth  /  getDate  /    getFullYear

        Number    

JS中操作DOM

        通过ID获取dom元素对象

                document.getElementById('id')

        通过class获取元素对象

                document.getElementByClassName('h')

        通过标签名称获取元素对象

                document.getElementByTagName('p')

        通过选择器获取元素

                document.querySelector('')

JS常用鼠标事件

        onclick   鼠标点击

        onfocus   获得鼠标焦点

        onmouseover   鼠标经过

        onmouseout     鼠标离开

        onblur   失去焦点

BOM浏览器对象模型

        window 

                window.onload      setTimeout     setInterval       sessionstorage     localStorage     

        history

                go() 前进后退    back            forward

        navigator     获取浏览器、操作系统的一些信息

面向对象编程

        创建一个类，并实例化

class  Preson {
    constructor(name, age) {
        this.name = name
        this.age = age

    }
    stu() {
        return console.log("name:" + this.name + "age:" + this.age)
    }

}

var p = new Preson('张三', '25')

p.stu()

        类的继承

class  Preson {
    constructor(name, age) {
        this.name = name
        this.age = age

    }

    // 静态属性
    static pro() {
        console.log('我是静态方法：pro')
    }

    stu() {
        return console.log("name:" + this.name + "age:" + this.age)
    }

}

var p = new Preson('张三', '25')
//p.pro()   // 报错，pro is not function
Preson.pro()

p.stu()

// 继承
class Son extends Preson {

}

var son1 = new Son('李四', 26)
son1.stu()

this问题

        在JS中，函数是可以在不同环境下执行的，this的目的就是为了获取函数执行的当前环境。

        1.单独使用this，指向全局对象

        2.事件绑定中使用this，指向这个绑定事件的对象

        3.对象方法中调用this，指向这个方法所属对象

        4.构造函数中调用this，指向new出来的对象

        5.定时器中使用this，指向全局对象

        6.只执行函数中使用this，指向全局对象

        如何改变this指向

                通过call 、apply、bind改变this指向

                call 和apply的区别就是后面参数不同，call可以传多个参数，apply是传一个数组。

                bind返回一个新的函数，要手动执行才可以。call 、apply 会立即执行。

var p1 = {
    a : 10,
    stu : function() {
        console.log(this.a)
    }
}
var p2 = {
    a : 20

}

//p1.stu()
p1.stu.call(p2)
p1.stu.apply(p2)
var p3 = p1.stu.bind(p2)
p3()

// 结果   
// 20  20  20

闭包

        官方对闭包的解释：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

        我的理解是在函数外部能读取函数内部变量的表达式（通常是一个函数）称之为闭包。

function p() {
    var a=10
    function sp() {
        return console.log(a)
    }
    return sp
}
var foo = p()

foo()

        闭包的作用：  将成员变量私有化，只能让外部间接的访问这个变量。让数据持久化，不被回收。

正则表达式

        test      测试是否符合正则条件     replace 替换

var ts = /[0-9]+/
var nub = '123'

console.log(ts.test(nub))   //  true
console.log(nub.replace(/2+/i, 4))   // 143

        正则表达式修饰符

                i     对大小写不敏感   

                g    全局匹配

                m   多行匹配

                ^     匹配开头

                $    匹配结尾

                *     重复0次或多次

                +    重复一次或多次

                ？  重复0次或1次

                {n}  重复n次

                {n, }   重复N次或更多次

                {n,m}   重复n到m次  

                 [ ]   标识一系列的字符串可以选择，只要只要匹配其中一个即可

                ()   提高优先级

                \d   同[0-9]

                \w   同[A-Za-z0-9]

                \s    匹配空格，制表符，换行符 同[\t \f\r\n\v ]

原型

ES6

        let   const

                let ： 块级作用域、不存在变量提升、必须先定义再使用。

                const:  定义常量，不允许修改值，声明时就必须赋值。

                              如果是复杂数据类型可以修改引用地址，但不允许修改地址的值。

        解构赋值

// 变量解构赋值
var [a,b,c] = [1,2,3]
console.log(a,b,c)  // 1,2,3

// 对象解构赋值
var pro = {
    name: '张三',
    age: 25
}
var {name,age} = pro
console.log(name,age)  // 张三  25

        模板字符串

var a = '张三'
console.log(`my name is ${a}`)

        函数的拓展

// 1.可以在参数中给定默认值
function sa(x=1,y=1) {
    console.log(x,y)
}

sa(2)   // 2,1

//  2.rest参数
function hb(...values) {
    console.log(values)

}
hb(1,2,3,4,5)   //  [1,2,3,4,5]  将多个参数放到一个数组中

function hb1(x, ...values) {
    console.log(x,values)
}
hb1(1,2,3,4,5)  // 1,[2,3,4,5,]   将后面的参数放到数组中

//  3.箭头函数, 注意箭头函数没有this,在箭头函数中使用this,this执行箭头函数定义时的环境。
var s = (a,b)=>{
    console.log(a+b)
}
s(1,2)  // 3
// 当只有一个参数时，可以省略小括号，如果只有一个表达式，可以省略大括号
var s1 = a => console.log(a)
s1('ha')

        数组的拓展

//  1.拓展运算符
var arr1 = [1,2,3]
console.log(...arr1)   // 1 2 3

//  结合rest运算符
var arr2 = [1]
function push(array,...values) {
    array.push(...values)
}
push(arr2,2,3,4,5,6)
console.log(arr2)   // [ 1, 2, 3, 4, 5, 6 ]

//  2.新增的方法
//   includes  返回一个布尔值，判断给定参数是否在数组中存在
var arr3 = [1,2,3,4]
console.log(arr3.includes(3))  // true

        Set  /   Map

// set数据结构类似数组，但成员是唯一的，没有重复值
var set = new Set()
set.add(1)
set.add(1)
set.add(2)
console.log(set.has(2))  // true 判断是否存在
console.log(set.size)  // 2 成员个数
set.delete(2)  // 删除

// 用Set配合拓展运算符来做数组去重
var newarr = [...new Set([1,2,3,3,3,4,4,5,2,1])]
console.log(newarr)  // [1,2,3,4,5]

// set遍历
for(let i of newarr.keys()) {
    console.log(i)  // 0 1 2 3 4  输出key
}

for(let k of newarr) {
    console.log(k)  // 1 2 3 4 5 输出值
}

// map 键值对的集合，可以是任何数据类型
var map = new Map()
map.set('name', '张三')
map.set('age', '25')
console.log(map.get('name'))  // 张三
console.log(map.has('name')) //true  校验key
for(let m1 of map.values()) {
    console.log(m1)
}

        promise

// promise
const p = new Promise((resolve,reject)=>{
    if(true) {
        resolve('成功了')
    }else {
        reject('失败了')
    }
    
})

p.then(resolve=>{
    console.log('我是成功的回调：' + resolve)  
}, reject=>{
    console.log('我是失败的回调：' + reject)
}).catch(err=>{
    console.log('我是错误的回调' + err)
})  // 我是成功的回调: 成功了 
.finally(()=> console.log('我是最终的回调,不管成功失败，我都会执行'))

// promise.all  执行多个promise
// const p = new Promise([p1,p2,p3])
//p的状态由p1、p2、p3决定，分成两种情况。
//（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
//（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

// 用es6中的promise封装微信的request
export const request=(params)=>{
  const app = getApp()
  const url = app.globalData.LocalHost
  return new Promise((resolve,reject)=>{
    wx.request({
      ...params,
      url: url + params.url,
      success: (result)=>{
        resolve(result)
      },
      fail: (error)=>{
        reject(error)
      }
    })
  })
}

        async/await

const s1 = async function aa() {
    await console.log('哈哈')
}

跨域问题

        jsonp跨域

<!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="mydiv">
        <button id="btn">点击</button>
    </div>

    <script>
        var btn = document.getElementById('btn')
        btn.onclick = function () {
            // 创建一个script标签
            var script = document.createElement('script')
            // 通过script的src不受同源策略约束来跨域获取数据，限制只能get请求
            script.src = "https://api.xxx.com&count=1&callback=handleResponse"
            document.body.insertBefore(script, document.body.firstChild);
        }
        
        function handleResponse(responese) {
            console.log(responese)
        }

    </script>
</body>
</html>

        cors跨域

/**
    例如express中引入cors中间件，设置Access-Control-Allow-Origin来设置跨域
 */

router.all('*', function(req, res, next) {
    //设置允许跨域的域名，*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin", "*");
    //允许跨域的的header类型
    res.header("Access-Control-Allow-Headers", "content-type");
    //跨域允许的请求方式
    res.header("Access-Control-Allow-Methods", "POST,GET");
    if (req.method.toLowerCase() == "options") res.sendStatus(200);
    //让options尝试请求快速结束
    else next();
})