js知识点

何时使用==和(强制类型转换)

if（obj.a==null）{}
//相当于
obj.a===null||obj.a===undefined

typeof，null和undefined

console.log(typeof NULL) // undefined
console.log(typeof null) //object

js中的内置函数

object、array、boolean、number、string、function、data、reyexp、error

js按存储方式区分变量类型

值类型、引用类型

如何理解json

js对象:对象—>字符串 json.stringify({a:10,b:20})
数据格式： 字符串—>对象 json.parse(’{“a”:10,“b”:20}’)

如何准确判断一个变量是数组对象

arr instanceof Array //true
typeof arr //object
instanceof :用于判断引用类型属于哪个构造函数的方法。arr的_proto_一层层往上找，能否对应到Array.prototype
typeof ：只能区分值类型（undefined、string、number、boolean）、引用类型（object、function）

描述new一个对象的过程

1. 创建一个新对象
2. this指向这个新对象
3. 执行代码，即对this赋值
4. 返回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){
	val elem = this.elem
	elem.addEventListener(type,fn)
}
var div1 = new Elem('div1')
consele.log(div1.html())
div1.html('<p>hello </p>')
div1.on('click',function(){
	alert('clicked')
})

this的几种使用场景

1. 作为构造函数

function Foo(name){
	this.name = name
}
var f = new Foo('zhangsan')

2.作为普通函数

function fn(){
	console.log(this)
}
fn()  //window

3.对象属性 （call、apply、bind）

var test = {
    name:"A",
    get:function(){
        console.log( this.name);
    }
}
test.get()   // this === {name:'A'}
test.get.call({name:'B'})  //this ==={name:'B'}
var get1 = test.get
get1()   //this===window

call：第一参数是要绑定给this的值，后面传入的是一个参数列表。当第一个参数是null、undefined的时候，默认指向window
apply：第一参数是要绑定给this的值，后面传入的是一个参数数组。当第一个参数是null、undefined的时候，默认指向window
bind：第一参数是要绑定给this的值，后面传入的是一个参数列表。不会立即执行，而是返回一个改变了上下文this后的函数

作用域

作用域链

当前作用域没有定义的变量，即为”自由变量“，去当前作用域定义时的父级作用域中找

闭包

//函数作为返回值
function F1(){
	var a =100
	return function(){
		console.log(a)
	}
}
var f1 = F1()
var a = 200
f1()   //100
//函数作为参数来传递
function F2(fn){
	var a =200
	fn()
}
F2(f1)  //100

对变量提升的理解

函数及变量都将被提升到函数的最顶部
变量可以在使用后声明

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

for（var 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)
}

实际开发中闭包的应用

封装变量，收敛权限

获取2018-05-21格式的日期

function formatData(){
	var year = dt.getFullYear()
	var month = dt.getMonth()
	var date = dt.getDate()
	if(month<10){ minth = '0' + month}
	if(date<10){ minth = '0' + date}
	return year + '-'+month + '-'+date
}
var dt = new Date()
var formatData = formatData(dt)
console.log(formatData)

获取随机数，要求是长度一致的字符串格式
var random = Math.random()
random = random + ‘0000000000’ //后面加上10个0
random = random.slice(0,10) //取前10位数
写一个能遍历对象和数组的forEach函数

function forEach(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])
		}
	}
}

var arr = [1,2,3]
forEach(arr,function(index,item)){
	console.log(index,item)
}

Dom节点的Attribute 和 property的区别

property：只是一个js对象的属性的修改
var div1=document.getElementById(“div1”);
var className = div1.className;
div1.className = ‘a’;
Attribute ：是对html标签属性的修改
p.getAttribute(“data-name”) //data-name是

的一个属性
p.setAttribute(“data-name”,“one”)

Dom操作常用api

document.getElementById：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；
document.getElementsByClassName：根据类名查找元素，多个类名用空格分隔，返回一个
节点创建：createElement
parent.appendChild(child);它会将child追加到parent的子节点的最后面。另外，如果被添加的节点是一个页面中存在的节点，则执行后这个节点将会添加到新的位置，其原本所在的位置将移除该节点，也就是说不会同时存在两个该节点在页面上，且其事件会保留。
removeChild用于删除指定的子节点并返回子节点
parentElement：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是，则返回null；
childNodes：返回一个实时的NodeList，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等；

事件绑定

跨域

浏览器有同源策略（协议，域名，端口），不允许ajax访问其他域接口
可跨域的标签：、 （CDN）、

1.jsonp

2.服务器端设置http header

浏览器存储

cooki：本身用于客户端与服务器端，也可用于本地存储
只有4k
所有http请求都带着，会影响获取资源的效率
api简单，document.cookie = …
localStorage：保存数据会一直保存没有过期时间，5M
sessionStorage：仅当前页面有效一旦关闭就会被释放，5m
localStorage.setItem(‘order’, ‘a109’);
localStorage.getItem(‘order’)

模块化

AMD：request.js 依赖js自动异步加载
在页面：

从输入url到得到html的过程

dns服务器获取域名的ip地址
向这个ip发送http请求
服务器收到，处理并返回http请求
浏览器收到返回内容

根据html生成DOM Tree
根据css生成CSSOM
DOM Tree+CSSOM生成渲染树render tree
render tree开始渲染和展示
遇到script时，会执行并阻塞渲染

性能优化

1.多使用内存缓存
2.减少cpu计算、网络
具体方法：1.加载资源优化：静态资源压缩合并、缓存；使用CDN让资源加载更快；后端渲染
2.渲染优化：css放前面，js放后面；懒加载；减少DOM查询，对DOM查询做缓存；减少DOM操作；事件节流；尽早执行操作（DOMContentLoader）

安全

xss：发布文章中插入"《script》js代码《/script》"，获取用户cooki
前端替换关键字
XSRF:（跨站请求伪造）增加验证流程

查找字符串中出现次数最多的字符

charAt() 方法用于返回指定索引处的字符。索引范围为从 0 到 length() - 1。

var str = "nininihaoa";
var o = {};
for (var i = 0, length = str.length; i < length; i++) {
	var char = str.charAt(i);
	if (o[char]) {
		o[char]++; //次数加1
	} else {
		o[char] = 1; //若第一次出现，次数记为1
	}
}
console.log(o); //输出的是完整的对象，记录着每一个字符及其出现的次数
//遍历对象，找到出现次数最多的字符的次数
var max = 0;
for (var key in o) {
	if (max < o[key]) {
	max = o[key]; //max始终储存次数最大的那个
	}
}
for (var key in o) {
	if (o[key] == max) {
	//console.log(key);
	console.log("最多的字符是" + key);
	console.log("出现的次数是" + max);
	}
}