「ES6新特性 _1」- 海风纷飞Blog

ES6新特性 _1

一、什么是ES 6

1、ES6全称为EMAScript 6，是由ECMA国际标准组织制定的一项针对JavaScirpt脚本语言的标准化规范，同时也新增了许多特性。是 JavaScript 语言的下一代标准。
参考文档：https://es6.ruanyifeng.com/

二、let 和 const 命令

1、let 命令

let 命令用于声明局部变量

{
	let a = 10; 
	var b =20;
}
a //调用失败 let 声明的变量的为局部变量，只在{....}的块作用域生效。
b //20      var 声明的变量为全局变量，在全局作用域生效

2、const 命令

const 命令用于声明一个只读常量，一旦声明了就不能改变。const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。

const a = 10; 
a = 20; //再次赋值失败 const创建的变量为常量，一旦声明了就不能改变

3、变量提升与非变量提升

变量提升指的是变量的作用域提升。常表现为：
var 声明变量可以先使用后声明，值为undefined。

consolo.log(value) //undefinedvar value = 10;12

而非变量提升指的是变量需要先声明后使用，区别于var 声明的变量。常变现为：let声明的变量。

consolo.log(value) //报错ReferenceErrorlet value = 10;let value2 = 10;consolo.log(value) //10 123456

三、变量的解构赋值

1、什么是解构赋值？

变量的解构赋值为ES新推出的特性，指的是ES6允许按照一定的模式，从数组或对象中取出值，对变量进行赋值。如果解构不成功，变量的值就等于undefined。

语法如下：

# 数组解构let [a,b,c]  = [1,2,3]  这种写法称为模式匹配，只要 “两边”  结构一致即可赋值。
a //1b //2c //3# 数组嵌套解构let [a,[[b],c]] = [1,[[2],3]] a //1 b //2c //3# 部分解构不成功let [a，b] = [1] a //1b //undefined 部分解构不成功# 对象解构let node = {            
	sex:'fmale',
	age:10}let [sex,age] = node;sex //fmale 对象解构，对于内置对象同样可以。age //10# 拓展运算符解构let [a,...b] = [1,[2,3,4]] a //1 b //[2,3,4] 拓展运算符... 解构，下一篇文章会解释# 字符串的解构赋值let [a,b,c] = '123';a //1 b //2c //3 # 函数参数的解构赋值function add([x,y]){
	return x + y;}let value = add([1,2]) value //3 函数的参数解构赋值  形容 let [x,y] = [1,2]# 数值的解构赋值let [a,b,c] = 123a //1 数值解构b //2c //3 //原则上 只要两边的结构一致都可以进行解构赋值。123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051

2、解构赋值能指定默认值？

解构赋值可以指定默认值，使用 = 运算符
语法如下：

let [a,b=3] = [1]a //1b //3let [a,b=3] = [1,2]a //1b //31234567

3、解构赋值能起别名？

解构赋值可以起别名，使用：运算符

let [a : one,b = 2] = [1]one //1b //2123

四、字符串的拓展

1、字符的Unicode表示法

let value = "\u0061"value // 'a'12

2、模板字符串

模板字符串指是增强版的字符串，用反引号（`）标识。

它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量，逻辑运算，以及解析javasciprt脚本语言。

语法如下：

# 普通多行字符串定义let text = 'Hello '+'

3、模板字符串默认会将字符串转义

详见官方文档 https://es6.ruanyifeng.com/

4、新增字符串的方法

① 对象方法：String.fromCodePoint( )

ES5 提供String.fromCharCode()方法，用于从 Unicode 码点返回对应字符，但是这个方法不能识别码点大于0xFFFF的字符。

ES6 提供了String.fromCodePoint()方法，可以识别大于0xFFFF的字符。语法如下：

String.fromCodePonit（'\u{D834}'）; // "ஷ"1

② 对象方法：字符串转义String.raw( )

ES6提供一个为字符串转义的方法。该方法返回一个斜杠前面再加一个斜杠的字符串。但实际显示的是被转义后的字符串。

常用于模板字符串，语法如下：

String.raw`Hello \n world` 
//返回结果为 Hello \\n world 
//实际返回的结果为 Helo \n world

③ 实例方法：includes(), startsWith(), endsWith()

传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

let text = 'Hello ! ES 6';
text.includes('Hello'); //true
text.startsWith('H'); //true
text.endsWith('6'); //true

④ 实例方法：repeat( )

repeat( args)方法表示，将一个字符串重复几次，并返回该新字符串。 args代表重复的次数,如果是小数则会向上取整。

‘q’.reoate(3);  //qqq
'mm'.repeat(3); //mmmmmm

⑤ 实例方法：padStart()，padEnd()

ES6 2017版本，提供了一个字符串两个补全方法。

padStart( num，parm) 方法：基于首位补全字符，num为补全后的字符串长度，parm为补全的字符。

'c'.padStart(3,'ab'); //abc

padEnd(num,parm)方法：基于末尾补全字符，num为补全后的字符串长度，parm为补全的字符。

'c'.padEnd(3,'ab'); //cab

⑥ 实例方法：trimStart( )、trimEnd( )

ES6 2019版本提供了两个去除空格的方法，trimStart( )、trimEnd( )，其行为是trim( )是一致的。

const text = ' abc ';
a.trim(); //'abc'
a.trimStart(); //'abc'  
a.trimEnd(); //'abc'

⑦ 实例方法：matchAll( )

matchAll( ) 一个字符串中正则匹配的所有字符子串。
详见正则表达的拓展。

⑧ 实例方法：replaceAll( )

replaceAll (‘被替换的字符’,‘要替换的字符’ ) 是ES 6新推出的实例方法，用于替换所有的指定字符。

对比以往的replace( )方法，以往的方法只能替换第一个的匹配的结果。而replaceAlll( )则替换所有。

const text = 'abca';
text.replace('a','1'); //1bc
text.replaceAll('a','1'); //1bc1

婷婷 js es6 830

ES6

ES6