JS基礎API

數據類型

• number
• object
• string
• null
• undefined
• boolean
  
  轉換規則是除了undefined null false 0 NAN ''或"""，其餘值都視爲true

操做方法

• Boolean() 布爾值轉換,返回true or false
• typeof 返回一個值的數據類型,檢查一個沒有聲明的變量返回undefined
• instanceof 運算符返回一個布爾值，表示對象是否爲某個構造函數的實例
• xx.indexOf() 返回可返回某個指定的字符串值在字符串中首次出現的位置，對大小寫敏感，沒有找到返回-1
• in運算符 檢查某個鍵名是否存在的運算符in，適用於對象，也適用於數組 xx in xx
• 遍歷數組

//for ... in 
for(let i in a){
  console.log(a[i]);
}
// forEach

對象操做方法 Object

• Object.defineProperty() 經過描述對象，定義某個屬性
• Object.keys 和 Object.getOwnPropertyNames() 用於遍歷對象的屬性
• Object.create() 該方法能夠指定原型對象和屬性，返回一個新的對象
• Object.getPrototypeOf() 獲取對象的Prototype對象
• obj.toString() 返回一個對象的字符串形式，默認狀況下返回類型字
  符串，經過自定義toString方法，可讓對象在自動類型轉換時，獲得想要的字
  符串形式 經過函數的call方法，能夠在任意值上調用這個方法，幫助咱們判斷這個值的類型

Object.prototype.toString.call(value)

Object.prototype.toString.call(2) // "[object Number]"
Object.prototype.toString.call('') // "[object String]"
Object.prototype.toString.call(true) // "[object Boolean]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(Math) // "[object Math]"
Object.prototype.toString.call({}) // "[object Object]"
Object.prototype.toString.call([]) // "[object Array]"

• obj.hasOwnProperty('') 檢查該實例對象自身是否具備該屬性

數學對象操做方法 Math

• Math.abs()：絕對值

Math.abs(1) // 1
Math.abs(-1) // 1

• Math.ceil()：向上取整
• Math.floor()：向下取整

Math.floor(3.2) // 3
Math.floor(-3.2) // -4
Math.ceil(3.2) // 4
Math.ceil(-3.2) // -3

• Math.max()：最大值
• Math.min()：最小值

Math.max(2, -1, 5) // 5
Math.min(2, -1, 5) // -1
Math.min() // Infinity
Math.max() // -Infinity

• Math.pow()：指數運算,第一個參數爲底數，第二個參數爲冪的指數值

Math.pow(2, 2) // 4

• Math.sqrt()：平方根，參數爲負數返回NaN

Math.sqrt(4) // 2
Math.sqrt(-4) // NaN

• Math.log()：天然對數，返回以e爲底的天然對數值

Math.log(Math.E) // 1
Math.log(10) // 2.302585092994046

• Math.exp()：e的指數，返回常數e的參數次方

Math.exp(1) // 2.718281828459045
Math.exp(3) // 20.085536923187668

• Math.round()：四捨五入

Math.round(0.1) // 0
Math.round(0.5) // 1

• Math.random()：隨機數，返回0到1之間的一個隨機數，可能等於0，但必定小於1

Math.random() // 0.7151307314634323

• 三角函數
• Math.sin()：返回參數的正弦（參數爲弧度值）
• Math.cos()：返回參數的餘弦（參數爲弧度值）
• Math.tan()：返回參數的正切（參數爲弧度值）
• Math.asin()：返回參數的反正弦（返回值爲弧度值）
• Math.acos()：返回參數的反餘弦（返回值爲弧度值）
• Math.atan()：返回參數的反正切（返回值爲弧度值）

Math.sin(0) // 0
Math.cos(0) // 1
Math.tan(0) // 0

Math.sin(Math.PI / 2) // 1

Math.asin(1) // 1.5707963267948966
Math.acos(1) // 0
Math.atan(1) // 0.7853981633974483

數值操做方法

• parseInt() 方法用於將字符串轉爲整數
• parseFloat() 方法用於將一個字符串轉爲浮點數
• isNaN() 方法能夠用來判斷一個值是否爲NaN
• isFinite() 方法返回一個布爾值，表示某個值是否爲正常的數值

數組對象方法 Array

• indexOf方法返回給定元素在數組中第一次出現的位置，若是沒有出現則返回-1
• Array.isArray() 返回一個布爾值，表示參數是不是數組
• xx.valueOf() 返回數組對象的原始值
• toString() 把數組轉換爲字符串，並返回結果
• concat() 拼接，多個數組合並，原數組不變
• join(',') 把數組全部元素放到一個字符串中，能夠經過指定分隔符分隔
• pop() 刪除並返回數組的最後一個元素，會改變原數組
• push() 向數組的末尾添加一個或更多元素，並返回新的長度，會改變原數組
• reverse() 顛倒數組中元素的順序，該方法將改變原數組
• shift() 刪除並返回數組的第一個元素
• unshift() 方法可向數組的開頭添加一個或更多元素，並返回新的長度
• slice(start,end) 截取目標數組的一部分，返回一個新數組，原數組不變
  
  
  經常使用於將類數組對象轉爲真正的數組

Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })
// ['a', 'b']

Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(arguments);

• splice(start, count, addElement1, addElement2, ...) 刪除原數組一部分紅員，並能夠在刪除部分添加新成員，返回的是被刪除元素，會改變原數組
  
  
  參數1：刪除的起始位置；參數2：被刪除的個數；參數3之後：添加的新元素；起始位置若是是負數，就表示從倒數位置開始刪除

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2) // ["e", "f"]
a // ["a", "b", "c", "d"]

• sort() 排序 默認按字典排序

//按大小排序
arr.sort(function(a,b){
  return a - b;
})

• map() 將全部成員傳入參數函數，而後把每一次的執行結果組成一個新數組返回
• forEach(element,index,array) 遍歷數組，沒法中斷執行 當前值 當前位置 整個數組
• filter() 過濾成員，知足條件的組成數組返回
• reduce()和reduceRight() 依次處理數組的每個成員，最終累計爲一個值

let arr = [6,7];
let a=arr.reduce(function(a,b){
   return a*b
});

日期對象操做方法 Date

get方法

• getTime()：返回實例距離1970年1月1日00:00:00的毫秒數，等同於valueOf方法。
• getDate()：返回實例對象對應每月的幾號（從1開始）。
• getDay()：返回星期幾，星期日爲0，星期一爲1，以此類推。
• getYear()：返回距離1900的年數。
• getFullYear()：返回四位的年份。
• getMonth()：返回月份（0表示1月，11表示12月）。
• getHours()：返回小時（0-23）。
• getMilliseconds()：返回毫秒（0-999）。
• getMinutes()：返回分鐘（0-59）。
• getSeconds()：返回秒（0-59）。
• getTimezoneOffset()：返回當前時間與 UTC 的時區差別，以分鐘表示，返回結果考慮到了夏令時因素。

set方法

• setDate(date)：設置實例對象對應的每月的幾號（1-31），返回改變後毫秒時間戳。
• setYear(year): 設置距離1900年的年數。
• setFullYear(year [, month, date])：設置四位年份。
• setHours(hour [, min, sec, ms])：設置小時（0-23）。
• setMilliseconds()：設置毫秒（0-999）。
• setMinutes(min [, sec, ms])：設置分鐘（0-59）。
• setMonth(month [, date])：設置月份（0-11）。
• setSeconds(sec [, ms])：設置秒（0-59）。
• setTime(milliseconds)：設置毫秒時間戳。
  
  
  ** 須要注意的是，凡是涉及到設置月份，都是從0開始算的，即0是1月，11是12月

JSON對象操做方法 JavaScript Object Notation

在線檢測JSON格式 https://jsonlint.com/

• JSON.stringify() 用於將一個值轉換成JSON字符串,對於原始類型的字符串，轉換結果會帶雙引號

JSON.stringify('abc') // ""abc""
JSON.stringify(1) // "1"
JSON.stringify(false) // "false"
JSON.stringify([]) // "[]"
JSON.stringify({}) // "{}"

JSON.stringify([1, "false", false])
// '[1,"false",false]'

JSON.stringify({ name: "張三" })
// '{"name":"張三"}'

• JSON.parse() 方法用於將 JSON 字符串轉換成對應的值

JSON.parse('{}') // {}
JSON.parse('true') // true
JSON.parse('"foo"') // "foo"
JSON.parse('[1, 5, "false"]') // [1, 5, "false"]
JSON.parse('null') // null

var o = JSON.parse('{"name": "張三"}');
o.name // 張三

• you won't get much work done if you only do it when you feel like it
  若是你有心情去作的時候纔去完成它，那你基本上不會完成得了多大的事情
• A typical man should use this time as an aristorcrat would:to perform rigorous self improvement 一個通常的人，應該像貴族同樣花他的時間：用於嚴格的自我提高。

函數 function

• 當即執行函數

(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();
(function (){console.log('當即執行函數')}());
(function (){console.log('當即執行函數')})();

編程風格

• 使用空格鍵縮進
• 行尾不使用分號的狀況：1.for和while循環 2.分支語句if switch try 3.函數聲明語句，注意，函數表達式仍然要使用分號
• 變量聲明 最好把變量都放在代碼塊的頭部
• 相等和嚴格相等 相等運算符會自動轉換變量類型，形成不少意想不到的狀況.建議不要使用相等運算符，只使用嚴格相等運算符===

0 == ''// true
1 == true // true
2 == true // false
0 == '0' // true
false == 'false' // false
false == '0' // true
' \t\r\n ' == 0 // true

• switch...case結構能夠用對象結構代替

運算符

賦值運算符

// 將 1 賦值給變量 x
var x = 1;

// 將變量 y 的值賦值給變量 x
var x = y;
// 等同於 x = x + y
x += y

// 等同於 x = x - y
x -= y

// 等同於 x = x * y
x *= y

// 等同於 x = x / y
x /= y

// 等同於 x = x % y
x %= y

// 等同於 x = x ** y
x **= y

// 等同於 x = x >> y
x >>= y

// 等同於 x = x << y
x <<= y

// 等同於 x = x >>> y
x >>>= y

// 等同於 x = x & y
x &= y

// 等同於 x = x | y
x |= y

// 等同於 x = x ^ y
x ^= y

布爾運算符

• 取反運算符：! 用於將布爾值變爲相反值，即true變成false，false變成true
• 且運算符：&& 它的運算規則是：若是第一個運算子的布爾值爲true，則返回第二個運算子的值（注意是值，不是布爾值）；若是第一個運算子的布爾值爲false，則直接返回第一個運算子的值，且再也不對第二個運算子求值。

't' && '' // ""
't' && 'f' // "f"
't' && (1 + 2) // 3
'' && 'f' // ""
'' && '' // ""

var x = 1;
(1 - 1) && ( x += 1) // 0
x // 1

• 或運算符：|| 或運算符（||）也用於多個表達式的求值。它的運算規則是：若是第一個運算子的布爾值爲true，則返回第一個運算子的值，且再也不對第二個運算子求值；若是第一個運算子的布爾值爲false，則返回第二個運算子的值。

't' || '' // "t"
't' || 'f' // "t"
'' || 'f' // "f"
'' || '' // ""

• 三元運算符：?: 若是第一個表達式的布爾值爲true，則返回第二個表達式的值，不然返回第三個表達式的值。

't' ? 'hello' : 'world' // "hello"
0 ? 'hello' : 'world' // "world"

綁定this

• func.call(thisValue, arg1, arg2, ...)

call的第一個參數就是this所要指向的那個對象，後面的參數則是函數調用時所需的參數

History對象

window.history對象包含樓蘭器的歷史（url）的集合

history方法

• history.back() 後退
• history.forward() 前進
• history.go() 進入歷史中的某個頁面

location對象

window.location對象用於獲取當前頁面的地址（url），並把瀏覽器定向到新的頁面

對象屬性：

• location.hostname web主機域名
• location.pathname 當前頁面的路徑和文件名
• location.port web主機端口
• location.protocol web協議(http://或https😕/)
• location.href 當前頁面url
• location.assign() 加載新的文檔

screen對象

window。screen對象包含有關用戶屏幕的信息

屬性：

• screen.availWidth 可用的屏幕寬度
• screen.availHeight 可用的屏幕高度
• screen.height 屏幕高度
• screen.width 屏幕寬度

計時器

• setInterval()
• setTimeout()