ES6.x

来源:https://www.cnblogs.com/purple910/archive/2019/11/09/11827527.html
-Advertisement-
Play Games

類 模塊化 箭頭函數 模板字元串 let name=Tom let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 [x, y = 'b'] = ['a', undefined]; // x='a', y='b' for ...


class Animal{
    constructor(name){
        this.name=name
    }
    Spack(){
        console.log(name)
    }
}
class Dog extends Animal{
    constructor(name,age){
        super(name);//子類中如果有constructor,就必須有super
        this.age=age
    }
    Spack(){
        super.Spack()//如果沒有,則重寫Spack方法,有則在Spack中添加內容
        console.log(age)
    }
}

模塊化

//導出
var name = 'Rainbow';
var age = '24';
export {name, age};
導入
import {name,age} from '來源';

箭頭函數

()=>1
v=>v+1
(a,b)=>a+b
()=>{
    alert("foo");
}
e=>{
    if (e == 0){
        return 0;
    }
    return 1000/e;
}

模板字元串

let name=Tom
`welcome ${name}`

解構賦值

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

[x, y = 'b'] = ['a', undefined]; // x='a', y='b'

for (let [key, value] of map) {
  console.log(key + " is " + value);
}

延展操作符

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));

let [a,b,...c] = [1,2,3,4,5,6,7,]
console.log(a,b,c)//1 2 [3,4,5,6,7]

var arr = [1, 2, 3];
var arr2 = [...arr]; // 等同於 arr.slice()

Promise

var promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 非同步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});
promise.then((value) => {
  // success
}, (error) => {
  // failure
});
promise.then((value) => {
  // success
}).catch((err) => {
    //failure
});

Generator函數

function * gen(x){
  var y = *yield* x + 2;
  return y;
}

var g = gen(1);
g.next() // { value: 3, done: false }
g.next(2) // { value: 2, done: true }

async/await

*async* function process(array) {
  for *await* (let i of array) {
    doSomething(i);
  }
}
async function process(array) {
  for await (let i of array) {
    doSomething(i);
  }
}

正則

/foo.bar/.test('foo\nbar')// false
/foo.bar/s.test('foo\nbar') // true

let str = '2019-07-31'
let reg = /(\d{4})-(\d{2})-(\d{2})/
let reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
console.log(str.match(reg).groups)

let reg = /^(?<name>welcome)-\k<name>-\1$/
let str = welcome-welcome-welcome
console.log(reg.test(str))

Proxy

let json = {
  name,
  age
}
let newJson = new Proxy(json,{
  set(target,property,value){
    if(property == 'age'){
      if(!Number.isInteger(value)){
        <!-- throw new TypeError('年齡是整數') -->
        return false
      }
    }
    target[property] = value
    return true
  },
  get(target,property){
    if(property in target){
      console.log(`你訪問了${property}屬性`)
      return target[property]
    }else{
      console.log(`沒有這個屬性`)
      return null
    }
  },
  has(target,key){
    return key in target;
  },
  deleteProperty(target,property){
    return true
  }
})

var target = function () { return 'I am the target'; };
var handler = {
  apply: function () {
    return 'I am the proxy';
  }
};
var p = new Proxy(target, handler);
p()

const DOM = new Proxy({},{
  get(target,property){
    return function(attr={},...children){
      console el = document.createElement(property)
      for(let key of Object.keys(attr)){
        el.setAttribute(key,attr[key])
      }
      for(let child of children){
        if(typeof child == 'string'){
          child = document.createTextNode(child)
        }
        el.appendChild(child)
      }
      return el
    }
  }
})
let oDiv = DOM.div(
  {id:'id1',class:'cl1'},'div','1123',
  DOM.ul({},
    DOM.li({},111)
    DOM.li({},222)
    DOM.li({},333)
  )
)

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、介紹 在iOS開發中,轉場動畫的使用無處不見,不只是我們自己更多的使用UIViewblock動畫實現一個轉場動畫,其實,在我們實現VC控制器跳轉的時候都是轉場動畫的實現,例如標簽欄控制器的切換、模態動畫present和dismiss、導航控制器的push和pop。實現它們的轉場動畫,只需要實現它 ...
  • 如何在iOS上通過電子郵件進行無縫的“無密碼”身份驗證。 Apple平臺上的郵件和日曆集成 在macOS和iOS上查看電子郵件時,郵件會在[檢測到的日期和時間]下劃線 。您可以與他們互動以創建新的日曆事件。如果您在“日曆”中打開此類活動,則會在其擴展詳細信息中看到“在郵件中顯示”鏈接。單擊此鏈接可將 ...
  • 如何插入樣式表? 代碼應該寫到什麼地方呢? 代碼分為三種插入方式,接下來筆者給園友們介紹有哪些插入方式: 嵌入式、外鏈式、行內式。 嵌入式 什麼是嵌入式? 嵌入式就是將寫好的 代碼嵌入到 文件中,嵌入式是通過 中的 標簽將 代碼嵌入到 網頁當中的。 語法規則如下: 如果我們使用的是 的文檔, 標簽中 ...
  • 彈性盒子flex: 對於客戶端的佈局非常有用,不管是平均分配space-around這個屬性還是兩端對齊space-betwee在頁面佈局的時候都會有很好的表現。 對於部分內容區域中,具有很多大致內容相同的幾個區塊的佈局都可以使用到它,將父級設置為display:flex;父級就會變成容器,子級就會 ...
  • 1.首先引用jquery以及table2excel <script type="text/javascript" src="js/jquery.table2excel.min.js"></script> <script type="text/javascript" src="js/jquery.mi ...
  • HTML解釋: HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫,他是一種製作萬維網頁面標準語言(標記)。相當於定義統一的規則(W3C),大家都來遵守他,這樣就可以讓瀏覽器根據標記語言的規則去解釋它。 瀏覽器負責將標簽翻譯成用戶“看得懂”的格式,呈現給用戶 ...
  • 父組件向子組件傳值 父組件向子組件傳方法 vue+本地存儲實現評論功能 難道在於理解父組件向子組件傳方法 ref獲取DOM和組件 vue中如何操作DOM ...
  • 棧是一種遵從後進先出(LIFO)原則的有序集合。新添加或待刪除的元素都保存在棧的同 一端,稱作棧頂,另一端就叫棧底。在棧里,新元素都靠近棧頂,舊元素都接近棧底。 棧擁有以下方法: push(element): 元素入棧, 添加一個或多個新元素到棧頂 pop(): 元素出棧,移除棧頂的元素,同時返回被 ...
一周排行
    -Advertisement-
    Play Games
  • 概述:本文代碼示例演示瞭如何在WPF中使用LiveCharts庫創建動態條形圖。通過創建數據模型、ViewModel和在XAML中使用`CartesianChart`控制項,你可以輕鬆實現圖表的數據綁定和動態更新。我將通過清晰的步驟指南包括詳細的中文註釋,幫助你快速理解並應用這一功能。 先上效果: 在 ...
  • openGauss(GaussDB ) openGauss是一款全面友好開放,攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行,提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • openGauss(GaussDB ) openGauss是一款全面友好開放,攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行,提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • 概述:本示例演示了在WPF應用程式中實現多語言支持的詳細步驟。通過資源字典和數據綁定,以及使用語言管理器類,應用程式能夠在運行時動態切換語言。這種方法使得多語言支持更加靈活,便於維護,同時提供清晰的代碼結構。 在WPF中實現多語言的一種常見方法是使用資源字典和數據綁定。以下是一個詳細的步驟和示例源代 ...
  • 描述(做一個簡單的記錄): 事件(event)的本質是一個委托;(聲明一個事件: public event TestDelegate eventTest;) 委托(delegate)可以理解為一個符合某種簽名的方法類型;比如:TestDelegate委托的返回數據類型為string,參數為 int和 ...
  • 1、AOT適合場景 Aot適合工具類型的項目使用,優點禁止反編 ,第一次啟動快,業務型項目或者反射多的項目不適合用AOT AOT更新記錄: 實實在在經過實踐的AOT ORM 5.1.4.117 +支持AOT 5.1.4.123 +支持CodeFirst和非同步方法 5.1.4.129-preview1 ...
  • 總說周知,UWP 是運行在沙盒裡面的,所有許可權都有嚴格限制,和沙盒外交互也需要特殊的通道,所以從根本杜絕了 UWP 毒瘤的存在。但是實際上 UWP 只是一個應用模型,本身是沒有什麼許可權管理的,許可權管理全靠 App Container 沙盒控制,如果我們脫離了這個沙盒,UWP 就會放飛自我了。那麼有沒... ...
  • 目錄條款17:讓介面容易被正確使用,不易被誤用(Make interfaces easy to use correctly and hard to use incorrectly)限制類型和值規定能做和不能做的事提供行為一致的介面條款19:設計class猶如設計type(Treat class de ...
  • title: 從零開始:Django項目的創建與配置指南 date: 2024/5/2 18:29:33 updated: 2024/5/2 18:29:33 categories: 後端開發 tags: Django WebDev Python ORM Security Deployment Op ...
  • 1、BOM對象 BOM:Broswer object model,即瀏覽器提供我們開發者在javascript用於操作瀏覽器的對象。 1.1、window對象 視窗方法 // BOM Browser object model 瀏覽器對象模型 // js中最大的一個對象.整個瀏覽器視窗出現的所有東西都 ...