ECMAScript6 基础知识点（一）

Unsplash

01 ECMAScript 的含义

ECMAScript 是 JavaScript 的组成部分，它规范了 JS 的语法（解析规则，关键字，语句，公告，操作等）、类型（布尔型，数字，字符串，对象等）、原型和继承、内置对象和函数的标准库（JSON，Math，数组方法，对象内省的方法等等）

02 let 关键字

关键字 let 的特点有：① 只在 let 命令所在的代码块内有效；② 不会产生变量提升现象；③ 同一个块级作用域，不能重复公告同一个变量；④ 不能在函数内部重新公告参数

使用 var 关键字会产生变量提升的现象，关于变量提升的现象可参考
JavaScript 函数 这篇博文里的形容，let 关键字只在块级作用域内起作用，所以很适合在 for 循环当中使用，可参考 JavaScript 实现 Tab 点击切换 这篇博文里的例子

03 const 关键字

关键字 const 的特点有：① 用于公告常量，公告后不可修改；② 只在块级作用域起作用；③ 不存在变量提升，必需先公告后使用；④ 不可重复公告同一个变量；⑤ 公告后必需要赋值

若是使用 const 来公告一个对象类型的常量，可以修改或者添加该对象属性的值，这是由于，在赋值过程中，变量实际上存储的是数据的地址，而不是原始数据或者者数据的拷贝，所以我们修改的只是对象本身，而不是对象在内存中的地址，这并没有违反常量不可修改的商定

const Person = {"name":"Nian糕"};      Person.name = "抹茶松糕";      Person.age = 17;      console.log(Person); // {name: "抹茶松糕", age: 17}

04 解构赋值

在 ES6 中，关于解构的含义为：允许按照肯定模式，从数组和对象中提取值，对变量进行赋值

let [a, b, c] = [1, 2, 3]console.log(a, b, c) // 1 2 3

let {a, b, c} = {"a": 4, "c": 5, "b": 6}console.log(a, b, c) // 4 6 5

关于更多解构赋值的用法可参考 ECMAScript6 解构赋值 这篇博文

05 模板字符串

关于模板字符串的特点有：① 使用反引号标识；② 插入变量的时候使用 ${ }；③ 所有的空格和缩进都会被保留在输出中

模板字符串

关于模板字符串的更多使用方式，可参考 Type Script 的基本概念及常用语法 这篇博文

06 Number.isNaN() 函数

Number.isNaN() 函数：用于判断传入的能否是非数值

isNaN('Niangao');//结果：true//'abc'无法转为一个数值，返回trueNumber.isNaN('Niangao'); //结果：false//'abc'是字符串，Number.isNaN不做类型转换，直接返回false

在 ES5 中，isNaN 为全局函数，属于 window 对象下的一个方法，而在 ES6 中，isNaN 方法从全局函数移植到 Number 对象上，window.isNaN 函数会把非数值的参数转化成数值再进行判断，而Number. isNaN 只对数值类型有效，非数值类型的参数全部返回 false，所以我们在使用之前必需指明它是 Number 对象下的函数，否则会被默认为 window 下的函数

07 字符串扩展的新函数

repeat() 函数：将目标字符串重复 N 次，返回一个新的字符串，不影响目标字符串

let name1 = "Nian糕"let name2 = name1.repeat(3)console.log(name1, name2) // Nian糕 Nian糕Nian糕Nian糕

includes() 函数：判断字符串中能否含有指定的子字符串，通过返回的布尔值来判断能否含有指定子字符串，第二个参数选填，表示开始搜索的位置

let name = "Nian糕"name.includes('糕') // truename.includes('糕', 12) // false

startsWith() 函数：判断指定的子字符串能否出现在目标字符串的开头位置，第二个参数选填，表示开始搜索的位置

let name = "Nian糕"name.startsWith('N') // truename.startsWith('N', 3) // false

endsWith() 函数：判断子字符串能否出现在目标字符串的尾部位置，第二个参数选填，表示针对前 N 个字符

let name = "Nian糕"name.endsWith('糕') // truename.endsWith('糕', 3) // falsename.endsWith('糕', 5) // true

08 数组扩展的新函数

Array.of() 函数，将一组值转换成数组

Array.of(1, 2, 3, 4, 5) // [ 1, 2, 3, 4, 5 ]

Array.from() 函数，将相似数组的对象或者可遍历的对象转换成真正的数组

let name = 'Nian糕';Array.from(name) // [ "N", "i", "a", "n", "糕" ]

find() 函数，找出数组中符合条件的第一个元素

let arr = [ 1, 2, 3, 4, 5, 6 ]arr.find(value => {    return value > 2}) // 3arr.find(value => {    return value > 7}) // undefined

findIndex() 函数，返回符合条件的第一个数组成员的位置

let arr = [ 1, 2, 3, 4, 5, 6 ]arr.findIndex(value => {    return value > 2}) // 2arr.findIndex(value => {    return value > 7}) // -1

fill() 函数，用一个固定值填充一个数组中从起始索引到终止索引内的一律元素，start 为起始索引，默认值为 0，end 为终止索引，默认值为 this.length

let arr = [ 1, 2, 3 ]arr.fill(4) // [ 4, 4, 4 ]let arr = [ 1, 2, 3 ]arr.fill(4,1,3) // [1, 4, 4]

entries() 函数，对数组的键值对进行遍历，返回一个遍历器，可以用 for..of 对其进行遍历

for(let [i, v] of ['a', 'b'].entries()){    console.log(i, v);}// 0 "a"// 1 "b"

keys() 函数，对数组的索引键进行遍历，返回一个遍历器

for(let index of ['a', 'b'].keys()){    console.log(index);}// 0// 1

values() 函数，对数组的元素进行遍历，返回一个遍历器

for(let value of ['a', 'b'].values()){    console.log(value);}//a//b

09 对象扩展的新函数

Object.is() 函数，判断两个值能否全等

const str = '12'const num = 12const num2 = 12Object.is(str,num)// falseObject.is(num2,num)// true

Object.assign() 函数，将源对象的属性赋值到目标对象上

let target = { "a": 1 }let origin = { "b": 2, "c": 3 }Object.assign(target, origin) // {a: 1, b: 2, c: 3}

Object.getPrototypeOf() 函数，获取一个对象的 prototype 属性

function Person(){}Person.prototype = {    say(){        console.log('love')    }}let xlb = new Person()xlb.say() // loveObject.getPrototypeOf(xlb) // {say: fn}

Object.setPrototypeOf() 函数，设置一个对象的 prototype 属性

function Person(){}Person.prototype = {    say(){        console.log('love')    }}let xlb = new Person()xlb.say() // loveObject.setPrototypeOf(    xlb,    {say(){console.log('peace')}})xlb.say() // peace

10 函数扩展

参数默认值，假如函数有多个参数，但只有部分需要指定默认值，另一部分不需要的话，那么，设定默认值的参数肯定要放在最后

function person(name = 'xiaolongbao', age = 17){ console.log(name, age);}person() // xiaolongbao 18person('niangao', 17) // niangao 17

rest 参数，在实参中，除了第一个参数以外，剩余的参数都会被 ...values 所获取到，表示法：...values（三个点+变量名）；其次，values 是一个数组，需要注意的是，rest 参数必需是函数的最后一个参数，后面不能再跟其余参数

function sum(result, ...values){    console.log(values) // [1, 2, 3, 4, 5]    values.map(function (v,i) {        result += v    })    console.log(result) // 15}const res = 0sum(res, 1, 2, 3, 4, 5)

... 扩展运算符，一般结合数组使用，把数组的元素用逗号分隔开来，组成一个序列

function sum(a, b) {   return  a + b}let arr = [ 2, 3 ]// 用扩展运算法将数组 [ 2, 3 ] 转换成 2, 3sum(...arr) // 5

End of File

行文过程中出现错误或者不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，假如你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^