instanceof源码实现
<script>
/*instanceof是通过原型链来实现判断的，
只要判断实例化的原型是不是
指向Array或者Object对象的原型就可以
注意的一点是：只能判断Object类型的*/
function instanceof1(a,b){
let aPro=a.__proto__;
let bPro=b.prototype;
if(aPro===null){
return false;
}
while(true){
if(aPro===bPro){
return true;
}
aPro=aPro.__proto__;
}
}
// function A(){
// this.name='11'
// }
// var a=new A();
var a =new Array();
console.log(instanceof1(a,Array); //true
</script>
驼峰命名转化
<script>
function trans(str){
var arr=str.split('-');
var newArr=arr[0];
for(let i=1;i<arr.length;i++){
//concat()实现字符串拼接或者数组拼接，slice()实现字符串的截取
var a=arr[i][0].toUpperCase().concat(arr[i].slice(1));
newArr=newArr.concat(a);
}
return newArr;
}
var a=trans('arf-hhd');
console.log(a); //arfHhd
2.使用正则表达式进行匹配特定字符串
function trans(str){
var arr=str.split(/\-\@/g);
var newArr=arr[0];
console.log(arr);
// for(let i=1;i<arr.length;i++){
// //concat()实现字符串拼接或者数组拼接，slice()实现字符串的截取
// var a=arr[i][0].toUpperCase().concat(arr[i].slice(1));
// newArr=newArr.concat(a);
// }
// return newArr;
}
trans('arf-@hhd'); //arfHhd
</script>
css三列布局，中间自适应
js实现拖拽效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#app{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
var app=document.getElementById("app");
//拖拽主要是鼠标按下、鼠标移动、鼠标弹起三个事件
//鼠标移动过程中不断改变盒子的left top就可以实现跟随鼠标拖拽
app.onmousedown=function(){
document.onmousemove=function(event){
e=event||window.event;
var left=e.clientX;
var top=e.clientY;
app.style.left=left+"px";
app.style.top=top+"px";
}
document.onmouseup=function(){
//鼠标松开将移动事件取消
document.onmousemove=null;
}
}
</script>
</body>
</html>
toLowerCase函数实现
<script>
//原理就是大小写之间的unicode编码差距是32，比如A65，a97
function toLowerCase1(str){
var strArr=str.split('');
var uniCode;
let maxuniCode='Z'.charCodeAt();
let minuniCode='A'.charCodeAt();
for(let i=0;i<strArr.length;i++){
uniCode=strArr[i].charCodeAt();
//判断是否是大写字母，如果是就转变成小写
if(uniCode>=minuniCode&&uniCode<=maxuniCode){
strArr[i]=String.fromCharCode(uniCode+32);
}
}
return strArr.join('');
}
var re=toLowerCase1("SSDDDxc");
console.log(re);
</script>
toUpperCase函数实现
<script type="text/javascript">
//toUpperCase也是使用的unicode编码实现
//大写字母比小写字母小32
function toUpperCase1(str){
var uniCode;
var maxuniCode='z'.charCodeAt();
var minuniCode='a'.charCodeAt();
var strArr=str.split('');
for(let i=0;i<strArr.length;i++){
//判断如果是小写字母就替换成大写
uniCode=strArr[i].charCodeAt();
if(uniCode>=minuniCode&&uniCode<=maxuniCode){
strArr[i]=String.fromCharCode(uniCode-32);
}
}
return strArr.join('');
}
var strUpper=toUpperCase1('aaaQQWdd');
console.log(strUpper);
</script>
获取字符串的最大值和最小值
<script>
var arr=[1,10,2,45,3,0];
// console.log(arr.sort());
//输出的是[0,1,10,2,3,45]因为sort是根据unicode进行排序的
//如果是要对number进行排序，需要在sort中输入一个函数，指定是从大到小还是从小到大
// var arr2=arr.sort(function(a,b){return a-b}); //[45,10,3,2,1,0]
var arr3=arr.sort(function(a,b){return a-b}); //[0,1,2,3,10,45]
// console.log(arr2);
console.log(arr3);
</script>
事件委托
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<ul id="main">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
/*
事件委托：
之前在网上看到的一个例子就是描述的是事件委托，我觉得很形象
一个宿舍四个人如果都有快递要拿，那我们应该是要四个人都去门口在等着
但是我们可以拜托我们的宿舍管理员去拿，只需要一个人就去就行，所以事件委托
跟这个很像
事件委托就是将事件绑定在父级元素上，让父级元素负责监听自己元素的事件
使用的原理就是事件冒泡，比如div>ul>li>a，a的点击事件会向外传播，a-li-ul-div
所以a的点击事件会冒泡到div上，如果想要实现跟本来一样的效果，比如，每个li的点击
事件，这又涉及到要使用event对象中的target属性，这个属性可以提供事件源
通过属性中事件源的nodeName可以进行if判断，但是这个属性有兼容，一般浏览器是
event.target但是ie浏览器是event.srcElement
*/
// 1. 原始每个li设置click事件
// var lis=document.getElementsByTagName("li");
// var ul=document.getElementById("main");
// for(let i=0;i<lis.length;i++){
// lis[i].onclick=function(){
// console.log(i);
// }
// }
//不使用事件委托的话，原始的里边如果要动态添加一个节点
//不会绑定事件，但是如果使用事件委托的话就可以绑定
// var newli=document.createElement("li");
// newli.innerHTML="4";
// ul.appendChild(newli);
//2. 事件委托实现
var lis=document.getElementsByTagName("li");
var ul=document.getElementById("main");
ul.onclick=function(ev){
var ev=ev||window.event;
//事件委托如果想要是实现跟之前一样的效果就是点击li才进行操作
//event提供了一个target属性用来返回事件源，这个有兼容性问题
//IE是event.srcElement,其余浏览器是event.target,通过nodeName节点名字可以实现点击
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=="li"){
console.log(target.innerHTML);
}
}
</script>
</body>
</html>
数组去重
<script type="text/javascript">
var arr=[1,1,2,3,4,5,5,6];
//1.使用ES6的语法，Set,Array.from用于将一个伪数组转变成一个真正的数组
//[...]就是将转化成数组
// var arr1=Array.from(new Set(arr));
// var arr2=[...new Set(arr)];
//2.arr.indexof(arr[0])返回的是arr[0]在arr中首次出现的位置，如果没有就返回-1
function unique(arr){
var arr2=[];
for(let i=0;i<arr.length;i++){
if(arr2.indexOf(arr[i])==-1){
arr2.push(arr[i]);
}
}
return arr2;
}
console.log(unique(arr));
</script>
防抖与节流
//防抖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div id="box"></div>
<!-- 防抖与节流都是前端性能优化的一种手段 -->
<!-- ajax的请求数据、提交数据、输入验证 -->
<script>
var num=0;
var box=document.getElementById("box");
function fun(e){
num++;
console.log(num);
// console.log(this);window
console.log(this);
console.log(e);
return "fun";
}
// 防抖:1. 延时 2.this指向问题 3. event参数 4. 是否立即执行
function debounce(fun,waitTime,immdeate){
let time=null;
let result;
let debounced=function(){
// 防抖的操作
clearTimeout(time);
// console.log(this);当前的对象id=box,因为是谁调用就指向谁
//多以需要改变this的指向问题使用appy
let context=this;
let arg=arguments;
if(immdeate){
// 立即执行
let callnow=!time;
time=setTimeout(function(){
time=null;
},waitTime);
if(callnow){
result=fun.apply(context,arg);
}
}else{
// 非立即执行
time=setTimeout(function(){
result=fun.apply(context,arg);
},waitTime);
}
return result;
}
//取消防抖
debounced.cancel=function(){
clearTimeout(time);
time=null;
}
return debounced;
}
// box.addEventListener("click",debounce(fun,3000));
box.onmouseenter=debounce(fun,1000,true);
</script>
</body>
</html>
//节流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#app{
width: 200px;
height: 200px;
background-color: #000000;
}
</style>
</head>
<body>
<!-- 节流：如果持续触发事件，每隔一段时间才触发一次 -->
<div id="app"></div>
<script>
var app=document.getElementById("app");
var num=0;
function fun(e){
num++;
console.log(num);
}
// 节流函数:时间戳+定时器
function throttle(fun,wait,options){
var old=0;
var context,args,timeout;
if(!options) options={};
return function(){
context=this;
args=arguments;
var now=new Date().valueOf();
if(options.leading===false&&!old){
old=now;
}
if(now-old>wait){
//第一次执行
fun.apply(context);
old=now;
timeout=null;
}else if(!timeout&&options.traing!==false){
timeout=setTimeout(fun,wait);
}
}
}
app.onmouseenter=throttle(fun,1000,{
leading:false,
traing:true,
// 第一个是true代表第一次输出，第二个是false代表最后一次不输出
//可以 true true,true false,false true，但是不能 false false
});
</script>
</body>
</html>
常见JS内置错误
<script>
//1. TypeError类型错误
// var a=null;
// console.log(a.xx);
//2.RangeError范围错误
// function add(){
// add();
// }
// add();
//3.SyntaxError语法错误
// var str="""";
//4.ReferenceError引用错误
console.log(a);
</script>