JavaScript学习笔记(十三) ES6新特性

其他 2020-01-30 22:01:15 阅读次数: 0

这篇文章我们将会介绍 ES2015/ES6 中一些常用的新特性

1、变量定义

在 ES6 之前，定义变量只能使用 var 关键字，而在 ES6 中新增 let 和 const 关键字，它们之间的区别如下：

关键字 作用域 变量是否提升 能否重复定义
var 函数作用域 是 能
let、const 块级作用域 否 否 
function function_scope() {
    console.log(result) // undefined
    var result = 0
    for (var count = 1; count <= 5; count++) { result += count }
    console.log(count) // 5
    return result
}

function block_scope() {
    // console.log(result) -> ReferenceError: result is not defined
    let result = 0
    for (let count = 1; count <= 5; count++) { result += count }
    // console.log(count) -> ReferenceError: count is not defined
    return result
}

let 和 const 之间的区别如下：

  • 使用 const 定义的变量在声明时必须赋值，而 let 不用
  • 使用 const 定义的变量声明之后不能修改，而 let 不会
// const a -> Uncaught SyntaxError: Missing initializer in const declaration
const a = 0
// a = 1 -> Uncaught TypeError: Assignment to constant variable.

注意哦，这里所说的不能修改，并不是说变量的值不可修改，而是变量的标识符不能重新分配

准确而言，const 声明的变量是一个值的只读引用，它意味着栈空间的地址不可修改，而非堆空间中的值不可修改

因此对于引用类型，我们还是可以修改它的值的

const a = [1, 3, 5]
a[0] = 2
console.log(a) // (3) [2, 3, 5]

2、数组迭代

在 ES6 之前，使用 for 循环迭代数组有两种方式，分别是传统 for 循环和 for...in 循环

let array = ['a', 'b', 'c']
// 传统 for 循环
for (let index = 0; index < array.length; index++) {
    console.log(index + ': ' + array[index])
}
// for...in 循环
for (let index in array) {
    console.log(index + ': ' + array[index])
}

/*
 * 执行结果：
 * 0: a
 * 1: b
 * 2: c
**/

而在 ES6 中新增 for...of 循环，可以直接遍历数组元素，而非数组索引

let array = ['a', 'b', 'c']
// for...of 循环
for (let item of array) {
    console.log(item)
}

/*
 * 执行结果：
 * a
 * b
 * c
**/

在 for...of 循环中还可以使用 continue 和 break 语句

let array = [1, 2, 3, 4, 5, 6, 7, 8]
let sum = 0
for (let item of array) {
    if (item % 2 === 0) continue
    sum += item
}
console.log(sum) // 16

3、模板字符串

模板字符串在多行字符串和字符串拼接等场景下十分方便

  • ES6 之前
// 多行字符串
let html = '<ul>' + 
    '<li>Apple</li>' +
    '<li>Banana</li>' +
    '<li>Cherry</li>' +
    '</ul>'
console.log(html)
// 字符串拼接
let protocol = 'https'
let host = '127.0.0.1'
let port = '80'
let path = 'index.html'
let url = protocol + '://' + host + ':' + port + '/' + path
console.log(url) /* http://127.0.0.1:80/index.html */
  • ES6 之后
// 多行字符串，保留原有格式
let html = `
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>
`
console.log(html)
// 字符串拼接，可以使用变量
let protocol = 'https'
let host = '127.0.0.1'
let port = '80'
let path = 'index.html'
let url = `${protocol}://${host}:${port}/${path}`
console.log(url) /* http://127.0.0.1:80/index.html */

4、解构语法

解构语法可以将数组和对象中的值提取出来并赋值给新的变量

  • ES6 之前
// 数组解构
let array = ['a', 'b', 'c']
let x = array[0]
let y = array[1]
let z = array[2]
console.log(x, y ,z) // a b c
// 对象解构
let object = { name: 'Steve', age: 18 }
let name = object.name
let age = object.age
console.log(name, age) // Steve 18
  • ES6 之后
// 数组解构
let array = ['a', 'b', 'c']
let [x, y, z] = array
console.log(x, y, z) // a b c
// 对象解构，变量名要与属性名相同
let object = { name: 'Steve', age: 18 }
let {name, age} = object
console.log(name, age) // Steve 18

5、扩展运算符

拓展运算符可以将一个数组转化为用逗号分隔的参数序列

  • ES6 之前
// 数组复制
let array = ['a', 'b', 'c']
let array_copy = array.concat()
console.log(array_copy) // (3) ["a", "b", "c"]
// 数组合并
let array_one = ['a', 'b', 'c']
let array_two = ['d', 'e', 'f']
let array_merge = array_one.concat(array_two)
console.log(array_merge) // (6) ["a", "b", "c", "d", "e", "f"]
// 接收函数参数，所有传入的参数都会保存在 arguments 中
function add() {
    let result = 0
    Array.prototype.forEach.call(arguments, function(item) { result += item })
    return result
}
let result = add(1, 2, 3)
console.log(result) // 6
  • ES6 之后
// 数组复制
let array = ['a', 'b', 'c']
let array_copy = [...array]
console.log(array_copy) // (3) ["a", "b", "c"]
// 合并数组
let array_one = ['a', 'b', 'c']
let array_two = ['d', 'e', 'f']
let array_merge = [...array_one, ...array_two]
console.log(array_merge) // (6) ["a", "b", "c", "d", "e", "f"]
// 接收函数参数，剩余参数作为函数的最后一个参数，将传入的参数以数组的形式储存起来
function add(...array) {
    let result = 0
    array.forEach(function(item) { result += item })
    return result
}
let result = add(1, 2, 3)
console.log(result) // 6

6、默认参数

在定义函数的时候，可以直接为函数参数设置默认值

  • ES6 之前
function greet(somebody) {
    var somebody = somebody || 'stranger'
    console.log('Hello, ' + somebody)
}
greet('Amy') // Hello, Amy
greet() // Hello, stranger
  • ES6 之后
function greet(somebody = 'stranger') {
    console.log('Hello, ' + somebody)
}
greet('Amy') // Hello, Amy
greet() // Hello, stranger

7、箭头函数

使用箭头函数不仅可以更加方便的定义函数，而且 this 的值将会继承父级执行上下文 this 的值

  • ES6 之前
// 过滤奇数，元素累加
let sum = 0
let arr = [1, 2, 3, 4, 5]
let even = arr.filter(function(item) { return item % 2 === 0 })
even.forEach(function(item) { sum = sum + item })
console.log(sum) // 6
// this 取值
let object = {
    value: 'hello',
    print: function() {
        // 使用 bind 函数将 this 的值绑定好
        setTimeout(function() { console.log(this.value) }.bind(this), 1000)
    }
}
object.print() // hello
  • ES6 之后
// 过滤奇数，元素累加
let sum = 0
let arr = [1, 2, 3, 4, 5]
let even = arr.filter((item) => (item % 2 === 0))
even.forEach((item) => { sum = sum + item })
console.log(sum) // 6
// this 取值
let object = {
    value: 'hello',
    print: function() {
        // 使用箭头函数，this 的值将会继承父级执行上下文（在这里是 print 函数）this 的值
        setTimeout(() => { console.log(this.value) }, 1000)
    }
}
object.print() // hello

8、类

class 关键字用于定义类，它并不是一种新的继承模式，而是原型链的语法糖罢了

  • ES6 之前
// 定义类
function Person(name, age) {
    this.name = name
    this.age = age
}
// 公有实例方法
Person.prototype.sayHello = function() {
    console.log('Hello, I am ' + this.name)
}
// 类继承
function Worker(name, age, salary) {
  Person.call(this, name, age)
  this.salary = salary || 100
}
// 公有实例方法
Worker.prototype.sayHello = function() {
    Person.prototype.sayHello.call(this)
    console.log('My salary is $' + this.salary)
}
// 公有实例方法
Worker.prototype.changeSalary = function(value) {
    this.salary += value
}

let person = new Person('Steve', 18)
person.sayHello() // Hello, I am Steve
let worker = new Worker('Steven', 20, 100)
worker.sayHello() // Hello, I am Steven // My salary is $100
worker.changeSalary(100)
worker.sayHello() // Hello, I am Steven // My salary is $200
  • ES6 之后
// 定义类
class Person {
    // 构造函数
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    // 公有实例方法
    sayHello() {
        console.log('Hello, I am ' + this.name)
    }
}
// 类继承
class Worker extends Person {
    // 构造函数
    constructor(name, age, salary = 100) {
        super(name, age) // 调用父类初始化函数
        this.salary = salary
    }
    // 公有实例方法
    sayHello() {
        super.sayHello() // 调用父类的实例方法
        console.log('My salary is $' + this.salary)
    }
    // 公有实例方法
    changeSalary(value) {
        this.salary += value
    }
}

let person = new Person('Steve', 18)
person.sayHello() // Hello, I am Steve
let worker = new Worker('Steven', 20, 100)
worker.sayHello() // Hello, I am Steven // My salary is $100
worker.changeSalary(100)
worker.sayHello() // Hello, I am Steven // My salary is $200

【 阅读更多 JavaScript 系列文章，请看 JavaScript学习笔记 】

猜你喜欢

转载自www.cnblogs.com/wsmrzx/p/12244036.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022