5小时从入门快速掌握ES6新特性(一)
这个是博主新开的一个坑,其目的是为了帮己帮人学习ES6。
博主会通过抛出疑问,然后举一个具有代表性的证明且容易理解例子的方法来学习。
希望能够帮助到你们快速掌握ES6。
喜欢的话请给个关注或者点个赞再走吧,你们的支持是我创作的动力!
附:
【ES6教程】5小时从入门快速掌握ES6新特性(二)
【ES6教程】5小时从入门快速掌握ES6新特性(三)
一、什么是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) //undefined
var value = 10;
而非变量提升指的是变量需要 先声明后使用,区别于var 声明的变量。常变现为:let声明的变量。
consolo.log(value) //报错ReferenceError
let value = 10;
let value2 = 10;
consolo.log(value) //10
三、变量的解构赋值
1、什么是解构赋值?
变量的解构赋值为ES新推出的特性,指的是ES6允许按照一定的模式,从数组或对象中取出值,对变量进行赋值。 如果解构不成功,变量的值就等于undefined。
语法如下:
# 数组解构
let [a,b,c] = [1,2,3] 这种写法称为模式匹配,只要 “两边” 结构一致即可赋值。
a //1
b //2
c //3
# 数组嵌套解构
let [a,[[b],c]] = [1,[[2],3]]
a //1
b //2
c //3
# 部分解构不成功
let [a,b] = [1]
a //1
b //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 //2
c //3
# 函数参数的解构赋值
function add([x,y]){
return x + y;
}
let value = add([1,2])
value //3 函数的参数解构赋值 形容 let [x,y] = [1,2]
# 数值的解构赋值
let [a,b,c] = 123
a //1 数值解构
b //2
c //3
//原则上 只要两边的结构一致都可以进行解构赋值。
2、解构赋值能指定默认值?
解构赋值可以指定默认值,使用 = 运算符
语法如下:
let [a,b=3] = [1]
a //1
b //3
let [a,b=3] = [1,2]
a //1
b //3
3、解构赋值能起别名?
解构赋值可以起别名,使用 :运算符
let [a : one,b = 2] = [1]
one //1
b //2
四、字符串的拓展
1、字符的Unicode表示法
let value = "\u0061"
value // 'a'
2、模板字符串
模板字符串指是增强版的字符串,用反引号(`)标识。
它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量,逻辑运算,以及解析javasciprt脚本语言。
语法如下:
# 普通多行字符串定义
let text = 'Hello '+'<\br>'+ 'world';
text // hello
// world
# 模板字符串 使用反引号标识 标签将会被解析
let text = `hello <br> world `;
text // hello
// world
(os:所有的空格和缩进都会被保留在输出之中)
# 模板字符串中 嵌入变量
var [a,b] = {'jack','Bob'}
let text = `hello ${a},I'm ${b}`
text //hello jack, I'm Bob
# 模板字符串中进行逻辑运算
let [a,b] = [1,2]
let result = `${a} + ${b} = ${a+b}`
result //1 + 2 = 3
#标签模板
# 模板字符串解析JavaSciprt语言,使用<% %>引入
# 模板字符串默认会将字符串转义
let template = `<ul>
<% for(let i = 1;i<4;i++){ %>
<li>${i}</li>
<% } >%
</ul>`;
templact // <ul>
// <li>1</li>
// <li>2</li>
// <li>3</li>
// </ul>
(os:此处的标签会被解析,然后被浏览器渲染)
3、模板字符串默认会将字符串转义
详见官方文档 https://es6.ruanyifeng.com/
4、新增字符串的方法
① 对象方法:String.fromCodePoint( )
ES5 提供String.fromCharCode()方法,用于从 Unicode 码点返回对应字符,但是这个方法不能识别码点大于0xFFFF的字符。
ES6 提供了String.fromCodePoint()方法,可以识别大于0xFFFF的字符。语法如下:
String.fromCodePonit('\u{D834}'); // "ஷ"
② 对象方法:字符串转义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’.repate(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'); //1bca
text.replaceAll('a','1'); //1bc1
结尾
好了今天的内容就到这里了,如果能够帮到你的话,希望你能留下个关注或者点个赞吧。