js基础整理

最新推荐文章于 2022-11-23 23:01:54 发布

北街学长

最新推荐文章于 2022-11-23 23:01:54 发布

阅读量321

点赞数

分类专栏：学习文章标签： js

本文链接：https://blog.csdn.net/qq_36790381/article/details/82561428

版权

学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JS基础整理

变量类型
值类型：Number、String、Boolean、undefined
引用类型：对象{}/null、数组[]、函数Function
变量计算-强制类型转换
字符串拼接(无论和什么相加，都变成String类型)
==运算符
if语句
逻辑运算 && || ！！！
内置函数：
Object、Array、Number、String、Boolean、Function、Date、RegExp、Error
Json
js对象
一种数据格式
原型的基本规则
①所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（除了“null”以外）。
②所有引用类型都有一个属性proto(隐式原型)，属性值是一个普通的对象。
③所有函数都有一个prototype属性(显示原型)，属性值也是一个普通对象。
④所有的引用类型（数组、对象、函数），proto（隐式原型）属性值指向它的构造函数的prototype（显示原型）属性值。
⑤当试图得到一个对象（引用类型包括对象、数组、函数）的某个属性时，如果这个对象本身没有这个属性，那么会去它的proto（即它的构造函数的prototype）中寻找。
function fn(){} undefined console.log(fn.prototype) VM95:1 {constructor: ƒ}constructor: ƒ fn()__proto__: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()arguments: (...)caller: (...)length: 0name: "get __proto__"__proto__: ƒ ()apply: ƒ apply()arguments: (...)bind: ƒ bind()call: ƒ call()caller: (...)constructor: ƒ Function()length: 0name: ""toString: ƒ toString()Symbol(Symbol.hasInstance): ƒ [Symbol.hasInstance]()get arguments: ƒ ()set arguments: ƒ ()get caller: ƒ ()set caller: ƒ ()__proto__: Object[[FunctionLocation]]: <unknown>[[Scopes]]: Scopes[0][[Scopes]]: Scopes[0]set __proto__: ƒ __proto__() undefined var obj = {} undefined console.log(obj.__proto__) VM155:1 {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}constructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__() undefined console.log(obj.__proto__===Object.prototype) VM201:1 true undefined
循环对象自身的属性
hasOwnProperty()
原型链
⑤当试图得到一个对象（引用类型包括对象、数组、函数）的某个属性时，
如果这个对象本身没有这个属性，那么会去它的proto（即它的构造函数的prototype）中寻找。
当它的构造函数也没有找到时，会继续往构造函数的构造函数寻找，直至到Object的构造函数
instanceof
用于判断引用类型属于哪个构造函数的方法
描述new一个对象得过程
①创建一个新对象
②this指向这个新对象
③执行代码，即对this赋值
④返回this
一个原型例子

```function Elem(id){
this.elem=document.getElementById(id)
}

Elem.prototype.html = function (val){
var elem = this.elem
if(val){
elem.innerHTML=val
return this
}else{
return elem.innerHTML
}
}
ƒ (val){
var elem = this.elem
if(val){
elem.innerHTML=val
return this
}else{
return elem.innerHTML
}

实际开发闭包的作用

function fn1(){
var list = []
return function fn(num){
if(list.indexof(num) >= 0){
return false
}else{
list.push(num)
return true
}
}

}
var f = fn1();
f(10)
```
//你在list外面根本不可能修改到list的值

异步和单线程
什么是异步
异步不会产生阻塞
何时需要异步
在所有需要等待的情况下都需要异步
异步的使用场景
①定时任务：setTimeout、setInterval
②网络请求:ajax请求、动态加载
③事件绑定
单线程
即将异步的情况放置一边，顺序执行完所有程序，再执行空闲状态程序
日期和math
获取xxxx-xx-xx格式的日期

``` var dt = new Date()
    var year = dt.getFullYear()
    var m



    onth = (dt.getMonth() < 10)?'0'+dt.getMonth():dt.getMonth()
    var date = (dt.getDate() < 10)?'0'+dt.getDate():dt.getDate()
    console.log(year+'-'+month+'-'+Date)
    VM766:5 2018-08-function Date() { [native code] }
    undefined
    console.log(year+'-'+month+'-'+date)
    VM775:1 2018-08-08
获取随机数，要求是长度一致的字符串格式
    var random  = Math.random()
    random = random+'0000000000'
    "0.7090608198947830000000000"
    console.log(random.slice(0,10))
写一个能遍历数组和对象得通用forEach函数
      function forEach(data){
    if(data instanceof Object){
    var key
    for(key in data){
      console.log(key,data[key])
    }
    }
    if(data instanceof Array){
    data.forEach(function(item,index){
        console.log(key)
    })
    }
    }
    undefined
    var obj = {x:100,y:200}
    undefined
    forEach1(obj)
    VM1006:5 x 100
    VM1006:5 y 200
    undefined
    var arr = [1,2,3]
    undefined
    forEach1(arr)
    VM1006:5 0 1
    VM1006:5 1 2
    VM1006:5 2 3
    3VM1006:10 2
    ```

数组API
forEach:遍历所有元素
every:判断所有元素是否都符合条件
some:判断是否至少有一个元素符合条件
sort:排序
map:对元素重新组装，生成新数组
filter:过滤符合条件的元素
DOM操作
DOM本质:将html结构化(浏览器将拿到的html文件结构化成一个浏览器可识别并且js可操作的一个模型)
DOM节点操作
DOM结构操作
新增节点
删除节点
BOM操作
navigator
screen
lacation
history
事件
①编写一个通用的事件监听函数

 ``` function bindEvent(elm,type,selector,fn) {
       if(fn==null){
           fn = selector
           selector == null
       }
       elm.addEventListener(type,function(e){
           var target
           if(selector){
               //使用代理
               target = e.target
               if(target.matches(selector)){
                   fn.call(target,e)
               }

           }else {
               //不使用代理
               fn(e)
           }
       })

   }
   ```

②描述事件冒泡流程
绑定的事件会顺着dom树一层一层向上寻找并响应
③事件代理
代码简洁
减少浏览器压力
ajax
①手动编写一个ajax，不依赖第三方库

```var xhr = new XMLHttpRequest()
xhr.open('get','test.php','false')
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200

){
    console.log(xhr.responseText)
    }
}
xhr.send(null)
```

②状态码说明
readyState
0：未初始化，还没有调用send()
1：载入，正在发送请求
2：载入完成，send方法执行完成
3：交互，正在解析响应内容
4：完成，解析完成，返回客户端
status
2xx：表示成功处理请求
3xx：需要重定向
4xx：客户端请求错误 404
5xx：服务器端错误
③JSONP跨域
使用