js--知识点dailyskill

于 2018-04-19 15:56:28 发布
阅读量84 收藏
点赞数
文章标签： json 前端 数据结构与算法 ViewUI
原文链接：https://juejin.im/post/5ad85daa6fb9a045e955ced7
版权
  1. JS中使用typeof能得到的哪些类型
  2. 何时使用===？  何时使用 ==？
  3. JS中有哪些内置函数？
  4. JS变量按照存储方式区分为哪些类型，特点？
  5. 如何理解JSON?
  6. window.onload和DOMContentLoaded的区别？
  7. js创建10个《a》标签，点击弹对应序号
  8. 实现一个模块加载器，实现类似require的功能
  9. 数组随机排序

变量类型

值类型VS引用类型

typeof运算符详解

数据类型

值类型

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

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

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

typeof运算符

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

变量计算-强制类型转换

  • 字符串拼接
  • ==运算符
  • if语句
  • 逻辑运算


100 == "100"            //true
0 ==  ''                //true
null == undefined       //true复制代码


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


console.log(10 && 0)          //0
console.log('' || 'abc')      //'abc'
console.log(!window.abc)      //!underfine

//判断一个变量会被当做true或者false
var a =100
console.log(!!a)               //判断一个变量会被当做true或者false复制代码


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

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

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

Object
Array
Boolean
Number
String
Function
Date
RegExp
Error
复制代码

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('<p>hello test div</p>)

div1.on('click',function(){
    alert('test add onClickEvent')
})
div1.html().on('click',function(){...})     // 链式调用复制代码

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

  1. 说一下对变量提升的理解
  2. 说明this几种不同的使用场景
  3. 创建10ge<a>标签，点击的时候弹出来对应的序号
  4. 如何理解作用域
  5. 实际开发中闭包的应用

执行上下文

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

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


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

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

  • 作为构造函数执行
  • 作为对象属性执行
  • 作为普通函数执行
  • call  apply  bind


作用域

  • 无块级作用域
  • 函数作用域和全局作用域

闭包

  • 函数作为返回值
  • 函数作为参数


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

var i
for(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)         //true
firstLoad(10)         //false
firstLoad(20)         //true

复制代码

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

  • 同步和异步的区别是什么？分别举例
  • 一个关于setTimeout的笔试题
  • 前端使用异步的场景

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

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


数组API

  • forEach（(item,index）=>{   }）
  • map重新组装
  • filter过滤
  • some
  • every((item,index)=>{  })
  • sort((a,b)=>{return a-b})

对象

var key
for(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)         //?asdfasd
console.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)
        }
    })
}
...
<div id="div1">
    <a href="#"></a>
...
//使用代理
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.body
bindEvent(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实现原理

<script>
window.callback = function(data){//重写callback方法，拿到对应数据
//这里是我们跨域得到信息
console.log(data)
}
</script>
<script src="http://coding.m.imooc.com/api.js"></script> //标签可以绕过跨域
<!--以上返回一个call({...})方法-->复制代码

存储

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;
};复制代码


weixin_33854644
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值