日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

ES6箭頭函數、rest參數、擴展運算符、Symbol的使用

作者:1900's 88 keys 更新時間: 2022-01-16 編程語言

簡化對象寫法

  • 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允許給函數參數賦值初始值

  1. 形參初始值,通過給函數形參賦值,讓其為具有默認值的參數,一般位置靠后(潛規則)
function func(a, b, c = 10) {
    console.log("a:" + a + " b:" + b + " c:" + c);
}
func(10,12);//a:10 b:12 c:10

在這里插入圖片描述

  1. 與結構賦值結合
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("江流","心猿","意馬")

在這里插入圖片描述

擴展運算符引用

  1. 數組的合并
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);//["江流","心猿","意馬"];

在這里插入圖片描述

  1. 將偽數組轉為真正的數組
    可以用在獲取元素的那幾個返回偽數組的方法中,由于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給一個對象創建對象屬性,能安全的保證原對象,不會因命名相同將原有的屬性覆蓋。
  1. 第一種創建方式
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);

在這里插入圖片描述

  • 可以看到原來的方法和新的方法并沒有發生沖突
  1. 第二種創建方式
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://blog.csdn.net/weixin_45660621/article/details/121912856

欄目分類
最近更新