js基础学习

let arr=[1,2,106]
arr[107]=108
console.log(arr.length) //108

数组的length获取的不是数组的长度，而是下坐标+1

for in 可用于遍历对象

 

function Person() {

}
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin

Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person

每个函数都有一个 prototype 属性
每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性。

 

每一个JavaScript对象(除了 null )都具有的一个属性，叫proto，这个属性会指向该对象的原型

constructor 每个原型都有一个 constructor 属性指向关联的构造函数 实例原型指向构造函数 

https://www.jianshu.com/p/be7c95714586

 

给静态html启动一个服务

npm install http-server -g
http-server -p 8001
//安装http-server，给静态html启动一个服务

除了==null外，其他都用===

if里面的判断就是truly,falsely变量判断

闭包：自由变量的查找，是在函数定义的地方，向上级作用域查找，不是在执行的地方

function print(fn){
    const a=100
    fn()
}
const a =200
function fn(){
    console.log(a)
}

print(fn) //200而不是100

this指向是函数执行的时候定义的，而不是定义的定义的

//this指向是函数执行的时候定义的，而不是定义的定义的
function fn1(){
    console.log(this)
}
fn1() //window

//bind返回了一个新函数
const fn2=fn1.bind({x:200})
fn2()

property和attribute，都会引起dom重新渲染，建议用property修改

property 修改对象属性，不会体现到html结构中

attribute 修改html属性，会改变html结构

//移动节点

div2.appendChild(p1)//如果p1是已经存在div1的节点而不是新创建的节点，那么执行appendChild之后，div1中的p1会消失，

//获取子元素列表

div1.childNodes

判断是不是dom节点：用节点的nodeType===1来判断，如果是true就是; nodeName可以判断是什么标签，比如p,a,div

dom性能：

1,dom查询存储，比如查询p标签后进行循环时，

2,频繁操作作为一次性操作，应用document.createDocumentFragment()

bom提供的:navigator,screen,location,history

阻止默认行为event.preventDefault()

阻止冒泡 event.stopPropagation()

event.target获取事件由那个元素除法

ajax请求

const xhr = new XMLHttpRequest()
xhr.open('GET','/user/api',true)
xhr.onreadystatechange=function(){
    if(xhr.readyState===4){
        if(xhr.status===200){
            console.log(xhr.reposeText)
        }
    }
}
xhr.send(null)

 ajax的readyState状态值

301是永久重定向，302是临时重定向，304是资源没有变化，

4xx客户端请求错误，

5xx服务端错误

跨域，前端用jsonp,cors,服务端也需要配置

性能优化

window.addEventListener('load',function(){
			console.log('load')
    //页面的全部资源加载完后才会执行，包括图片，视频等
})



window.addEventListener('DOMContentLoaded',function(){
    //DOM渲染完成后即执行，此时图片、视频还可能没有加载完
			console.log('docload')
})

图片懒加载

先给img的src给一个模糊图，使页面上的图片先快速加载出来，然后再副职给src一个高清图

防抖

const inputvalue=document.getElementById('inputvalue')

let timer=null

inputvalue.addEventListener('keyup',function(){

    if(timer){
		clearTimeout(timer)
    }
    timer=setTimeout(()=>{
		console.log(inputvalue.value)
		timer=null
	},500)

})

防抖提炼

const inputvalue=document.getElementById('inputvalue')

function debounce(fn,deplay=500){
	let timer=null
			
	return function(){
		if(timer){
			clearTimeout(timer)
		}
		timer=setTimeout(()=>{
            // fn()  //如果直接执行，参数传不进来，所以用apply
			fn.apply(this,arguments) 
			timer=null
		},deplay)
	}
}

//应用 不要用箭头函数
inputvalue.addEventListener('keyup',debounce(function(){console.log(inputvalue.value)},1000))

 

节流  <div id="divdrag" draggable='true'>可拖拽</div>

const divdrag=document.getElementById('divdrag')

let timer=null

divdrag.addEventListener('drag',function(e){
	if(timer){
		return
	}
	timer=setTimeout(()=>{
		console.log(e.offsetX,e.offsetY)
		timer=null
	},100)
})

节流提炼

function throttle(fn,deplay=100){
	let timer=null
	return function(){
		if(timer){
			return
		}
		timer=setTimeout(()=>{
			fn.apply(this,arguments)
			timer=null
		},deplay)
	}
}

//使用
divdrag.addEventListener('drag',throttle(function(e){console.log(e.offsetX,e.offsetY)}))

 

xss跨站攻击（就是在页面写一个script，通过跨站获取用户数据）

<script>{alert(document.cookie)}</script>

防止的方法是，将scirpt的括号用&lt;&gt;代替

xsrf攻击（通过img可以跨站的功能，引诱用户点击图片进行替换）

防止方式是改用post请求，或者熟人密码，手机验证码之类的