JavaScript之ES6高级语法(一)

news2024/12/23 3:14:53

本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习。

ES6高级语法(一)

  • 前言
  • 一、垃圾回收机制(Garbage Collection)
    • 1.1、引用计数法
    • 1.2、标记清除法(引用计数法升级版)
    • 1.3、内存泄漏
  • 二、闭包
  • 三、函数进阶(函数参数默认值、动态参数、剩余参数)
    • 3.1、函数提升
    • 3.2、函数参数
      • 3.2.1、默认值
      • 3.2.2、动态参数
      • 3.3.3、剩余参数(...)
    • 3.3、箭头函数
      • 3.3.1、箭头函数参数
      • 3.3.2、箭头函数 this
  • 四、解构赋值(左边是[]还是{}取决于“=”右边是数组还是对象)
    • 4.1、数组解构
    • 4.2、对象解构
  • 五、forEach遍历数组
  • 六、filter筛选数组


前言

今天学习的主要是关于ES6新语法知识的理解和应用


一、垃圾回收机制(Garbage Collection)

栈负责存放简单数据类型,堆负责存放复杂数据类型,但是复杂数据类型会把内容存在堆中,在栈中会存一个变量指向堆中的数据。垃圾回收就是将不再使用的对象的那片内存回收。
栈:存放简单数据类型、局部变量、参数等,由系统自动分配和释放。
堆:存放复杂数据类型,由程序员分配和释放,程序员不释放则由垃圾回收机制回收。所以垃圾回收机制一般回收复杂数据类型。

1、全局变量一般不会回收(关闭页面才会回收)
2、局部变量没有引用了,用完即被回收
3、垃圾回收机制一般回收复杂数据类型

1.1、引用计数法

当一个变量、函数、对象被别的地方引用了一次,则该变量的引用次数加一,减少引用一次 则减一,直至为0则被释放。

缺陷:如果两片内存互相引用则一直不会被垃圾回收机制回收,就会出现内存泄漏问题。

1.2、标记清除法(引用计数法升级版)

1、将“不再使用的对象”定义为“无法到达的对象”。
2、从根部定时的扫描内存中对象,凡是能从根部到达的对象,都是还需要使用的,凡是到达不了的就是认为不再需要,即便它们互相引用也会被清除,因为它们处于游离态,从根部不能到达。
在这里插入图片描述

1.3、内存泄漏

由于某种原因某片内存无法被垃圾回收机制回收或无法被释放,则成为内存泄漏,内存泄漏多了可能导致内存溢出。

二、闭包

概述:
一个函数对周围状态的引用捆绑在一起,内层函数中访问到其外层函数的作用域。外层函数内定义了一个内层函数,内层函数需要访问外层函数的变量。

作用:
1、让一个函数访问另一个函数内部的变量成为可能。主要运用就是用来实现数据私有化,将一个变量写在一个函数内,再在这个函数内写一个函数来负责操作该变量,然后return该变量,这时要改变该变量就只能调用这个内部函数来改变,这样就实现了变量的私有化,保护变量不被污染。(使用了闭包的话,该变量不会被回收,因为使用闭包使得外部变量(全局变量)指向该变量或函数,所以这个函数不会被销毁,只有当页面被关闭才会被销毁,所以使用闭包可能会引起内存泄漏,因为这个变量没有被正常回收)
2、闭包很有用,因为它允许将函数与其所操作的某些数据(环境)关联起来
==代码:==从代码形式上看闭包是一个做为返回值的函数,如下代码所示:

<script>
    // 1. 闭包 : 内层函数 + 外层函数变量
    // function outer() {
    //   const a = 1
    //   function f() {
    //     console.log(a)
    //   }
    //   f()
    // }
    // outer()

    // 2. 闭包的应用: 实现数据的私有。统计函数的调用次数
    // let count = 1
    // function fn() {
    //   count++
    //   console.log(`函数被调用${count}次`)
    // }

    // 3. 闭包的写法  统计函数的调用次数
    function outer() {
      let count = 1
      function fn() {
        count++
        console.log(`函数被调用${count}`)
      }
      return fn
    }
    const re = outer()
    // const re = function fn() {
    //   count++
    //   console.log(`函数被调用${count}次`)
    // }
    re()
    re()
    // const fn = function() { }  函数表达式
    // 4. 闭包存在的问题: 可能会造成内存泄漏
  </script>

三、函数进阶(函数参数默认值、动态参数、剩余参数)

3.1、函数提升

概念:
函数可以在声明之前调用,因为系统会把所有函数声明提升到当前作用域的最前面,和变量提升差不多,变量提升只提升变量声明,不提升变量赋值;函数提升只提升函数声明,不提升函数调用。
使用var fun=funtion(){}这种表达式的声明不存在提升现象

代码:

<script>
  // 调用函数
  foo()
  // 声明函数
  function foo() {
    console.log('声明之前即被调用...')
  }

  // 不存在提升现象
  bar()  // 错误
  var bar = function () {
    console.log('函数表达式不存在提升现象...')
  }
</script>

3.2、函数参数

3.2.1、默认值

总结:

  1. 声明函数时为形参赋值即为参数的默认值
  2. 如果参数未自定义默认值时,参数的默认值为 undefined
  3. 调用函数时没有传入对应实参时,参数的默认值被当做实参传入
<script>
  // 设置参数默认值
  function sayHi(name="小明", age=18) {
    document.write(`<p>大家好,我叫${name},我今年${age}岁了。</p>`);
  }
  // 调用函数
  sayHi();//不传参数就是用参数默认值name="小明", age=18
  sayHi('小红');
  sayHi('小刚', 21);
</script>

3.2.2、动态参数

概念:
arguments 是函数内部内置的伪数组变量,它包含了调用函数时传入的所有实参,伪数组与真数组的区别就是伪数组没有那些真数组的方法,例如push、pop、slice等等。

总结:
1.arguments 是一个伪数组
2. arguments 的作用是动态获取函数的实参

传入未指定数量的参数时可以用arguments

<script>
  // 求生函数,计算所有参数的和
  function sum() {
    // console.log(arguments)
    let s = 0
    for(let i = 0; i < arguments.length; i++) {
      s += arguments[i]
    }
    console.log(s)
  }
  // 调用求和函数
  sum(5, 10)// 两个参数
  sum(1, 2, 4) // 两个参数
</script>

3.3.3、剩余参数(…)

剩余参数...和展开运算符...比较容易混淆,但是剩余参数...只存在于函数中

总结:

  1. ... 是语法符号,置于最末函数形参之前,用于获取多余的实参
  2. 借助 ... 获取的剩余实参,是个真数组,拥有push、pop、shift、unshift等数组方法
    传入指定数量或以上的参数时可以用...xxx
<script>
  function config(baseURL, ...other) {
    console.log(baseURL) // 得到 'http://baidu.com'
    console.log(other)  // other  得到 ['get', 'json']
  }
  // 调用函数
  config('http://baidu.com', 'get', 'json');
</script>

3.3、箭头函数

概念:
箭头函数是一种声明函数的简洁语法,它与普通函数并无本质的区别,差异性更多体现在语法格式上。
箭头函数的用法就是用来替换表达式函数(let fun=funtion(){}),简化表达式函数

总结:

  1. 箭头函数属于表达式函数,因此不存在函数提升
  2. 箭头函数只有一个参数时可以省略圆括号 ()
  3. 箭头函数函数体只有一行代码时可以省略花括号 {}并自动做为返回值被返回
<script>
	//0. 常规函数写法
    // const fn = function () {
    //   console.log(123)
    // }
    
    // 1. 箭头函数 基本语法
    // const fn = () => {
    //   console.log(123)
    // }
    // fn()
    
    // const fn = (x) => {
    //   console.log(x)
    // }
    // fn(1)
    // 2. 只有一个形参的时候,可以省略小括号
    // const fn = x => {
    //   console.log(x)
    // }
    // fn(1)
    
    // // 3. 只有一行代码的时候,我们可以省略大括号
    // const fn = x => console.log(x)
    // fn(1)
    // 4. 只有一行代码的时候,可以省略return
    // const fn = x => x + x
    // console.log(fn(1))
    // 5. 箭头函数可以直接返回一个对象
    // const fn = (uname) => ({ uname: uname })
    // console.log(fn('刘德华'))

  </script>

3.3.1、箭头函数参数

箭头函数中没有 arguments,只能使用 ... 动态获取实参

  <script>
    // 1. 利用箭头函数来求和
    const getSum = (...arr) => {
      let sum = 0
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      return sum
    }
    const result = getSum(2, 3, 4)
    console.log(result) // 9
  </script>

3.3.2、箭头函数 this

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。

<script>
    // 以前this的指向:  谁调用的这个函数,this 就指向谁
    // console.log(this)  // window
    // // 普通函数
    // function fn() {
    //   console.log(this)  // window
    // }
    // window.fn()
    // // 对象方法里面的this
    // const obj = {
    //   name: 'andy',
    //   sayHi: function () {
    //     console.log(this)  // obj
    //   }
    // }
    // obj.sayHi()

    // 2. 箭头函数的this  是上一层作用域的this 指向
    // const fn = () => {
    //   console.log(this)  // window
    // }
    // fn()
    // 对象方法箭头函数 this
    // const obj = {
    //   uname: 'pink老师',
    //   sayHi: () => {
    //     console.log(this)  // this 指向谁? window
    //   }
    // }
    // obj.sayHi()

    const obj = {
      uname: 'pink老师',
      sayHi: function () {
        console.log(this)  // obj
        let i = 10
        const count = () => {
          console.log(this)  // obj 
        }
        count()
      }
    }
    obj.sayHi()

  </script>

四、解构赋值(左边是[]还是{}取决于“=”右边是数组还是对象)

解构赋值是一种快速为变量赋值的简洁语法,本质上仍然是为变量赋值,分为数组解构、对象解构两大类型。

4.1、数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法,如下代码所示:

<script>
  // 普通的数组
  let arr = [1, 2, 3]
  // 批量声明变量 a b c 
  // 同时将数组单元值 1 2 3 依次赋值给变量 a b c
  let [a, b, c] = arr
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
</script>

总结:

  1. 赋值运算符 = 左侧的 [] 用于批量声明变量,右侧数组的单元值将被赋值给左侧的变量
  2. 变量的顺序对应数组单元值的位置依次进行赋值操作
  3. 变量的数量大于单元值数量时,多余的变量将被赋值为 undefined
  4. 变量的数量小于单元值数量时,可以通过 ... 获取剩余单元值,但只能置于最末位
  5. 允许初始化变量的默认值,且只有单元值为 undefined 时默认值才会生效

4.2、对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法,如下代码所示:

<script>
  // 普通对象
  const user = {
    name: '小明',
    age: 18
  };
  // 批量声明变量 name age
  // 同时将数组单元值 小明  18 依次赋值给变量 name  age
  const {name, age} = user

  console.log(name) // 小明
  console.log(age) // 18
</script>

总结:

  1. 赋值运算符 = 左侧的 {} 用于批量声明变量,右侧对象的属性值将被赋值给左侧的变量
  2. 对象属性的值将被赋值给与属性名相同的变量
  3. 对象中找不到与变量名一致的属性时变量值为 undefined
  4. 允许初始化变量的默认值,属性不存在或单元值为 undefined 时默认值才会生效

注:支持多维解构赋值:

 <script>
    // 1. 这是后台传递过来的数据
    const msg = {
      "code": 200,
      "msg": "获取新闻列表成功",
      "data": [
        {
          "id": 1,
          "title": "5G商用自己,三大运用商收入下降",
          "count": 58
        },
        {
          "id": 2,
          "title": "国际媒体头条速览",
          "count": 56
        },
        {
          "id": 3,
          "title": "乌克兰和俄罗斯持续冲突",
          "count": 1669
        },

      ]
    }

    // 需求1: 请将以上msg对象  采用对象解构的方式 只选出  data 方面后面使用渲染页面
    // const { data } = msg
    // console.log(data)
    // 需求2: 上面msg是后台传递过来的数据,我们需要把data选出当做参数传递给 函数
    // const { data } = msg
    // msg 虽然很多属性,但是我们利用解构只要 data值
    function render({ data }) {
      // const { data } = arr
      // 我们只要 data 数据
      // 内部处理
      console.log(data)

    }
    render(msg)

    // 需求3, 为了防止msg里面的data名字混淆,要求渲染函数里面的数据名改为 myData
    function render({ data: myData }) {
      // 要求将 获取过来的 data数据 更名为 myData
      // 内部处理
      console.log(myData)

    }
    render(msg)

  </script>

五、forEach遍历数组

概念:
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数

注意:
1.forEach 主要是遍历数组
2.参数item当前数组元素是必须要写的, 索引号index可选。

<script>
    // forEach 就是遍历  加强版的for循环  适合于遍历数组对象
    const arr = ['red', 'green', 'pink']
    const result = arr.forEach(function (item, index) {
      console.log(item)  // 数组元素 red  green pink
      console.log(index) // 索引号
    })
    // console.log(result)
  </script>

六、filter筛选数组

概念:
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素

主要使用场景
筛选数组符合条件的元素,并返回筛选之后元素的新数组

<script>
    const arr = [10, 20, 30]
    // const newArr = arr.filter(function (item, index) {
    //   // console.log(item)
    //   // console.log(index)
    //   return item >= 20
    // })
    // 返回的符合条件的新数组

    const newArr = arr.filter(item => item >= 20)
    console.log(newArr)
</script>

💕 原创不易,还希望各位大佬支持一下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下

👍 点赞,你的认可是我创作的动力! \textcolor{orange}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

收藏,你的青睐是我努力的方向! \textcolor{red}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

🥕 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/643308.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

看病排队问题

目录 一、代码 二、功能函数介绍 三、运行截图 一、代码 #define _CRT_SECURE_NO_WARNINGS 1//不用VS删除这一行 #include<stdio.h> #include<stdlib.h> struct LinkQueue {int data;struct LinkQueue* next; };struct Node {LinkQueue* frount;LinkQueue* re…

docker无法启动 -> 缺少libseccomp

systemctl status docker.servicejournalctl -u dockeryum install -y libseccomplibseccomp是一个用于Linux操作系统的安全计算模式&#xff08;seccomp&#xff09;的用户空间库。seccomp是一种Linux内核特性&#xff0c;允许限制进程可以执行的系统调用&#xff0c;以增加应…

C语言中的基本数据类型

C语言中的基本数据类型分别为以下几种 整型、浮点型、字符类型 整型又分为整型int、短整型short、长整型long 浮点型分为单精度浮点型float、双精度浮点型double 1、短整型short 2.整型 3.长整型 短整型、长整型、整形都是表示整形的&#xff0c;并且输出结果也都为10&…

教你如何批量关闭窗口,省时又省力!

哈喽哈喽&#xff0c;大家好&#xff0c;今天我们来分享一个小功能。 在实际的应用场景中&#xff0c;我们可能需要打开多个窗口&#xff0c;在关闭窗口时&#xff0c;逐个关闭窗口可能比较繁琐&#xff0c;而且有些窗口虽然不再显示了&#xff0c;但可能是隐藏的。在这种情况…

Flutter 库:强大的工具及扩展——nb_utils

Flutter 库&#xff1a;强大的工具及扩展——nb_utils 文章目录 Flutter 库&#xff1a;强大的工具及扩展——nb_utils一、概述1、简介2、功能3、官方资料 二、基本使用1、安装2、基本使用第一步&#xff1a;在 main.dart 中初始化第二步&#xff1a;在您的 MaterialApp 或 Cup…

java的字符输入流

字符流的底层也是字节流。字符流字节流字符集。 特点是输入流一次读一个字节&#xff0c;遇到中文时&#xff0c;一次读多个字节&#xff08;读多少个与字符集有关&#xff09;&#xff1b;输出流底层会把数据按照指定的编码方式进行编码&#xff0c;变成字节再写到文件中。 字…

15个提效的设计类AI生成工具推荐

最近越来越多的AI工具如雨后春笋般涌现。我相信很多设计师会开始使用人工智能工具来帮助我们提高工作效率。 本文整理了15种易于使用的设计类AI工具 即时 AI 即时 AI 是通过自然语言描述&#xff0c;快速生成可编辑的 UI 设计稿的设计工具。 输入文字描述后&#xff0c;即可…

C语言:使用函数完成整型数组的打印、元素逆置、初始化

题目&#xff1a; 创建一个整形数组&#xff0c;完成对数组的操作 1. 实现 函数init() -- 初始化数组为全0 2. 实现 函数print() -- 打印数组的每个元素 3. 实现 函数reverse() -- 函数完成数组元素的逆置 要求&#xff1a;自己设计以上函数的参数&#xff0c;返回值。 思路&a…

AB32VG1:SDK_AB53XX_V061(4)蓝牙音频测试笔记

文章目录 1. 淘宝上两种开发板&#xff0c;有一种的蓝牙功能不正常2. 蓝牙音频测试2.1 《config.h》和《Boombox.setting》两个配置以哪个为准2.2 codeblocks更换链接库2.2.1 这样进入build options是错的2.2.2 build options正确打开方式 2.3.编译工程&#xff0c;下载运行2.3…

kafka 报错 - Cannot assign requested address

背景 在华为云服务器上跑了 zookeeper 和 kafka 的 broker&#xff0c;想内外网分流&#xff0c;重点就是做不到从外网去消费&#xff0c;比如用自己的 windows 笔记本去消费。 配置 server.properties 的 listener 为 broker 所在机子的的内网 IP 后&#xff0c;终于能 star…

Scala环境搭建及安装

salca环境搭建 由于scala是基于java来开发的, 编写的java类可以使用javac命令编译成.class文件被JVM加载到内存中执行 ! 那么scala可以通过scalac命令将编写的scala文件编译成.class文件一样被JVM加载到内存中,因此Scala是运行在JVM平台上的&#xff0c;所以安装Scala之前要安装…

【SpringBoot实战专题】「开发实战系列」全方位攻克你的技术盲区之SpringBoot整合众多日志管理系统服务starter-logging

全方位攻克你的技术盲区之SpringBoot整合众多日志管理系统服务starter-logging 前提介绍Spring默认日志文件Spring的日志配置参数logging.levelmaven配置properties文件yaml文件 logging.fileapplication.yml中配置 logging.pathapplication.properties配置application.yml配置…

基于DBACAN的道路轨迹点聚类

目录 前言道路栅格化轨迹聚类参考资料 前言 很多针对道路轨迹的挖掘项目前期都需要对道路进行一段一段的分割成路段&#xff0c;然后对每一个路段来单独进行考察&#xff0c;如设定路段限速标识&#xff0c;超速概率等&#xff0c;如何对道路进行划分&#xff0c;其实是一个很…

华为OD机试真题 JavaScript 实现【滑动窗口】【2023 B卷 100分】,附详细解题思路

一、题目描述 有一个N个整数的数组&#xff0c;和一个长度为M的窗口&#xff0c;窗口从数组内的第一个数开始滑动直到窗口不能滑动为止&#xff0c;每次窗口滑动产生一个窗口和&#xff08;窗口内所有数和和&#xff09;&#xff0c;求窗口滑动产生的所有窗口和的最大值。 二…

python: read excel

""" Insurance。py edit&#xff1a; geovindu,Geovin Du,涂聚文 date 2023-06-13 保险类 """import sys import osclass Insurance:"""保险类"""def __init__(self, InsuranceName, InsuranceCost, IMonth):&quo…

STM32使用QUADSPI读写外部Nor Flash(以W25Q64为例)

使用QUADSPI读写W25Q64 QUADSPI介绍硬件连接双闪存模式禁止双闪存模式使能 QUADSPI命令序列指令阶段地址阶段交替字节阶段空指令周期阶段数据阶段 QUADSPI主要信号接口协议模式单线SPI模式双线SPI模式四线SPI模式 使用QUADSPI操作W25Q64发送命令函数状态轮询函数读ID函数QUADSP…

应用案例 | FG-200:通过Modbus将FF H1设备集成到DCS系统

一 背景 FOUNDATION Fieldbus&#xff08;FF&#xff09;协议是一种现代化的数字通信协议&#xff0c;其中FF H1协议在大型的化工、电力、石油等流程工业领域得到了广泛应用。由于FF H1协议具有诸多优势&#xff0c;例如高度可靠性、高速数据传输、强大的诊断能力和灵活的设备…

第4章 总体设计

文章目录 第5章 总体设计5.1 设计过程例题 5.2 设计原理5.2.1 模块化模块化的优势 例题5.2.2 抽象5.2.3 逐步求精求精实际上是细化的过程与抽象的关系 5.2.4 信息隐藏和局部化5.2.5 模块独立模块独立的重要性模块独立的定性标准度量耦合① 无直接耦合② 数据耦合③ 标记耦合④ …

MySQL数据库基础 11

第十一章 数据处理之增删改 1. 插入数据1.1 实际问题1.2 方式1&#xff1a;VALUES的方式添加1.3 方式2&#xff1a;将查询结果插入到表中 2. 更新数据3. 删除数据4. MySQL8新特性&#xff1a;计算列 1. 插入数据 1.1 实际问题 解决方式&#xff1a;使用 INSERT 语句向表中插入…