js--知识点dailyskill-白红宇

JS中使用typeof能得到的哪些类型

何时使用===？何时使用 ==？

JS中有哪些内置函数？

JS变量按照存储方式区分为哪些类型，特点？

如何理解JSON?

window.onload和DOMContentLoaded的区别？

js创建10个《a》标签，点击弹对应序号

实现一个模块加载器，实现类似require的功能

数组随机排序

变量类型

值类型VS引用类型

typeof运算符详解

数据类型

值类型

var a=100var b=aa = 200console.log(b)   //100复制代码

引用类型 //对象，数组，null，函数

var a={age:20}var b=ab.age = 201console.log(a.age)   //201复制代码

typeof运算符

typeof underfined     //undefined   能区分值类型typeof "abc"          //stringtypeof 123            //numbertypeof true           //booleantypeof {}             //Object      不能区分引用类型typeof []             //Objecttypeof null           //Objecttypeof console.log    //Object复制代码

变量计算-强制类型转换

字符串拼接

==运算符

if语句

逻辑运算

100 == "100"            //true0 ==  ''                //truenull == undefined       //true复制代码

var c=''if(c){...}           //''转换后为false复制代码

console.log(10 && 0)          //0console.log('' || 'abc')      //'abc'console.log(!window.abc)      //!underfine//判断一个变量会被当做true或者falsevar a =100console.log(!!a)               //判断一个变量会被当做true或者false复制代码

何时使用===？何时使用 ==？

if(obj.a == null){    //这里相当于obj.a === null || obj.a === undefined    }复制代码

JS中有哪些内置函数？----数据封装类对象

ObjectArrayBooleanNumberStringFunctionDateRegExpError复制代码

JS变量按照存储方式区分为哪些类型，特点？

值类型

引用类型

如何理解JSON?

JSON不过是一个JS对象而已

JSON.stringify({a:10,b:20})       //对象变字符串JSON.parse('{"a":10,"b":20}')     //字符串变对象复制代码

-------------------------------------------------------------------------------

原型和原型链

构造函数

function Foo(name,age){    this.name = name,    this.age = age,    this.class = 'class-1'    //return this             //默认有这行}var f = new Foo('zhangsan',20)复制代码

构造函数-扩展

var a={} 其实是var a = new Object()的语法糖var a=[] 其实是var a = new Array()的语法糖function Foo(){...} 其实是var Foo = new Function(...)的语法糖使用instanceof判断一个函数是否是一个变量的构造函数复制代码

原型规则和示例

所有引用类型（数组、对象、函数），都具有对象特效，可以自由扩展属性。

所有引用类型（数组、对象、函数），都有一个_proto_属性，属性值是一个普通对象

obj.__proto__ === Object.prototype 复制代码

一个对象的属性时，如果他的本身没有，回去他的__proto__(即他的构造函数的prototype)中寻找。

f.hasOwnProperty(item){    }复制代码

instanceof

判断引用类型属于哪个构造函数的方法

f instanceof Foo复制代码

描述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    }}Elem.prototype.on = function(type,fn){    var elem = this.elem    elem.addEventListener(type,fn)}var div1 = new Elem("div1")//console.log(div1.html())console.log(div1.html('hello test div
)div1.on('click',function(){    alert('test add onClickEvent')})div1.html().on('click',function(){...})     // 链式调用复制代码

===============================================

说一下对变量提升的理解

说明this几种不同的使用场景

创建10ge<a>标签，点击的时候弹出来对应的序号

如何理解作用域

实际开发中闭包的应用

执行上下文

范围：一段<script>或者一个函数

全局：变量定义、函数声明

this要在执行时才能确认，定义时无法确认

var a ={    name:'A',    fn:function(){        console.log(this.name)    }}a.fn()                   //this====aa.fn().call({name:'B'})  //this ===B复制代码

作为构造函数执行

作为对象属性执行

作为普通函数执行

call apply bind

作用域

无块级作用域

函数作用域和全局作用域

闭包

函数作为返回值

函数作为参数

创建10ge标签，点击的时候弹出来对应的序号

var ifor(i=0;i<10;i++){    (function(i){        var a = document.createElement('a')        a.innerHTML = i+ <'br'>        a.addEventListener('click',function(e){            e.preventDefault()            alert(i)        })        document.body.appendChild(a)        })(i)}复制代码

实际开发中的用处

function isFirstLoad(){    var _list = []    return function (id){        if(_list.indexOf(id)>=0){            return false        }else{            _list.push(id)            return true        }    }}var firstLoad = isFirstLoad()firstLoad(10)         //truefirstLoad(10)         //falsefirstLoad(20)         //true复制代码

异步---本质缘由：js是单线程

同步和异步的区别是什么？分别举例

一个关于setTimeout的笔试题

前端使用异步的场景

可能发生等待，等待过程想操作，不阻碍线程，异步上

场景：网络请求，时间绑定，定时任务

数组API

forEach（(item,index）=>{ }）

map重新组装

filter过滤

some

every((item,index)=>{ })

sort((a,b)=>{return a-b})

对象

var keyfor(key in obj){    if(obj.hasOwnProperty(key)){        console.log(key,obj[key])    }}复制代码

截取长度一致字符串

var random = Math.random()var random= random + '0000000000'var random = random.slice(0,10)console.log(random)复制代码

能遍历数组和对象的函数

function forEachBoth(obj,fn){    var key    if(obj instanceof Array){        obj.forEach(function(item,index){            fn(index,item)        })    }else{        for(key in obj){            fn(key,obj[key])        }    }}复制代码

property

var p = document.getElementsByTagName('p')[0]

console.log(p.nodeName)

console.log(p.nodeType)

p.setAttribute('data-name','imooc')

DOM

树形数据结构

property是对JS属性的修改

attribute是对html标签的修改

var ua =navigator.userAgent

var isChrome = ua.indexOf('chrome')

console.log(location.href)console.log(location.protocol)       //  'http:'  'https:'console.log(location.host)             // console.log(location.pathname)    //  '/learn/199'console.log(location.search)         //?asdfasdconsole.log(location.hash)            //#mid=100复制代码

事件绑定

编写一个通用的事件监听函数

描述事件冒泡流程

对于一个无线下拉加载的页面，如何给每个图片绑定事件（代理）

通用事件监听函数

//封装bindEvent(elem,type,selector,fn){    if(fn == null){        fn = selector        selector = null    }    elem.addEventListener(type,function(e){        var target        if(selector){            target = e.target            if(target.matches(selector)){                fn.call(target,e)                 //有代理，在这将子元素作为this传入            }        }else{            fn(e)        }    })}...
        
     ...//使用代理var div1= document.getElementByID('div1')bindEvent(btn,'click','a',function(e){            //a是被代理标签    console.log(this.innerHTML)                   //call将a传进来，作为this})复制代码

var a= document.getElementByID('a1')              //不用代理bindEvent(a,'click',function(e){    console.log(a.innerHTML)})复制代码

事件冒泡

var p1 = document.getElementById('p1')var body = doucemnt.bodybindEvent(p1,'click',function(){    e.stopPropatation()//停止向上冒泡    alert('激活')})bindEvent(body,'click',function(e){    alert('取消')})复制代码

代理

var div1 =document.getElementById('div1')div1.addEventListener('click',function(e){    var target = e.target    if(target.NodeName === 'A'){            }})复制代码

ajax

手写一个ajax

var xhr = new XMLHttpRequest()xhr.open("GET","/api",false)xhr.onreadystatechange = function(){    //开始异步执行    if(xhr.readyState ===4){       //4响应内容解析完成，可以再服务端调用了        if(xhr.status ==200){      //执行成功            alert(xhr.responseText)//返回的内容        }    }}xhr.send(null)复制代码

跨域

浏览器有同源策略，不用需ajax访问其他域接口

跨域条件：协议、域名、端口，有一个不同就算跨域

可跨域的三个标签

<img src=xx> //用于打点统计

<link href=xxx> // 可以使用CDN，

<script src=xxx> //可以使用JSONP

跨域实现方式

JSONP

服务器端设置 http header

JSONP实现原理

 //标签可以绕过跨域
    复制代码

存储

cookie、sessionStorage、localStorage区别?

cookie本身用于客户端和服务端通信的，

但他有本地存储的功能

使用document.cookie=...获取和修改

localStorage

容量大

localStorage.setItem(key,value);

localStorage.getItem(key);

window.onload和DOMContentLoaded

window.addEventListener('onload',function(){    //页面的全部资源加载完才会执行，包括图片、视频等})document.addEventListener('DOMContentLoaded',function(){    //DOM渲染完成即可执行，此时图片、视频可能还没有加载完})复制代码

安全性能

XSS跨站请求攻击

XSRF跨站请求伪造

XSS

插入一段<script>，获取cookie，发送到服务器

XSRF

for(let [key,value] fo Object.entries(test)){    console.log([key,value]);}复制代码

深拷贝数组

var cloneObj = function(obj){    var str, newobj = obj.constructor === Array ? [] : {};    if(typeof obj !== 'object'){        return;    } else if(window.JSON){        str = JSON.stringify(obj), //系列化对象        newobj = JSON.parse(str); //还原    } else {        for(var i in obj){            newobj[i] = typeof obj[i] === 'object' ?             cloneObj(obj[i]) : obj[i];         }    }    return newobj;};复制代码