ES6新语法(一)

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语法变得更易读,易编写。

    原文作者:二十一
    原文地址: https://segmentfault.com/a/1190000017463753
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞