ES6, 函式的擴充套件（剩餘引數，箭頭函式），art-template，symbol, set和map資料結構
阿新 • • 發佈：2020-10-18
一、函式擴充套件:
1.剩餘引數:
1)語法：...變數名（形參名）
2)返回值：陣列
3)注意：必須將剩餘引數放到最後一個形參的位置
// function m1({x=10,y=20}){ // console.log(x,y) // } // function m2({x=10,y=20}={}){ // console.log(x,y) // } // function m3({x,y}={x:10,y:20}){ // console.log(x,y) //} // m1({}) // m2({}) // m3({}) // 剩餘引數 // type number string boolean undefined function object // function fn() { // // 判斷是否為一個數組 // // console.log(Array.isArray(arguments)) // // console.log(arguments instanceof Array) // // console.log(Object.prototype.toString.call(arguments))// // 偽陣列轉真陣列 // // ES5 // // let x = Array.prototype.slice.call(arguments) // // let x = [].slice.call(arguments) // // ES6 // // let x = Array.from(arguments) // // console.log(x) // // console.log(Array.isArray(x)) // } //fn(1, 2, 3, 4) // ...變數名 剩餘引數 function fn(x, y, ...rest) { console.log(rest) console.log(Array.isArray(rest)) }； fn(1, 2, 3, 4)；
擴充套件運算子：
1. 陣列的擴充套件運算子：
1）結合set 實現陣列去重
let arr = [1,3,4,5,3,1,4]; let newArr = [...new Set(arr)]; console.log(newArr); // [1,3,4,5]
// 之前用的一種陣列去重方法
letnewArr2=arr.filter((item,index)=>{
returnarr.indexOf(item)===index;
});
console.log(newArr2);//[1,3,4,5]
2）淺拷貝
let arr1 = [1, 2, 3, [10, 20]]; let arr2 = [...arr1]; arr1[0] = "hello"; arr1[3][0] = "world"; console.log(arr1, arr2);
3）陣列的拉平
// 拉平 let arr1 = [ [1, 2, 3], [4, 5, 6, [1, 2, 3, [3, 4]]] ]; let arr2 = arr1.flat(Infinity); console.log(arr2); //[1, 2, 3, 4, 5, 6, 1, 2, 3, 3, 4]
物件的擴充套件運算子：
1）實現淺拷貝
2）模擬vuex資料
let mapState = { userInfo: { uname: "xiaoming" } }; let mapMutations = { fn() { console.log("fn") } }; let vm = { data: {...mapState }, methods: {...mapMutations } };
2.箭頭函式：
2.1語法：
1）引數：引數為一個值的時候可以省略（）
2）函式體：函式體內只有一句話的時候，可以省略{}和return，但是要注意是物件的時候，要在物件外面加（），防止程式碼歧義；
// function fn(){}； // let f = function(){}； // 語法： // let f = () => {}； // 箭頭的左邊: // 1.沒有引數 // let fn = () => { // console.log("demo") // }; // fn()； // 2.只有一個引數,可以省略（） // let fn = x => { // console.log(x) // }； // fn("hello")； // 3.多個引數不可以省略() // let fn = (x, y) => { // console.log(x, y) // }； // fn("hello", 10)； // 箭頭的右邊：函式體 // 1. 一句話 ,可以省略return和{};但是要注意，如果return出來的結果是物件，為了避免程式碼歧義，需要在物件外加（） // let fn = () => "hello"; // let fn = x => x; // let fn = () => [1, 2, 3]; // let fn = () => ({ // a: 10, // b: 20 // }); // console.log(fn())； // 2.多句話，不可以省略return和{} // let fn = x => { // if (x % 2 == 0) { // return "偶數" // } else { // return "奇數" // }； // }； // console.log(fn(9))； // arr.forEach(()=>{})； // arr.map(()=>{})； // arr.filter(()=>{})； // arr.every(()=>{})； // arr.some(()=>{})； // setInterval(()=>{},2000)；
2.2特點：
1）this指向的是定義時所在的物件（跟著爹走）；
2）Call,apply,bind不能夠改變箭頭函式的this指向；
3）箭頭函式中沒有prototype原型
4）箭頭函式沒有constrcutor沒有構造器
5）不能夠使用new進行例項化
6）箭頭函式中不能夠使用arguments物件，用剩餘引數來代替；
2.3不適用場景：
1）物件函式簡寫不推薦使用箭頭函式；
2）事件的繫結要分情況使用箭頭函式；
二、art-template
-
引入art-template.js檔案
-
使用script標籤定義模板內容，必須id，type指定
<script id="temp" type="text/html"> {{each arr}} <li>{{$value}}---{{$index}}</li> {{/each}} </script>
3. 在js中通過template(),進行模板的查詢和傳遞
let html = template("temp", { arr });
4.在模板引擎當中進行邏輯處理
5.追加元素；
三、Symbol第七種資料型別：基本型別
-
特點：獨一無二
-
作用：從根本上防止屬性名的衝突
-
Symbol()可以加字串，但是隻是識別符號的作用； s1.description 獲取識別符號
-
Symbol.for() 可以使symbol相同
-
Symbol.keyFor(s1)取值
<script>
// let s = Symbol();
// console.log(s); // Symbol()
// console.log(typeof s); // symbol
// let s1 = "hello";
// let s2 = "hello";
// console.log(s1 === s2); // true
// let s1 = Symbol();
// let s2 = Symbol();
// console.log(s1 == s2); // false
// let obj = {
// a: 10,
// a: 20
// };
// console.log(obj); // {a: 20}
// let obj = {
// [Symbol()]: 10,
// [Symbol()]: 20
// };
// console.log(obj); // {Symbol(): 10, Symbol(): 20}
// let s1 = Symbol("s1");
// let s2 = Symbol("s1");
// console.log(s1 == s2); // false
// console.log(s1.description); // s1
let s1 = Symbol.for("s1");
let s2 = Symbol.for("s1");
console.log(s1 === s2); // true
console.log(Symbol.keyFor(s1)); // s1
</script>
四、set和map 資料結構：
1.Set 類似陣列的資料結構；不允許有重複項；
常用方法：
s.size返回的是長度
s.add() 新增內容
s.delete(刪除的元素) 刪除一個內容
s.has(元素) 判斷一個元素是否存在
s.clear()清楚所有的成員
可以使用forEach()
// iterator let s = new Set([1, 2, 3, 1, 2, 3]); console.log(s); // Set(3){1, 2, 3} console.log(Array.isArray(s)); // false console.log(s.size); // 3 s.add("hello"); console.log(s); // Set(4){1, 2, 3, "hello"} s.delete(2); console.log(s); // Set(3){1, 3, "hello"} console.log(s.has(1)); // true s.forEach(item => { console.log(item); // 1 3 hello }); s.clear(); console.log(s); // Set(0){}
2.map 類似物件的資料結構；可以讓任意型別的值，作為key
常用方法:
m.size 成員的個數
m.set([1,2,3],"content3") 新增一個內容
m.get(屬性) 獲取對應的值
m.has(屬性) 判斷屬性是否存在
m.delete(屬性) 刪除屬性
m.clear() 刪除所有的屬性
可以使用forEach迴圈遍歷；
let m = new Map([ [true, "content1"], [ [1, 2, 3], "content2" ] ]); console.log(m.size); // 2 m.set(null, "content3"); console.log(m); // Map(3){true => "content1", Array(3) => "content2", null => "content3"} console.log(m.get(null)); // content3 console.log(m.has(null)); // true m.delete(null); console.log(m); // Map(2){true => "content1", Array(3) => "content2"} m.forEach(item => { console.log(item); // content1 content2 }); m.clear(); console.log(m); // Map(0){}