ES6教程 从入门快速掌握ES6新特性 精讲(一) 一文看懂!

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

结尾

好了今天的内容就到这里了,如果能够帮到你的话,希望你能留下个关注或者点个赞吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352

推荐阅读更多精彩内容