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.mzph.cn/news/845420.shtml

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

相关文章

SpringBoot-世界杯足球赛网站-28567

Springboot世界杯足球赛网站 摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对世界杯足球赛…

jsmug:一个针对JSON Smuggling技术的测试PoC环境

关于jsmug jsmug是一个代码简单但功能强大的JSON Smuggling技术环境PoC&#xff0c;该工具可以帮助广大研究人员深入学习和理解JSON Smuggling技术&#xff0c;并辅助提升Web应用程序的安全性。 背景内容 JSON Smuggling技术可以利用目标JSON文档中一些“不重要”的字节数据实…

C++ 特殊运算符

一 赋值运算符 二 等号作用 三 优先级和结合顺序 四 左值和右值 五 字节数运算符 条件运算符 使用条件运算符注意 逗号运算符 优先级和结合顺序 总结

实战15:bert 命名实体识别、地址解析、人名电话地址抽取系统-完整代码数据

直接看项目视频演示: bert 命名实体识别、关系抽取、人物抽取、地址解析、人名电话地址提取系统-完整代码数据_哔哩哔哩_bilibili 项目演示: 代码: import re from transformers import BertTokenizer, BertForTokenClassification, pipeline import os import torch im…

【linux】docker下nextcloud安装人脸识别插件2

接上文 【linux】docker下nextcloud安装人脸识别插件-CSDN博客 由于作者不再维护此插件&#xff0c;转而开发新的插件 recognize &#xff0c;因此同步更新插件使用教程。 1、下载人脸识别app&#xff1a;recognize Recognize - Apps - App Store - Nextcloud 2、将插件recog…

Java解析JSON并修改属性值:从JSON到JsonObject的逐层解析

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; 在Java中&#xff0c;可以使用各种库来解析和操作JSON数据。其中&#xff0c;Gson和Jackson是两个非常流行且功能强大的库。在这篇文章中&#xff0c;将使用Gson库来解析给定的JSON字符串&#xff0c;修改operationB…

python移位操作符(左移位操作符<<、右移位操作符>>)(允许开发者对整数进行位操作,乘2或除2)(左移操作、右移操作)(位掩码操作|=)

文章目录 Python 中的移位操作符详解移位操作符简介左移位操作符 (<<)语法和使用示例代码输出 右移位操作符 (>>)语法和使用示例代码输出 移位操作符的应用场景快速乘除运算&#xff1a;使用移位操作符代替传统的乘法和除法运算&#xff0c;可以提高计算速度。位掩…

生产问题(十六)数据丢失-mysql binlog排查

一、引言 最近作者遇到一个线上问题&#xff0c;是mysql 的数据丢失了&#xff0c;这里记录一下排查过程和binlog的分析。 二、问题 问题出现的表象是应用系统大量报错&#xff0c;各种空指针之类的&#xff0c;这种一看就不可能是代码发布的问题&#xff0c;原因一定在框架、…

js 纯前端实现数组分页、列表模糊查询、将数组转成formdata格式传给接口

后端返回所有的数据&#xff0c;由前端来实现分页展示、模糊查询&#xff0c;并将数组格式转成formdata格式给后端 1、数组转formdata let formData new FormData()for (let i 0; i < list.length; i) {let item list[i];for (let property in item) {formData.append(…

可能会引起空指针

PreparedStatement preparedStatement null; preparedStatement conn.prepareStatement(sql); 如果直接下面这个可能会赋值给空指针 因为要在try{}和catch{}里面都用,所以要定义在try外面为null //如果只是测试,可以PreparedStatement preparedStatement conn.prepareSta…

第十八节:认识一些经典递归过程

一 暴力递归就是尝试 1&#xff0c;把问题转化为规模缩小了的同类问题的子问题 2&#xff0c;有明确的不需要继续进行递归的条件(base case) 3&#xff0c;有当得到了子问题的结果之后的决策过程 4&#xff0c;不记录每一个子问题的解 二 打印n层汉诺塔从最左边移动到最右边的全…

分形之科赫雪花

前言 分形是一种具有自相似性的几何图形或数学对象。它的特点是无论在任何放大或缩小的尺度下,都能够看到与整体相似的图形。分形的形状可以非常复杂,常常具有分支、重复的图案,以及细节层次丰富的结构。 分形在自然界中广泛存在,如云朵、树枝、山脉、海岸线等,它们都展…

vue 动态url

window location herf vue 官方文档 vue 传参 vue-router 官方文档 动态参数 /runninghistory/:id import { useRoute, useRouter } from vue-routersetup语法糖 setup 语法糖与选项式Api 有所不同&#xff0c; const route useRoute() console.log(route.params.id) Op…

Java常用API(三)

一、Arrays类 1.定义 Arrays是一个用于操作数组的工具类。 2.常用方法 1.toString方法 public class Demo {public static void main(String[] args) {//toString 将数组变成字符串int[] arr {1, 2, 3, 4, 5, 6, 7, 8, 9, 10};System.out.println(Arrays.toString(arr));…

[备忘] Reboot Linux in python

1.可行的Reboot方法 1.1 修改/etc/sudoers 假定当前用户是mimi&#xff0c;增补这一行&#xff1a; mimi ALL(ALL) NOPASSWD: ALL 这是为了免输指令。 sudoers文件尽量在覆盖前把它的权限改回去&#xff1a; 原始权限 mimidebian-vm:~/test_app$ ls -l /tmp/sudoers -r--r-…

故障——pod状态为pending该如何解决

一、报错问题 当您的虚拟机出现如下报错&#xff0c;您首先快照一下虚拟机如果仍然报错 二、解决方法 2.1 任务管理器 首先进入任务管理器&#xff08;CtrlAltDel&#xff09;内&#xff0c;查看所有vmware是否都处在运行的状态&#xff0c;可能会跳出一个比较突兀的进程&#…

【Spring Cloud】微服务链路跟踪Sleuth

目录 为什么要使用微服务链路跟踪微服务的现状多服务协同工作复杂的调用链条容易出错 微服务链路跟踪需要实现的需求实现监控决策避免技术债务快速定位故障 微服务链路跟踪的技术要求低消耗应用透明延展性可控采样率可视化 Spring Cloud Sleuth简介Spring Cloud Sleuth的4个特点…

通过Redis实现防止接口重复提交功能

本功能是在切面执行链基础上实现的功能&#xff0c;如果不知道切面执行链的同学&#xff0c;请看一下我之前专门介绍切面执行链的文章。 在SpringBoot项目中实现切面执行链功能-CSDN博客 1.定义防重复提交handler /*** 重复提交handler**/ AspectHandlerOrder public class …

自动控制:控制系统的稳定性

自动控制&#xff1a;控制系统的稳定性 在自动控制领域&#xff0c;控制系统的稳定性是一个至关重要的问题。稳定性决定了系统在受到扰动后是否能够恢复到平衡状态。本文将介绍控制系统稳定性的基本概念、如何利用特征值分析稳定性&#xff0c;并通过具体示例和Python代码展示…

【洛谷B3643】图的存储 解题报告

洛谷B3643 - 图的存储 题目描述 给定一个 n n n 个顶点 m m m 条边的无向图。请以邻接矩阵和邻接表的形式输出这一张图。 输入格式 第一行输入两个正整数 n n n 和 m m m&#xff0c;表示图的顶点数和边数。 第二行开始&#xff0c;往后 m m m 行&#xff0c;每行输入…