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

摘要：基本点数据结构本来制作的是脑图，思维导图，导出来不好上传，就这样吧基本的数据类型区别区别表示声明了一个变量，没有初始化的情况下输出该变量为以及未声明直接一个未声明的变量结果也为中的变量是弱类型的，中声明一个即使未赋值也会自动初始化为类型的并

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

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

===

首先类型必须相同

逗号操作符

伪数组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(",");

函数内部属性

伪数组参数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

面向对象编程

封装性

继承

多态

自定义方法

深度克隆

深度克隆:
function clone(obj){

var buf=null;
if(Array.isArray(obj)){
    buf=[];
    for(var i=0,len=obj.length;i
}
数组去重定义，在Array.prototype上；但不更改原数组，返回一个新的数组
Array.prototype.unique=function(){
var hash={},r=[];
for(vari=0,len=this.length;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
设计模式