资讯专栏INFORMATION COLUMN

新手开发中常用ES6基础知识总结

Paul_King / 2160人阅读

摘要:感觉对我这种没实习没工作的新手,虽然一些高级的功能暂时用不上,但是一些基础的知识还是为平时的开发提供了巨大的便利。学习告一段落,现在结合平时的开发,总结一些常用的知识。日常开发中,块级作用域中使用的变量,尽量使用或者声明。使用时,进行合并。

很早之前就学过TypeScript和ES6,后来做项目的时候零零散散用了些。这几天又系统地把ES6的知识看了一遍。感觉对我这种没实习没工作的新手,虽然一些高级的功能暂时用不上,但是一些基础的知识还是为平时的开发提供了巨大的便利。ES6学习告一段落,现在结合平时的开发,总结一些常用的知识。

let与const及其相关 块级作用域

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

常见的有

直接使用{}包起来:

 {
var a = 4
 }

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

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

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

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

块级作用域变量letconst

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

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

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

需要注意的问题:

letconst变量一定要先声明,再使用,避免出错。不要试图利用变量提升的特性。

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

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

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

不要用window.xxx去调用letconst声明的变量
ES6规定,letconstclass声明的全局变量,不属于顶层对象的属性。

String 使用反引号"`"

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

字符串不能换行,如果换行只能使用+

字符串中的引号如果和最外层相同,需要进行转义

字符串中插入变量,需要用+
以前这样的写法:

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

现在可以方便的写作:

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

总的来说,有三个好处:

不怕字符串中出现的引号;

不怕换行,反引号包起来的字符串可以随便换行;

使用${}将变量或表达式包起来直接放在字符串中,不用写很多+

遍历字符串

使用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()判断字符串是否以某些字符开始或结尾。

函数 参数的默认值

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

function print( a = 2 ){
    console.log(a)
}
print()    //2
扩展运算符...获取其余参数

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

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")
使用箭头函数

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

代码更加简洁

静态绑定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

数组 使用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

可以这样理解,遵循的原则: 是同一个东西就要相等。
NaNNaN就是一个东西,而-0带了个负号,和0+0不一样。0+0相同就像1+1相同一样。

使用Object.assign()合并多个对象

Object.assign()是用来合并对象的。assign,译作分配,指派。这个方法本意是将某些对象自己的属性拷贝到目标对象上。它不回去复制继承来的属性。
比如可以在定义某个配置的时候,定义一个基础配置,在定义两个不同情况下的配置。使用时,进行合并。

var pathConfig = {
    path: "style/images"
}
var devConfig = {
    baseUrl: "http://localhost:8080/"
}
var buildConfig = {
    baseUrl: "https://192.128.0.2"
}
// 使用时,合并
var mode = "dev"
var config = Object.assign({}, pathConfig, mode === "dev" ? devConfig : buildConfig)

只是举个例子。

Object.keys()Object.values()Object.entries

这三个方法返回对象自身的,可枚举的,属性名为字符串的属性相关的东西,分别为:

Object.keys(): 属性名组成的数组

Object.values(): 属性值组成的数组

Object.entries: ["key", "value"]组成的数组。

var john = {
    name: "John",
    age: 12
}
Object.keys(john) //  ["name", "age"]
Object.values(john) //  ["John", 12]
Object.entries(john) // [["name", "John"], ["age", 12]]
常用...运算符

前面在函数的剩余参数处理中提到了...扩展运算符。总结了一下,感觉有两个用法:

用来读取数组或者对象的时候,是把数组或对象给扩展开;

用来给对象或者数组赋值的时候,自动给对象或数组添加属性或元素。

用来读取

读取的时候就是把数组或者对象给扩展开来。

var a = [...[1,2,3], 4]        // 把数组的每一项都展出来
a  // [1, 2, 3, 4]
var obj = {
    name: "John",
    age: 12
}
var newObj  = {...obj, job: "teacher" }        // 把某个属性展出来
newObj // {name: "John", age: 12, job: "teacher"}

所以可以很方便的用来扩展,合并数组或对象。

用作赋值

用作赋值的时候,是用作解构赋值,含义就是把等号右边表达式的剩余属性或数组项都放到...后面的变量里。

var a, restB
[a, ...restB] = [1, 3, 5]
a // 1
restB //    [3, 5]

var c, restD
{ name, ...restD } = {name: "John", age: 12, job: "teacher"}
name  //  "John"  是一个属性的值
restD    //     { c, ...restD } = {name: "John", age: 12, job: "teacher"} 是一个对象

对于对象的解构赋值,会把对应不到的属性全部放进...后面的变量对象中。

注意:因为是把剩下没人要的属性或者数组项都收下,所以...应该放在数组或者对象中的最后,且只能有一个。

本文首发于我的博客
如有错误,欢迎指出!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87194.html

相关文章

  • JavasScript重难点知识

    摘要:忍者级别的函数操作对于什么是匿名函数,这里就不做过多介绍了。我们需要知道的是,对于而言,匿名函数是一个很重要且具有逻辑性的特性。通常,匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归 递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果...

    forsigner 评论0 收藏0
  • 前端相关大杂烩

    摘要:希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎,由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时,老司机们首先就会告诉你其实是个没有网络请求功能的库。 前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单 原文地址:Learning React.js is easier than you think 原文作...

    fuyi501 评论0 收藏0
  • 基础知识 - 收藏集 - 掘金

    摘要:本文是面向前端小白的,大手子可以跳过,写的不好之处多多分钟搞定常用基础知识前端掘金基础智商划重点在实际开发中,已经非常普及了。 JavaScript字符串所有API全解密 - 掘金关于 我的博客:louis blog SF专栏:路易斯前端深度课 原文链接:JavaScript字符串所有API全解密 本文近 6k 字,读完需 10 分钟。 字符串作为基本的信息交流的桥梁,几乎被所有的编程...

    wdzgege 评论0 收藏0
  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0
  • 前端基础入门

    摘要:手把手教你做个人火的时候,随便一个都能赚的盆满钵满,但是,个人没有服务端,没有美工,似乎就不能开发了,真的是这样的吗秘密花园经典的中文手册。涵盖前端知识体系知识结构图书推荐以及入门视频教程,全的简直不要不要的了。 JavaScript 实现点击按钮复制指定区域文本 html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能,不需要依赖 flash。...

    shinezejian 评论0 收藏0

发表评论

0条评论

Paul_King

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<