我在那日界線奔跑之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

設計模式