JavaScript ES6常用基础知识总结

站长资源 2024/11/25 佚名

64 1538 64

DDR爱好者之家 Design By 杰米

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' "htmlcode">

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常用基础知识总结，希望对大家有所帮助

ES6基础知识,ES6,let,ES6块级作用域,ES6遍历字符串,ES6箭头函数,ES6数组

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“JavaScript ES6常用基础知识总结”

暂无评论...

更新日志

2024年11月25日

JavaScript ES6常用基础知识总结

ES6 let与const及其相关

块级作用域

块级作用域变量let与const

String

ES6 遍历字符串

ES6 函数

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

ES6 使用箭头函数

ES6 数组

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

使用fill()初始化数组

使用includes方法

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

ES6 ...运算符

用作赋值

Vue动画事件详解及过渡动画实例

Vue组件的使用及个人理解与介绍

评论“JavaScript ES6常用基础知识总结”

更新日志

友情链接