ES6新特性初识

2022-08-18 14:32:37 阅读：262 来源： 互联网

标签：ES6 num log Symbol 特性初识 let yield console

最近对前端开发起了兴趣，介绍一点我在学习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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9