AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

关于ES6新特性的总结 1

2023-08-17 53
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 关于ES6新特性的总结

1.let & const

1) let，作用与var类似，用于声明变量

特性：

  1. let 不能重复声明变量，var 可以重复声明变量；
  2. 块级作用域，es5中存在全局作用域、函数作用域、eval作用域；es6中引入了块级作用域，
  1. let声明的变量在块级作用域{}内有效
  2. let声明的变量不存在var的变量提升问题

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h2 class="page-header">点击切换颜色</h2>
        <div class="item">1</div>
        <hr>
        <div class="item">2</div>
        <hr>
        <div class="item">3</div>
    </div>
    <script>
        // 获取div对象
        let items = document.getElementsByClassName('item')
        // 遍历并绑定事件 遍历时let i
        for(let i = 0; i < items.length; i++){
            items[i].onclick = function(){
                items[i].style.background = 'pink'
            }
        }
        /*
        相当于在3个块级作用域内分别声明了i
        {
            let i = 0
            items[i].onclick = function(){
                items[i].style.background = 'pink'
            }
        }
        {
            let i = 1
            items[i].onclick = function(){
                items[i].style.background = 'pink'
            }
        }
        {
            let i = 2
            items[i].onclick = function(){
                items[i].style.background = 'pink'
            }
        }
        */
        /*
        // 遍历并绑定事件 遍历时var i
        for(var i = 0; i < items.length; i++){
            items[i].onclick = function(){
                // 修改当前元素的背景颜色
                this.style.background = 'pink' // 此处this指向’被绑定的元素对象‘，即调用该函数的对象
                // 此处不能和上文一样使用 items[i].style.background = 'pink'，
                // 因为var的i不考虑块级作用域， 则相当于在全局声明了一个变量，循环结束后i=3，
                // 函数执行时向上层寻找最终得到全局变量i=3，而items[3]为undefined
            }
        }
        相当于
        {
            var i = 0
            // ...
        }
        {
            var i = 1
            // ...
        }
        {
            var i = 2
            // ...
        }
        {
            var i = 3
        }
        */
    </script>
</body>
<style>
    .item{
        width: 200px;
        height: 50px;
        border-radius: 2%;
        background-color: brown;
    }
</style>
</html>

2) const 用于声明常量

注意事项：

  1. 一定要赋初始值
  2. 一般常量使用大写(属于编程规范)
  3. 常量值不能修改
  4. 存在块级作用域
  1. 对于数组和对象的元素修改，不算做对常量的修改，不会报错(因为引用数据类型保存的是内存地址，所以声明数组和对象时可以使用const声明，以此保证其保存的内存地址不变)

2.解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值

1) 数组的解构

const Web = ['html', 'css', 'javascript']
let [tool1, tool2, tool3] = Web
console.log('tool1-----', tool1) // html
console.log('tool2-----', tool2) // css
console.log('tool3-----', tool3) // javascript

2) 对象的解构

const liMing = {
    name: 'liMing',
    age: '22',
    tell: function(){
        console.log(`I am liMing`)
    }
}
let {name, age, tell} = liMing
console.log(name) // 'liMing'
console.log(age) // '22'
console.log(tell) // f(){...}
tell() // I am liMing

3.模板字符串

特性：

  1. (反引号)内容中可以直接出现换行符，’ '和" "中则不可以，出现会报错
  2. 可以直接进行变量拼接

4.简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法（在属性名和变量名相同的情况下），这样的书写更加简洁

let name = 'LiMing'
let tell = function(){
    console.log('I am LiMing')
}
const liMing = {
    name,
    tell,
    sayHi(){
        console.log('hello')
    }
}
// 等效于
// const liMing = {
//     name: name,
//     tell: tell,
//     sayHi: function(){
//         console.log('hello')
//     }
// }
console.log(liMing)
liMing.tell()
liMing.sayHi()

5.箭头函数

与function声明的区别：

1.箭头函数this是静态的。

  • 箭头函数内的this指向上层对象；始终指向函数声明时所在作用域下的this的值，无法被call改变
  • 普通函数内的this指向调用其函数的对象
function getName(){
    console.log(this.name)
}
let getName2 = ()=>{
    console.log(this.name)
}
// 设置window对象的name属性
window.student = 'LiMing'
const student = {
    name: 'HanMei'
}
// 直接调用
getName() // LiMing
getName2() // LiMing
// call方法调用
getName.call(student) // HanMei
getName2.call(student) // LiMing

2.箭头函数不能作为构造函数实例化对象

let Person = (name, age)=>{
    this.name = name
    this.age = age
}
let me = new Person('LiMing', 20) // 报错：Uncaught TypeError: Person is not a constructor

3.箭头函数不能使用arguments变量，但是可以使用....rest

let fn = ()=>{
    console.log(arguments)
}
fn(1, 2, 3) // 报错：Uncaught ReferenceError: arguments is not defined
let fn2 = (...rest)=>{
    console.log(...rest)
}
fn2('a','b','c') // a b c

4.箭头函数的简写

① 当形参有且只有一个的时候，可以省略()

② 当代码体只有一条语句的时候，可以省略{}，此时return必须省略，而且语句的执行结果就是函数的返回值

// 当形参有且只有一个的时候，可以省略`()`
let add = n => {
    return n + n
}
console.log(add(9))
// 当代码体只有一条语句的时候，可以省略`{}`，此时`return`必须省略，而且语句的执行结果就是函数的返回值
let pow = n => n*n
console.log(pow(9))

5.箭头函数的例子

箭头函数适合与this无关的回调，比如定时器setTimeout(()=>{...}, 2000)、数组的方法回调arr.filter((item)=>{...})；

不适合与this有关的回调，比如dom元素的事件回调ad.addEventListener('click', function(){...}、对象内的方法定义{name: 'LiMing', getName: function(){this.name}}

例1：

// 需求-1 点击div 2s后颜色变红
// 获取元素
let ad = document.getElementById('ad')
// 绑定事件
ad.addEventListener('click', function(){
    setTimeout(function(){
        console.log(this) // 定时器里的this指向window
        this.style.background = 'brown' // 报错
    }, 2000)
})
//解决方案1
// ad.addEventListener('click', function(){
//     // 保存this的值
//     let _this = this // _this指向ad
//     setTimeout(function(){
//         console.log(_this) 
//         _this.style.background = 'brown'
//     }, 2000)
// })
// 解决方案2
// ad.addEventListener('click', function(){
//     setTimeout(()=>{
//         console.log(this) 
//         this.style.background = 'brown' // this指向函数声明时所在作用域下this的值 即ad
//     }, 2000)
// })

例2：

// 需求-2 从数组中返回偶数的元素
const arr = [1, 6, 9, 10, 100, 25]
const result = arr.filter(function(item){
    if(item %2 === 0){
        return true
    }else{
        return false
    }
})
// 可以用箭头函数
// const result = arr.filter(item => {
//     if(item % 2 === 0){
//         return true
//     }else{
//         return false
//     }
// })
// 还可以简写为
// const result = arr.filter(item => item % 2 === 0)
console.log(result)

6.函数参数的默认值设置

ES6允许给函数参数赋初始值

function add(a, b, c=10){ // 具有默认值的参数，一般位置要靠后
    return a + b + c
}
console.log(add(1,2,))

可以与解构赋值一起使用

function connect({host='127.0.0.1', port, username, password}){
    console.log(host, port)
    console.log(username, password)
}
connect({
    port: 3306,
    username: 'root',
    password: 'root',
})

7.rest参数

ES6引入rest参数，用于获取函数的实参，用来代替arguments

// ES5获取实参的方式
function printStudent(){
    console.log(arguments) // arguments为一个对象
}
printStudent('LiMing','HanMeimei')
// ES6获取实参的方式
function printFriend(friend1, friend2, ...rest){ // rest参数必须放在形参列表最后，否则会报错
    console.log(friend1) 
    console.log(friend2) 
    console.log(rest) // 得到一个数组，可以使用数组api
}
printFriend('小猫','小狗','兔子','鸭子')
// 小猫
// 小狗
// ['兔子','鸭子']

8.扩展运算符

...能将「数组」转为逗号分隔的「参数序列」

注：虽然形式与rest参数类似，但是rest参数是用在函数定义时的形参位置，扩展运算符是用在函数实际调用时的实参位置

const STUDENTS = ['小明','小芳','小红']
function printStudent(){
    console.log(arguments)
}
printStudent(STUDENTS) // 参数为一个数组，数组内包含3个元素
printStudent(...STUDENTS) // 参数为3个元素

应用场景：

  1. 数组的合并
const STUDENTS1 = ['小明','小芳','小红']
const STUDENTS2 = ['小吴', '小王']
// es5写法
const STUDENTS_ES5 = STUDENTS1.concat(STUDENTS2)
// es6写法
const STUDENTS_ES6 = [...STUDENTS1, ...STUDENTS2]
console.log('es5------',STUDENTS_ES5)
console.log('es6------',STUDENTS_ES6)
  1. 数组的克隆
const STUDENTS1 = ['小明','小芳','小红']
const PUPIL = [...STUDENTS1] // 注意：如果数组内元素是引用类型，拷贝的是内存地址，为浅拷贝
console.log('PUPIL----',PUPIL)
  1. 将伪数组转为真正的数组
const divs = document.querySelectorAll('div')
console.log(divs) // 此处得到的divs实际是一个对象
const divsArr = [...divs] // 将其转为真正的数组，从而可以使用数组的api譬如filter、map
console.log(divsArr)

9.Symbol

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第7种数据类型，是一个类似字符串的数据类型

Symbol特点

  1. Symbol的值是唯一的，用来解决命名冲突的问题
  2. Symbol值不能与其他数据进行运算，也不能与自己进行运算，譬如+、-、*、/、比较运算
  3. Symbol定义的对象属性不能使用for…in遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名

创建Symbol

  1. 通过let s2 = Symbol('张三') 的方式创建Symbol，'张三’作为Symbol描述，作用相当于注释，这种方式创建的Symbol，即使传入的描述一致，但实际返回的值是不同的
// 创建Symbol
let s = Symbol()
console.log(s,typeof s) // Symbol() "symbol"
let s2 = Symbol('张三') // '张三'作为Symbol描述，作用相当于注释
let s3 = Symbol('张三') // 即使传入的描述一致，但实际返回的值是不同的
console.log(s2 === s3) // false
  1. 通过Symbol.for()创建Symbol，这种方式创建Symbol，传入的描述一致，实际返回的值也一致，可以得到唯一的Symbol值
// Symbol.for创建Symbol
let s4 = Symbol.for('张三')
let s5 = Symbol.for('张三')
console.log(s4 === s5) // true

Symbol使用场景

给对象添加属性和方法。由于Symbol值具有唯一性，所以可以很安全地把属性和方法加入对象中，如下所示

let game = {
    up: 'upp',
    down: 'doown'
}
let methods = {
    up: Symbol(),
    down: Symbol(),
}
// 添加方法
game[methods.up] = function(){
    console.log('up up up')
}
game[methods.down] = function(){
    console.log('down down down')
}
console.log('game----', game)
// 调用
game[methods.up]()

let youxi = {
    name: '狼人杀',
    [Symbol('say')]: function(){ // 此处不能直接写 Symbol('say'): function(){...},因为Symbol('say')是动态的，和上面固定的'name'不一样
        console.log('发言')
    }
}

Symbol内置值

ES6除了定义自己使用的Symbol值以外，还提供了11个内置的Symbol值，指向语言内部使用的方法,比如

  1. Symbol.hasInstance
    当其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这个方法
 class Person{
        static [Symbol.hasInstance](param){
            console.log('param----', param)
            console.log('检测类型')
        }
    }
    let o = {}
    console.log(o instanceof Person)
    // param---- {}
    // 检测类型
    // false
  1. Symbol.isConcatSpreadable
    对象的Symbol.isConcatSpreadable属性等于一个bool值，表示该对象用于Array.prototype()时，是否可以展开
const arr1 = [1,2,3]
const arr2 = [4,5,6]
arr2[Symbol.isConcatSpreadable] = false // arr2不可展开
const arr = arr1.concat(arr2)
console.log(arr) // [1,2,3,[4,5,6]]

3.Symbol.unscopables

该对象指定了使用with关键字时，哪些属性会被with环境排除

4.Symbol.match

当执行str.match(myObject)时，如果该属性存在，会调用它，返回该方法的返回值

5.Symbol.replace

当该对象被str.replace(myObject)方法调用时，会返回该方法的返回值

6.Symbol.search

当该对象被str.search(myObject)方法调用时，会返回该方法的返回值

7.Symbol.split

当该对象被str.split(myObject)方法调用时，会返回该方法的返回值

8.Symbol.iterator

对象进行for ... of循环时，会调用Symbol.iterator方法，返回该对象的默认遍历器

9.Symbol.toPrimitive

该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值

10.Symbol.toStringTag

在该对象上调用toString方法时，返回该方法的返回值

11.Symbol.species

创建衍生对象时，会使用该属性

文章标签：
网络架构
JavaScript
前端开发
英俊先生
目录
相关文章
还是大剑师兰特
|
6月前
|
JavaScript 前端开发 开发者
ES6的常用新特性17条
ES6，也称为ECMAScript 2015，是JavaScript语言的一个重大更新，它引入了许多新的语法特性。以下是ES6的一些主要语法
还是大剑师兰特
51 0
德国都芳最好
|
23小时前
|
前端开发
ES6 中常用的新特性
ES6 中常用的新特性
德国都芳最好
6 1
游客ot6eft3qn37ga
|
3月前
|
JavaScript 前端开发
ES6新特性（一）
ES6新特性（一）
游客ot6eft3qn37ga
47 4
游客ot6eft3qn37ga
|
3月前
|
JavaScript 前端开发
ES6新特性（二）
ES6新特性（二）
游客ot6eft3qn37ga
52 0
bug天选之子
|
存储 JavaScript 前端开发
ES6新特性
ES6新增特性详细内容
bug天选之子
77 2
无妄的罪
|
6月前
|
前端开发
ES6 部分新特性使用
ES6 部分新特性使用
无妄的罪
36 0
边境矢梦&deg;
|
JavaScript 前端开发 开发者
ES6 新特性
这是每个前端开发者都应该掌握的技能。ES6是JavaScript的一个重要的版本升级，它带来了许多新特性和语法糖，让我们的代码更加简洁高效。无论你是新手还是有经验的开发者，掌握ES6都会让你的编码变得更加愉快和高效。那么，让我们开始吧！
边境矢梦&deg;
107 1
英俊先生
|
前端开发
关于ES6新特性的总结 2
关于ES6新特性的总结
英俊先生
40 0
JamieChyi
|
Java
es6中简单常用的新特性
es6中简单常用的新特性
JamieChyi
54 0
小猫娃来啦
|
前端开发 JavaScript
es6的8条新特性总结
es6的8条新特性总结
小猫娃来啦
134 0