簡化物件寫法
箭頭函式及宣告特點
- 申明一個函式
- 箭頭函式特點
- - 箭頭函式的實踐
- ES6允許給函式引數賦值初始值
- rest引數
- 擴展運算子
- - 擴展運算子參考
- Symbol
- - Symbol特點
- Symbol創建物件屬性
- Symbol的內置屬性
- - Symbol.hasinstance
  - Symbol.isConcatSpreadable

簡化物件寫法

ES6 允許在大括號里面，直接寫入變數和函式，作為物件的屬性和方法，這樣更簡介，

在ES5中創建物件的寫法：

let name = "江流兒"
let showName = function(){
    console.log("name:",this.name);
}
const People = {
    name: name,
    showName: showName,
    func: function(){
        console.log("正在西游的路上！");
    }
}
console.log(People);

在這里插入圖片描述

在ES6中創建物件的寫法：

let name = "江流兒"
let showName = function(){
    console.log("name:",this.name);
}
const people = {
    name,//省略了重復的作業
    showName,
    func(){
        console.log("正在西游的路上！");
    }
}
console.log(people);

在這里插入圖片描述

箭頭函式及宣告特點

ES6 允許使用箭頭=>定義函式

申明一個函式

在ES5中創建函式的寫法：

let fn = function(a, b){
	...//代碼體
}

在ES6中創建函式的寫法：

let fn = (a, b) => {
	...//代碼體
}

箭頭函式特點

this 是靜態的，this始終指向函式宣告時所在作用域下的 this 的值，即使使用call、apply、bind函式修改this，也不會起作用.

//ES5寫法
function getName1() {
    console.log("ES5:",this);
};
//ES6寫法
let getName2 = () => {
    console.log("ES6:",this);
};
const people = {
    name: "江流兒"
};
getName1.call(people);//people
getName2.call(people);//window

在這里插入圖片描述

不能作為建構式實體化物件

let Person = (name, age) => {
    this.name = name;
    this.age = age;
}
let stu = new Person("心猿", 5000);
console.log(stu);//err

在這里插入圖片描述

不能使用arguments變數

let fn =() =>{
    console.log(arguments);
}
fn(1, 2, 3);//err

在這里插入圖片描述

箭頭函式的簡寫

1）省略小括號，當形參有且只有一個的時候

let add = n =>{
    return n+n;
}
console.log(add(9));//18

2）省略花括號,當代碼體只有一條陳述句的時候,此時的return必須省略，陳述句的執行結果就是函式的回傳值

let pow = n => n * n;
console.log(pow(9));//81

箭頭函式的實踐

1）點擊div 2s 后顏色變成粉色
在ES5中寫法：

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #58a;
        }
    </style>
<body>
    <div id="box"></div>
    <script>
        let div = document.getElementById("box");
        box.addEventListener("click", function(){
            // ES5中必須先保存this的值
            let _this = this;
            // 定時器
            setTimeout(function(){
                // 修改背景顏色 this
                _this.style.background = "pink"
            }, 2000);
        })
    </script>

在ES6中使用箭頭函式寫法：

    <script>
        let div = document.getElementById("box");
        box.addEventListener("click", function(){
            // 保存this的值
            // let _this = this;
            // 定時器
            setTimeout(()=>{
                // 修改背景顏色 this
                // _this.style.background = "pink"
                this.style.background = "pink";
            }, 2000);
        })
    </script>

2）從陣列中回傳偶數的元素

const arr = [1, 6, 9, 10, 14, 200];
const result = arr.filter(item => item % 2 === 0);
console.log(result);//[ 6, 10, 14, 200 ]

箭頭函式適合于this無關的回呼，定時器，陣列的方法回呼
箭頭函式不太適合與this有關的回呼，例如事件回呼，物件的方法

ES6允許給函式引數賦值初始值

形參初始值，通過給函式形參賦值，讓其為具有默認值的引數，一般位置靠后（潛規則）

function func(a, b, c = 10) {
    console.log("a:" + a + " b:" + b + " c:" + c);
}
func(10,12);//a:10 b:12 c:10

在這里插入圖片描述

與結構賦值結合

function conect({ host , username, password, port }) {
    console.log(host);
    console.log(username);
    console.log(password);
    console.log(port);
}
conect({
    host: "localhost",
    username: "root",
    password: "root",
    port: 3306
})

在這里插入圖片描述

rest引數

ES6引入了rest引數，用于獲取函式的實參，用來代替arguments
語法：...變數
獲取的引數會以陣列的形式封裝到該變數里面
rest引數必須要放到形參的最后

function showData(...args) {
    console.log((args));
}
showData(1, 2, 3, 4, 5, 6)//[ 1, 2, 3, 4, 5, 6 ]

在這里插入圖片描述

擴展運算子

... 擴展運算子能將陣列轉換為逗號分隔的引數序列

function showData() {
    console.log((arguments));
}
let data = ["江流","心猿","意馬"];
showData(data)//不使用擴展運算子
showData(...data)//使用擴展運算子 相當于showData("江流","心猿","意馬")

在這里插入圖片描述

擴展運算子參考

陣列的合并

const data1 = ["江流","心猿","意馬"];
const data2 = [1, 2, 3, 4];
const newArr = [...data1, ...data2];
console.log(newArr);//["江流","心猿","意馬",1, 2, 3, 4];

在這里插入圖片描述
2. 陣列的克隆，如果克隆的陣列中有參考資料型別，該方式進行的是淺拷貝

const data1 = ["江流","心猿","意馬"];
const newArr = [...data1];
console.log(newArr);//["江流","心猿","意馬"];

在這里插入圖片描述

將偽陣列轉為真正的陣列
可以用在獲取元素的那幾個回傳偽陣列的方法中，由于arguments可以由rest引數替代，其實在這里轉為陣列沒有意義，

function showData() {
    let newArguments = [...arguments];
    console.log("newArguments:", newArguments);
    console.log(Array.isArray(newArguments));//true
}
let data = ["江流", "心猿", "意馬"];
showData(...data)

在這里插入圖片描述

Symbol

ES6引入了一種新的原始資料型別Symbol,表示獨一無二的值，它是JavaScript語言中的第七種資料型別，是一種類似于字串的資料型別，

創建Symbol
語法1：

變數名 = Symbol("標識名")
通過該方式創建的變數，即使兩個標識名相同，兩個變數也不相同

let name1 = Symbol("張三");
let name2 = Symbol("張三");

console.log("name1:",name1);//name1: Symbol(張三)
console.log("name2:",name2);//name2: Symbol(張三)
console.log(name1 === name2);//false

在這里插入圖片描述
語法2

變數名 = Symbol.for("標識名")
如果通過該方式創建的變數，標識名相同，兩個變數也相同

let name1 = Symbol.for("張三");
let name2 = Symbol.for("張三");

console.log("name1:",name1);//name1: Symbol(張三)
console.log("name2:",name2);//name2: Symbol(張三)
console.log(name1 === name2);//true

在這里插入圖片描述

Symbol特點

Symbol的值是唯一的，可以用來解決命名沖突的問題
Symbol值不能與其他資料進行運算

let name1 = Symbol.for("張三");
let result = name1 + 100; //err
let result = name1 > 100; //err
let result = name1 + "100"; //err

在這里插入圖片描述

Symbol定義的物件屬性不能使用for…in回圈遍歷，但是可以使用Reflect.ownKeys來獲取物件的所有鍵名，

Symbol創建物件屬性

使用 Symbol給一個物件創建物件屬性，能安全的保證原物件，不會因命名相同將原有的屬性覆寫，

第一種創建方式

let game = {
    up: function () {
        console.log("我是原本有的up方法！");
    },
    down: function () {
        console.log("我是原本有的down方法！");
    }
}

// 宣告一個物件
let methods = {
    up: Symbol(),
    down: Symbol()
};

game[methods.up] = function(){
    console.log("我可以上升！");
}

game[methods.down] = function(){
    console.log("我可以快速下降！");
}
console.log(game);

在這里插入圖片描述

可以看到原來的方法和新的方法并沒有發生沖突

第二種創建方式

let game = {
    up: function () {
        console.log("我是原本有的up方法！");
    },
    down: function () {
        console.log("我是原本有的down方法！");
    },
    [Symbol('up')]: function(){
        console.log("我可以上升！");
    },
    [Symbol("down")]: function(){
        console.log("我可以快速下降！");
    }
}
console.log(game);

在這里插入圖片描述

Symbol的內置屬性

Symbol.hasinstance

當其他物件使用instanceof運算子，判斷是否為該物件的實體時，會呼叫這個方法

class Person{
    static[Symbol.hasInstance](param){
        console.log(param);
        console.log("我被用來檢測型別了");
        return true;//由你決定是列印true 還是false
    }
}

let o ={
    name: "江流兒"
};
console.log(o instanceof Person);//回傳值由你決定來回傳是true 還是false

在這里插入圖片描述

Symbol.isConcatSpreadable

物件的Symbol.isConcatSpreadable屬性等于是一個布林值，表示該物件用于Array.prototypt.concat()時，是否可以展開

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

arr2[Symbol.isConcatSpreadable] = false;
console.log((arr1.concat(arr2)));//[1, 2, 3, Array(3)]

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/382000.html

標籤：其他

上一篇：yarn的下載與安裝

下一篇：JavaScript——DOM

ES6箭頭函式、rest引數、擴展運算子、Symbol的使用

目錄

簡化物件寫法

箭頭函式及宣告特點

申明一個函式

箭頭函式特點

箭頭函式的實踐

ES6允許給函式引數賦值初始值

rest引數

擴展運算子

擴展運算子參考

Symbol

Symbol特點

Symbol創建物件屬性

Symbol的內置屬性

Symbol.hasinstance

Symbol.isConcatSpreadable