【JavaScript】JS的堅實基礎

前言

​ 考慮到在后面的開發中，需要大量的使用js語言去進行開發，所以准備重新規整一下javascript的知識點，專門開了一個js的專欄，用來復習一下js語言。萬事開頭難，要是后面寫的有問題的，歡迎大家在下方無情抽臉！！！

數據類型

在JavaScript中大體存在2大類數據類型，值類型與引用類型;

• 值類型：String、Number、Boolean、Null、Undefined以及Symbol

  值類型是按值存儲，數據存儲在內存棧中，

  Number，String，Boolean,Symbol都對應了一個包裝對象，例如：new Number(5)
  這也是能用原始數據類型調用方法的原理：

  eg：('happy').toString()，'happy'是一個基本數據類型，本身沒有toString的這個方法，所以通過調用ToObject [spec]將值轉換為對象，然后去它的包裝對象new String('happy')中調用，調用完成后包裝對象就會消失，下次需要就會重新創建。

• 引用類型： Object、Array、Function

  引用類型按引用存儲的，存儲的不是值，而是一個地址，數據存儲在內存堆中

數據類型檢測常用方法

• typeof 主要用於原始類型的檢測

typeof 'seymoe'     // 'string'
typeof true         // 'boolean'
typeof 10           // 'number'
typeof Symbol()     // 'symbol'
typeof null         // 'object' 無法判定是否為 null
typeof undefined    // 'undefined'
typeof {}           // 'object'
typeof []           // 'object'
typeof(() => {})    // 'function'

• instanceof 主要用於檢測自定義對象

// 測試構造函數的prototype是否在被檢測對象obj的原型鏈上面
// obj instanceof 構造函數的prototype
[] instanceof Array// true
({}) instanceof Object// true
(()=>{}) instanceof Function// true

• Object.prototype.toString.call數據類型判斷的終極方法

  該方法本質就是依托Object.prototype.toString()方法得到對象內部屬性 [[Class]]
  傳入原始類型卻能夠判定出結果是因為對值進行了包裝
  null 和 undefined 能夠輸出結果是內部實現有做處理

// Object.prototype.toString.call(obj)
Object.prototype.toString.call({})              // '[object Object]'
Object.prototype.toString.call([])              // '[object Array]'
Object.prototype.toString.call(() => {})        // '[object Function]'
Object.prototype.toString.call('seymoe')        // '[object String]'
Object.prototype.toString.call(1)               // '[object Number]'
Object.prototype.toString.call(true)            // '[object Boolean]'
Object.prototype.toString.call(Symbol())        // '[object Symbol]'
Object.prototype.toString.call(null)            // '[object Null]'
Object.prototype.toString.call(undefined)       // '[object Undefined]'
Object.prototype.toString.call(new Date())      // '[object Date]'
Object.prototype.toString.call(new Math())      // '[object Math]'
Object.prototype.toString.call(new Set())       // '[object Set]'
Object.prototype.toString.call(new WeakSet())   // '[object WeakSet]'
Object.prototype.toString.call(new Map())       // '[object Map]'
Object.prototype.toString.call(new WeakMap())   // '[object WeakMap]'

var、let和const

最開始使用javascript的時候var耍的那叫一個爐火純青，等es6出來后提供的let和const關鍵字一開始覺得沒有var好用，等實際用過后才發現真香！！！(≖ᴗ≖)✧基本現在var已經給淘汰了。

• var：全局作用域（函數內），聲明存在變量提升，好用是好用，難受也難受！

  執行javascript代碼時會分為倆個階段，預編譯階段和運行時階段，

  其中在預編譯階段時候會進行變量聲明提升，意思就是會將var定義的變量聲明放到代碼頂部，變量賦值則是在代碼運行時階段進行，可以通過下面的實例來理解一下JS執行時的變量提升。

  console.log(a);
  var a = 0;
  
  // 等價於
  var a = undefined;
  console.log(a);
  a = 0;
  

  當然，除了變量提升外，函數提升也是一樣的，大家感興趣的可以自己試一下。

  function fun() {}  //  這種聲明寫法會導致函數提升，所以不論聲明在什么位置，都可以調用它，且它本身不會執行
  
  var foo = function(){}  //  這種寫法會導致變量提升，但是不會導致函數提升，這時候就必須先聲明再調用
  

• let：塊級作用域，可以看成{}形成一個塊級作用域

  首先let聲明變量不會進行變量提升，也就是說如果想要使用let聲明的變量，必須在使用之前聲明該變量；

  在for循環中可以通過let來給每一次循環時的變量分配各自作用域，從而互不影響。

  // 不存在變量提升
  console.log(a);  // a is not defined.
  let a = 1;
  
  // 塊級作用域
  let b = 1; 
  {
     console.log(b) // 1 作用域內可以訪問作用域外申明的變量
     let c = 1;
  }
  console.log(c) // c is not defined. 作用域外訪問不到作用域內申明的變量
  

• const：塊級作用域

  和let關鍵字一樣會形成塊級作用域，但是const通常用來聲明一個常量！

  對於棧存儲類型數據來說，通過const申明賦值之后便不可更改；

  對於堆存儲類型數據來說，通過const申明賦值之后堆引用地址不可更改，但是可以更改堆地址對應的數據（比如對象的屬性，數組的選項等！）

字符串API

str.split('-')   //按-分割字符串返回一個數組
str.substr(startIndex , count)    //返回截取的新字符串 
str.substring(startIndex , endIndex)     //返回新字符串（包括startIndex不包括endIndex）
str.slice(startIndex , endIndex)     //返回新字符串（包括startIndex不包括endIndex）
str.repalce(舊字符串 , 新字符串)     //替換字符串
str.toLowerCase()     //轉小寫
str.toUpperCase()     //轉大寫
str.trim()     //去除兩端空格
str.charAt ( index )     //返回index位置的字符
str.concat ( str1 , str2 , ...)   //返回拼接后的新字符串
str.indexOf (str1 , startIndex)    //返回str1的位置索引，沒有返回-1
str.lastIndexOf ( str1 )   //從后向前找返回str1的位置索引，沒有返回-1

數字API

Math.abs(x)   //返回 x 的絕對值。
Math.ceil(x)   //返回 x，向上舍入為最接近的整數。
Math.floor(x)   //返回 x，向下舍入為最接近的整數。
Math.max(x, y, z, ..., n)   //返回值最大的數字。
Math.min(x, y, z, ..., n)	  //返回值最小的數字。
Math.pow(x, y)   //返回 x 的 y 次冪值。
Math.random()   //返回 0 到 1 之間的隨機數。
Math.round(x)   //將 x 舍入為最接近的整數。
Math.trunc(x)   //返回數字 (x) 的整數部分。

數組API

// splice會改變原始數組
array.splice(startIndex , deleteCount , item1,item2, ...)  // 一般用於刪除元素（也可替換(插入)元素）

// slice返回一個新數組
array.slice(?startIndex , ?endIndex)  // 截取的數組值放入一個新的數組中（不包括endIndex位置的元素）

// includes:ES7中的，判斷該數組中是否包含指定的值
array.includes(elem,[startIndex]) 
// 和indexOf的區別是includes可以發現NaN，而indexOf不能
[NaN].includes(NaN) // true
[NaN].indexOf(NaN) // -1

array.concat(array1 , array2 , ...)  // 組合返回新數組
array.push( item )  // 插入數組最后位置，返回數組新的長度
array.pop()  // 刪除數組最后一個元素，返回刪除的這個元素值
array.shift()  // 刪除數組的第一個元素，返回刪除的這個元素值
array.unshift( item )  // 在數組第一個元素之前插入新元素，返回新數組的長度
array.join('-')  // 以-將數組每一項拼成一個字符串，返回拼湊好的字符串
// array.join()  array.toString()
array.reverse()  // 反轉數組並返回
array.sort(function(a, b) { return a-b;})  // 排序(升序)

// 循環遍歷
array.forEach(function(value){})
array.forEach(function(value,index,newArray){})

// Map遍歷數組的每一項，把執行后的結果全部插入一個新的數組中並返回
array.map(function(value){
  return value*2;
})  

// Filter返回符合條件的值組成的新數組
array.filter(function(value){
  return value>3;
})

// Every返回true/false（只有數組每一項都符合條件才會返回true）【確定了結果就會停止遍歷】
array.every(function(value){
  return value>0;
})

// Some返回true/false（只要數組中有一項滿足條件就會返回true）【確定了結果就會停止遍歷】
array.some(function(value){
  return value>0;
})

// indexOf()返回查找元素從前往后的第一個元素位置索引
var index = ['tang','fu','qiang','fu'].indexOf('fu'); // index為1；
// lastIndexOf()返回查找元素從后往前的第一個元素位置索引
var lastIndex = ['tang','fu','qiang','fu'].lastIndexOf('fu'); // lastIndex為3

// Array.from方法將倆類對象轉化為真正的數組。
// 類似於數組的對象 和 可遍歷(Iterable)的對象(包括ES6中的數據結構Set和Map)
Array.from(new FormData(from))

對象API

Object.keys(obj)  // 方法會返回由一個給定對象的自身【可枚舉屬性】組成的數組
	var arr = ['a', 'b', 'c'];
  console.log(Object.keys(arr));       --- ['0', '1', '2']

  var obj = { 0: 'a', 1: 'b', 2: 'c' };
  console.log(Object.keys(obj));  // console: ['0', '1', '2']

	var anObj = { 100: 'a', 2: 'b', 7: 'c' };
	console.log(Object.keys(anObj));  // console: ['2', '7', '100']

Object.assign()  // 方法用於將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。eg: Object.assign(target, ...sources)

Object.getPrototypeOf(obj)  // 返回指定對象的原型（內部[[Prototype]]屬性的值）
obj.hasOwnProperty(prop)  // 返回一個布爾值，指示對象自身屬性中是否具有指定的屬性。
Object.create(創建對象的原型 , {對象自身可枚舉屬性(可選)} ) // eg: Object.create(Array.prototype)
Object.defineProperty(Obj, prop, descriptor) // 返回被修改的對象
  descriptor：
  		value：默認undefined，該屬性對應的值，可以是任何有限的JavaScript值，(函數、數字、對象等)
			writable：默認false，設置為true時value才能夠被賦值運算符改變
  		configurable：默認為false不可修改，設置為true可以修改，也能刪除該屬性
      enumerable：默認為false,設置為true該屬性才能夠出現在對象的枚舉屬性中
			
//循環遍歷：
// for in: 遍歷時候不僅能讀取對象自身的成員屬性，還可以讀取原型鏈上對象的原型屬性，所以可以使用hasOwnProperty判斷一個屬性是不是自身上的屬性,返回true表示這個屬性是對象的成員屬性，不是原型屬性
for(key in obj){
  if(obj.hasOwnProperty(key)){
    object[key] = 1;
  }   
}

// for of:遍歷所有數據機構的統一方法
// 一個數據結構只要部署了Symbol.iterator屬性，就被視為具有iterator接口，就可以用for...of來遍歷它的成員,也就是說,for...of循環內部調用的是數據結構的Symbol.iterator方法

日期API

const myDate = new Date([params]); // params可取值(月份0~11)：空  2019,9,20  '2019/9/20' '2019-9-20'  '2019-9-20 17:27:30'  

myDate.getYear();                           //獲取當前年份(2位)
myDate.getFullYear();                       //獲取完整的年份(4位,1970-????)
myDate.getMonth();                          //獲取當前月份(0-11,0代表1月)
myDate.getDate();                           //獲取當前日(1-31)
myDate.getDay();                            //獲取當前星期X(0-6,0代表星期天)
myDate.getTime();                           //獲取當前時間(從1970.1.1開始的毫秒數)
myDate.getHours();                          //獲取當前小時數(0-23)
myDate.getMinutes();                        //獲取當前分鍾數(0-59)
myDate.getSeconds();                        //獲取當前秒數(0-59)
myDate.getMilliseconds();                   //獲取當前毫秒數(0-999)
myDate.toLocaleDateString();                //獲取當前日期
myDate.toLocaleTimeString();                //獲取當前時間
myDate.toLocaleString( );                   //獲取日期與時間

總結

以上就是總結的javascript基礎中一部分了，關於javascript基礎還有很多內容，這邊就不再詳細介紹了，下一篇講一下JS的事件循環（Event Loop）,感興趣的小伙伴可以關注一下，想要了解哪些內容也可以下方評論留言，以上內容如有錯誤也可以留言告知本人。ヽ(￣▽￣)ﾉ

​