ES6新语法特性收录

let const 声明变量


1. let变量声明

  let的特点是不会变量提升,

2. const 变量声明

const虽然是常量,不允许修改默认赋值,但如果定义的是对象Object,数组,那么可以修改对象内部的属性值。

3.const和let的异同点

**相同点:** const和let都是在当前块内有效,执行到块外会被销毁,也不存在变量提升(TDZ),不能重复声明。

**不同点:**  const不能再赋值,let声明的变量可以重复赋值。

变量的解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。


ES6 允许写成下面这样。

1. 数组的解构

let[a,b,c]=[1,2,3];

let[x,,y]=[1,2,3]

;x// 1

y// 3

2. 对象的解构 

let{bar,foo}={foo:"aaa",bar:"bbb"};

foo// "aaa"

bar// "bbb"

3. 字符串 函数参数也可以解构 详见ES6语法


字符串的扩展


1. includes(), startsWith(), endsWith()

includes():返回布尔值,表示是否找到了参数字符串。

startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。

endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。


var s='Hello world!';

s.startsWith('Hello')// trues.

endsWith('!')// trues.

includes('o')// true

2. repeat()

repeat方法返回一个新字符串,表示将原字符串重复n次。

'x'.repeat(3)// "xxx"

'hello'.repeat(2)// "hellohello"

'na'.repeat(0)// ""

参数如果是小数,会被取整。

3. padStart(),padEnd()

padStart()用于头部补全,padEnd()用于尾部补全。

'x'.padStart(5,'ab')// 'ababx'

'x'.padStart(4,'ab')// 'abax'

padStart的常见用途是为数值补全指定位数。下面代码生成10位的数值字符串。

'1'.padStart(10,'0')// "0000000001"

另一个用途是提示字符串格式。

'12'.padStart(10,'YYYY-MM-DD')// "YYYY-MM-12"

'09-12'.padStart(10,'YYYY-MM-DD')// "YYYY-09-12"

4. 模板字符串

如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。

模板字符串中嵌入变量,需要将变量名写在${}之中。


ES6对象新增方法


1、Object.assign()

实现了拷贝一个对象给另外一个对象,返回一个新的对象。

console.log(Object.assign(a, b))

// 将对象b拷贝给对象a,并且返回以一个新对象 a可以继承b的所以属性,而且是深拷贝,如果对象出现重复,不会报错,后面的会覆盖前面的


函数的扩展


1. ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。

functionlog(x,y='World')

     {console.log(x,y);}

log('Hello')// Hello World

2.箭头函数中的this指向

长期以来,JavaScript语言的this对象一直是一个令人头痛的问题,在对象方法中使用this,必须非常小心。例如:

运行上面的代码会报错,这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行,传统的解决方法有两种:

classAnimal {

 constructor(){this.type ='animal'} 

    says(say){       

      setTimeout(function(){

           console.log(this.type +' says '+ say)       

    },1000)    }}

var animal =new Animal()

animal.says('hi') //undefined says hi

第一种是将this传给self,再用self来指代this

says(say){

   var self = this;     

     setTimeout(  function(){

        console.log(self.type +' says '+ say)      

 },1000)

2.第二种方法是用bind(this),即

says(say){     

     setTimeout(function(){

         console.log(this.type +' says '+ say)   

      }.bind(this),1000)

当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this。

数组的扩展


1. 扩展运算符

扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

console.log(...[1,2,3]) // 1 2 3

应用Math.max方法,简化求出一个数组最大元素的写法。

Math.max(...[14,3,77])

合并数组

[...arr1,...arr2,...arr3]  // [ 'a', 'b', 'c', 'd', 'e' ]

2. Array.from()

Array.from可以将伪数组转为真正的数组。

3. Array.of()

Array.of(3,11,8)// [3,11,8]

4. 数组实例的 find() 和 findIndex()

find():传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它,并且终止搜索。

findIndex():传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它的下标,终止搜索。

[1,5,10,15].find(function(value,index,arr){

returnvalue>9;})// 10

5. 数组实例的fill()

fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。

fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。

['a','b','c'].fill(7) // [7, 7, 7]

['a','b','c'].fill(7,1,2) // ['a', 7, 'c']

7. 强大的for-of循环

for (var value of myArray ){ 

console.log(value);}

or-of循环不仅支持数组,还支持大多数类数组对象


module


export 命令

1. 写法1 等于于 写法2

写法1

export var firstName = 'Michael';

export var lastName = 'Jackson';

export var year = 1958;

写法2 

var firstName = 'Michael';

var lastName = 'Jackson';

var year = 1958;

export { firstName, lastName, year};

2. 通常情况下,export输出的变量就是本来的名字,但是可以使用as关键字重命名。

functionv1(){...}

functionv2(){...}

export{

v1 as streamV1,

v2 as streamV2

,v2 as streamLatestVersion

};

3. 使用export default命令,为模块指定默认输出。其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。


set 函数


const s = new Set(arr)

Set 函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。

Array.from 可以讲 Set 转换为数组

数组的map和filter方法也可以用于 Set 。 // 我表示怀疑这个说法


1. Set 的几个比较重要的方法

  add(value):添加某个值,返回Set结构本身。

  delete(value):删除某个值,返回一个布尔值,表示删除是否成功。

  has(value):返回一个布尔值,表示该值是否为Set的成员。

  clear():清除所有成员,没有返回值

2. Set 的一个布尔运算

let a = new Set([1, 2, 3]);

let b = new Set([4, 3, 2]);

// 并集

let union = new Set([...a, ...b]);

// Set {1, 2, 3, 4}

// 交集

let intersect = new Set([...a].filter(x => b.has(x)));

// set {2, 3}

// 差集

let difference = new Set([...a].filter(x => !b.has(x)));























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

推荐阅读更多精彩内容

  • 一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ...
    一岁一枯荣_阅读 6,055评论 8 25
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,211评论 0 4
  • 其实胸大也是一种烦恼,只是你不知道而已。 比如穿一些大图案修身的T恤,很容易撑大变形。 穿衬衫时,纽扣总是被弹开…...
    Dora香识女人阅读 568评论 0 1
  • 适应年龄20岁——30岁 整体板墙我以条纹为主,蓝色为辅助色,红色为点缀色。 整个板墙是调的时尚休闲风,...
    台东一店高悦阅读 125评论 3 0
  • 如何摆脱又穷又忙的生活状态? 匮乏陷阱,仿佛说的就是人穷志短,鼠目寸光的状态,深陷其中,怎能不受影响,以致产生稀缺...
    小小火红阅读 113评论 0 0