es6 箭头函数 模板字符串 点点点运算符
8-31-总结
- 一、ES6 官方名称ES2015
- let const 和 var 的区别
- var 可以进行预解析，必须要先定义再使用
- let 声明变量的
- const 声明常量的
- 二、箭头函数
- 含义：
- 官方解释：箭头函数里面的this是上下文（content），外部作用域的this就是箭头函数的this
- 个人理解：箭头函数this就是，看一下箭头函数写下哪一行，上一行的this就是箭头函数的this
- 箭头函数的语法格式： ()=>{}
- 箭头函数的特征
- 三、函数参数的默认值
- 作用：给函数的形参设置一个默认值
- 四、模板字符串
- 模板字符串就是使用反引号包围的字符串
- 五、... 点点点运算符
- 六、其他
- call apply bind的作用和区别
一、ES6 官方名称ES2015
- 在语法层面做了一些更新,有一些工具可以将es6的代码转换为es5
- 新增了两个定义变量的关键字
let const 和 var 的区别
var 可以进行预解析，必须要先定义再使用
- var 可以重复声明，let const 不能重复声明
- var没有块级作用域，let和const有块级作用域
- 块级作用域 被代码块限制变量的使用
- var 只用函数私有作用域可以限制它的使用范围，let和const只要是书写代码断的{}都可以限制它的使用范围
- es5 中 全局作用域 函数作用域
let 声明变量的
- 不会进行预解析
- 不能重复声明
- 块级作用域
- 不存在变量提升
- 不影响作用域链
const 声明常量的
- 不会进行预解析
- 常量在声明的时候一定要赋初始值，否则就会报错
- 常量是不可改变的（不能修改）
- 块级作用域
- 常量命名的时候要大写
- 当给常量赋值为一个复杂数据类型的时候，对复杂数据类型里的成员进行修改时，不算是对常量的修改
二、箭头函数
含义：
官方解释：箭头函数里面的this是上下文（content），外部作用域的this就是箭头函数的this
个人理解：箭头函数this就是，看一下箭头函数写下哪一行，上一行的this就是箭头函数的this
一个新的定义函数的方式，其实就对函数表达式的简写方式（匿名函数）
箭头函数的语法格式： ()=>{}
() : 设置形参的地方
=> : 箭头函数的标志
{} : 代码断
箭头函数的特征
- 当只有一个形参时，小括号可以省略
- 一句代码执行语句的时候可以省略大括号（花括号），并且自动return返回那一句语句的结果
- 箭头函数里面没有arguments（arguments：用来接收用户传入的实参，他是一个伪数组）
- 箭头函数里面没有this
- 箭头函数内的this，任何方法都改变不了，因为箭头函数内没有自己的this，它使用的是外部作用域的this
- call apply bind 不能改变箭头函数内的this指向
三、函数参数的默认值
作用：给函数的形参设置一个默认值
当我传入了实参的时候，就是用实参，如果没有传递实参，就使用形参的默认值
如果形参没有设置默认值，就返回undefined
- 箭头函数可以给形参设置默认值
如果箭头的形参设置了默认值，不管有多少个形参，箭头函数的小括号都是不能省略的
四、模板字符串
- js中字符串是使用引号包围的：单引号 双引号 反引号 （内单外双，外双内单）
模板字符串就是使用反引号包围的字符串
- 模板字符串可以直接书写换行
- 使用innerText是换行，使用innerHTML却是空格
- 模板字符串可以使用变量拼接字符串
- 模板字符串可以调用函数
例：
let div=document.querySelector('div')let b="666"let a=`撒过得${b}好减肥大赛`// div.innerHTML=a;div.innerText=a;let newFn=function(a,b,c){console.log('-------',a,b,c)}newFn`hello${a}word${b}你好`/* 模版字符串的内容就是函数的参数 newFn`hello${a}word${b}你好`执行步骤：1.使用用${}将字符串切开，得到的子字符串放到一数组里['hello','word','你好'],这个数组作为函数的第一个实参传入函数2.${a} 里变量a作为函数的第2个实参传入函数3.${b} 里变量b作为函数的第3个实参传入函数 */
总结：使用
${}将字符串切开，得到的子字符串放到一数组里，作为函数的第一个参数，从左到右依次将每一个${}里的变量作为函数后的参数
作用：将字符串的各部分都给你，你在函数可以自由组合
五、… 点点点运算符
- 展开运算符
- 当在函数的实参的位置或数组对象的前面使用时候是执行展开
作用：将包裹的内容全部打开
- 合并运算符
- 在函数的形参位置使用
...运算符的时候，是执行和合并的操作- 箭头函数没有arguments，我们可以自己整一个，接收用户传入的实参
六、其他
call apply bind的作用和区别
- call：绑定this 直接调用函数
- apply: 绑定this指向，直接调用函数，第二个参数必须是数组，以数组的形式给给调用的函数传参
- bind：绑定this指向 ,不会立即调用函数，而是返回一个绑定了this指向的新的函数
- 函数的内部都有this
- 函数以普通函数的形式调用的时候，this指向window
- 以对象的放法的形式调用的时候，this指向调用它的对象
- 多层this嵌套的时候，内层的this指向window
- 定时器 setTimeout(function(){},ms) setInterval(function(){},ms)
- 定时器里的this指向window
- 事件处理函数里的this指向 事件源，谁绑定了该事件，就指向谁
es6 箭头函数 模板字符串 点点点运算符相关推荐
- ES6箭头函数和模板字符串
Es6 本章内容: 箭头函数 箭头函数中this的指向 数组的新方法 模板字符串 三点运算符 结构赋值 具体内容: 箭头函数的声明: Es6允许使用箭头函数(=>)定义 箭头函数 上面是箭头函数 ...
- es6 箭头函数 rest参数 扩展运算符
Es6 箭头函数 语法: 普通函数: fn=function(){} 箭头函数: fn=()=>{} 特性: this是静态的,this始终指向函数声明时所在作用域下的this的值(使用call ...
- es6字符串添加html标签,JavaScript_详解JavaScript ES6中的模板字符串，在 ES6 中引入了一种新的字符 - phpStudy...
详解JavaScript ES6中的模板字符串 在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是 ...
- js模板字符串自定义类名_详解JavaScript ES6中的模板字符串
这篇文章主要介绍了详解JavaScript ES6中的模板字符串,JS的ES6版本带来诸多简洁化方面的重大改进,需要的朋友可以参考下 在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用 ...
- [译]JavaScript:ES6中的模板字符串简介
原文:http://tc39wiki.calculist.org/es6/template-strings/ ES6中的模板字符串(template string)是一种能在字符串文本中内嵌表达式的字 ...
- ES6学习（模板字符串）
模板字符串 传统的JavaScript语言,输出模板通常是这样写的. const name = 'Jack'; const age = 18; const sentence = name + ' is ...
- ES6知识点整理模板字符串和标签模板的应用
ES6 中对字符串进行了扩展,而模板字符串就是一个非常实用的方式,可以在html中实现与变量和方法的混编 之前我们手动拼接字符串的方式 let hello = 'Hello'; let html = ...
- ES6箭头函数中的this指向
1箭头函数中的this (1)箭头函数中没有this : 这意味着 call() apply() bind() 无法修改箭头函数中的this (2)箭头函数中的this指向 :访问上一个作用域的thi ...
- ES6新功能-模板字符串
ES6新功能-模板字符串 VS 传统JS字符串拼接
- es6 箭头函数使用_如何使用ES6箭头功能使JavaScript易于阅读
es6 箭头函数使用 Arrow functions are the new fundamental building blocks of building modern web applicatio ...
最新文章
- 2021_Nov_9_Supervision_STEMM_What_You_Need_In_Advance?
- 易语言 图片插入超级列表框_是谁说图片排版很难？掌握这4个PPT图片排版技巧，1分钟全部搞定...
- java编译提示错误信息_JAVA编译错误提示缺少“{”
- Win10系统如何解除U盘写保护模式
- html5转PDF软件,html转pdf软件(wkhtmltopdf) 0.12.5官方版
- origin函数拟合
- 回给collapsar的信
- 基于C#和OpenVINO在英特尔独立显卡上部署PP-TinyPose模型
- 阿里架构师的架构设计——详解高可用架构设计
- linux winqq 不能输入中文的解决办法
- 新媒体运营教程：名字都没起好，凭什么让用户关注你？
- 【第三章 有限自动机与右线性文法】形式语言与自动机第三章个人总结复习笔记分享！（含文件、持续更新...）
- 华为首款台式机计算机发布,华为首款商用台式机发布，或再成商用PC市场破局者...
- Windows使用ssh登入mac
- 人工智能热卖榜图书《人工智能怎么学》
- 329 矩阵中的最长递增路径
- 【AtCoder】【思维】【图论】Splatter Painting（AGC012）
- send 和recv详解
- dos命令根据大小查询文件
- 前端JavaScript AES解密 AES加密 ECB模式