ES6的demo代碼

oysun 發布于2019-08-26 11:46 / 3331人閱讀

摘要：總結擴展運算符該文章是初次涉獵做的筆記剛開始簡單的東西我就掉代碼運行環境運行腳手架只需要在寫完代碼輸入就可以運行關于的用法關于運算符字符串模板字符串套變量判斷是否包含字符串是否包含開頭是否包含結尾是否包含字符串自身復制參數是次數小數就取整數

ES6總結 擴展運算符

該文章是初次涉獵ES6做的筆記,剛開始簡單的東西我就pass掉

代碼運行環境(運行腳手架只需要在src/index.js寫完代碼輸入npm run build就可以運行)

關于 ...的用法

let a=[1,2,3]
b=[...a]
b.push(6)
console(b) ==>1,2,3,6

關于rest運算符

function a(a,...arg)==>a(1,2,3),arg=[2,3]

字符串模板 字符串套變量

let a="china"
let b=`i am from ${a},
and you?`

判斷是否包含字符串

let searchWorld="am"
let a="i am you"
//是否包含,開頭是否包含,結尾是否包含
a.include(searchWorld)
a.startsWith(searchWorld)
a.endsWith(searchWorld)
//字符串自身復制,參數是次數,小數就取整
console.log(a.repeat(3))

數字判斷與擴展 進制(切記不是字符串)

//0B開頭是二進制標志
let a = 0B0011
//打印3
console.log(a)
//0o開頭是八進制標志
let a = 0o0011
console.log(a)

Number對象方法

let a = 10/3
//判斷是不是數字
console.log(Number.isFinite(a))//true
//判斷是不是NaN
console.log(Number.isNaN(NaN))//true
//轉換整數小數
console.log(Number.parseInt(a))//取整
console.log(Number.parseFloat(a))
//判斷是否為整數
console.log(Number.isInteger(a))//false
//es6的最大安全值
console.log(Math.pow(2,53)-1)
//最大,最小常量數,相當于const定義變量
console.log(Number.MIN_SAFE_INTEGER)
console.log(Number.MAX_SAFE_INTEGER)
//判斷是否安全數字
console.log(Number.isSafeInteger(a))//true

Math對象 trunc模塊

//將字符串轉為數字
console.log(Math.trunc("123"))//123
console.log(Math.trunc("12abc"))//NaN
console.log(Math.trunc("abc"))//NaN

sign模塊

//判斷正負數
console.log(Math.sign(-123))//-1
console.log(Math.sign(123))//1
console.log(Math.sign(0))//0

cbrt模塊

//計算立方根
console.log(Math.cbrt(8))

clz32模塊

//計算32位二進制
console.log(Math.clz32(8))

imul模塊

//計算乘法
console.log(Math.imul(8))//0
console.log(Math.imul(8,2))//16

hydop

//計算乘法
console.log(Math.hypot(1,1,1,1))//return (1^2+1^2+1^2+1^2)的平方根==>2

在github傳了官方pdf,更多方法就在那里查閱

數組實例與應用 from模塊=>json轉數組

let jsonData={
  "0":0,
  "1":1,
  "2":2,
  "length":3
}
let arr=Array.from(jsonData)
console.log(arr)//[0,1,2]

of模塊=>文本轉數組

let txt="1,2,3,4,5"
let data=Array.of(txt)
console.log(data)

copyWithin模塊=>第一個是準備要替換位置,第二個是開始截取替換位置,第三個是最后截止位置,函數執行將截取的數據從起始位置開始覆蓋

let arr=[0,1,2,3,4,5,6,7,8]
console.log(arr.copyWithin(1,3,8))//[0,3,4,5,6,7,6,7,8]

find模塊=>依次遍歷,遇到條件為true則返回

let arrDemo=[0,1,2,3,4,5,6,1,8]
console.log(arrDemo.find((value,index,arr)=>{
  return value >5
}))//6

fill模塊=>遍歷替代,第一個參數表示要替代的值,第二個是替代開始位置,第三個是替代終止位置

let arrDemo=[0,1,2,3,4,5,6,1,8]
console.log(arrDemo.fill("x",2,5))
//[0, 1, "x", "x", "x", 5, 6, 1, 8]

of模塊=>遍歷每個元素

let arrDemo=[0,1,2,3,4,5,6,1,8]
for (let i of arrDemo) {
  console.log(i)//依次打印每個元素
}

in模塊與of一樣

let arrDemo=[0,1,2,3,4,5,6,1,8]
for (let i in arrDemo) {
  console.log(i)
}

在有些場景in不好用,例如

let arrDemo=["1","2","3"]
for (let [index,val] of arrDemo.entries()) {
  console.log(index,val)
}//能輸出key和value

let arrDemo=["1","2","3"]
for (let [index,val] in arrDemo.entries()) {
  console.log(index,val)
}//不能輸出

entries

let arrDemo=["a","b","c"]
let flag=arrDemo.entries()
console.log(flag.next().value)
console.log(flag.next().value)
console.log(flag.next().value)
console.log(flag.next().value)
//輸出[0,"a"],[1,"b"],[2,"c"]

function模塊 參數預設值 ==>不可以使用嚴謹模式

function addDemoOne(a,b){
  return a+b
}
function addDemoTwo(a,b=3){
  return a+b
}
console.log(addDemoOne(2,3))//5
console.log(addDemoTwo(2))//5

參數覆蓋

function addDemoTwo(a,b=3){
  return a+b
}
console.log(addDemoTwo(1,2))//3

預設函數違法值

function addDemoTwo(a,b=3){
  if(a === 1){
    throw new Error("值錯誤")
  }
  return a+b
}
console.log(addDemoTwo(1))//Uncaught Error: 值錯誤

計算函數幾個參數

在這里有個坑,請看demo2,3

function addDemoOne(a,b,c){
  return a+b
}
console.log(addDemoOne.length)//3
function addDemoTwo(a,b,c=2){
  return a+b
}
console.log(addDemoTwo.length)//2
function addDemoThree(a,b=2,c){
  return a+b
}
console.log(addDemoThree.length)//1

function的name模塊

function addDemoOne(a,b,c){
  return a+b
}
console.log(addDemoOne.name)//addDemoOne
let addDemoTwo = function addDemoThree(){}
console.log(addDemoTwo.name)//addDemoThree

箭頭函數

let demo = (a,b) => a+b//省略 return,如果加return則必須加{}
console.log(demo(2,3))//5

解構對象

let jsonData={
  a:100,
  b:200
}
function addDemoTwo({a,b=3}){
  return a+b
}
console.log(addDemoTwo(jsonData))//300

判斷json存在某屬性

let jsonData={
    a:1,
    b:2
}
console.log("a" in jsonData)//true
console.log("c" in jsonData)//false

判斷數組是否為空

let arrOne=[,,,,]
let arrTwo=[1,2,3]
console.log(0 in arrOne)//false
console.log(0 in arrTwo)//true

將對象合并

var a={a:1}
var b={b:2}
var c=Object.assign(a,b)//可以合并多個
console.log(c)//{a: 1, b: 2}

解構數組

let arr =[1,2,3,4]
function addDemoTwo(a,b,c,d){
  console.log(a,b,c,d)
}
addDemoTwo(...arr)//1,2,3,4

Symbol類型=>獨一無二的類型

let testData=Symbol("hello")
console.log(testData)//Symbol(hello)
console.log(typeof testData)//symbol

symbol的應用

let demoOne=Symbol("hello")
let demoTwo=Symbol("word")
let jsonData={
  a:"aaa",
  b:"bbb"
}
jsonData[demoOne]="ccc"
jsonData[demoTwo]="ffffd"
for(let i in jsonData){
  console.log(jsonData[i])//遍歷不出symbol屬性
}
console.log(jsonData);//可以遍歷出

Set與WeakSet=>數據集合

let demoData=new Set([1,2,3,4,5,5])//不允許重復元素
console.log(demoData);
demoData.add(6)
console.log(demoData);
demoData.delete(1)
console.log(demoData);
console.log(demoData.has(1));
console.log(demoData.has(2));
for (let i of demoData){
  console.log(i);
}
demoData.clear()
console.log(demoData);

去除數組中重復的元素可以這樣

let arr=[1,2,3,3,4]
let setOne=new Set(arr)
console.log(setOne);

Weakset

let demo={a:1,b:2}
let setData=new WeakSet()
setData.add(demo)
console.log(setData);

Map

let json={name:"fan",age:18}
let m = new Map()
m.set(json,"me")
m.set("name","fan")
console.log(m.get("name"));//fan
console.log(m.get(json));//me,根據對象搜索

Proxy

Proxy本質是一個對象,當對對象的屬性進行操作可以觸發一系列操作

let data2=new Proxy({
  add:function(val){
    return val+1
  },
  name:"tom"
},{
  get:function(target,key,property){
    console.log("get key--->",key)//name
    console.log("get target--->",target);//obj
    console.log("get property--->",property);//proxy obj
    return target[key]
  },
  set:function(target,key,value,receiver){
    console.log("set key--->",key);//name
    console.log("set value--->",value);//3333
    console.log("set target--->",target);//obj
    console.log("set reeiver--->",receiver);//proxy obj
    return target[key]=value
  }
})
data2.name=3333//執行set
console.log(data2.name);//執行get

apply--->執行的時候必須調用

let target = ()=>{
  return "hello world"
}
let handler = {
  apply(target,ctx,args){
    //不要加鉤子
    console.log("6666");
    return Reflect.apply(...arguments)//Reflect代碼demo本身
  }
}
let demo=new Proxy(target,handler)
demo()//6666

Promise

promise就是前一步完成了動作就執行下一步操作

let flag=200
function one(resolve,reject){
  console.log("one");
  if(flag==200){
    resolve("step1 finish")
  }else{
    reject("step1 erro")
  }
}
function two(resolve,reject){
  console.log("two");
  if(flag==200){
    resolve("step2 finish")
  }else{
    reject("step2 erro")
  }
}
function three(resolve,reject){
  console.log("three");
  if(flag==200){
    resolve("step3 finish")
  }else{
    reject("step3 erro")
  }
}

new Promise(one).then(function(val){
  console.log(val);
  return new Promise(two)
}).then(function(val){
  console.log(val);
  return new Promise(three)
}).then(function(val){
  console.log(val);
  return val
})

Class語法糖

class people{
  name(val){
    // console.log(val);
    return val
  }
  fullname(val){
    console.log("Mr"+this.name(val))
  }
  add(){
    return this.x+this.y
  }
  constructor(x,y){
    this.x = x
    this.y = y
  }
}
let p = new people(1,2)
console.log(p.add());
class student extends people{
  hello(){
    console.log("hello");
  }
}
let s= new student(10,20)
console.log(s.add());

云服務器 GPU云服務器 webrtc視頻通話demo代碼 webrtc的demo環境搭建 ES6 完整的 webRTC 視頻聊天 demo

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

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

關于Node.js的__dirname，__filename，process.cwd()，./文件路

摘要：先把當成文件，依次查找當前目錄下的，找到了，就返回該文件，不再繼續執行。那么關于正確的結論是在中使用是跟的效果相同，不會因為啟動腳本的目錄不一樣而改變，在其他情況下跟效果相同，是相對于啟動腳本所在目錄的路徑。起因原文收錄在我的 GitHub博客 (https://github.com/jawil/blog) ，喜歡的可以關注最新動態，大家一起多交流學習，共同進步，以學習者的身份寫博...

harryhappy 2019-08-29 12:35 評論0 收藏0
關于Node.js的__dirname，__filename，process.cwd()，./文件路

摘要：先把當成文件，依次查找當前目錄下的，找到了，就返回該文件，不再繼續執行。那么關于正確的結論是在中使用是跟的效果相同，不會因為啟動腳本的目錄不一樣而改變，在其他情況下跟效果相同，是相對于啟動腳本所在目錄的路徑。起因原文收錄在我的 GitHub博客 (https://github.com/jawil/blog) ，喜歡的可以關注最新動態，大家一起多交流學習，共同進步，以學習者的身份寫博...

pumpkin9 2019-08-22 11:04 評論0 收藏0
【ES6】對象的新功能與解構賦值

摘要：通過字面量語法擴展新增方法改進原型等多種方式加強對象的使用，并通過解構簡化對象的數據提取過程。四解構賦值為數組和對象字面量提供了新特性解構，可以簡化數據提取的過程，減少同質化的代碼。 ES6 通過字面量語法擴展、新增方法、改進原型等多種方式加強對象的使用，并通過解構簡化對象的數據提取過程。一、字面量語法擴展在 ES6 模式下使用字面量創建對象更加簡潔，對于對象屬性來說，屬性初始值可...

Lowky 2019-08-23 12:26 評論0 收藏0
在非阻塞IO下的nodejs下的同步并行 ES6的 promise 從入門深入（二）

摘要：現在我們要用的重點就是我們的，這是一個能讓函數并行的，可以基于多個。非常有用啊先上一個錯誤的代碼這時候我們得到的就是數字了，而不是一個數組，這就是神奇所在。看過 (一)的同學一定覺得這個Promise很簡單，好像沒什么可以用的地方，但是事實上，它的用處非常大啊，尤其是在nodejs上，愈加重要，雖然已經有大量的庫實現了對Promise的封裝了，不過我還是更傾向用原生的node來實現對...

Jrain 2019-08-19 18:19 評論0 收藏0
在非阻塞IO下的nodejs下的同步并行 ES6的 promise 從入門深入（二）

摘要：現在我們要用的重點就是我們的，這是一個能讓函數并行的，可以基于多個。非常有用啊先上一個錯誤的代碼這時候我們得到的就是數字了，而不是一個數組，這就是神奇所在。看過 (一)的同學一定覺得這個Promise很簡單，好像沒什么可以用的地方，但是事實上，它的用處非常大啊，尤其是在nodejs上，愈加重要，雖然已經有大量的庫實現了對Promise的封裝了，不過我還是更傾向用原生的node來實現對...

verano 2019-06-26 17:00 評論0 收藏0