JavaScript ES6常用基础知识总结

ES6新增了块级作用域,总结一句话大致就是:大括号{}包起来的代码块基本山都可以当做块级作用域。

常见的有

直接使用{}包起来:

{ var a = 4 }

函数体大括号,if-else大括号,for循环大括号,switch大括号,try-catch大括号等。 需要注意的是,for循环,每一次循环时的{}都是一个独立的块级作用域。

for(let i=0; a < 5; i++){ let j = i }

上面代码循环了五次,实际上有五个独立的j。

日常开发中,我们就可以利用这个特性,来创建块级作用域了。

块级作用域变量let与const

使用let或const声明的变量只在当前块级作用域生效,出了这个代码块,就无法访问。

{ let a = 5 } console.log(a) // Uncaught ReferenceError: a is not defined

日常开发中,块级作用域中使用的变量,尽量使用let或者const声明。

需要注意的问题:

let和const变量一定要先声明,再使用,避免出错。不要试图利用变量提升的特性。
const声明变量时,一定要初始化,否则会报错。let建议也在声明时初始化。
const声明的变量一旦初始化,以后就不可以在进行赋值操作,但可以对其引用的对象进行更改。

const noChangeMe; // Uncaught SyntaxError: Missing initializer in const declaration const noChangeMe = [1,2,4] noChangeMe = [2, 3] // Uncaught TypeError: Assignment to constant variable noChangeMe[100] = 100 // everything is OK

let和const声明的变量不能再重复声明。 虽然var可以无限次重复声明,但是并不适用于这两个新的声明方式。

let a = 1 let a = 2 // Identifier 'a' has already been declared

不要用window.xxx去调用let与const声明的变量 ES6规定,let、const、class声明的全局变量,不属于顶层对象的属性。

String

使用反引号”`”
使用``将字符串包起来,可以解决下面的问题:

字符串不能换行,如果换行只能使用+号
字符串中的引号如果和最外层相同,需要进行转义
字符串中插入变量,需要用+号 以前这样的写法:

var name = 'world' var str = "小明说:\"hello, " + name + "\"" // 小明说:"hello, world"

现在可以方便的写作:

var name = 'world' str str = `小明说:"hello, ${name}"`

总的来说,有三个好处:

不怕字符串中出现的引号;
不怕换行,反引号包起来的字符串可以随便换行;
使用${}将变量或表达式包起来直接放在字符串中,不用写很多+

ES6 遍历字符串

使用for...of代替for循环:

var string = 'string' for(var i of string) { console.log(i) }

includes(),startsWidth(),endsWidth()
不用使用indexOf()判断字符串中是否包含某个值了,使用includes():

var string = 'string' string.includes('i', 0) // true

includes第二个参数表示查找的起始索引。 还可以使用startsWidth()和endsWidth()判断字符串是否以某些字符开始或结尾。

ES6 函数

参数的默认值

方便地设置函数参数的默认值

function print( a = 2 ){ console.log(a) } print() //2

ES6 扩展运算符…获取其余参数

可以使用...加上变量名保存其他参数全部数量。 当只知道函数的前几个具体参数,不确定之后会有多少个参数传入时,可以使用...把其他传入的参数保存到一个数组中。

function print(value1, value2, ...values){ console.log(values.join('--')) } print(1, 2, '参数3') // 参数3 print(1, 2, '参数3', '参数4', '参数5') // print(1, 2, '参数3', '参数4', '参数5')

ES6 使用箭头函数

使用箭头函数有两个好处:

代码更加简洁
静态绑定this 箭头函数中,this指向的是定义箭头函数的对象中的this。

var name = 'outer' var obj = { name: 'inner', func: () => { console.log(this.name) } } var obj2 = { name: 'inner', func: function() { console.log(this.name) } } obj.func() // "outer" obj2.func() // "inner"

第一个使用了箭头函数,由于箭头函数的this与其所在环境中的this相同,也就是与obj的this相同,而obj处于全局环境的活动对象中,this指向全局对象,这里指window,所以输出outer。 注意:obj对象的this与它的属性中的this不一样。 第二个使用了寻常函数,作为obj2的一个属性,func方法中的this指向了所在的对象。输出inner。

ES6 数组
使用Array.from()把类数组对象转为数组

一般来说,含有length属性的对象就可以当作类数组对象。平时获取多个DOM对象后,不能使用数组中的很多方法。我们可以使用Array.from方便的转换为数组,。

var divs = Array.from(document.querySelectorAll('div')) divs.forEach((value, index) => {})

使用fill()初始化数组

想要以某个值初始化数组,需要遍历。而使用fill()方法,就方便了很多。

var arr = new Array(100) // 建立一个100元素的数组 arr.fill('初始值', 0, arr.length)

第一个参数是要填充的值,后面两个与一般的数组方法一样,起始索引和结束索引(不包括)。

使用includes方法

和字符串的includes方法一样,看数组中是否有给定值。

对象
使用简单的属性表示和方法表示

var name = 'John' var a = { name: name, sayName: function(){ console.log(this.name) } }

改写为:

var name = 'John' var a = { name, sayName () { console.log(this.name) } }

记得Object.is()这个方法
其与===的差别:

NaN === NaN // false Object.is(NaN, NaN) // true -0 === +0 //true Object.is(+0, -0) // false Object.is(+0, 0) / true Object.is(-0, 0) / false

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/08086fdcd402a6a61eec9eb78531d738.html