专栏首页Nian糕的私人厨房ECMAScript6 基础知识点(上)

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'无法转为一个数值,返回true

Number.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('糕') // true
name.includes('糕', 12) // false

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

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

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

let name = "Nian糕"
name.endsWith('糕') // true
name.endsWith('糕', 3) // false
name.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
}) // 3
arr.find(value => {
    return value > 7
}) // undefined

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

let arr = [ 1, 2, 3, 4, 5, 6 ]
arr.findIndex(value => {
    return value > 2
}) // 2
arr.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 = 12
const num2 = 12

Object.is(str,num)
// false
Object.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() // love
Object.getPrototypeOf(xlb) // {say: fn}

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

function Person(){}
Person.prototype = {
    say(){
        console.log('love')
    }
}

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

10 函数扩展

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

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

person() // xiaolongbao 18
person('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 = 0
sum(res, 1, 2, 3, 4, 5)

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

function sum(a, b) {
   return  a + b
}

let arr = [ 2, 3 ]
// 用扩展运算法将数组 [ 2, 3 ] 转换成 2, 3
sum(...arr) // 5
End of File

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript 函数

    通常来说,一个函数就是一个可以被外部代码调用(或者函数本身递归调用)的"子程序",和程序本身一样,一个函数的函数体是由一系列的语句组成的,函数可以接收传入参数,...

    Nian糕
  • ECMAScript6 基础知识点(下)

    Symbol 为独一无二的值,当 Symbol 值作为对象的属性名的时候,不能用点运算符获取对应的值,因为用点运算符的话,会导致 JavaScript 把后面的...

    Nian糕
  • CSS 鼠标悬停图片,显示隐藏文本

    我在 JavaScript 鼠标悬停图片,显示隐藏文本 这篇博文当中实现了同样的效果,只不过是通过 JS 来实现的,但其实,通过 CSS 动画也能实现同样的效果...

    Nian糕
  • JavaScript学习笔记008-this0arguments0箭头函数

    Mr. 柳上原
  • ES6中提升效率的新方法,多学一点是一点。

    ES6,ECMAScript6是目前js的新标准,又说是现在的es6是2015年发出来的,所以又称它为ECMAScript2015,所以说es6就是es2015...

    web前端教室
  • JMeter(连载2)

    接下来就可以用JMeter修改录制和脚本了,在修改之前,介绍一下一些最基本的组件功能。由于JMeter功能非常强大并且支持很多控件,所以介绍所有的组件是不可能的...

    小老鼠
  • (3.6)James Stewart Calculus 5th Edition:Implicit Differentiation

    例如: x^2 + y^2 = 25 这个时候,我们知道 如果是函数, 用竖线检测, 需要把图像拆分

    dodo_lihao
  • CocosCreator之KUOKUO带你做物理切割(第二部分)

    通过上一部分的教程,我们已经知道了单切割的原理,但是很显然,KUOKUO 的第一篇博客显得不通用,只能切割一个物体。那么如何切割多个物体呢?

    白玉无冰
  • Android 天气APP(一)开发准备

    好天气APP(天气预报、空气质量、生活建议、灾害预警、出行建议、城市切换、城市搜索、世界国家/地区的城市、常用城市、背景更换、应用自动更新) (运用百度定位、...

    晨曦_LLW
  • Tomcat NIO(13)-BlockPoller

    在上一篇文章里我们主要介绍了 tomcat NIO 中响应数据的写入,在这里我们主要介绍 BlockPoller 线程。

    TA码字

扫码关注云+社区

领取腾讯云代金券