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)));























最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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