初入ES6-Symbol

ivyzhang 發布于2019-08-21 16:52 / 2763人閱讀

摘要：原始的數據類型和一樣是第七種數據類型創建只能用函數來創建，而且不能用可以有參數，用來區分每個只能顯試的轉化此處是字符串不能在轉為數字報錯不能隱式的轉化報錯作為對象的的屬性名稱主要用在可計算的屬性名稱，即使帶有中括號的屬性名稱一般是私有不可以

Symbol原始的數據類型和string, boolean,null,undefined,number一樣,是JS第七種數據類型

//創建Symbol
const symbol = Symbol()        //symbol只能用函數Symbol來創建，而且不能用new 可以有參數，用來區分每個symbol；
typeof symbol      //"symbol";
//只能顯試的轉化
String(symbol)  ==="Symbol()"    //此處是字符串；
Boolean(symbol) === true;        //
//不能在轉為數字
Number(symbol)  //報錯
//不能隱式的轉化
symbol + "this is srging"    //報錯

作為對象的的屬性名稱
主要用在可計算的屬性名稱，即使帶有中括號的屬性名稱；一般是私有不可以遍歷的屬性

//對象的屬性都是字符串
var obj = {
    name : "obama",
    "current age" : 77            //不能在使用點號調用
    [skin] : "black"                //報錯的寫法或者用來計算的屬性名稱，
};
obj.name === obj["name"]        //true
obj.name = "bush"            //覆蓋前面的屬性‘obama"
var ss = Synbol();
var newObj ={
    name :"obama",
    [ss]:34            //如果沒有中括號，此處就是一個字符串
}
obj[ss] = 34        //兩種寫法都可以，但是不能用點號
//作為屬性，不能用for in for of 等常規的遍歷方法，遍歷到的
//只能用Object.getOwnPropertySymbols()方法返回一個數組；也可以用新的方法 Reflect.ownKeys()；
let obj ={
    [Symbol("test")] : "the symbol",
    test : "the string"
}

Symbol() 和Symbol.for() 參數都是字符串,后者用來生成相同的symbol;

var s = Symbol("34");            ///每次調用都返回新的值，
var ss = Symbol.for("34");        //每次調用先檢查全局是否有，沒有在返回新的值
var sss = Symbol.for("34");
s ===ss //false;
ss ===sss //true;

//Symbol.keyFor()//用來返回Symbol.for()的參數值，也就是已經生成的，沒有的話就Undefined;
var v  = Symbol("name");
var vv = Symbol("the name");
Symbol.keyFor(vv)  ->"the name";
 Symbol.keyFor(v)  ->undefined;        //訪問一個沒有定義的symbol會報錯

獲取Symbol屬性的方法

const symbol = Symbol();
const obj = {

    [symbol]:"this is symbol",
    name :"obama"
}
Object.keys()
Object.getOwnPropertyNames()
//以上的方法都不能獲取私有的symbol的屬性
Object.getOwnPropertySymbols()    //只有此方法可以獲取值

ES6開放11個內部方法的操作

1，Symbol.hasInstance 執行instanceof 調用的方法
在CHROME中查看，函數的的繼承Function.prototype中增加的方法Symbol(Symbol.hasInstance)

function Mya(){
};

Object.defineProperty(Mya,Symbol.hasInstance,{
    value :"this is test "        //此處是描述屬性特性值value
})
var s = new Mya();
s instanceof Mya     //一般的寫法
Mya[Symbol.hasInstance](s)    //作為方法直接調用

2,Symbol.match,replace,serch,split方法

var str = "abcdefg";
var reg =/ab/g;
str.match(reg);        //["ab"]
str.replace("cd",reg)//"ababefg"
//可以使用一個對象保存這些屬性，隨后直接作為這些方法的參數
const obj ={
    [Symbol.search]:"return "the test""
}
str.search(obj)

3,Symbol.unscopables使用和廢除的with語句有關，作為數組對象的新方法，暫做了解

4，Symbol.toPrimative,toStringTag重新定義Object對象的基本值

var obj = {
    name : "obama"
};
var str = "sssss";
//對于大多數對象來說，如果要執行一些原始值操作，一般會調用valueOf()和toString();返回初始值

5，Symbol.isConcatSpreadable顧名思義concat是否可以展開

var arr1 = [1,2,3,4];
var arr2 = ["a","b","c","d"];
arr1.concat(arr2)        //返回新的數組[1, 2, 3, 4, "a", "b", "c", "d"];
arr1.concat(arr2,null,null,null)   // [1, 2, 3, 4, "a", "b", "c", "d", null, null, null]
//對于concat的參數如果是數組就自動展開作為多帶帶的存在，
arr2[Symbol.isConcatSpreadable] = false;
arr1.concat(arr2,null,null,null)         //[1, 2, 3, 4, Array(4), null, null, null]沒有展開
//類似數組的對象1，變量是數字的屬性，不是的話，就是空的值和length的屬性(必須)作為數組元素的個數如：
var obj = {
    a  : "a",
    3 : "a",            //數字鍵會在數組里的位置
    b : "b",
    2 : "b",
    length :6,        //影響添加數量，多余的是undefined
    [Symbol.isConcatSpreadable] : true
}
var ar = [1,"aa"];
ar.concat(obj)    //[1, "aa", empty × 2, "b", "a", empty × 2]
//此屬性是一個可選屬性，不在任何的對象里，

云服務器 GPU云服務器小白初入

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88847.html

HTML & CSS之小白初入江湖

摘要：之小白初入江湖超文本標記語言簡稱是一種用于創建網頁的標準標記語言。描述了一個網站的結構語義隨著線索的呈現，使之成為一種標記語言而非編程語言。是塊級元素，是行內元素。層疊樣式表簡稱是一種用來為結構化文檔如添加樣式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本標記語言(HyperText Markup Language, 簡稱HTML)是一種用于創建網頁的標準標記語言...

fai1017 2019-08-29 12:50 評論0 收藏0
HTML & CSS之小白初入江湖

摘要：之小白初入江湖超文本標記語言簡稱是一種用于創建網頁的標準標記語言。描述了一個網站的結構語義隨著線索的呈現，使之成為一種標記語言而非編程語言。是塊級元素，是行內元素。層疊樣式表簡稱是一種用來為結構化文檔如添加樣式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本標記語言(HyperText Markup Language, 簡稱HTML)是一種用于創建網頁的標準標記語言...

crossoverJie 2019-08-01 17:02 評論0 收藏0
初入vue配合el-table做批量下載

摘要：剛開始做項目，正好碰上了一個批量下載的功能就是下面圖片中的一個導出的功能后臺返回的數據格式是這樣的，如下做批量下載后臺需要前端給一個必需字段，在我這里也就是上代碼這樣我們的就是一個由組成的數組，搞定剛開始做vue項目，正好碰上了一個批量下載的功能就是下面圖片中的一個導出的功能showImg(https://segmentfault.com/img/bVbsuIr); 后臺返回的數據...

tunny 2019-08-26 13:44 評論0 收藏0
初入Vue，node，express，mongodb

摘要：本人前端萌新大概花了一周多一點，完成了一個前后端分離解耦的簡易個人博客項目。項目前后端分離，路由完全交給處理，后端只負責操作數據庫，暴露。目前項目提供做學習用途，希望能給大家一些幫助，對全棧項目有一個初步的了解，謝謝。本人前端萌新大概花了一周多一點，完成了一個前后端分離解耦的簡易個人博客項目。項目前后端分離，路由完全交給vue-router處理，后端只負責操作數據庫，暴露api。技...

dingding199389 2019-08-21 17:45 評論0 收藏0