[TOC]
## 變量類型
1. 值類型
```
var a= 100
var b= a
a=200
console.log(b) //100 b 的值不受 a 值影響
```
2. 引用類型
引用類型:對象、數組、函數
```
var a={ age: 20}
var b= a
b.age= 21
console.log(a.age) //21 a 值受到 b 值的影響
```
## typeof運算符詳解
```
typeof undefined // undefined
typeof abc // string
typeof 123 // number
typeof true // boolean
typeof t // object
typeof [] // object
typeof null // object
typeof console.log // function
```
`typeof`只能區分值類型 如 `string ,number,boolean, ` 不能區分引用類型
## 變量計算 - 強制類型轉換
1. 字符串拼接
```js
var a=100+10 // 110
var b=100 + '10' // '10010'
```
3. ==運算符
```
100=="100" //true
0 == '' // true
null == undefined // true
```
5. if語句
```
var b= 100
if(b){}
```
7. 邏輯運算
```
console. log (10 && 0) //0
console. log('' || 'abc) //'abc'
console. log( !!window.abc) //true
```
### 何時使用===和==
除了下面這種其他都是用 `===` 形式寫
```
if (obj.a= null){
//這里相當于obj.a===nulL|lobj.a=== undefined,簡寫形式
//這是 Jquery源碼中推薦的寫法
}
```
## JS中的內置函數
Object
Array
Boolean
Number
String
Function
Date
Regexp
Error
## 如何理解JSON
只是一個 js 對象
```
JSON.stringify ({a: 10, b: 201}) //js 對象轉json
J0SN. parse('{"a":10,"b":20}') //json 轉 js 對象
```
## 作用域
### 全局
```js
//相當于把 變量a 的聲明提前 并且賦值為 undefined var a = undefined
console. log (a) //undefined
var a =100
//把函數提前
fn('zhangsan') //zhangsan
function fn (name){
console. log(name)
}
```
### this
this要在執行時才能確認值,定義時無法確認
1. 作為構造函數執行
```
function Foo(name){
this.name=name
console.log(this); //this 為構造函數
}
var f = new Foo('zhangsan');
```
3. 作為對象屬性執行
```
var obj = {
name:'A',
printName:function(){
console.log(this.name) //this 為對象本身
}
}
obj.printName();
```
5. 作為普通函數執行
```
function fn(){
console.log(this) //this 為 window
}
fn();
```
7. call apply bind
```
function fn1(name){
alert(name);
console.log(this)
}
fn.call({x:100},'zhangsan'); //第一個傳入的就是 this 的值
fn.apply({x:100},['zhangsan']); //apply 參數以數組形式傳入
var fn2 = function (name){
alert(name);
console.log(this) // this 為{ y:200}
}.bind({y:200});
fn2('zhangsan')
```
### 作用域
- 沒有塊級作用域
```
if (true) {
var name ='zhangsan'
}
console.log(name) //zhangsan
```
- 只有函數和全局作用域
```
var a=100
function fn(){
var a =200
console.log(a) // 200
}
console.log(a) //100
fn()
```
### 閉包
```
function F1(){
var a = 100
return function(){
console.log(a)
}
}
var f1 = F1()
var a =200
f1() //100
```
#### 真題
創建10 個 a 標簽,點擊彈出對應的順序標記
```
var i
//作用域與閉包考點
for ( i = 0; i<10; i++) {
(function(i){
var a = document.createElement('a')
a.innerHTML=i+'<br/>'
a.addEventListener('click',function(e){
e.preventDefault()
alert(i)
})
document.body.appendChild(a)
})(i)
}
```
## 日期
```
Date,now()//獲取當前時間毫秒數
var dt= new Date()
dt.gettime() //獲取毫秒數
dt.getfullyear() //年
dt.getmonth() // 月(0-11)
dt.getdate() // 日 0-31)
dt.gethours() //小時(0-23)
dt.getminutes() //分鐘(0-59)
dt.getseconds() // 秒 (0-59
```
## Math Api
```
Math.random() //0.10596426644876211
```
## 數組 APi
- foreach 遍歷所有元素
```
var arr =[1,2,3,]
arr.age=12 //age 會加入遍歷,但是無法為 undefined
arr.forEach(function (item,index){
console.log(index,item)
})
0 1
1 2
2 3
undefined
```
- every 判斷所有元素是否都符合條件
```
var arr =[1,2,3,4,5]
//只有所有元素都滿足要求才會返回 true
var result = arr.every(function(item,index){
if(item<4){
return true
}
})
console.log(result) //false 因為數組不滿足要求
```
- some 判斷是否有至少一個元素符合條件
```
var arr =[1,2,3,4,5]
// 只要有滿足條件的就返回 true
var result = arr.some(function(item,index){
if(item<4){
return true
}
})
console.log(result) //true
```
- sort 排序
```
var arr =[1,3,2,4,5]
var result = arr.sort(function(a,b){
//從小到大排序
return a-b
// return b-a 從大到小
})
console.log(result) //1,2,3,4,5
```
- map 對元素重新組裝,生成新數組
```js
var arr =[1,2,3,4,5]
var result = arr.map(function(item,index){
return '<b>'+item+'<b/>'
})
console.log(result) //["<b>1<b/>", "<b>2<b/>", "<b>3<b/>", "<b>4<b/>", "<b>5<b/>"]
```
- filter 過濾符合條件的元素
```
var arr =[1,2,3,4,5]
//返回所有值大于等于2
var result = arr.filter(function(item,index){
if (item>=2) return true
})
console.log(result) //[2, 3, 4, 5]
```
## 對象 APi
- for in
```js
var obj = {
x:100,
y:200,
z:200
}
var key
for (key in obj){
//雖然高級瀏覽器可以過濾原型中的屬性,但是加入此判斷可以提高代碼健壯度
if(obj.hasOwnProperty(key)){
console.log(key,obj[key])
}
}
//輸出
x 100
y 200
z 300
```