ES6的新增语法

最新推荐文章于 2024-07-24 23:30:03 发布

学习鸭

最新推荐文章于 2024-07-24 23:30:03 发布

阅读量247

点赞数

分类专栏： js 笔记文章标签： js es6 前端

本文链接：https://blog.csdn.net/weixin_47451403/article/details/107925299

版权

笔记同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

ES6的新增语法

ES6之前，JavaScript中只有全局作用域和局部作用域，ES6中新增了块级作用域（就是{}里面产生的作用域）

let

ES6中新增的用于声明变量的关键字let
let声明的变量只在所处于的块级有效

if ( true ) {
 let a = 10
}
console.log(a) //  a is not defined

使用let的好处

好处是：在逻辑比较复杂的时候，能够防止内层变量覆盖外层变量, 防止循环变量变成全局变量

for(let i=0; i<2, i++) { 
           }
console.log(i) // i is not defined

在大括号中使用let关键字声明的变量才具有块级作用域，var是不具备这个特点的

let关键字的特点

不存在变量提升

console.log(a) // a is not defined
let a = 10

暂时性死区
在{}外面有一个tem变量，{}里面let再声明一个tem同名变量，let绑定的作用域内部的变量不受外部变量的影响

var tem = 123
if (true) {
  console.log(tem) //  Cannot access 'tem' before initialization  初始化前无法访问“tem”
   let tem = ‘abc’; 

}

let经典面试题

在这里插入图片描述

输出结果：
在这里插入图片描述

const

const作用

作用：声明常量，常量就是值(内存地址) 不能变化的量

特点

具有块级作用域

if(true) {
  const a = 10
  console.log(a) // 10
}
console.log(a) // a is not defined

声明常量时必须赋值

   const a; // Missing initializer in const declaration 常量声明中缺少初始值设定项
   let a 或 var a  // undefined

常量赋值后，值不能修改(指的是常量值对应的内存地址不能更改)

const PI = 3.14
PI= 100 // Assignment to constant variable.

const ary = [100, 200]
ary[0] ='a'
ary[1] = 'b'
console.log(ary) // ["a", "b"]
ary = ['a', 'b']  //  Assignment to constant variable.

let, const, var 的区别

1.使用var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
2.使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
3.使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值。

数组解构

数组解构允许我们按照一一对应的关系从数组中提取值，然后将值赋值给变量
在等号的左边用[]表示, 如：

let ary = [1,3,4]
let [a,b,c] = ary // 解构
console.log(a) // 1
console.log(b) // 3
console.log(c) // 4

对象解构

按照一定模式，从数组中或者对象中提取值，将提取出来的值赋值给另外的变量
对象解构允许我们使用变量的名字匹配对象的属性匹配成功将对象属性的值赋值给变量

let person = { name: ‘zhangsan’, age: 20 }
Let { name, age } = person // 解构
console.log(name) // ‘zhangsan’
console.log(age) // 20

// 另一种写法
let {name:myName, age: myAge } = person
console.log(myname) // ‘zhangsan’
console.log(myAge) // 20

箭头函数

ES6中新增的定义函数方式

() => { }  // (形参) => {函数体}

调用箭头函数：给箭头函数定义一个变量，通过变量名调用

const fn = () =>{}
// 箭头函数是用来简化函数定义语法的
const fn = () => { 
  console.log(123)
 }
fn() // 123

函数体中只有一句代码，且代码的执行结果就是返回值，可省略大括号

function sum(num1, num2) { 
  Return num1 + num2
 }
// 这两个函数等价
const sum = (num1, num2) => num1 + num2
const result = sum(10, 20)
console.log(result) // 30

// 如果形参只有一个，可以省略小括号
function fn(v) {
   return v
}
// 等价于
const fn = v=> v

// 箭头函数不绑定this 关键字，箭头函数中的this, 指向的是函数定义位置的上下文this
const obj = { name: '张三' }
function fn() {
   console.log(this) // {name: "张三"}
   return () => {
     console.log(this) // {name: "张三"}
  }
}
const resFn = fn.call(obj)
resFn()
// 这里的this指向obj

案例：

var obj = {
   age: 20,
   say: () => {
     alert(this.age) // undefined
   }
}
obj.say();

obj是一个对象，对象没有作用域，所以obj里面的say下面的this被定义在了全局变量下，指向的是window，window里面没有this，所以得到的是undefined

剩余参数

普通函数示例

剩余参数语法允许我们将一个不定数量的参数表示为一个数组
当实参个数大于形参个数时，我们将剩余的实参放到一个数组中，加3个点，就接收了剩余的实参。

function sum (first, ...args) {
console.log(first) // 10
console.log(args) // [20, 30]
}
sum(10,20,30)

箭头函数示例：

const sum = (...args) => {
   let total = 0;
   args.forEach(item => total += item)
   return total
}
console.log(sum(10,20))  // 30
console.log(sum(10,20,30)) // 60

剩余参数和解构配合使用

let students = ['wangwu', 'zhangsan', 'lisi']
let [s1, ...s2] = students
console.log(s1) // ‘wangwu’
console.log(s2) // [‘zhangsan’]

ES6的内置对象扩展

Array的扩展方法

1.扩展运算符（展开语法）
扩展运算符和剩余参数正好是相反的
剩余参数：是把剩下的参数放在一个数组里面
扩展运算：可以将数组或者对象转为用逗号分隔的参数序列，也是用三个点代表

let ary = [1,2,3]
console.log(...ary ) // 1 2 3 // 没有逗号，因为逗号被当作console.log的参数分隔符了，所以输出没有逗号

2.扩展运算符可以应用于合并数组

// 方法一
let ary1 = [1,2,3]  // ...ary1: 1 2 3
let ary2 = [3,4,5]  // ...ary2:4 5 6
let ary3 = [...ary1, ...ary2] // ary3: [1，2，3，3，4，5]
// 以上代码，有两个数组，分别为ary1，ary2，参数序列的外侧再加上数组[ ]让他重新变为数组，这就是合并数组了
// 方法二
ary1.push(...ary2)
console.log(ary1) //  [1，2，3，3，4，5]

扩展运算符的应用场景

将类数组(伪数组)或可遍历对象转换为真正的数组

<body>
  <div>1</div>
  <div>5</div>
  <div>8</div>
  <div>4</div>
</body>
<script>
var oDivs = document.getElementsByTagName(‘div’) // 通过标签名称获取页面中的所有的div元素
console.log(oDivs)
var ary = [...oDivs] // oDivs 是伪数组
console.log(ary)
</script>

将伪数组转换为正真的数组

将伪数组转换为正真的数组：用…(扩展运算符)把伪数组转为以逗号分隔的参数数列，然后在参数序列的外面加上一个数组[]

伪数组为什么要转换为真数组？

转换为真数组之后就可以直接调用数组里面的方法了

 var oDivs = document.getElementsByTagName('div') // 通过标签名称获取页面中的所有的div元素
 // console.log(oDivs)
 // oDivs.push('a')
 // console.log(oDivs); // 报错 oDivs.push is not a function
 var ary = [...oDivs] // oDivs 是伪数组
 ary.push('a')
 console.log(ary) // [div, div, div, div, "a"]

构造函数方法：Array.from()

将类数组(伪数组)或可遍历对象转换为真正的数组

let arrayLike = {
  ‘0’: ‘a’,
  ‘1’: ‘b’
  ‘2’: ‘c’
  length: 3
}
// let arr2 = Array.from(arrayLike) // [‘a’,’b’,’c’]
let arr2 = Array.from(arrayLike, item => item * 2)

还可以有两个参数，第一个参数是要被转换的伪数组，第二个参数是一个函数，它的作用是对数组中的元素进行加工处理，数组中有多少个元素，函数就会被调用多少次，函数中有一个形参代表是要处理的值，我们需要把处理的结果返回即可

学习鸭

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ES6的新增语法

ES6的新增语法ES6的新增语法let使用let的好处let关键字的特点let经典面试题constconst作用特点let, const, var 的区别数组解构对象解构箭头函数剩余参数箭头函数示例：剩余参数和解构配合使用ES6的内置对象扩展Array的扩展方法扩展运算符的应用场景将伪数组转换为正真的数组伪数组为什么要转换为真数组？构造函数方法：Array.from()ES6的新增语法ES6之前，JavaScript中只有全局作用域和局部作用域，ES6中新增了块级作用域（就是{}里面产生的作用域）le
复制链接

扫一扫

专栏目录