JS-09-es6常用知识1

目录

1  模板字符串

1.1 模板字符串基本用法

1.2 模板字符串解决了一些痛点

2 解构赋值

2.1 对象的解构赋值

2.2  函数参数的解构赋值

2.3 补写:属性的简写

3  rest参数

3.1 arguments

3.2 rest参数

3.3 补充:判断数据类型

4 箭头函数

4.1 用法

4.2 箭头函数和普通匿名函数有哪些不同?

 5 指向window

6  global和window的区别


1  模板字符串

模板字符串就是一种字符串的新的表现形式

1.1 模板字符串基本用法

var s1 = `abc`

1.2 模板字符串解决了一些痛点

1、字符串拼接

    var s3 =" a " + s1 + " b " + s2;    //普通字符串拼接var s4 = ` a ${s1} b ${s2}`;        //模板字符串,减少了错误几率

2、字符串换行

    var s5 =`<div><p><span>123</span></p><p>${s2}</p><p>${s3}</p><p>${s1}</p></div>`;console.log(s5);

2 解构赋值

节省代码量,简化代码

2.1 对象的解构赋值

    var obj={name:"张三",age:18}var {name,age}=obj; //生成2个变量,//  name值来自于obj.name、//  age值来自于obj.agevar {name:title}=obj;//生成一个变量:title,值来自于obj.namevar {name:title,age:title1}=obj;   //相当于给obj里的变量在外面取了别名

2.2  函数参数的解构赋值

    function f1(obj){  //未解构console.log(obj.age);console.log(obj.height)}//等价于function f1({ age,height }){ //解构//创建了age、height两个局部变量,值来自于实参//这样写代码又节省了一些字符console.log(age);console.log(height)}f1({age:5,height:180}) //调用函数

2.3 补写:属性的简写

    var a = 3 ; var c = 10;var b = { a,c } ;   //b对象有一个a属性,a属性的值,来自于a变量  ,//还有一个c属性,c属性的值来自于c变量console.log(b)

3  rest参数

使用背景:es6的

优点:arguments是伪数组,而rest参数是真数组

3.1 arguments

arguments是函数内部的一个局部变量,
arguments.length表示函数的实参的个数

    function fn() {console.log(arguments.length);for (var i = 0; i < arguments.length; i++) {console.log(arguments[i]);}}fn(1, 3, 5)       //3fn("a", "b", "c", "d", "e") //5

3.2 rest参数

  es6箭头函数内部不能使用arguments,为了弥补这个问题,rest参数应孕而生

    //...args就是rest参数//-->产生了一个变量,这个变量是一个数组,数组里面包含了这个函数调用时传递的所有实参function q(...args) {//验证args是不是数组?console.log(args instanceof Array);//trueconsole.log(Object.prototype.toString.call(args));//"[object Array]"console.log(Array.isArray(args));   //true es5中的新方法console.log(args);}q(1, 3, 5);q(2, 3, 4, 5, 6, 7, 8);

3.3 补充:判断数据类型

1、typeof:typeof只能判断:数字、字符串、布尔值、undefined、函数

2、Object.prototype.toString.call()

  •      5  '[object Number]'
  •     "abc" '[object String]'
  •      true '[object Boolean]'
  •      null '[object Null]'
  •      undefined '[object Undefined]'
  •      [1,3,5] '[object Array]'
  •      function(){}  '[object Function]'
  •      new Date()   '[object Date]'
  •      /abc/        '[object RegExp]'

3、Array.isArray()  es5中提出来的检测数组

4、 isNaN()  

5、 isInfinity()

4 箭头函数

场景:用于替换匿名函数

4.1 用法

 1:基本用法

    //匿名函数div.onclick=function(){console.log("你好")}//箭头函数div.onclick=()=>{console.log("你好")}

2:有一个参数的箭头函数

    var fn=(a)=>{console.log("abc");}//等价于:var fn=a=>{console.log("abc");}

3 有2个及更多参数的箭头函数

切记:()不能省略

    var f=(a,b,c)=>{console.log("abc")}

4.2 箭头函数和普通匿名函数有哪些不同?

1、函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

2、不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

3、不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

4、(不常用)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。 generator函数现在经常用async替代

普通的匿名函数,或者说具名函数,都可以决定函数内部的this值,而箭头函数不可用

<script>var p={age:18,//es6中对象方法的箭头函数表示形式run:()=>{setTimeout(()=>{//this:windowconsole.log(this);//this是window},100)},travel:function(){//this:psetTimeout(()=>{console.log(this);//this是p},100)},//推荐使用的方式☆☆☆:es6中对象方法的简写形式say(){console.log("say方法中的this:",this);setTimeout(()=>{console.log("say内部的延迟函数:",this);//this是p},100)},}p.run();p.travel();p.say();
</script>

 5 指向window

    在 jQuery 的 $.ajax 方法中,直接使用 this 关键字在 success 回调函数中通常不会指向你期望的上下文(比如调用 $.ajax 的对象或者某个特定的 DOM 元素)。这是因为 JavaScript 的回调函数通常改变了 this 的上下文,除非你显式地绑定它。 

   在 $.ajax 的 success 回调函数中,this 通常指向全局对象(浏览器中通常是 window)。这是因为当你调用一个回调函数时,除非你明确地设置了它的 this 值(例如使用 .call().apply(), 或者箭头函数),否则 this 将默认指向全局对象。

$.ajax({success:function(){console.log(this);        //window}
})

    在 JavaScript 中,当你使用普通的函数(非箭头函数)作为回调,并且这个函数是在没有显式指定上下文(即没有使用 .call().apply(), 或 .bind() 方法)的情况下被调用的,那么 this 的值通常是全局对象(在浏览器中是 window)。

[1,3,5].map(function(){console.log(this);      //window
})

6  global和window的区别

global是es中全局作用域中的根对象

  • 但是nodejs里面,global全是表示全局变量的载体
  • 浏览器端的js里面,全局变量都放在了window中,浏览器中不存在global对象

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

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

相关文章

传输中的串扰(八)

串扰指的是有害信号从一个线网传递到相邻线网上。通常把噪声源所在的线网称为动态线或攻击线网&#xff0c;而把有噪声形成的线网称为静态线或受害线网。 静态线上的噪声电压的表现与信号电压完全一样。一旦在静态线上产生噪声电压&#xff0c;它们就会传播并在阻抗突变处出现反…

服务器数据恢复—服务器raid常见故障表现原因解决方案

RAID&#xff08;磁盘阵列&#xff09;是一种将多块物理硬盘整合成一个虚拟存储的技术&#xff0c;raid模块相当于一个存储管理的中间层&#xff0c;上层接收并执行操作系统及文件系统的数据读写指令&#xff0c;下层管理数据在各个物理硬盘上的存储及读写。相对于单独的物理硬…

外卖点餐系统 springboot+vue+element-ui

免费获取方式↓↓↓ 项目介绍038&#xff1a; http://localhost:8080/ 账号&#xff1a;weiguanke 123 系统登陆后展示 用户可视界面 – 登录页面 – 首页&#xff1a; – 店铺查找页面&#xff1a; 店铺查找 – 店铺页面 店铺管理者可视页面 – 店铺页面 店铺管理员…

Redis之持久化、集群

1. Redis持久化 Redis为什么需要持久化?因为Redis的数据我们都知道是存放在内存中的&#xff0c;那么每次关闭或者机器断电&#xff0c;我们的数据旧丢失了。 因此&#xff0c;Redis如果想要被别人使用&#xff0c;这个问题就需要解决&#xff0c;怎么解决呢?就是说我们的数…

Windows通过cmd运行快速启动应用

Windows如何通过cmd运行快速启动应用&#xff1f; 在Windows操作系统中&#xff0c;可以通过配置环境变量的方式将文件的路径配置到环境变量的path中&#xff0c;配置完成后可以在cmd中输入对应的应用名称即可启动应用&#xff0c;具体操作如下&#xff1a; 1. 添加应用程序路径…

力扣62. 不同路径

一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。问总共有多少条不同的路径&#xff1f; 示例 1&…

FJSP:蛇鹫优化算法(SBOA)求解柔性作业车间调度问题(FJSP),提供MATLAB代码

详细介绍 FJSP&#xff1a;蛇鹫优化算法&#xff08;Secretary bird optimization algorithm&#xff0c;SBOA&#xff09;求解柔性作业车间调度问题&#xff08;FJSP&#xff09;&#xff0c;提供MATLAB代码-CSDN博客 完整MATLAB代码 FJSP&#xff1a;蛇鹫优化算法&#xff…

spoon工具的常用基础操作

一些常用转换工具 1、emp表输入->excel表输出 emp表输入&#xff0c;可以进行预览查看数据有没有过来excel表输出 成功执行后&#xff0c;可以到保存的excel位置进行查看。 2、excel输入->表输出 运行转换后可以在oracle进行查看是否有成功创建这个表 3、对部门最高…

Java 22的FFM API,比起Java 21的虚拟线程

哪个对Java未来的发展影响更大&#xff1f;两个 Java 版本中的重要特性&#xff1a;Java 21 的虚拟线程和 Java 22 的 FFM API。我这里有一套编程入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习编程&#xff0c;不妨点个关注&#xff0c;给…

原生APP开发和Flutter开发的比较

原生APP开发和Flutter开发各有优缺点&#xff0c;适用于不同的场景和需求。下面是两者的详细比较&#xff0c;从开发语言、性能、开发效率、维护和更新、社区和支持等多个方面进行分析。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。…

【康耐视国产案例】智能AI相机机器视觉精准快速实现包裹标签的智能粘贴

康耐视推出的3D-A1000是专业的、匹配物流行业各类分拣机及包裹检测应用的全功能视觉检测系统&#xff0c;其能够准确检测分拣机上是否有包裹、包裹是否超出边界、空车检测、是否有遗留物品等。由于搭载了专利的三维结构光技术&#xff0c;产品具有更强大的创新性以满足持续更新…

综合交易模型--雪球跟单参数说明支持qmt,同花顺

经过测试&#xff0c;目前完成了这个策略。支持多策略&#xff0c;支持全市场&#xff0c;包括股票&#xff0c;etf,可转债 全部的参数 { "雪球跟单":"跟单原理", "原理":"比重变大默认买入&#xff0c;变小默认卖出&#xff0c;持股…

fintuning chatglm3

chatglm3介绍 ChatGLM3-6B 是 ChatGLM 系列最新一代的开源模型&#xff0c;在保留了前两代模型对话流畅、部署门槛低等众多优秀特性的基础上&#xff0c;ChatGLM3-6B 引入了如下特性&#xff1a; 更强大的基础模型&#xff1a; ChatGLM3-6B 的基础模型 ChatGLM3-6B-Base 采用…

【uni-app】Pinia 持久化

小程序端 Pinia 持久化 说明&#xff1a;Pinia 用法与 Vue3 项目完全一致&#xff0c;uni-app 项目仅需解决持久化插件兼容性问题。 持久化存储插件 安装持久化存储插件&#xff1a; pinia-plugin-persistedstate pnpm i pinia-plugin-persistedstate插件默认使用 localStor…

Anaconda创建python环境默认C盘,如何修改路径

文章目录 前言解决方案1.找到Anaconda的根目录2. 找到根目录文件夹&#xff0c;右键-属性-安全 测试-重新创建新的python环境 前言 使用 Anaconda创建python环境&#xff0c;默认在C盘。 如何修改到别的路径呢&#xff1f; base环境 是安装 Anaconda是安装的默认环境&#x…

西瓜播放器xgplayer设置自动播放踩坑

上图是官网&#xff08;西瓜视频播放器官方中文文档&#xff09;的介绍&#xff0c;相信大家都是按照官网配置去做的&#xff0c;但是并没有什么用&#xff0c;插件很好用&#xff0c;但是属性不全&#xff0c;真的很悔恨&#xff0c;找遍 api 都没有找到自动播放的属性&#x…

LLM——深入探索 ChatGPT在代码解释方面的应用研究

1.概述 OpenAI在自然语言处理&#xff08;NLP&#xff09;的征途上取得了令人瞩目的进展&#xff0c;这一切得益于大型语言模型&#xff08;LLM&#xff09;的诞生与成长。这些先进的模型不仅是技术创新的典范&#xff0c;更是驱动着如GitHub Copilot编程助手和Bing搜索引擎等广…

linux磁盘阵列

磁盘阵列 可以用不同的磁盘&#xff0c;组成一个逻辑上的硬盘。高可用&#xff0c;冗余 lvm 扩容 raid 高可用 磁盘的组成方式不同&#xff0c;也就是不同的raid级别 raid级别 使用硬盘数量 磁盘利用率 冗余能力 读写性能 raid0 N 100% 0 读写最好 raid1 N(偶数) 50% 坏…

电商推荐系统+电影推荐系统【虚拟机镜像分享】

电商推荐系统电影推荐系统【虚拟机镜像分享】 所有组件部署好的镜像下载&#xff08;在下面&#xff09;&#xff0c;仅供参考学习。&#xff08;百度网盘&#xff0c;阿里云盘…&#xff09; 博主通过学习尚硅谷电商推荐电影推荐项目&#xff0c;将部署好的虚拟机打包成ovf文…

通用代码生成器应用场景三,遗留项目反向工程

通用代码生成器应用场景三&#xff0c;遗留项目反向工程 如果您有一个遗留项目&#xff0c;要重新开发&#xff0c;或者源代码遗失&#xff0c;或者需要重新开发&#xff0c;但是希望复用原来的数据&#xff0c;并加快开发。 如果您的项目是通用代码生成器生成的&#xff0c;…