ES6新特性语法总结

一、let,const,var的区别:

1.var 定义的不一定是局部变量 

(1).全局变量: 过程体(包括方法function(){},对象Object={})外的所有的变量,不管有没有加var关键字,他都是全局变量

 (2).局部变量:在过程体内(方法、对象内)的变量,加上var关键字就是局部变量,只能用于方法内或者对象内,如果不加var 则是全局变量

2.let:

 (1).let只在块级作用域内有效,比如定义在条件语句中,那么就只在该条件语句内有效,在条件语句外则无效,在外访问会报错

 (2).不能重复声明 

 (3).不存在变量提升

 (4).不会成为window的属性,即在全局作用域中用let声明的变量,使用window.变量名不会生效 (5).最常用的用途:解决var在声明技术的循环变量造成的变量泄露问题

3.const 关键字

const 关键字用来声明常量,const 声明有以下特点:

(1).声明必须赋初始值;

(2).标识符一般为大写(习惯);

(3).不允许重复声明;

(4).值不允许修改;

(5).块儿级作用域(局部变量);

二、字符串的扩展

        1.检索字符串:

                (1).includes(),语法格式为:A.includes(B,index),判断A是否包含B,index表示检索的位置,从第index位置开始检索

                (2).startsWith(), 语法格式为:A.includes(B,index),判断A是否以B开头,index表示检索的位置,从第index位置开始检索

                (3).endsWith(), 语法格式为:A.endsWith(B,index),判断A是否以B结尾,index表示对前index个字符进行检索,这三个语句的index都是可以省略的,省略则表示检索整个字符串。

    以上三个都是返回布尔值

        2.重复字符串:

                (1).语法格式为str.repeat(n);

                (2).repeat()并不会改变原来的字符串,因此需要一个变量用来接收重复后的结果,

                例如:

const str = 'xiaoliao',

const result = str.repeat(3) //定义变量result接收

console.log(result) //输出xiaoliaoxiaoliaoxiaoliao

        3.去除空白:

                (1).trim(),语法格式为str.trim(),用于去除字符串首尾的空格

                (2).trimStart(),语法格式为str.trimStart(),用于去除字符串开始处的空格

                (3).trimEnd(),语法格式为str.trimEnd(),用于去除字符串结尾处的空格

        4.长度补全:

                (1).padStart(),语法格式为str.padStart(len,str),在头部进行补全,len是必选参数,用于指定字符串长度,str可选,表示用来补全的字符串,省略则表示使用空格来补全

                (2).padEnd(),语法格式为str.padEnd(len,str),在结尾进行补全,参数作用与上面一致

        5.模板字符串

                (1).模板字符串使用反引号来表示,例如:`string`,它的本质上也是字符串,只不过比普通字符串的功能更加强大

                (2).它可以用来进行表示多行字符串,会保留换行格式

                (3).可以用来实现字符串拼接,并且在模板字符串中,单引号和双引号是不需要转义的,可以直接保留下来。

                (4).在模板字符串中插入变量采用${}将变量包裹起来,例如:`数量为${num}个`

eg:let string = `Hello'\n'world`;console.log(string); // "Hello'// 'world"

三、数组的扩展

        1.判断数组

                (1).Array.isArray(值),判断该值是否是一个数组,返回一个布尔值

        2.创建数组

                (1).在ES6之前创建一个数组有两种方式,一种是使用构造函数(new Array()),另一种是使用数组字面量(即[ ])的方式创建,但是使用构造函数创建数组会产生一些怪异行为,例如:

const arr1 = new Array(); // 输出为[]

const arr2 = new Array(0); // 输出为[]

const arr3 = new Array(1); // 输出为[empty]

const arr4 = new Array(1,2); // 输出为[1,2]

                为了解决传统new Array()方式创建的怪异行为,ES6引入一种新的创建数组的方式,即Array.of方法,例:

const arr1 = Array.of(); // 输出为[]

const arr2 = Array.of(0); // 输出为[0]

const arr3 = Array.of(1); // 输出为[1]

const arr4 = Array.of(1,2); // 输出为[1,2]

        3.转换数组

                (1).类数组的概念,常见的类数组有以下三种

                        字符串

                        函数的arguments

                        DOM的NodeList

                类数组又被成为“伪数组”,因为并不是真正的数组,只是类似于数组而已,类数组具有以下两样特点

                        拥有length属性

                        可以使用下标方式访问

                但是它不能使用数组的方法,在ES5中将类数组转换为真正的数组,可以使用Array.prototype.slice.apply()来实现,例如:

const str = "小廖是个菜鸟";

const arr = Array.prototype.slice.apply(str)

console.log(arr) // 输出为["小","廖","是","个","菜","鸟"]

                (2).在ES6中,可以使用Array.from()来将一个类数组转换为真正的数组

const str = "小廖是个菜鸟";

const arr = Array.from(str)

console.log(arr) // 输出为["小","廖","是","个","菜","鸟"]

        4.填充数组

                (1).ES6中想要使用某一个指定的值来填充数组,我们可以使用fill方法来实现。

                (2).语法格式为arr.fill(value,start,end),value表示填充的值,start表示填充的开始位置,end表示填充的结束位置,start和end可省略,表示填充整个数组,例如:

const arr = new Array(10).fill(0) //输出为[0,0,0,0,0,0,0,0,0,0,]

const arr1 = [1,2,3,4]

arr1.fill(8) //输出为[8,8,8,8]

        5.打平数组(数组扁平化)

                (1).数组扁平化,即将多维数组转化为一维数组,在ES5中实现数组扁平化的方法有三种

                        递归实现

                        toString()(方法

                        join()方法

                (2).在ES6中,我们只需要使用flat()方法即可实现,语法为arr.flat(正整数或Infinity),正整数表示打平几层,infinity表示不管多少层嵌套,都转化为一维数组。

        6.判断元素是否存在

                (1).在ES6中我们使用includes()方法来判断数组中是否包含某个值,语法格式为arr.includes(value,index),其中value是必选参数,表示需要查找的值,index是可选参数,表示从哪个元素下标开始查找,默认为0

                (2).includes()和indexOf()的对比,indexOf()更为复杂一点,因为要将值与-1进行比较

const arr = ["red","green","blue"];

console.log(arr.includes("green")); //输出为true

console.log(arr.indexOf("green") !== -1 ) //输出为true

                (3).includes()和find()的对比,find()用于查找数组中是否符合条件的值,更加复杂.

const arr = ["red","green","blue"];

console.log(arr.includes("green")); //输出为true

const result = arr.find(function(value){

return value === "red";

})

console.log(result === "red"); //输出为true

        7.查找元素

                (1).find(),在ES6中可以使用find()查找数组中符合条件的元素,语法格式为

arr.find(function(value,index,array){

return ......

})

                表示接受一个回调函数作为参数,所有数组元素都会一次执行一次该回调函数,如果有符合条件的元素,就返回第一个符合条件的元素,如果一个符合条件的元素都没有,就返回undefined。其中value表示数组的元素,index表示数组元素的索引,array表示数组本身,其中index和array可以省略。

                (2).findIndex(),用来查找数组中符合条件的元素的索引,语法格式为

arr.findIndex(function(value,index,array){

......

})

        8.every()和some()

                (1).every():用于判断数组中所有元素是否都满足某个条件。如果都满足,则返回true,如果有一个不满足,则返回false。类似于逻辑判断中的与&&关系

const arr = [3,9,1,12,50,24];

const result = arr.every(function (value){

return value > 10;

})

console.log(result) //输出false

                (2).some():用于判断数组中是否存在一个元素满足某个条件,只要有一个元素满足就返回true,只有当所有元素都不满足时,才返回false。类似与逻辑判断中的或||关系

const arr = [3,9,1,12,50,24];

const result = arr.some(function (value){

return value > 10;

})

console.log(result) //输出true

        9.遍历数组

                (1).在ES5中,想要遍历一个数组,可以使用for循环、forEach方法,在ES6中新增3种方法

                        1.arr.keys() 遍历数组的键

                        2.arr.values() 遍历数组的值

                        3.arr.entries() 同时遍历数组的键和值

部分出自:https://www.runoob.com/w3cnote/es6-setup.html,https://blog.csdn.net/xiaoliao96530/article/details/123580403

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

推荐阅读更多精彩内容