1.let和const命令
1.1let命令
类似于var,let声明的变量只在let命令所在的代码块有效
1.不存在变量提升
2.暂时性死区
使用let声明之前,该变量都是不可用的
3.不允许重复声明
在相同作用域不能重复声明同一个变量,不能在函数内部重新声明变量
1.2块级作用域
1.let实际为JS新增了块级作用域
外层代码块不受内层代码块的影响
ES6规定在块级作用域之中,函数声明类似于let,在块级作用域之外不可引用
2.do表达式
在块级作用域之外没办法得到内层的值,加上do,成为do表达式,可以得到整个块级作用域的返回值
1.3const命令
1.声明一个只读的常量,一旦声明,不能改变,同样也不能只声明而不赋值
作用域和let一样,只在声明的块级作用域有效
2.实际上不是值不能改变,而是变量指向的那个地址不得改动
1.4声明变量的方法:let var const import class function
1.顶层对象的属性
ES6规定var和function声明的全局变量依旧是顶层对象的属性
let/const/class声明的全局变量不属于顶层对象的属性
2.global对象
引入global作为顶层对象,在所有环境下,global都是存在的,都可以拿到顶层对象
2.变量的解构赋值
2.1数组
1.按照一定模式从数组和对象中提取值,然后对变量进行赋值,这就被称为解构
2.一种模式匹配,等号两边模式相同,就会赋予相应的值
3.解构不成功,则会赋值为undefined
4.默认值,允许指定默认值
5.ES6使用严格相等运算符===判断一个位置是否有值
6.默认值是一个表达式,惰性求值,只有在用的时候才会求值
7.可以引用解构赋值的其他变量,但该变量必须已经声明
2.2对象
1.由位置决定,变量必须与属性同名才能取到正确的值
2.先找到同名属性,然后赋值给对应的变量,真正被赋值的是后者
2.3字符串
2.4数值和布尔值
2.5函数参数
2.6圆括号
1.不能使用圆括号
1.变量声明语句
2.函数参数
3.赋值语句的模式
2.可以使用圆括号
1.赋值语句的非模式部分
2.7用途
1.交换变量的值
[x, y] = [y, x]
2.从函数返回多个值
3.函数参数的定义
4.提取JSON的值
5.函数参数的默认值
6.遍历Map结构
7.输入模块的指定方法
3.字符串的扩展
3.1字符的Unicode表示法
JS只限于码点在\u0000~\uFFFF之间的字符,超过就必须用2个双字节的形式表示
ES6做出了改进,只要将码点放入大括号,就能正确解读该字符
3.2codePointAt()
能够正确处理4个字节存储的字符,返回一个字符的码点
3.3String.fromCodePoint()
可以识别大于0xFFFF的字符
3.4字符串的遍历器接口
为字符串添加了遍历器接口,使得字符串可以由for…of循环遍历
3.5at()
ES5提供charAt,返回字符串给定位置的字符
ES6提供的at()可以识别大于0xFFFF的字符
3.6normalize()
将字符的不同表示方法统一为同样的形式
3.7includes()、startsWith、endsWith
传统上JS只有indexOf来确定一个字符串是否包含在另一个字符串中
1.includes:返回布尔值,表示是否找到了参数字符串
2.startsWith:返回布尔值,表示参数字符串是否在源字符串的头部
3.endsWith:返回布尔值,表示参数字符串是否在源字符串的尾部
3.8repeat
repeat:返回一个新字符串,表示将原字符串重复n次
3.9padStart()、padEnd()
padStart():用于头部补齐
padEnd():用于尾部补齐
接受两个参数,第一个用来指定字符串的最小长度,第二个用来补全的字符串
3.10模板字符串
模板字符串是增强版的字符串,用反引号(``)标识,可以当做普通字符串使用,也可以用来定义多行字符串
或在字符串中嵌入变量
//可使用trim()方法消除换行,嵌入变量时,需要将变量名写在${}中
//模板字符串还能调用函数,或实现嵌套
function fn(){
return “Hello World”;
}
foo ${fn()} bar
// foo Hello World bar
3.11标签模板
紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串
alert123 //alert(123)
其实不是模板,标签指函数,紧跟在其后的模板字符串就是它的参数
应用:过滤HTML字符串,防止用户输入恶意内容
多语言进行转换
3.12String.raw()
充当模板字符串的处理函数,返回一个反斜线都被转义的字符串,对应于替换变量后的模板字符串
3.13.模板字符串的限制
放松限制,遇到不合法的的字符串转义,就返回undefined,而不是报错,并且从raw属性上可以得到原始字符串
4正则的扩展
4.1如果RegExp构造函数的第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符,会覆盖原有的修饰符
4.2字符串对象共用四个方法可以使用正则表达式
1.match()、replace()、search()、split()
4.3u修饰符,含义为"Unicode"模式,正确处理大于\uFFFF\的Unicode字符,可以处理四个字节
4.4点字符,除换行符以外的任意单个字符,对于码点大于0xFFFF的字符,必须加上u修饰符
4.5使用大括号表示Unicode字符的表示法,必须加上u修饰符
4.6有些字符的编码不同,但是字型相近,不加u就无法识别非规范的k字符
4.7y修饰符:粘连修饰符
全局匹配,g只要剩余位置存在匹配,y会确保匹配必须从剩余的第一个位置开始
使用sticky判断是否设置了y修饰符
4.8flags属性,会返回正则表达式的修饰符
s修饰符,使得.可以匹配任意单个字符
dotAll模式,返回一个布尔值,判断是否在dotAll模式下
4.9后行断言
JS:支持先行断言和先行否定断言
1.先行断言:x只有在y之前才匹配,必须写成/x(?=y)/
2.先行否定断言:x只有不在y前面才匹配,/x(?!y)/
ES6:后行断言和后行否定断言
4.10正则使用圆括号进行组匹配
允许为每一个组匹配指定一个名字
5数值的扩展
5.1二进制和八进制表示法
分别使用前缀:0b(0B)和0o(0O)表示
5.2Number.isFinite()、Number.isNaN()
1.Number.isFinite():检查是否有限
2.Number.isNaN()：检查是否为NaN
5.3ES6将全局方法移植到了Number.parseInt()、Number.parseFloat()
5.4Number.isInteger()判断是否为整数
5.5Number.EPSILON():误差小于这个就认为正确了
5.6JS整数有范围,Number.isSafeInteger()判断是否在这个范围内
5.7Math对象的扩展
1.Math.trunc():去除小数部分,返回整数部分
2.Math.sign():判断数到底是正是负或0
3.Math.cbrt():计算立方根
4.Math.clz32():返回一个整数的32位无符号整数形式有多少个前导0
5.Math.imul():返回两个数以32位带符号整数形式相乘的结果
6.Math.fround():返回一个数的单精度浮点数形式
7.Math.hypot():返回所有参数的平方和的平方根
8.Math.expm1():
9.Math.log1p():
10.Math.log10():
11.Math.log2():
12.新增6个双曲函数方法
13.Math.signbit():判断符号位是否设置
14.指数运算符:**
15.数据类型:Integer无位数限制
6函数的扩展
6.1函数参数默认值
1.允许为函数参数设置默认值,直接跟在参数定义的后面
2.参数默认值可以和解构赋值结合起来使用
3.默认值应该是函数的尾函数
6.2函数的length属性
定义了默认值后,函数的length将失真
6.3作用域
一旦设置了参数默认值,进行声明初始化的时候,参数会形成一个单独的作用域
6.4rest参数
用于获取多余参数,不需要使用arguments对象,搭配的是一个数组,其后不再有其他参数
6.5严格模式
ES6规定使用了默认值、解构赋值、扩展运算符,那么就不能使用严格模式,否则就会报错
6.6name属性
返回该函数的函数名,匿名函数,ES6会返回实际的函数名
6.7箭头函数
//ES6允许使用=>定义函数
var f = v => v;
var f = function(v){
return v;
}
注意事项:
1.函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象,固定的
2.不可以当做构造函数,也就是不可以使用new命令
3.不可以使用arguments对象,可以使用rest代替
4.不可以使用yield命令,箭头函数不可以用作Genertor
1.this指向固定化:箭头函数没有自己的this,内部的this就是外层代码块的this,所以不能用作构造函数
2.箭头函数可以嵌套
3.绑定this
1.函数绑定运算符(::)左边是一个对象,右边是一个函数
//自动将左边的对象作为上下文环境(即this对象)绑定到右边的函数上
foo::bar;
bar.bind(foo);
2.如果双冒号左边为空,右边是一个对象的方法,则等于将该方法绑定到该对象
3.由于双冒号返回的还是原对象,可以使用链式写法
6.8尾调用
就是某个函数最后一步是调用另一个函数
6.9尾调用优化
函数调用会在内部形成一个"调用记录",又称为"调用帧",保存调用位置和内部变量等信息
如果在函数A的内部调用函数B,那么在A的调用帧上方还会形成一个B的调用帧,等到B运行结
束,将结果返回到A,B的调用帧才会消失,如果B后还有一个C,一次类推,形成一个"调用栈"
优化:只保留内层函数的调用帧
6.10尾递归
尾调用自己
递归非常耗费内存,因为要保存成千上万个调用帧,出现"栈溢出"错误
尾递归只保存一个调用栈,不会出现"栈溢出"现象
6.11.尾递归优化只有在严格模式下才开启
6.12.自己定义实现尾递归优化,使用"循环"替换"递归"
6.13.ES7提出允许函数最后一个参数有尾逗号
7数组的扩展
7.1扩展运算符
1.(…)将一个数组转为用逗号分隔的参数序列
2.替代数组的apply方法
apply方法可以将数组转化为函数的参数
扩展运算符可以展开数组,不需要使用apply方法了
3.应用
1.合并数组
2.与解构赋值一起使用
3.函数的返回值,JS函数只能返回一个值,扩展运算符可以返回多个值,数组或对象
4.可以将字符串转为真正的数组
5.任何Iterator对象都可以用扩展运算符转为真正的数组
7.2Array.from()
将两类对象转为真正的数组,类似数组的对象和可遍历的对象
7.3Array.of()
将一组值转换成数组
7.4copyWithin()
将指定成员复制到其他位置,返回当前数组,会改变数组
7.5find:找出第一个符合条件的数组成员
findIndex:返回第一个符合条件的数组成员的位置
7.6fill:使用给定值来填充一个数组
7.7遍历数组:返回一个遍历器对象
1.keys():键名的遍历
2.values():键值的遍历
3.entries():键值对的遍历
7.8includes:数组是否包含给定的值
7.9数组的空位:空位是没有任何值,undefined是有值的
ES6明确将空位转为undefined
8.对象的扩展
8.1属性的简洁表示法
ES6允许在对象中只写属性名,这时,属性值等于属性名所代表的变量
8.2属性名表达式
用表达式作为属性名,将表达式放入方括号内
8.3方法的name属性
返回函数名
8.4Object.is()
判断是否严格相等+0 != -0 NaN === NaN
8.5Object.assign()
将源对象的所有可枚举属性复制到目标对象
第一个为目标对象,其后为源对象,浅复制
8.6属性的可枚举性
对象的每个属性都有一个描述对象,用于控制该属性的行为
获取属性的描述对象:Object.getOwnPropertyDescriptor
8.7属性的遍历
1.for…in
返回自身的和可继承的可枚举属性(不含Symbol)
2.Object.keys(obj)
返回一个数组,包括自身的(不含继承的)所有可枚举属性(不含Symbol)
3.Object.getOwnPropertyNames(obj)
返回所有属性(不含Symbol)
4.Object.getOwnPropertySymbols(obj)
返回一个数组包含Symbol属性
5.Reflect.ownKeys(obj)
返回所有属性
8.8额外属性
1.proto
设置当前对象的prototype对象
2.Object.setPrototypeOf()
设置当前对象的prototype对象,返回参数本身
ES6正式推荐的设置原型对象
3.Object.getPrototypeOf()
读取一个对象的prototype对象
8.9对象的扩展运算符
8.10Null传导运算符(?.)
const firstName = message?.body?.user?.firstName || ‘default’
只要其中返回一个null/undefined,就不再继续
9.Symbol
ES5的对象属性名都是字符串,容易造成属性名冲突
比如使用别人的对象,添加一个新的方法,就可能与现有方法冲突
9.1JS数据类型:undefined/null/布尔值/字符串/数值/对象
现在新的原始数据类型symbol
只要属于symbol属性,就是独一无二的
不能使用new命令,symbol不是对象
9.2不能与其他类型的值进行运算,否则就会报错,可以转字符串/布尔值,不能转数值
9.3作为属性名
不能使用点运算符,定义属性的时候,必须放在方括号内
9.4消除魔法字符串
在代码中多次出现,与代码形成了强耦合的一个具体的字符串或数值
消除它最好是使用一个变量,这就很适合使用symbol值
9.5属性名遍历
Object.getOwnPropertySymbols(obj)
9.6Symbol.for()
先检测是否有此值,有就返回,没有就新建一个并返回
Symbol.keyFor()返回一个已登记的symbol类型值的key
9.7内置的symbol值
10.Set/Map数据结构
10.1.Set
1.基本用法
类似于数组,成员值是唯一的,没有重复
2.属性和方法
1.属性
构造函数,默认就是Set函数
size:实例的成员个数
2.方法
1.操作
add(value)
delete(value)
has(value)
clear()
2.遍历
keys()
values()
entries()
forEach()
//前三者返回遍历器对象,木有键名,只有键值
3.应用
1.扩展运算符和Set结构相结合去除数组的重复成员
let unique = […new Set(arr)];
2.数组的map/filter也可以作用于Set
3.遍历中改变原来Set结构
1.映射一个新的结构,然后赋值给原来的Set结构
2.使用Array.from方法
10.2WeakSet
1.其中的成员只能是对象
2.弱引用,不被垃圾回收所考虑
10.3Map
JS对象本质是键值对的集合,只能用字符串作为键,带来了很大的限制
Map类似于对象,但是键不限于字符串,各种类型的值都可以用来当作键
1.属性和方法
1.方法
1.操作
size
set(key,value)
get(key)
delete(key)
has(key)
clear()
2.遍历
keys()
values()
entries()
forEach()
2.与其他数据结构进行转换
10.4.WeakMap
1.只接受对象作为键名,不接受其他类型的值
2.键名所指向的对象不计入垃圾回收机制
3.应用场景
一旦不需要就会自动消失,不需要手动去删除
在网页的DOM元素上添加数据就可以使用,当DOM元素被删除,相应的WeakMap也就被自动移除
————————————————
版权声明：本文为CSDN博主「Ramenbear」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_45517916/article/details/103112760
来源：CSDN
作者：Ramenbear
链接：https://blog.csdn.net/qq_45517916/article/details/103456068