JavaScript系列之一 (數據結構)

JavaScript數據類型

JavaScript數據類型分類

JavaScript數據類型分爲基本類型和引用類型
基本類型:null, undefined, number, string, boolean, symbol(ES6)
引用類型: Array, Object, Function, Error, RegExp, Date

Javascript對象分類
本地對象:String, Number, Boolean, Array, Object, Function, Date, RegExp…
內置對象:Math, JSON, Global

基本類型

Null類型

Null 類型表示‘ 無 ’的意思,經常在面試中問到, 不能通過typeof判斷它爲基本類型, 轉換爲數值類型爲0

typeof null    //結果爲Object
Number(null)   //結果爲 0

Undefined類型

表示變量未初始化,它本來有值的,只是未初始化,轉換爲數值爲 NaN

let a;
Number(a);  	//結果爲NaN

Number 類型

1、number 類型是基本類型, 但也有自己的構造函數Number,可以通過 new 運算符創建自己的實例
2、NaN表示不是數字的數值類型,通過 typeof判斷爲 “number"類型,但他表示無的意思,可以通過Number.isNaN和數值區別開來
Number常用API

toString();		//把數字轉換爲字符串,使用本地數字格式順序。
toLocaleString();
toFixed();    //把數字轉換爲字符串,結果的小數點後有指定位數的數字。
valueOf()	//返回一個 Number 對象的基本數字值。
比如:eg1
let num = new Number(222)
typeof num		//結果爲   "object"類型
let num1 = num.valueOf()  //得到Number對象的基本類型
typeof(num1)	//結果爲   "number"類型

eg2
let str = '22sss';
Number(str)  // NaN
Number.isNaN(str)  // true

eg3
let result = 0.1 + 0.2 		// 0.30000000000000004
result.toFixed(2)			// "0.30"

ES6數值Number的擴展

Number.isFinite();
Number.isNaN();
Number.parseInt();
Number.parseFloat();
Number.isInteger()

String 類型

string 類型是基本類型, 也有自己的構造函數String,可以通過 new 運算符創建自己的實例

  1. 新增了模板字符串 ``
    String類型API
常用API:

indexOf()	檢索字符串。
lastIndexOf()	從後向前搜索字符串。
slice()	提取字符串的片斷,並在新的字符串中返回被提取的部分。
charAt()	返回在指定位置的字符。
toLocaleLowerCase()	把字符串轉換爲小寫。
toLocaleUpperCase()	把字符串轉換爲大寫。
toLowerCase()	把字符串轉換爲小寫。
toUpperCase()	把字符串轉換爲大寫。
substr()	從起始索引號提取字符串中指定數目的字符。
substring()	提取字符串中兩個指定的索引號之間的字符。
toSource()	代表對象的源代碼。
toString()	返回字符串。
valueOf()	返回某個字符串對象的原始值。
charCodeAt()	返回在指定的位置的字符的 Unicode 編碼。
concat()	連接字符串。

用來正則匹配API
match()	找到一個或多個正則表達式的匹配。
replace()	替換與正則表達式匹配的子串。
search()	檢索與正則表達式相匹配的值。
split()	把字符串分割爲字符串數組。

不怎麼常用,可以爲以後業務需求作參考
fixed()	以打字機文本顯示字符串。
fontcolor()	使用指定的顏色來顯示字符串。
fontsize()	使用指定的尺寸來顯示字符串。
fromCharCode()	從字符編碼創建一個字符串。
italics()	使用斜體顯示字符串。
link()	將字符串顯示爲鏈接。
localeCompare()	用本地特定的順序來比較兩個字符串。
small()	使用小字號來顯示字符串。
strike()	使用刪除線來顯示字符串。
sub()	把字符串顯示爲下標。
sup()	把字符串顯示爲上標。

ES6字符串擴展方法

includes(), 
startsWith(), endsWith() //以什麼開始或結束, 返回boolean
repeat()
padStart('content', num)//content填充的內容, num填充多少位
padEnd()    //填充字符串,使用場景 比如時間格式 2018-09-08 填充2位

代碼示範:
let url = 'www.baidu.com'
url.includes('baidu')	//true
url.startsWith('www')	//true
url.endsWith('www')		//false
url.repeat(3)   //"www.baidu.comwww.baidu.comwww.baidu.com"
(1).toString().padStart(2, 0)  // '01' 

Boolean類型

boolean 類型是基本類型, 但也有自己的構造函數boolean,可以通過 new 運算符創建自己的實例
Boolean常用來判斷

null, undefined, 0, -0, +0, 空字符串, false, NaN 都會轉換爲 false

類型轉換

顯示類型轉換

Number, parseInt(), parseFloat(), 一目運算符 加號 ‘+’ 和 減號 ‘-

隱式轉換

if條件表達式
== 等於號

image

引用類型

Array類型

concat()	連接兩個或更多的數組,並返回結果。
join()	把數組轉換爲字符串。元素通過指定的分隔符進行分隔。
pop()	刪除並返回數組的最後一個元素
push()	向數組的末尾添加一個或更多元素,並返回新的長度。
shift()	刪除並返回數組的第一個元素
unshift()	向數組的開頭添加一個或更多元素,並返回新的長度。
reverse()	顛倒數組中元素的順序。
slice()	從某個已有的數組返回選定的元素
sort()	對數組的元素進行排序
splice()	刪除元素,並向數組添加新元素。
toSource()	返回該對象的源代碼。
toString()	把數組轉換爲字符串,並返回結果。
toLocaleString()	把數組轉換爲本地數組,並返回結果。
valueOf()	返回數組對象的原始值

ES6數組的擴展

擴展運算符
Array.from()  //將多個僞數組轉換爲數組,可以調用數組API
Array.of()	  //將多個項轉換爲數組
copyWithin()	//在數組內複製
find()findIndex()  //接收一個回調函數,返回找到的第一個項的值或下標
fill() 填充數組
entries(),keys()values() //結合for of 遍歷
includes()  //返回booean
flat(),flatMap() //數組降維

數組迭代的API

reduce(); //彙總
map();  //映射,返回一個新數組
filter(); //過濾數組,返回一個新數組
forEach(); //遍歷數組
some();  //只要滿足一個條件, 返回true
every();  //滿足所有條件,返回true, 否則返回false

代碼示範;
let arr = [2,4,6,8,10];
arr.map(item=>item*2)  //[4, 8, 12, 16, 20]
arr.reduce((pre,next, index,arr)=>{return pre+next})  //30
arr.forEach(item=>{console.log(item)})
//2
//4
//6
//8
//10
arr.filter(item=>item>4)  //[6, 8, 10]
arr.some(item=>item>4)		//true
arr.every(item=>item>4)		//false

Object數據類型

ES5中的方法

Object對象的靜態方法

let obj = {name: '張三', sex: '男', age: 33};
1. Object.keys() 與 Object.getOwnPropertyNames();  
//同:返回的是對象鍵的數組 異:Object.getOwnPropertyNames()會遍歷原型對象的屬性
Object.keys(obj)    //["name", "sex", "age"] 
2. Object.getOwnPropertyDescriptors( obj, prop) //獲得對象的描述
{
configurable: '',
enumerable: '',
writable: '',
value: ''
}
3.Object.defineProperty(obj, prop, {}) 和 Object.defineProperties(obj, prop, {}) //定義對象的屬性
4.控制對象狀態的方法

  a).Object.preventExtensions() 防止對象擴展

  b).Object.isExtensible() 判斷對象是否可擴展

  c).Object.seal() 禁止對象配置

  d).Object.isSealed() 判斷一個對象是否可配置

  e).Object.freeze() 凍結一個對象

  f).Object.isFrozen() 判斷一個對象是否被凍結
5.原型鏈相關方法

  a).Object.creat() 可以指定原型對象和屬性,返回一個新的對象

  b).Object.getPrototypeOf() 獲取對的的Prototype對象

除了Object對象本身的方法,還有不少方法是部署在Object.prototype對象上的,所有Object的實例對象都繼承了這些方法。Object實例對象的方法,主要有以下六個。(此句摘自 --阮一峯 博客)

a). valueOf()返回當前對象對應的值

b). toString()返回當前對象對應的字符串形式,用來判斷一個值的類型

c). toLocaleString()返回當前對象對應的本地字符串形式

d). hasOwnProperty()判斷某個屬性是否爲當前對象自身的屬性,還是繼承自原型對象的屬性

e). isPrototypeOf()判斷當前對象是否爲另一個對象的原型

f). propertyIsEnumerable()判斷某個屬性是否可枚舉

ES6對象的新增方法

1. 屬性和方法可以簡寫
let name = '李四';
{ name: name} => {name}
getName: function() {console.log(this.name)}; 等價於 getName(){console.log(this.name)}
3. 
Object.is() //它用來比較兩個值是否嚴格相等,與嚴格比較運算符(===)的行爲基本一致
4. Object.assign() //實行的是淺拷貝,而不是深拷貝。也就是說,如果源對象某個屬性的值是對象,那麼目標對象拷貝得到的是這個對象的引用。
5. Object.getOwnPropertyDescriptors()  //可以獲取該屬性的描述對象
//目前,有四個操作會忽略enumerable爲false的屬性。

    for...in循環:只遍歷對象自身的和繼承的可枚舉的屬性。

    Object.keys():返回對象自身的所有可枚舉的屬性的鍵名。

    JSON.stringify():只串行化對象自身的可枚舉的屬性。

    Object.assign(): 忽略enumerable爲false的屬性,只拷貝對象自身的可枚舉的屬性。

  ES6 規定,所有 Class 的原型的方法都是不可枚舉的。
6. __proto__屬性,Object.setPrototypeOf(),Object.getPrototypeOf()
Object.keys(),Object.values(),Object.entries()
Object.fromEntries()
7. super 關鍵字

8.Object.keys(),Object.values(),Object.entries()
9. 對象的擴展運算符

  a). 解構賦值

  b). 擴展運算符

10.Null 傳導運算符

屬性的遍歷一共有5種:

for…in循環遍歷對象自身的和繼承的可枚舉屬性(不含 Symbol 屬性)。

Object.keys返回一個數組,包括對象自身的(不含繼承的)所有可枚舉屬性(不含 Symbol 屬性)的鍵名。

Object.getOwnPropertyNames返回一個數組,包含對象自身的所有屬性(不含 Symbol 屬性,但是包括不可枚舉屬性)的鍵名。

Object.getOwnPropertySymbols返回一個數組,包含對象自身的所有 Symbol 屬性的鍵名。

Reflect.ownKeys返回一個數組,包含對象自身的所有鍵名,不管鍵名是 Symbol 或字符串,也不管是否可枚舉
參考文檔:
W3CSchool
https://www.cnblogs.com/z-dl/p/8204023.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章