前面分享了四篇有關ES6相關的技術，如想了解更多，可以查看以下連接
《ES6學習筆記（一）：輕鬆搞懂面向對象編程、類和對象》
《ES6學習筆記（二）：教你玩轉類的繼承和類的對象》
《ES6學習筆記（三）：教你用js面向對象思維來實現 tab欄增刪改查功能》
《ES6學習筆記（四）：教你理解ES6的新增語法》
文章目錄
Array的擴展方法
擴展運算符（展開語法）
擴展運算符可以將數組或者對象轉換爲用逗號分隔的參數序列
// 擴展運算符可以將數組拆分成以逗號分隔的參數序列
let arr = [1, 2, 3]
console.log(...arr) // 1 2 3
擴展運算符可以應用於合併數組
// 擴展運算符應用於數組合並
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, ...arr2]
console.log(arr3) // [1, 2, 3, 4, 5, 6]
// 合併數組的第二種方法
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
arr1.push(...arr2)
console.log(arr1) // [1, 2, 3, 4, 5, 6]
利用擴展運算符將類數組或可遍歷對象轉換爲真正的數組
<div>1</div>
<div>2</div>
<div>3</div>
let oDivs = document.getElementsByTagName('div')
console.log(oDivs) //HTMLCollection(3) [div, div, div]
const arr = [...oDivs];
console.log(arr) //(3) [div, div, div]
構造函數方法： Array.from()
將類數組或可遍歷對象轉換爲真正的數組
let arrLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}
let arr2 = Array.from(arrayLike) //['a', 'b', 'c']
方法還可以接受第二個參數，作用類似於數組的map方法，用來對元素進行處理，將處理後的值放入返回的數組。
let arrLike = {
'0': 1,
'1': 2,
'2': 3,
length: 3
}
let arr2 = Array.from(arrLike, item => item * 2)
console.log(arr2) //(3) [2, 4, 6]
實例方法：find()
用於找出第一個符合條件的數組成員，如果沒有找到返回undefined
let arr = [{
id: 1,
name: 'lanfeng'
},
{
id: 2,
name: 'qiuqiu'
}
];
let target = arr.find((item, index) => item.id === 2)
console.log(target) //{id: 2, name: "qiuqiu"}
實例方法： findIndex()
用於找出第一個符合條件數組成員的位置，如果沒有找到返回-1
let arr = [1, 5, 10, 15]
let index = arr.findIndex(value => value > 9)
console.log(index); //2
實例方法： includes()
表示某個數組是否包含給定的值， 返回布爾值
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
String的擴展方法
模板字符串
ES6新增的創建字符串的方式，使用反引導號定義
模板字符串中可以換行
在模板字符串中是可以調用函數的
let name = `zhangsan`
let sayHello = `hello, my name is ${name}`
console.log(sayHello ) // hello, my name is zhangsan
//模板字符串中可以換行
let result = {
name: 'zhangsan',
age: 20,
sex: '男'
}
let html=`<div>
<span>${result.name}</span>
<span>${result.age}</span>
<span>${result.sex}</span>
</div>`;
console.log(html)
// 在模板字符串中是可以調用函數的
const sayHello = function() {
return 'hello'
}
let greet = `${sayHello()}, lanfeng`
console.log(greet) //hello, lanfeng
實例方法： startsWith()和endsWith()
startsWith(): 表示參數字符串是否在原字符串的頭部，返回布爾值
endsWith(): 表示參數字符串是否在原字符串的尾部，返回布爾值
let str = 'hello world !'
str.startsWith('hello') // true
str.endsWith('!') //true
實例方法：repeat()
repeat方法表示將原字符串重複n次，返回一個新字符串
const str1 = 'x'.repeat(3)
console.log(str1) // xxx
const str2 = 'hello'.repeat(2)
console.log(str2) // hellohello
Set數據結構
ES6提供了新的數據結構Set.它類似於數組，但是成員的值都是唯一的，沒有重複值
Set本身就是一個構造函數，用來生成Set數據結構
Set函數可以接受一個數組作爲參數，用來初始化
const set = new Set([1, 2, 3, 4, 4])
console.log(set.size) // 4 數組去重
console.log(set) //Set(4) {1, 2, 3, 4}
//轉換成數組
console.log([...set]) //[1, 2, 3, 4]
實例方法
- add(value)：添加某個值，返回 Set 結構本身
- delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功
- has(value)：返回一個布爾值，表示該值是否爲
- Set 的成員
clear()：清除所有成員，沒有返回值
const s = new Set();
s.add(1).add(2).add(3); // 向 set 結構中添加值
s.delete(2) // 刪除 set 結構中的2值
s.has(1) // 表示 set 結構中是否有1這個值 返回布爾值
s.clear() // 清除 set 結構中的所有值
遍歷
Set結構的實例與數組一樣，也擁有forEach方法，用於對每個成員執行某種操作，沒有返回值
const set = new Set([a, b, c])
set.forEach(item => {
console.log(item)
})
總結
本篇文章主要分享了ES6的內置擴展對象的Array的擴展方法、String的擴展方法、Set數據結構等這幾面所包含的一些方法的用法及例子。