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几种形式的树结构菜单
May 10 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
js编写选项卡效果
May 23 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
Node.js API详解之 net模块实例分析
May 18 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
用cookies来跟踪识别用户
2006/10/09 PHP
php5.2.0内存管理改进
2007/01/22 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
JSON格式化输出
2014/11/10 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
详解ES6中的let命令
2020/04/05 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
python回调函数的使用方法
2014/01/23 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
Python如何实现爬取B站视频
2020/05/20 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
一份报关员的职业规划范文
2014/01/08 职场文书
加入学生会演讲稿
2014/04/24 职场文书
安全目标管理责任书
2014/07/25 职场文书
感谢信怎么写
2015/01/21 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
Feign调用传输文件异常的解决
2021/06/24 Java/Android
MySQL系列之四 SQL语法
2021/07/02 MySQL
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers