ES6新語法(一)

levy9527 發布于2019-08-30 15:55 / 588人閱讀

摘要：的簡稱是于年月正式發布的語言的標準報錯報錯報錯可以重復定義并無塊級作用域，不能重復定義有塊級作用域，定義常量賦值報錯在解構賦值過程總，必須左右結構相同箭頭函數中的普通函數箭頭函數方便以后多次調用箭頭函數中當參數只有一個的時候可以省略括號，當

ES6(ECMAScript 6的簡稱),是于2015年6月正式發布的JavaScript語言的標準

let/const

//var
var a=1;
var a=5;
if(a>4){
    var b=10;
}
console.log(b);    //10

//let
let a=1;
let a=5;    //報錯:dentifier "a" has already been declared

let a=5;
if(a>4){
    let b=10;
}
console.log(b);    //報錯：b is not defined

//const
const a=1;
a=5;    //報錯：Assignment to constant variable.

var可以重復定義并無塊級作用域，let不能重復定義有塊級作用域，const定義常量

賦值

let list=[1,2,3]
let [a,b,c]=list
console.log(a,b,c)    //1 2 3

let dict={name:"jim",age:21}
let {name,age}=dict
console.log(name,age)    //jim 21

let dict={name:"jim",age:21}
let [name,age]=dict    //報錯：dict is not iterable

在解構賦值過程總，必須左右結構相同

箭頭函數(python中的lambda)

#普通函數
function fn(arg1,arg2){
    return arg1+arg2
}

#箭頭函數
(arg1,arg2)=>arg1+arg2
var fn=(arg1,arg2)=>arg1+arg2    //方便以后多次調用

箭頭函數中當參數只有一個的時候可以省略括號，當無參數時必須寫一對小括號，當函數體只有一句時可以省略大括號，且語句默認就是返回值，不需要寫return

for in/of

#js中的in只能用來遍歷下表，這是一個很大的痛點，所以of的出現本人非常的喜歡
let iterator=[0,2,4,6,8,16,32,64]

for i in iterator:
    console.log(i)    //0,1,2,3,4,5,6,7
    
for i of iterator:
    console.log(i)    //0,2,4,6,8,16,32,64

默認參數

//之前
function fn(arg1,arg2){
    let x=arg1 || 5;
    let y=arg2 || 6;
    return x+y
}
console.log(fn)    //11

//es6
function fn(arg1=5,arg2=6){
    return arg1+arg2
}
console.log(fn)    //11  

let list=[1,2,3,4,5,6]
function fn(arg1,arg2,...args){
    console.log(arg1,arg2,args)
}  
fn(...list)    //1 2 Array(4)    Array(4)表示為[3,4,5,6]

這種寫法更直觀清晰，且介紹內部的邏輯代碼，和python寫法很類似

數組

let list = [1, 2, 3, 4, 5, 6]
//map
let new_list=list.map((arg)=>{    //每個元素將作為參數依此傳入
            if(arg>4){
                return true
            }else{
                return false
            }
        })
        console.log(new_list)    //[false, false, false, false, true, true]
//reduce
let list = [1, 2, 3, 4, 5, 6]
        let new_list=list.reduce((sum,arg)=>{    //第一次將前兩個參數傳入，接下來將結果作為第一個參數，其他list元素以此傳入
            return sum+arg
        })
        console.log(new_list)    //21
//filter
let new_list=list.filter((arg)=>{
            if(arg>4){
                return true    //根據返回的布爾值判斷是否放入新list
            }
        })
        console.log(new_list)    //[5,6]
//forEach
let new_list=list.map((arg)=>{    //每個元素將作為參數依此傳入
            return arg
        })
        console.log(new_list)    //[1, 2, 3, 4, 5]

這和python中的map,reduce，filter高階函數作用幾乎相同，只不過在js中只作為了數組的方法，而python中是沒有forEach方法的，原因可能是map可以達到作用吧，在我看來是這個樣子，如有不同，請告知本寶寶，哈哈。

對象

let name="jim"
let age=21
let obj={
name:name,
age:age,
show:function(){
    console.log(name,age)
}
}
obj.show()        //jim 21
console.log(obj)    //{name: "jim", age: 21, show: ?}
                    
//以上可以簡化為
let obj={
name,
age,
show(){
    console.log(name,age)
}
}

同名的key和value我們可以省略成只寫一個，對于函數我們可以省略function

字符串

let str="http://www.jim.com/index.html"    //不存在，瞎寫的
//startsWith判斷是否以某字符串開始
if (str.startsWith("http://")){
    console.log("這是一個http的地址")    //這是一個http的地址
}
//endsWith判斷是否以某后綴結束
if (str.endsWith(".html")){
    console.log("這是一個html文件")    //這是一個html文件
}

很多語言的字符串都有這種判斷方法，現在的javascript也在不斷的完善，666

面向對象

//以前
function Person(name,age){
      this.name=name;
      this.age=age;
}
Person.prototype.show=function(){    //當然也可以在Person函數內部定義,若使用箭頭函數，則函數將失去效果，this指向了window對象    this.show=function(){ 函數體 }
      console.log(this.name,this.age)
}
let p=new Person("jim","21");
p.show()    //jim 21
function Chil(name,age,role){
    Person.call(this)
    this.name=name
    this.age=age    //可以直接將參數寫入call函數內
    this.role=role
}
Chil.prototype.show=Person.prototype.show    不寫的話用不到show函數，當然這只是一種方式
let c=new Chil("han","23","student")
c.show()

//es6
class Person{
    constructor(name,age){
        this.name=name
        this.age=age
    }
    show(){
        console.log(this.name,this.age)
    }
}
let p=new Person("jim",23)
p.show()    //jim 23
class Chil extends Person{
    constructor(name,age,role){
        super(name,age)
        this.role=role
    }
}
let c=new Chil("han","23","student")
c.show()    han 23

使用class來定義類，constructor定義構造函數super實現對基類構造的調用，還有extends的繼承，都借鑒了java等語言，使js語法變得更易讀，易編寫。

GPU云服務器云服務器 es6新特性 es6的新特性新語法 let新語法

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

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

ES6-前世今生（0）

摘要：更新了個版本，最新正式版是語言的下一代標準，早已在年月正式發布。基本不支持移動端瀏覽器對的支持情況版起便可以支持的新特性。比較通用的工具方案有，，，等。 1、ECMAScript是什么？和 JavaScript 有著怎樣的關系？ 1996 年 11 月，Netscape 創造了javascript并將其提交給了標準化組織 ECMA，次年，ECMA 發布 262 號標準文件（ECMA-...

LeviDing 2019-08-26 13:41 評論0 收藏0
ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
ES6新語法(二)

摘要：昨天向大家介紹了的一部分新語法，今天我將把剩下我所知道的新語法都寫到這里插值表達式之前多行字符串我是寫多行字符串會語法報錯我是正確，并能按格式輸出這個書寫方式很像的三引號，不知道小伙伴們想起來了沒。昨天向大家介紹了ES6的一部分新語法，今天我將把剩下我所知道的新語法都寫到這里插值表達式 //之前 var name=jim var age=23 var say=name:+name...

haobowd 2019-08-23 14:12 評論0 收藏0
[譯] 從 CoffeeScript 遷移到 ES6

摘要：語法校驗會給出警告當你仍在使用或不通過任何關鍵字聲明變量時。但是如果腳本中還有其他的普通導出，就會得到非常奇怪的結果這個坑爹的情況目前還沒有任何好的解決方案。我在多年前愛上了coffeScript。對于javaScript，我一直保持著深沉的愛，也十分高興得看到node.js的快速發展，但是作為一個有python背景的程序員，我更喜歡coffeeScript的簡練語法。在任何一個活...

劉東 2019-08-22 10:57 評論0 收藏0
給React初學者的10分鐘ES6教程

摘要：但是在中，可以通過關鍵字來實現類的繼承的使用可以使得繼承意義更加明確并且值得一提的是，如果你使用來定義的組件，那么可以在類的構造器里面，用簡單的的聲明方式來替代方法。原文：The 10 min ES6 course for the beginner React Developer譯者：Jim Xiao 著名的80/20定律可以用來解釋React和ES6的關系。因為ES6增加了超過75...

Awbeci 2019-08-22 18:04 評論0 收藏0