首页 > 其他分享> > ES6新特性初识

ES6新特性初识

2022-08-18 14:32:37 作者：互联网

最近对前端开发起了兴趣，介绍一点我在学习ES6特性时的理解，感谢各类教程和博文对我在学习时的帮助。我也是第一次学着写博文，写的并不太好，只能算我的一点心得，想要详细学习的还是建议查看文档或者学习其他大神们的博文。

1. 块作用域的引入

　　ES6最重要的变化之一就是块作用域的引入，在ES6之前，js使用全局和函数作用域，使用起来有诸多不便，而在ES6中，终于可以像在其他传统编程语言那样定义和使用变量了。

　　使用块作用域需要通过新关键字 let ， const

　　const 和传统编程语言相似，定义一个只读变量，且只能定义时赋值（不出现变量提升）

const num = 100
const str = 'abc'

但需要注意的是，当只读变量定义为一个引用变量时，其定义的是一个引用（地址），它的内部数据可以正常进行修改

const obj = {
    a: 'a'
    b: '0'
}
obj.a = 'c'

let 关键字声明的变量类似于java中声明的变量，具有块作用，且不会出现变量提升

在绝大多是情况下，let 比 var 更加好用，代码结构更清晰，所以还是推荐使用 let 来声明变量

2. 变量解构

变量解构的出现是我们可以用更简单的方式来常见数组或是变量（本质使用模式匹配）

let [a, b, c] = [1, 2, 3];

const obj = {
    a: 'a'
    b: 'b'
    method: funtion(){
    }
}

let {a, b, c} = obj

3. 箭头函数

箭头函数是对函数的简写

let fn = (a,b) => {
}

　　箭头函数中的this是静态的，始终指向声明时作用域的this,即使是使用call()进行调用也无法改变

箭头函数不能作为构造函数

箭头函数不能使用 arguments

箭头函数可以进一步的简写

//只有一个形参时，可以省略（）
let a = n =>{
    return n
}
//只有一条语句时，可以省略{}和 return
let b = n => n*2

3. 对象的简化定义

ES6中对对象定义进行了简化，如下代码是合法的

let a = 'a'
let b = 'b'
let obj ={
    a,
    b,
}

4. 形参赋初始值

如同其他与那样，ES6可以对函数形参赋初值

function a (a ,b ,c=10){
    return a+b+c
}

5. rest 参数

rest 参数用于获取函数的实参，用来代替argument

//..args 即 rest 参数必须放置在参数末尾
function fun(a, b, c, ...args){
}

6. 拓展运算符 ...

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

//ES6中可以这么写
let arr = ['a', 'b', 'c']
function fn(){}
fun(...arr);

实际上 ...arr 等同于 'a','b','c' (此处只是浅拷贝）

//...的另一种用法
const divs = document.querySelectorAll('div')
const divArr = [...divs]
//将所有div对象转化为一个数组

7. 新的数据类型 Symbol

Symbol 的出现是为了作为一个唯一的标识符，防止出现同名问题

在大佬的https://blog.csdn.net/weixin_47075145/article/details/125692477这一篇博文对Symbol进行了详解

7.1 Symbol 的创建

let s = Symbol()

let s2 = Symbol('abc')
//abc仅仅只是一个标志，不是key

let s3 = Symbol.for('abc')
//通过这种方式，'abc'会类似于一个key，使用相同的'abc'是同一个 Symbol

7.2 Symbol的使用场景

//为对象添加属性和方法
let obj = {
    me_1: function(){}
}

let methods = {
    me_1: Symbol(),
    me_2: Symbol()
}

obj[methods.me_1] = function(){
}
obj[methods.me_2] = function(){
}

//第二种添加方法
let obj = {
    name: 'abc'
    [Symbol('a1')]: function(){},
    [Symbol('a1')]: function(){}
}

7.3 Symbol的内置属性

Symbol拥有11个内置属性，通过使用[Symbol.内置属性]可以对其他变量或对象进行修饰，在满足特定条件触发，实现类似java中的重写操作

8. 迭代器

与java类似，迭代器用于提供一个统一接口，对数据进行遍历，在js中，只有具有迭代器接口，就可以使用for of进行遍历

与java类似，迭代器的实现原理是通过不断调用next()，对所用成员进行遍历

我们可以对某一需要的数据类型添加或重写迭代器，来自定义一个迭代方法，并且只需对用户暴露一个相同的接口 for of（注意区别于python的迭代器使用方法)

9. 异步编程

9.1 生成器函数

//一个生成器函数
function * gen(num){
    //yield类似python中的yield，将代码分块执行
    console.log(num+1);
    yield 'aaaaaa';
    console.log(num+2);
    yield 'bbbbb';
    console.log(num+3);
    yield 'ccccc';
    console.log(num+4);
}
//执行生成器函数
let iterator = gen('num');
iterator.next();
//第一次执行，执行    console.log(num1);    并返回{'aaaaaa' , false}
iterator.next();
//第二次执行，执行    console.log(num2);    并返回{'bbbbbb' , false}

在实际使用中，往往在 yield 后使用回调函数来完成需求

//iterotor.next() 可以传入实参
//一个生成器函数
function * gen(num){
    //yield类似python中的yield，将代码分块执行
    console.log(num+1);
    let ag = yield 'aaaaaa';
    //此时ag = 'mmm' 
    console.log(num+2);
    let eg = yield 'bbbbb';
    //eg = 'nnn'
    console.log(num+3);
    yield 'ccccc';
    console.log(num+4);
}
//执行生成器函数
let iterator = gen('num');
iterator.next();
//第一次执行，执行    console.log(num1);    并返回{'aaaaaa' , false}
iterator.next('mmm');
//第二次执行，执行    console.log(num2);    并返回{'bbbbbb' , false}
iterator.next('nnn');
//第二次执行，执行    console.log(num2);    并返回{'cccccc' , false}

事实上，生成器函数借鉴了python的生成器，其在各种python异步框架中被广泛应用，比如大火的scrapy框架等（然而ES6也有了promise，在异步操作上要简单太多，所以生成器也很少用就是了）

关于promise和class等其他特性（Ecma到底想把脚本语言变成什么样啊......)，由于内容过多，我会分几次将其写完，未完待续....

标签：ES6,num,log,Symbol,特性,初识,let,yield,console
来源： https://www.cnblogs.com/jiajiade/p/16598565.html