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

ES6新特性初识

作者:互联网

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