JavaScript ES6常用基础知识总结


Posted in Javascript onFebruary 09, 2019

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。

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

块级作用域变量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

可以这样理解,遵循的原则: 是同一个东西就要相等。 NaN与NaN就是一个东西,而-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]]

ES6 ...运算符

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

用来读取数组或者对象的时候,是把数组或对象给扩展开;
用来给对象或者数组赋值的时候,自动给对象或数组添加属性或元素。
用来读取
读取的时候就是把数组或者对象给扩展开来。

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'} 是一个对象

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

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

以上即是ES6常用基础知识总结,希望对大家有所帮助

Javascript 相关文章推荐
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 #Javascript
Vue自定义指令写法与个人理解
Feb 09 #Javascript
Vue指令指令大全
Feb 09 #Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 #Javascript
vue计算属性get和set用法示例
Feb 08 #Javascript
vue多次循环操作示例
Feb 08 #Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 #Javascript
You might like
PHP判断是否微信访问的方法示例
2019/03/27 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
javascript[js]获取url参数的代码
2007/10/17 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
详解datagrid使用方法(重要)
2020/11/06 Javascript
Python常用正则表达式符号浅析
2014/08/13 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
python 二维数组90度旋转的方法
2019/01/28 Python
numpy.random模块用法总结
2019/05/27 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
基于python实现坦克大战游戏
2020/10/27 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
行政专员工作职责
2013/12/22 职场文书
应届毕业生求职信范文分享
2013/12/26 职场文书
阳光体育活动总结
2014/04/30 职场文书
售房委托书
2014/08/30 职场文书
2014年绿化工作总结
2014/12/09 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书