ES6基础知识

一、定义变量的关键字let和const

 1. let 定义变量的语法: let  变量名 = 值;
 2. 和var定义变量的区别

      1. 是否支持同一个作用域变量同名    var支持,let不支持

      2. 是否支持预解析                 var支持,let不支持

      3. 是否会挂载在window对象上       var会,let不会

      4. 是否存在暂时性死区(在定义这个变量之前的区域是这个变量的死区,不能在这个死区中进行操作变量 --- 输出,赋值,等)   let有  var没有

      5. 是否存在块级作用域             let存在,var不存在

  3.定义常量的语法:    const 常量名 = 值;

     常量:定义完毕之后不能再被更改

  4. const和let的共同点

        1. 不支持同一个作用域常量/变量同名

        2. 不支持预解析

        3. 不会挂载在window对象上

        4. 存在暂时性死区

        5. 存在块级作用域

5. const和let的不同点

       1. let定义的变量值,值能被修改。   const定义的常量值,值不能被修改

       2. let定义变量时,可以先声明后赋值    const定义常量时,不能先声明后赋值,需要声明即赋值

知识点1. 基本数据类型和引用数据类型的区别?

         基本数据类型:Number。String。Boolean。Null,Undefined

         引用数据类型: function  Object、Array、Math、Date等

         相同点: 变量名字都在栈内存存储

         不同点:

            1. 基本数据类型的变量存储的就是一个值

              引用数据类型的变量存储的是一个地址值,这个地址值在堆内存中是有一个对应的地址

            2. 基本数据类型的变量存储的值  在栈内存中存储

               引用数据类型的变量存储的值  在堆内存中存储

           3. 基本数据类型的值和值之间相互不影响

              引用数据类型和引用数据类型 在公用同一个地址的情况下,其中一个的值发生变化,另外一个也跟着变

知识点2. this指向问题?        

    1. 事件处理函数中的this       this===== 绑定事件的事件源  

    2. 全局函数中      this       this=====window

    3. 回调函数中      this       this=====window

    4. 对象中方法      this       this==== 对象本身

知识点3. 改变this指向?

    1. 函数名.call(this的指向改变成谁,函数的参数列表)              立即调用函数,没有返回值

    2. 函数名.apply(this的指向改变成谁,[函数的参数列表])    把参数放到数组中               立即调用函数,没有返回值

    3. 函数名.bind(this的指向改变成谁,函数的参数列表)    

二、 函数: 箭头函数

    箭头函数:是对匿名函数的一些改造

    1. 当箭头函数的参数只有一个参数时,()可以省去

    2. 当箭头函数的函数体内只有一行代码时,{}可以省

    3. 当箭头函数的函数体内只有一行代码,并且带return,需要{}和return同时省去

    4. 箭头函数中没有this,它的this指向的是该箭头函数的上一级作用域中的this

//4. 箭头函数中没有this,它的this指向的是该箭头函数上一级作用域中的thisconsole.log(this); // this===windowdocument.onclick = function() {console.log(this); // #document}console.log(this); // this===windowdocument.onclick = () => {console.log(this); //window}

三、 字符串:模版字符串

字符串: 模版字符串, includes , repeat ,startsWith,endsWith

    var user = 'zs'var str = `hello  ${user}`str.includes('world'): 判断str中是否包含world,返回true或者falsestr.startsWith('world'): 判断str中是否以world开始,返回true或者falsestr.endsWith('hello'): 判断str中是否以hello结束,返回true或者falsestr.endsWith('hello'): 判断str中是否以hello结束,返回true或者falsestr.repeat(3):        让str重复3次,返回重复后的字符串

四、 数组和对象: 解构赋值

 解构赋值: 将数组中的值快速从数组的元素中解构出来

    document.onclick = function (e) {console.log(e.clientX,e.clientY)// 将对象中需要的键快速从对象中解构出来,后期可以 clientX 代替 e.clientXvar { clientX, clientY } = e;console.log(clientX,clientY);let { clientX: x, clientY: y } = e;console.log(x, y);}var arr = [12, 34, 56, 67, 78];var [a, b, c, d, e] = arr; // 解构赋值console.log(a,b,c,d,e);var obj = { username: 'zs', age: 18, sex: '男' }var { username, age, sex } = obj;console.log(username,age,sex);// 还可以给对象的键名重新命名var { username: u, age: a, sex: s } = obj;console.log(u,a,s); var arr = [{"id": "2","product": "OPPO手机","price": 1999,"num": 16}, {"id": "3","product": "APPLE手机","price": 6999,"num": 1}]var res = arr.reduce((sum, item) => { let {  price,  num } = item;sum += price * numreturn sum;}, 0)console.log(res);

五、扩展运算符:  ...

      作用一: 数组元素,对象元素的展开

      作用二:合并数组,合并对象

      作用三: 将伪数组转为数组

      作用四:将函数的实参合并成数组

    //作用一:  数组元素,对象元素的展开var arr = [21, 45, 617, 78]console.log(...arr); // 21  45  67  78// 求几个数字的最大值console.log(Math.max(21, 45, 56, 78)); // 78console.log(Math.max(arr));// NaNconsole.log(Math.max(...arr));// 617//作用二:合并数组,合并对象// 将arr和arr1合并console.log(arr.concat(arr1)); //  [21, 45, 617, 78, 78, 89, 90]console.log([...arr, ...arr1]); //  [21, 45, 617, 78, 78, 89, 90]// // 合并对象var obj1 = { username: "zs" }var obj2 = { age: 18 }console.log({ ...obj1, ...obj2 });//作用三: 将伪数组转为数组var oLis = document.querySelectorAll("li")console.log(Array.from(oLis));console.log([...oLis]);//作用四:将函数的实参合并成数组function getSum(...args) {console.log(args); // [12,35,67]}getSum(12, 35, 67)getSum(12, 35, 67, 78)getSum(12, 35, 67, 78, 89)function getSum(...args) { // args表示的是一个数组形式的所有实参var sum = 0;for (var i = 0; i < args.length; i++) {sum += args[i]}return sum;}console.log(getSum(12, 35, 67));console.log(getSum(12, 35, 67, 78));console.log(getSum(12, 35, 67, 78, 89));

  六、 map集合set集合

   set集合: 一种类似数组的数据结构,  会将元素自动去重

   定义的语法:  var set = new Set([12,12,34,12,34,56,23])

   map集合:一种类似于对象的数据结构,

   定义的语法: var map = new Map();

                          添加:map.set('key',"value")

    var arr = [12, 12, 34, 12, 34, 56, 23]var set = new Set(arr)console.log(set); // 伪数组console.log([...set]); // 数组console.log([...new Set(arr)]);var map = new Map();map.set('key1', "value1")map.set('key2', "value2")map.set('key3', "value3")console.log(map); //{'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3'}

  七. for...of

       数组:  for..of可以遍历(遍历的是数组的元素),for..in也可以遍历(遍历的是数组的下标)

       对象:  只能使用 for..in 遍历对象,不能使用for..of

       map集合: 使用的是for..of来变量,不能使用for..in循环

    var arr = [12, 34, 56, 67]for (let item of arr) {console.log(item); // 12 34  56  67}for (let i in arr) {console.log(i); // 0 1 2 3}//只能使用for..in遍历对象,不能使用for..of来遍历对象var obj = {username: "zs",age: 18}for (var key in obj) {console.log(key);}var map = new Map();map.set('key1', "value1")map.set('key2', "value2")map.set('key3', "value3")console.log(map); //{'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3'}for (let item of map) { // item: ['key1','value1']console.log(item[0]); // 代表所有的键console.log(item[1]); // 代表所有的值}

 八. class类

  • 调用的方式: class类: new 函数名())

  • this的指向: class类的this是 new出来的对象(也就是实例化对象)

  • 默认返回值: class类的默认返回是 this

  • 名字: class类的函数名首字母大写,

  • 作用: class类的目的产生对象,通过调用对象身上的方法完成特定的功能

  • class类体内: 可以向this上挂载属性和方法

  • class类中的方法体内部的this:也是new出来的对象

//使用 class 关键字定义一个类:
class Person {constructor(name, age) {this.name = name; // 初始化属性this.age = age;}greet() { // 类的方法console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);}
}//constructor():构造函数用于创建和初始化对象实例。当使用 new 关键字创建类的实例时,会自动调用这个构造函数。
const alice = new Person('Alice', 30);
alice.greet(); //ES6 允许类之间的继承,通过 extends 关键字实现子类继承父类:
class Student extends Person {constructor(name, age, grade) {super(name, age); // 调用父类的构造函数this.grade = grade; // 初始化子类特有的属性}study() {console.log(`${this.name} is studying for grade ${this.grade}.`);}
}const bob = new Student('Bob', 20, 'A');
bob.greet(); // 输出: Hello, my name is Bob and I am 20 years old.
bob.study();

九、函数:  默认参数 


        函数的默认参数: 忘记传递实参,使用的是默认的参数,传递了实参,使用的是传递的实参

    // 函数的默认参数: 忘记传递实参,使用的是默认的参数,传递了实参,使用的是传递的实参function fn(x = 1) {console.log(x);}fn() //1function fn(x = 1) {console.log(x);}fn(20) //20


 

十、数组中:find 和findIndex()

        - find

          - 语法: arr.find(function(item,index,array){  return 条件判断})

          - 作用:查找元素的,找的是第一个满足条件的元素

          - 返回值:第一个满足条件的元素

          - 参数:function(item,index,array){}  item数组的每一个元素,index数组元素对应的下标,array属性本身,一般不写它

        - findIndex

          - 语法: arr.findIndex(function(item,index,array){  return 条件判断})

          - 作用:查找元素的,找的是第一个满足条件的元素的下标

          - 返回值:第一个满足条件的元素的下标

          - 参数:function(item,index,array){}  item数组的每一个元素,index数组元素对应的下标,array属性本身,一般不写它

    var arr = [1, 2, 3, 4, 5, 6, 7];var res = arr.find(function (item, index) {return item % 2 == 0;})console.log(res); // 2var res = arr.findIndex(function (item, index) {return item % 2 == 0;})console.log(res); // 1

十一、 模块化开发

默认导出,导入

// 默认导出一个函数
export default function greet() {console.log("Hello, World!");
}// 导入默认导出的函数
import greet from './module.js';
greet();  // 输出: Hello, World!

按需导出、导入

// 命名导出多个变量和函数
export const name = "Alice";
export const age = 25;
export function greet() {console.log("Hello!");
}// 按需导入命名导出的内容
import { name, age, greet } from './module.js';
console.log(name); // 输出: Alice
console.log(age);  // 输出: 25
greet();           // 输出: Hello!

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

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

相关文章

Unity RPG梦幻场景素材(附下载链接)

Unity RPG梦幻场景素材 点击下载资源 效果图&#xff1a; 资源链接

OpeneBayes 教程上新 | 打败 GPT-4V?超强开源多模态大模型 LLaVA-OneVision 正式上线!

大语言模型&#xff08;Large Language Model&#xff0c;简称 LLM&#xff09;与多模态大模型&#xff08;Large Multimodal Model&#xff0c;简称 LMM&#xff09;是人工智能领域的两个核心发展方向。 LLM 主要致力于处理和生成文本数据&#xff0c;而 LMM 则更进一步&#…

Git-本地项目同步到远程仓库

一、Git初始化项目 git initgit init 是 Git 中用于初始化一个新仓库的命令&#xff0c;通常用来在现有目录中创建一个 Git 仓库或重新初始化一个现有的 Git 仓库。通过 git init&#xff0c;你可以将一个普通的目录转变为 Git 受控的项目目录。 在当前目录中初始化一个新的 …

CesiumLab介绍

软考鸭小程序 学软考,来软考鸭! 提供软考免费软考讲解视频、题库、软考试题、软考模考、软考查分、软考咨询等服务 CesiumLab是一个围绕Cesium平台设计的完整易用的数据预处理工具集&#xff0c;它旨在最大化提升三维数据可视化效率。本文将详细介绍CesiumLab的安装、主要功能…

【JavaSE】图书系统

目录 当我们学习完Java的语法后&#xff0c;可以写一个简单的项目进行总结梳理一下&#xff0c;这个项目也会用到我们所学过的Java所有的语法知识&#xff1a;目录是咱们用文件夹包装起来的类。 1.book 在面向对象体系中&#xff0c;提出了一个软件包的概念&#xff0c;即&am…

electron-vite_6js-cookie失效

我们项目是用了js-cookie&#xff0c;后续集成的时候发现&#xff0c;无法进入首页&#xff1b;经过排查是js-cookie无法使用&#xff0c;可能是electron打包后的项目运行的时候是file:/// 猜测原因&#xff1a;因为Cookie是与域名相关联的&#xff0c;而file:///协议没有域名&…

k8s微服务

一 、什么是微服务 用控制器来完成集群的工作负载&#xff0c;那么应用如何暴漏出去&#xff1f;需要通过微服务暴漏出去后才能被访问 Service是一组提供相同服务的Pod对外开放的接口。 借助Service&#xff0c;应用可以实现服务发现和负载均衡。 service默认只支持4层负载均…

斯坦福大学提出电影剧本可视化工具ScriptViz:能够根据剧本中的文本和对话自动检索相关的电影画面,帮助剧作家更好地构思和调整剧情

title:斯坦福大学提出电影剧本可视化工具ScriptViz&#xff1a;能够根据剧本中的文本和对话自动检索相关的电影画面&#xff0c;帮助剧作家更好地构思和调整剧情 斯坦福大学的研究者们开发了一个电影剧本可视化工具ScriptViz工具&#xff0c;ScriptViz的工作原理可以简单地理解…

基于java SpringBoot和Vue校园食堂网站管理系统设计

摘要 本文旨在探讨一种基于Java Spring Boot和Vue框架的校园食堂网站管理系统的设计。首先&#xff0c;介绍了系统开发的背景及意义&#xff0c;即为了提高校园食堂的管理效率和改善学生的就餐体验。接着&#xff0c;详细阐述了系统的技术选型&#xff0c;包括后端采用Spring …

vue+ElementUI—实现基础后台管理布局(sideBar+header+appMain)(附源码)

后台管理的模板很多&#xff0c;vue本身就提供了完整的vue-template-admin&#xff0c;vue-admin-beautiful等后台管理系统化框架&#xff0c;但是这些框架正是因为成体系而显得繁重。假如你想搭建一个静态的后台管理模板页面和几个单独的菜单页面&#xff0c;直接就上框架是否…

C#源码安装ZedGraph曲线显示组件

在软件开发里,数据的显示,已经是软件开发的大头。 如果让数据更加漂亮地、智能地显示,就是软件的核心价值了。 因为不管数据千万条,关键在于用户看到图。因为一个图表,就可以表示整个数据的趋势, 或者整个数据的走向,数据频度和密码。所以图表显示是软件的核心功能,比如…

2.1.ReactOS系统中中断描述符表进行初始化

2.&#xff11;.ReactOS系统中中断描述符表进行初始化 2.&#xff11;.ReactOS系统中中断描述符表进行初始化 文章目录 2.&#xff11;.ReactOS系统中中断描述符表进行初始化 VOID INIT_FUNCTION NTAPI KeInitExceptions(VOID) {ULONG i;USHORT FlippedSelector;extern KIDTEN…

【计网】从零开始理解UDP协议 --- 理解端口号和UDP结构

我依旧敢和生活顶撞&#xff0c; 敢在逆境里撒野&#xff0c; 直面生活的污水&#xff0c; 永远乐意为新一轮的月亮和日落欢呼。 --- 央视文案 --- 从零开始理解UDP协议 1 再谈端口号2 理解UDP 报头结构3 UDP 的特点4 UDP 的缓冲区5 UDP 使用注意事项 1 再谈端口号 之前我…

自然语言处理问答系统

自然语言处理&#xff08;NLP&#xff09;问答系统是一种自动化系统&#xff0c;旨在接收自然语言查询并提供相应的答案。以下是对自然语言处理问答系统的详细描述&#xff0c;包括其架构、关键组件、实现方法、挑战与解决方案等。 1. 系统架构 自然语言处理问答系统通常由以…

Ubuntu 24.04 在 BPI-F3 上通过 SD 卡安装并从 NVME 运行

github 代码&#xff1a; https://github.com/rcman/BPI-F3 Ubuntu 24.04 现在正在我的 BPI-F3 上运行。很快会为 YouTube 制作一个视频。 这应该适用于任何版本的 Linux&#xff0c;仅在 Ubuntu 24.04 上测试过 入门 下载 Bianbu映像并使用您最喜欢的工具将其映像到微型 SD 卡…

服务器、jvm、数据库的CPU飙高怎么处理

服务器 CPU 飙高处理 排查步骤&#xff1a; 监控工具&#xff1a;使用操作系统自带的监控工具&#xff0c;比如 top、htop、sar、vmstat 等&#xff0c;查看哪些进程占用了大量的 CPU 资源。进程排查&#xff1a;通过 top 等工具找到消耗 CPU 最高的进程&#xff0c;确定是哪…

如何在冻结的MSA内部更改q,k,v的形状

在冻结多头自注意力&#xff08;MSA&#xff09;层的参数的情况下&#xff0c;若希望更改 q&#xff08;查询&#xff09;、k&#xff08;键&#xff09;、v&#xff08;值&#xff09;的形状&#xff0c;可以通过修改这些矩阵的输出维度或重新排列它们的维度&#xff0c;而不需…

【MongoDB】mongodb | 部署 | 常用命令

一、概述 基于mongodb的tcp连接无数据上报&#xff0c;服务器强踢监测。 物联网项目&#xff0c;tcp协议&#xff0c;基于4G卡&#xff0c;设备由于某些原因会断开重连&#xff0c;但是tcp没有断开&#xff0c;导致tcp持续累加&#xff0c;浪费资源。 建立机制&#xff1a; 当t…

解决一个android service启动无法开文件的问题

问题描述 android hal层一般是通过service给系统提供服务的。一般需要将service配置为开机启动。调试阶段&#xff0c;我直接将service push到板卡上&#xff0c;进行调试&#xff0c;未出现问题无法开的问题。在最后集成完成后&#xff0c;放到板卡上&#xff0c;出现启动无法…

【win10】VMware Workstation 16安装win10专业版及安装VMware Tools操作说明

参考链接 VMware虚拟机安装win10系统教程&#xff08;巨细&#xff09;_vmware安装win10-CSDN博客https://blog.csdn.net/gdidea/article/details/129523700 win10专业版安装说明 下载win10安装包 百度网盘 链接: https://pan.baidu.com/s/1kf4ORdXYgcqwAz2j86LSZw?pwdk4…