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