JavaScript那些事--✪--引用類型的詳細盤算

引用類型是一種數據結構，用於 將數據和功能組織在一起，有時候也被稱爲對象定義。因爲它們 描述一類 對象所具有的屬性和方法

Object

創建

方法一：字面量

  let student = {} // 創建一個空對象，沒有任何屬性
  let student1 = {name: '小明'}
  console.log(student1) // Object {name: "小明"}

方式二：通過new創建

  let student = new Object() // 創建一個空對象
  student.name = '小明'
   console.log(student) // Object {name: "小明"}

注意：

• new 後跟隨一個函數調用(該函數稱作構造函數)
• 構造函數用以初始化一個新對象

方法三： 通過構造函數

let Student = function (name) {
    this.name = name
  }
  let student2 = new Student('鳴人')
  console.log(student2) // Student{name: "小明"}

方法四：Object.create（ES5）

  let student = Object.create({name: '小明'}) // student繼承了屬性name
  console.log(student) // Object {}
  let student1 = Object.create(Object.prototype) // 與{}、new Object()一樣

註釋四種創建的返回類型和值。Object.create爲空對象，具體原因看原型鏈。

Array

創建

// 方法一
let fruit = new Array('apple','banana')
// 方法一
let fruit1 = ['apple','banana']
// 方法三 --ES6
//Array.of方法用於將一組值，轉換爲數組。
let fruit3 = Array.of('apple','banana')

檢測

// 方法一
console.log(fruit instanceof Array)  // true 
// 方法二
console.log(fruit.constructor == Array)  // //true 
// 方法三
console.log(Object.prototype.toString.call(fruit) === '[object Array]') // true
// 方法四
console.log(Array.isArray(fruit)) // true

注意：

• 方法一二：缺點：多個全局環境下會出現問題，比如一個網頁中嵌套多個Iframe。
• 方法三沒有兼容性問題，很好檢測數組類型。但是寫起來太長了啊。
• 方法四檢測非常nice，但只限於ES5及以上。

方法

棧方法

let arr = [1,2,3]
arr.push('猜我在哪裏')
console.log(arr) // arr = [1, 2, 3, "猜我在哪裏"]
arr.pop() 
console.log(arr) // arr = [1,2,3]

隊列方法

let arr  = [1,2,3]
arr.unshift('猜我在哪裏') 
console.log(arr)// arr = ["猜我在哪裏", 1, 2,3]
arr.shift() 
console.log(arr)// arr = [1,2,3]

注意：pop與shift會返回被移除的值（let c =arr.pop()）

排序方法

let arr = [1, 2, 3, 5, 4]
arr.reverse() // 反轉
console.log(arr) // [4, 5, 3, 2, 1]
arr.sort() // 排序
console.log(arr) //  [1, 2, 3, 4, 5]

注意：sort方法不傳遞任何參數時，則會把每一項轉換成字符串，然後按照字符串對應的ASCII碼的大小進行排序。所以會出現下面情況：

let arr1 = [50, 30, 200]
arr1.sort()
console.log(arr1) // [200, 30, 50]-排序錯誤！

 // sort方法有2個參數，兩者對比之後進行交換
  let arr1 = [50, 30, 200]
  arr1.sort((a, b) => {
    return a - b // 大於0則交換--從小到大
  })
  console.log(arr1)

注意：sort排序實際是一種冒泡排序。如果數據很多的時候，比如1000，優化方式可以先循環一下，把大於等於500的分一組，小於500的分一組。然後對兩字分別排序，最後加起來，性能會更好。

操作方法-（ES3）

join()

• 定義：將數組轉化成字符串。
• 參數：不傳則爲‘，’ 若傳入參數則在每個元素間隔插入。

  let arr = [1, 2, 3]
  arr.join('-')
  console.log(arr.join()) // '1,2,3'
  console.log(arr.join('-')) // '1-2-3'

concat

• 定義：把參數加在數組後。
• 參數：字符串或數組(參數不限)。

  let arr = [1, 2, 3]
  arr.concat(4, 5, 6)
  console.log(arr) // [1, 2, 3]
  console.log(arr.concat(4, 5, 6)) // [1, 2, 3, 4, 5, 6]
  console.log(arr.concat([4, 5, 6])) // [1, 2, 3, 4, 5, 6]
  arr.push([4, 5, 6])
  console.log(arr) // [1, 2, 3, Array(3)]

注意：concat與push的區別現在很明顯了

• concat會返回一個新的數組，而push是在原基礎上修改。
• concat會扁平化一級數組，而push不會。

slice

• 定義：返回數組的一個片段或子數組.。
• 參數：無 、一個參數、倆個參數。

  let arr = [1, 2, 3]
  let arr1 = arr.slice()
  arr1.push(4)
  console.log(arr) // [1,2,3]
  console.log(arr1) // [1,2,3,4]

  let arr2 = arr.slice(1)
  console.log(arr2) // [2，3]

  let arr3 = arr.slice(1, 2)
  console.log(arr3)// [2]

  let arr4 = arr.slice(-3, -2)
  console.log(arr4)// [1]

注意：

• 無參數相當於複製一個數組
• 如果只指定一個參數，返回的數組的該值位置到結尾的所有元素。
• 如果只指定兩個參數，返回的是左閉右開 [數組[參數1]…數組[參數2])
• 如果參數是負數，相當於數組長度加你的參數值。比如arr.slice(-3, -2)相當於arr.slice(arr.length-3,arr.length-2)也就是arr.slice(0,1)。也就是倒着截取。

splice
定義：從數組中刪除元素、插入元素、或者同時完成這倆種操作(應該是最強大的數組方法)。

• 刪除：可以刪除任意數量的項，只需要知道2個參數【要刪除的第一項位置和要刪除幾個】
• 插入：可以向指定位置插入任意數量的項，只需提供三個參數【起始位置，0(要刪除0個數),要插入的值】
• 替換：可以指定位置插入任意數量的項，且同時刪除任意數量的項，只需三個參數【起始位置，要刪除的幾個數，要插入的值】

  let arr = [1, 2, 3]
  arr.splice(0, 1)
  console.log(arr) // [2, 3]
  arr.splice(1, 0, '插入1', '插入2', '插入3')
  console.log(arr) // [2, "插入1", "插入2", "插入3", 3]
  arr.splice(2, 2, '替換1', '替換2', '替換3')
  console.log(arr) // [2, "插入1", "替換1", "替換2", "替換3", 3]

索引方法 （ES5）

indexOf和lastIndexOf

• 定義：搜索數組中給定值的元素。
• 參數：【參數1(查找的值)，參數2(從數組某個索引開始)】。
• 返回值：找到則返回該值下表，沒有則返回-1。

   let arr = [1, 2, 3, 'apple', 'banana']
  console.log(arr.indexOf(4)) // -1 未找到, 返回-1
  console.log(arr.indexOf('apple')) // 3 找到, 返回該索引
  console.log(arr.indexOf('apple', 3)) //3 從下標第三個開始(包含)
  console.log(arr.indexOf('apple', 's')) // 3   格式不正確, 從第一項開始查找

迭代方法（ES5）

every()

• 定義：對數組中的每一項運行給定函數，如果該每一項都通過條件，則返回true。

  let arr = [1, 2, 3, 'apple', 'banana']
  let everyArr = arr.every(function (item, index, array) {
    return item > 0
  })
  console.log(everyArr) // false

some()

• 定義：對數組中的每一項運行給給定函數，如果任何一項通過條件，則返回true。

  let arr = [1, 2, 3, 'apple', 'banana']
  let someArr = arr.some(function (item, index, array) {
    return item > 0
  })
  console.log(someArr) // true

filter()

• 定義：對數組中的每一項運行給定函數，通過函數的項組成的數組並且返回。

  let arr = [1, 2, 3, 'apple', 'banana']
  let filterArr = arr.filter(function (item, index, array) {
    return item > 0
  })
  console.log(filterArr) // [1, 2, 3]

map()

• 定義：對數組中的每一項運行給定函數，返回每一項調用後產生的結果組成新數組。

  let arr = [1, 2, 3, 'apple', 'banana']
  let mapArr = arr.map(function (item, index, array) {
    return item + 'test'
  }) 
  console.log(mapArr) //  ["1test", "2test", "3test", "appletest", "bananatest"]

forEach()

• 定義：對數組中的每一項運行給定函數。這個方法沒有返回值。大白話就是遍歷循環。【但是使用break會報錯，用return停止循環】

  let arr = [1, 2, 3, 'apple', 'banana']
  arr.forEach(function (item, index, array) {
    if (index > 2) {
      // break // 報錯 Uncaught SyntaxError: Illegal break statement
      return
    }
    console.log(item) // 1 2 3

歸併方法 （ES5）

reduce()和reduceRight()

• 定義：迭代數組中的所有項，然後生成一個最終返回值。

  let arr = [1, 2, 3]
  let sum = arr.reduce(function (pre, cur, index, array) {
    return pre + cur
  })
  console.log(sum) // 6

ES6新增

ES6的新增函數方法

Date

ECMAScript中的Date類型是在早期JAVA中的java.util.Date類基礎上構造的。爲此，Date類型使用UTC(國際協調時間)1970年1月1日零時開始經過毫米數來保存日期。

// 返回當前日期
let a = new Date()
let d = new Date(2020,4,13,14,45,13)
console.log(d) // Wed May 13 2020 14:45:13 GMT+0800 (中國標準時間)
/*
*Date.parse參數：表示日期的字符串
* 返回日期毫秒數
*/
let b =Date.parse('2020/5/13 14:45:13')
console.log(b)// 1589352313000
console.log(new Date(c)) // Wed May 13 2020 14:45:13 GMT+0800 (中國標準時間)
/*
*Date.UTC參數：表示日期的字符串
* 返回日期毫秒數
*/
let c = Date.UTC(2020,4,13,14,45,13)
console.log(c)// 1589381113000
// 可以看見多了8小時--22:45:13
console.log(new Date(c)) // Wed May 13 2020 22:45:13 GMT+0800 (中國標準時間)

注意：

• UTC不屬於任何時區，UTC一般稱爲世界協調，又稱爲世界統一/標準時間。
• 在Date.UTC與new Date的
  • 月份：0~11
  • 小時：0~23
  • 分鐘，秒：0~59
• UTC + 時區差 ＝ 本地時間（中國東八區，時差+8）
• 其他方法參考W3C

RegExp類型

創建方法：

• var re = new RegExp(pattern,flags)
• var re = /pattern/flags

說明

• pattern：正則表達式
• flags：標誌
  • g表示全局模式
  • i表示不區分大小寫模式
  • m表示多行模式

let a = 's1,as1,as1,test'
let re = /s1/i
let re2 = /s1/gi
let re3 = /ss/gi

//查
conosole.log(a.search('as1'))
//替換
console.log(a.replace(re,"me")) //"me,as1,as1,test"
console.log(a.replace(re2,"me")) // "me,ame,ame,test"

// 判斷字符串是否滿足正則表達式
console.log(re2.test(a)) // true
console.log(re3.test(a)) // false