ES6新语法(一)

weij 发布于2019-08-23 14:12 / 2545人阅读

摘要：的简称是于年月正式发布的语言的标准报错报错报错可以重复定义并无块级作用域，不能重复定义有块级作用域，定义常量赋值报错在解构赋值过程总，必须左右结构相同箭头函数中的普通函数箭头函数方便以后多次调用箭头函数中当参数只有一个的时候可以省略括号，当

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新语法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100244.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