【JavaScript】JS的堅實基礎

靈感桌面發表於2021-11-08
JavaScriptJS

前言

​ 考慮到在後面的開發中，需要大量的使用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）,感興趣的小夥伴可以關注一下，想要了解哪些內容也可以下方評論留言，以上內容如有錯誤也可以留言告知本人。ヽ(￣▽￣)ﾉ

​

相關文章