ES6

1.Default Parameters (函数默认参数)

如:定义一个函数,x,y可选,z必传。
ES6语法:

function calc(x=1, y=1,z) {
    console.log(x,y,z)
}
calc(undefined,undefined,3);         // 1 1 3

传统写法:

function calc(x, y,z) {
    x=x||1;
    y=y||1;
    console.log(x,y,z)
}
calc(undefined,undefined,3);         // 1 1 3

需要注意的是:

  • 1.定义了默认参数后,函数的length属性会减少:
function calc(x=1, y=1, z) {...}
console.log(calc.length)        //0

function calc(z, x=1, y=1) {...}
console.log(calc.length)        //1

function calc(m, n ,x=1, y=1, z) {...}
console.log(calc.length)        //2
  • 2.不能用letconst再次声明默认值,var可以
function calc(x=1, y=1,z) {
    var x=5         //可以
    let x=5         //报错
    const x=5       //报错
    console.log(x,y,z)
} 

另外比较有趣的是:默认参数还可以是一个函数调用。
利用这个特性可以强制指定某参数必须传,不传就报错

function throwIf() {
   console.log('error:url必传');
}
function ajax( url=throwIf(), async=true, success) {
    return url;
}
ajax();                    // 'error:url必传'
ajax("www.baodu.com")      //"www.baodu.com"

2.模板字符串

在反引号包裹的字符串中,使用${NAME}(模板占位符)语法来表示模板字符

var name="candy";
var age=20;
var str=name + ' is ' + age + ' years old.'   //传统写法
var str=`${name} is ${age} years old.`      //es6写法

如果你想在模板字符串中使用反引号或 ${,你需要使用反斜杠 \ 将其转义

var str=`\${\` 
console.log(str)     // ${`

3.多行字符串

传统写法:

var roadPoem = 'Then took the other, as just as fair,nt'
    + 'And having perhaps the better claimnt'
    + 'Because it was grassy and wanted wear'
    + 'Though as for that the passing therent'

es6语法:

var roadPoem = `Then took the other, as just as fair,
    And having perhaps the better claimnt
    Because it was grassy and wanted wear,
    Though as for that the passing therent`

4.解构赋值

(1) 解构赋值-数组

  • 交换两个变量的值。如若已知a=1,b=2,现在要交换两个变量的值:

传统写法:

var c;     //需借助中间变量c
c=a;
a=b;
b=c;

es6写法:

[b,a]=[a,b]
  • 可嵌套
[p1, [p2,p3], p4]=[1, [2,3], 4]         //p1,p2,p3,p4 的值分别为1,2,3,4
[p1, arr, p4]=[1, [2,3], 4]      
console.log(arr)        //[2,3]
  • 函数返回
function foo(){return [1,2]}
var [a,b]=foo();
console.log(a,b)  //1, 2 
  • 忽略某个元素
[p1, , p3, , p5]=[1,2,3,4,5]
  • 指定默认值
var [a=1,b=2,c=3]=[100,50]    
console.log(a,b,c)    //100,50,3
  • rest 参数,接收剩余参数
var [p1,p2,p3,...tail]=[1,2,3,4,5,6]
console.log(tail)        //[4,5,6]

(2) 解构赋值-对象

var obj={name,age}={name:"candy",age:20}
console.log(name, age)                //candy, 20
console.log(obj.name, obj.age)        //candy, 20 
  • 可嵌套
var obj={name:{firstName, lastName}}={name:{firstName:"candy",lastName:"chen"}}
console.log(firstName)               //candy
console.log(obj.name)                //{firstName: "candy", lastName: "chen"}
console.log(obj.name.firstName)      //"candy"
  • 使用默认值
var obj={first="candy",last="chen"}={}
console.log(first,last)               //candy,chen
cosole.log(obj.first, obj.last)       //undefined,undefined

5.箭头函数

  • 无参数,必须有圆括号
()=>{statements}
//等价于以下传统写法:
function (){statements}
  • 多个参数
(p1,p2,p3)=>{statements} 
//等价于以下传统写法:
function (p1,p2,p3){statements}  
  • 只有一个参数,圆括号可选
p1=>{statements}    
(p1)=>{statements}   
  • 有返回值,花括号可选
(p1,p2)=>express
(p1,p2)=>{return express}
(p1,p2)=>(express)
//等价于以下传统写法:
function foo(p1,p2){return express}

举个例子:

var foo=(p1,p2)=>p1-p2
foo(10,15)         //-5
  • 返回一个对象时,函数体外必须加圆括号
p1=>({foo:bar})
  • 箭头函数内返回箭头函数
let foo=(a,b)=>c=>a+b+c
foo(1,2,3)        //6

//等价于以下传统写法:
function foo(a,b){
  return function(c){
     return a+b+c
  }
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...
    郭子web阅读 1,768评论 0 1
  • 三,字符串扩展 3.1 Unicode表示法 ES6 做出了改进,只要将码点放入大括号,就能正确解读该字符。有了这...
    eastbaby阅读 1,510评论 0 8
  • 一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ...
    一岁一枯荣_阅读 6,051评论 8 25
  • 函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 上面代码检查函数l...
    呼呼哥阅读 3,351评论 0 1
  • 青溪王维言入黄花川,每逐青溪水.随山将万转,趣途无百里.声喧乱石中,色静深松里.漾漾泛菱荇,澄澄映葭苇.我心素已闲...
    Lu_Zhang阅读 198评论 0 0