我在那日界线奔跑之JS---基础

基本点

数据结构

本来制作的是脑图，思维导图，导出来不好上传，就这样md+png吧

js

基本的数据类型

Undefined

undefined,null区别

undefined,null区别：
1.undefined表示声明了一个变量var a，没有初始化的情况下输出该变量为undefined以及未声明直接typeof一个未声明的变量结果也为undefined；js中的变量是弱类型的，java中声明一个int即使未赋值也会自动初始化为int类型的0；并且如果一个变量未声明，直接输出该变量会报错；
2.null表示Object类型的空引用；
3.typeof undefined="undefined"
typeof null="object"
Number(undefined)=NaN
Number(null)=0
null==undefined为true
4.typeof输出的都是字符串，包括：undefined,object(对象和数组),string,number,boolean,function

操作符

一元操作符

只对数感兴趣递增和递减++,--

递增递减遇只对数值感兴趣“1”也会转换成1；而普通的字符串都为NaN;
当然所有的运算遇到boolean值的都：false=0;true=1;
前置递增（减）先增或减再其他操作，后置递增（减），先执行其他操作再对数值增或减

Number下一元+,-

+对数值无影响，非数值会Number()下，对象会valueOf()或toString()下再Number()
-先进行+相同的转换再取负

非数就拼接加性操作符

对同为数值的两个操作数加法运算
只要有一个是字符串就变成了拼接操作

typeof

"undefined"

"object"

"string"

"number"

"function"

"boolean"

位操作符

~:按位非，取负数减1
&:按位与，同为1真则为1真，其余为0假
|:按位或，有一个为1真则1真
^:按位异或，只有一个1时结果为
<<:左移

:有符号右移

:无符号右移，对负数来说无符号右移会得到很大的jieguo

关系操作符

!非
&&与
||或

六个感叹号家族!

!a,当a为何值时此条件为真；当a为false或者Boolean()后为false;
Boolean(false) false
Boolean(0) false
Boolean(NaN) false
Boolean(undefined) false
Boolean(null) false
Boolean("") false

布尔操作符

Number乘性操作符

条件操作符

相等操作符

==

null==undefied

===

首先类型必须相同

逗号操作符

Null

Number

Boolean

String

Object

Array

伪数组arguments

参数值和arguments伪数组存的值同步
严格模式下修改参数值，arguments内的值不变，arguments值和执行函数时传入的参数个数一致
伪数组不具有真正数组的操作方法，有length属性，也可以访问每一个元素

检测数组

Array.isArray(arguments)为false
检测数组的方法：
Array.isArray()
arr instanceof Array;此方法缺陷是不同框架创建的数组，分别是不同Array的实例

真正的数组

增删改查

增

头部添加arr.unshift("a");

返回值更改后数组的长度；原数组被更改
var a=[1,2,3];a.unshift(0);
4
var a=[1,2,3];a.unshift(0);a
[0, 1, 2, 3]

尾部添加arr.push("z");

自定义位置和数量arr.splice(0,0,1,2,3,4);

返回删除的元素组成的shuzu
var a=[0,1,2,3];a.splice(4,0,5,6,7);a
[0, 1, 2, 3, 5, 6, 7]
var a=[0,1,2,3];a.splice(4,0,5,6,7);
[]

连接数组不改变原数组重新创建新数组arr.concat(arr1)

只是连接数组，不改变原数组；返回新数组
var a=[1,2,3];a.concat([0]);
[1, 2, 3, 0]
var a=[1,2,3];a.concat([0]);a
[1, 2, 3]

删

头部删arr.shift("a");

返回第一个元素即删除的元素；改变原来的数组
var a=[1,2,3];a.shift();
1
var a=[1,2,3];a.shift();a
[2, 3]

尾部删arr.pop("z");

var a=[1,2,3];a.pop();
3
var a=[1,2,3];a.pop();a
[1, 2]

自定义位置和数量arr.splice(0,2);

返回删除元素组成的数组；原数组gaibia
var a=[0,1,2,3];a.splice(0,3);
[0, 1, 2]
var a=[0,1,2,3];a.splice(0,3);a
[3]

改

arr.splice(第几个元素位置,删除的个数,增加或修改为新数);

删除该位置元素，替换上新元素；返回删除元素组成的数组，修改原shuzu
var a=[1,2,3];a.splice(0,1,0);
[1]
var a=[1,2,3];a.splice(0,1,0);a
[0, 2, 3]

查

查位置arr.indexOf("a");

返回该元素第一次出现的位置
var a=[1,2,3];a.indexOf(1);
0

查最后出现的位置lastIndexOf

不改变原数组返回切出来的数组arr.slice(0);

第一个参数从哪开始，第二个参数数几个数；返回这几个数组成的数组，不改变原数组；只有一个参数的情况下，取到最后
var a=[1,2,3];a.slice(0);
[1, 2, 3]
var a=[1,2,3];a.slice(0,2);
[1, 2]
var a=[1,2,3];a.slice(0,2);a
[1, 2, 3]

不改变原数组五个迭代

some(function(item,index,array){})

有一项符合要求就返回true

every

每一项都符合要求，最后返回tru

filter

返回符合条件的元素组成的shuz

map

返回新数组，对应每一项都操作后的新数组

forEach

无返回值
var a=[1,2,3,4],b=[];a.forEach(function(item,index,array){b[index]=item-1});b
[0, 1, 2, 3]

不改变原数组两个缩小

arr.reduce(function(pre,cur,index,array){return pre+cur});返回和

reduceRight()

查找最大值

Math.max.call(arr);

sort(逆序排序);取下标0的元素值

排序

排序sort

默认ASII码值排序arr.sort()

数值正序arr.sort(function(a,b){return a-b;})

数值逆序arr.sort(function(a,b){return b-a;});

汉字按拼音排序arr.sort(function(a,b){return a.localeCompare(b);});正序啊你为

反转reverse

var a=[4,1,2,5,3];a.reverse()
[3,5,2,1,4]

转换

数组->字符串

.toString()

结果是以逗号隔开的字符串

.join(",")

返回以自定义符号隔开的字符串

.toLocaleString()

字符串->数组

.split("")

var str="1,2,3";var arr=str.split(",");

Function

函数内部属性

伪数组参数arguments

arguments.callee

指向拥有该arguments对象的函数
递归函数会用到Arguments对象的callee属性

上下文执行环境对象this

当在全局作用域调用函数，this指向window的引用
当某个对象调用时，就指向对象的引用
var a={color:"red",getA:function(){console.log(this.color);}};var b=a.getA;b()
undefined
var color="window";var getA=function(){console.log(this.color)};var o={color:"o"};o.getA=getA;o.getA()
o

闭包

闭包概念：一个函数内部创建另一个函数；内部函数可以访问包含函数的变量外部无法访问内部函数的变量；
闭包优缺点：封装性，减少全局变量污染；对外部变量的引用导致垃圾回收无法清除变量造成内存泄漏

内存泄漏

哪些操作会造成内存泄漏
闭包；循环引用；setTimeout第一个参数为字符串

垃圾回收

垃圾回收的两种方式：
标记清除，垃圾回收器运行时给存储在内存的所有变量都加上标记，然后去掉环境中的变量和被环境中变量引用着的变量的标记，最后将仍旧被标记着的变量清除释放内存（闭包就是因为变量仍旧被引用着无法清除）
引用计数，跟踪每个变量被引用的次数，当一个变量被赋值给另一个变量时，该变量就被引用1次，当赋值另外一个值时，该变量被引用次数减一（如果存在两个变量循环引用，引用次数一直2，不能清除）

caller

调用当前函数的函数的引用
var outter=function (){inner()};var inner=function(){console.log(arguments.callee.caller)};outter();
function (){inner()}
undefined
var outter=function (){inner()};var inner=function(){console.log(inner.caller)};outter();
function (){inner()}
严格模式下，caller属性值不能修改

函数属性和方法

属性

length

函数需要接收的命名参数的个数

length!==arguments.length

arguments表示实例化时传入的参数伪数组

prototype

原型链

将一个类的实例赋值给另一个类的原型形成原型链；
构造函数、实例、原型之间的关系：每一个构造函数都有一个原型，每一个原型对象都有一个指针指向构造函数，每一个构造函数的实例都有一个内部属性指向原型对象

继承

原型链式继承

原型链继承导致引用类型的属性被共享，并且子类实例不能向父类传递参数
function parent(){this.name="姓";this.friends=["w","f"];}
function child(){}
child.prototype=new parent();
var child1=new child();
var child2=new child();
console.log(child1.name);
console.log(child2.name);
VM15914:6 姓
VM15914:7 姓

function parent(){this.name="姓";this.friends=["w","f"];}
function child(){}
child.prototype=new parent();
var child1=new child();
var child2=new child();
console.log(child1.friends);child1.friends.push("m");
console.log(child2.friends);
VM15915:6 ["w", "f"]
VM15915:7 ["w", "f", "m"]

借用构造函数继承

方法在每个子类原型上都要创建一遍，无法达到方法共享
function parent(name){this.name=name;this.friends=[1,2,3]}
function child(name){parent.call(this,name);}
var child1=new child("1");
var child2=new child("2");
console.log(child1.name);
child1.name="3";
console.log(child1.name);
console.log(child2.name);
console.log(child1.friends);
child1.friends.push("m");
console.log(child1.friends);
console.log(child2.friends);
VM15918:1
VM15918:7 3
VM15918:8 2
VM15918:9 [1, 2, 3]
VM15918:11 [1, 2, 3, "m"]
VM15918:12 [1, 2, 3]

组合式继承

call,new两次导致实例和原型上都存在相同属性
function parent(name){this.name=name;this.friends=[1,2,3]}
parent.prototype.getFriends=function(){console.log(this.friends);};
function child(name){parent.call(this,name)}
child.prototype=new parent();
var child1=new child();
var child2=new child();
child1.friends.push(4);
child1.getFriends();
child2.getFriends();
VM15920:[1, 2, 3, 4]
VM15920:[1, 2, 3]

寄生式继承

function obj(o){
    function f(){}
    f.prototype=o;
    return new f();
}
function createChild(original){
    var clone=obj(original);
    clone.say=function(){
        console.log("hi");
    };
    return clone;
}
var parent={
    name:"p",
    friends:[1,2,3]
};
var child1=createChild(parent);
var child2=createChild(parent);
child1.friends.push(4);
console.log(child1.friends);
console.log(child2.friends);

VM15922:20 [1, 2, 3, 4]
VM15922:21 [1, 2, 3, 4]

原型式继承

function obj(o){
    function f(){}
    f.prototype=o;
    return new f();
}
var parent={
    name:"p",
    friends:[1,2,3]
};
var child1=obj(parent);
var child2=obj(parent);
child1.friends.push(4);
console.log(child1.friends);
console.log(child2.friends);

VM15921:13 [1, 2, 3, 4]
VM15921:14 [1, 2, 3, 4]

寄生组合式继承

function obj(o){
    function f(){}
    f.prototype=o;
    return new f();
}
function inheritPrototype(subType,supperType){
    var prototype=obj(supperType.prototype);
    prototype.constructor=subType;
    subType.portotype=prototype;
}
function parent(name){
    this.name=name;
    this.friends=[1,2,3];
}
function child(name){
    parent.call(this,name);
}
inheritPrototype(child,parent);
var child1=new child("1");
var child2=new child("2");
child1.friends.push(4);
console.log(child1.friends);
console.log(child2.friends);

VM15923:22 [1, 2, 3, 4]
VM15923:23 [1, 2, 3]

方法

fn.call(替换this的对象，传入的参数序列);

fn.apply(替换this的对象，传入参数组成的数组)

fn.bind(替换this的对象，传入的参数序列);返回函数未执行

var color={color:"red"};function a(num1,num2){console.log(this.color+num1+num2);} var b=a.bind(color,1,2);b()
VM15615:1 red12

Object

面向对象编程

封装性

继承

多态

自定义方法

深度克隆

深度克隆:
function clone(obj){

var buf=null;
if(Array.isArray(obj)){
    buf=[];
    for(var i=0,len=obj.length;i<len;i++){
        buf[i]=clone(obj[i]);
    }
    return buf;
}else if(obj instanceOf Object){
    buf={};
    for(var e in obj){
        buf[e]=clone(obj[e]);
    }
    return buf;
}else{
    return obj;
}

}

数组去重定义，在Array.prototype上；但不更改原数组，返回一个新的数组

Array.prototype.unique=function(){

var hash={},r=[];
for(vari=0,len=this.length;i<len;i++){
if(!hash[this[i]]){
        hash[this[i]]=true;
        r.push(this[i])
}

}

return r

};
var a=[1,1,2,2,3,3];
a.unique();//返回的是r，a并未改变

内置对象

Global

parseInt(num)

parseFloat(num)

Math

方法

向下取整Math.floor(num)

向上取整Math.ceil(num)

四舍五入Math.round(num)

Math.max(1,2,3)

Math.max.apply(null,arr)

Math.min(1,2,3)

Math.random()返回0-1之间的小数

Math.floor(Math.random()*10+1);1-10之间的10个数
function selectFrom(lowerValue,upperValue){

var choices=upperValue-lowerValue;
return Math.floor(Math.random()*choices+lowerValue);

}
selectFrom(1,5);

其他方法

绝对值Math.abs(num)

平方根Math.sqrt(num)

幂运算Math.power(num,power)num的power次幂

Math.PI

1/2的平方根Math.SQRT1_2

BOM

Window.open(url,位置,大小)

window.open("http://baidu.com","someFrameName","height:400,width:400,top:10,left:10,resizable:yes")
第二个参数可以是
某个窗口的名称
已存在的窗口_self,_parent,_top,_blank( 打开一个新的标签页)

系统对话框

alert("msg")

confirm("msg")

prompt("msg","inputValue")

location

location属性

?的内容location.search

返回URL中？后的字符串location.search
"?isSave=1"
decodeURIComponent(ite)可以参数值解码

的内容location.hash

location.hash
"#/history?eventId=gulf_p_g_home_timech_ck&eventName=%E7%82%B9%E5%87%BB%E5%87%BA%E5%8F%91%E6%97%B6%E9%97%B4&appName=%E6%BB%B4%E6%BB%B4%E5%87%BA%E8%A1%8C&fav=1"

location.hostname

location.hostname
"bigdata-test.xiaojukeji.com"
location.pathname
"/ddc_action_analyse/"
location.port
""

location.port

location.pathname

方法

location.assign(url)打开网页==window.location=url;location.href=url;

navigator

浏览器名称navigator.appName

navigator.platform

navigator.plugins

screen

history

前进

history(1)前进一页history(2)前进两页

history.forward()前进一页

后退

history(-1)后退一页

history.back()后退一页

history.length===0表明用户打开窗口后的第一个页面

DOM

事件流

事件捕获

目标阶段

事件冒泡

html事件标签中加onclick="name()"

dom0级事件elem.onclick=function(){};

dom2级事件

addEventListener(事件名称click，处理函数，false表明发生在冒泡阶段默然就是false)

事件委托和事件代理

ajax

json

同源策略+跨域方法

html

css

行内元素

块级元素

样式

position+z-index

opacity,rgba

background-color=width+padding

垂直水平居中，flex

浮动，清除浮动

盒模型

布局

http

设计模式