资讯专栏INFORMATION COLUMN

ES6 简单特性学习记录

番茄西红柿 / 1791人阅读

摘要:它是用来作为回调函数使用的,主要是为了简化回调函数的写法。简单用法,简化回调我们都知道数组的并不是根据数值大小来排序的,需要排序时,要通过回调函数的形式来确定排序方式箭头函数简化。

变量定义的新方式:let/ const

let 特性:

不允许重复声明

没有变量提升(预解析)

块级作用域(一对 {} 包括的区域称为一个代码块,let 声明的变量只在该代码块起作用)

例子1 :简单的打印数据

使用 var:

for(var i = 0; i<10 ; i++ ){
    setTimeout(()=>console.log(i)) // 执行10次,全都打印 10
}

使用 let:

for(let i = 0; i<10 ; i++ ){
    setTimeout(()=>console.log(i)) // 执行10次,打印 0 - 9
}

之前我们要实现这样的打印,必须使用闭包:

for(var i = 0; i<10;i++){
    (function(j){
        setTimeout(()=>console.log(j)) // 执行10次,打印 0 - 9
    })(i)
}

例子二:在网页中常常会有切换 tab ,展示对应的信息的需求,我们使用 var 来处理时,常常使用的自定义属性,来保存点击的索引。btns[i].index=i。用于找到对应的元素。:

html模板:





11111
22223
33333

js:

var btns = document.querySelectorAll("button")
var divs = document.querySelectorAll("div")
for (var i=0 ;i

使用 let

var btns = document.querySelectorAll("button")
var divs = document.querySelectorAll("div")
for (let i=0 ;i

const 除了具备上述 let 的特性外,还有自己的一个特性:定义之后的值,是固定不变不能被修改的

值得注意的是下面这两种情况是不会报错的:

{
    const a = {value:1}
    a.value = 2
    console.log(a) // {value:2}

    const b = [1,2,3]
    b.push(4)
    console.log(b) // [1,2,3,4]
}
解构赋值

ES6 允许按照一定的模式,从数组和对象中提取值,这样就称为解构

数组:按照对应的顺序解构

{
    var arr = [[1,2,3],[4,5,6],[7,8,9]]
    var [a,b,c] = arr
    // a : [1,2,3]
    // b : [4,5,6]
    // c : [7,8,9]
    // 用法1
    var x = 1;
    var y = 2;
    [y,x] = [x,y]
    console.log(x,y) // 2 1
}

对象按照对应的名称一一对应进行解析:

{
    var obj={
        get:function(){
            return "get"
        },
        value:1,
        data:[1,2,3],
        str:"string"
    }
    var {str,get,data} = obj
    console.log(str) // string
    console.log(get()) //get
    console.log(data) // [1,2,3]
}
模板字符串

模板字符串 是增强版的字符串,使用反引号(`)作为标识 。可以当做普通字符串使用,也可以用来定义多行字符串(会保留换行)。或者在字符串中嵌入变量。

在模板字符串,需要引用变量使用 ${变量名} 的形式。在 {}可以进行运算,也可以引用对象属性。

{
    var name = "xiaoming"
    var age = 19
    var str = `my name is ${name} ,my age is ${age}`
    console.log(str) //"my name is xiaoming ,my age is 19"
}
扩展

Array.from(arrayLike[, mapFn[, thisArg]])

arrayLike : 想要转换成真实数组的类数组对象或可遍历对象。

mapFn : 可选参数,如果指定了该参数,则最后生成的数组会经过该函数的加工处理后再返回。

thisArg : 可选参数,执行 mapFn 函数时 this 的值。方法用于将两类对象转为真正的数组:类似数组的对象和可遍历的对象(包括 ES6 新增的数据结构 Set 和 Map )

{
    // NodeList对象
    let ps = document.querySelectorAll("p");
    Array.from(ps);
    // 将可迭代对象(Set 对象)转换成数组
    Array.from(new Set(["foo", window]));       // ["foo", window]
    // 使用 map 函数转换数组元素
    Array.from([1, 2, 3], x => x + x);      // [2, 4, 6]
    // 将类数组对象(arguments)转换成数组
    (function () {
        var args = Array.from(arguments);
        return args;
    })(1, 2, 3);                            // [1, 2, 3]
}

而在这之前,我们要转类数组对象,只能用这样的形式: [].slice.call(ps)

当然或许你根本不需要转,因为我们有 for of 了,只要有遍历接口的类型,它就可以进行遍历
Set,String,Array,NodeList等等)

{    
    // NodeList对象
    let ps = document.querySelectorAll("p");
    for (let v of ps){
        console.log(v)
    }
    //当然你可能同样需要下标: `arr.keys()`,`arr.values()`,`arr.entries()`
    for (let [i,item] of ps.entries()){
        console.log(i,item)
    }
}

Object.assign():拷贝源对象自身的可枚举的属性到目标对象身上

{
    var obj = { a: 1 };
    var copy = Object.assign({}, obj);
    console.log(copy); // { a: 1 }
}

值得注意的是, Object.assign()执行的是浅拷贝。假如源对象的属性值是一个指向对象的引用,它也只拷贝那个引用值。

{
    let a = { b: {c:4} , d: { e: {f:1}} }
    let g = Object.assign({},a)
    g.d.e = 32 // 设置 g.d.e 为 32
    console.log(g) // {"b":{"c":4},"d":{"e":32}}
    console.log(a) // {"b":{"c":4},"d":{"e":32}}
}

如果你需要的不是合并,而只是普通json对象的复制,建议使用 JSON.parse(JSON.stringify(a)),这样不会有上面的副作用产生。

函数参数默认值。定义默认值得参数必须是尾参数,因为函数形参定义默认值后该参数可以被忽略

{
    function fn(a,b=2){
        return {a,b}
    }
    console.info(fn(1)) //{a: 1, b: 2}
}

rest参数:用于获取获取函数的多余参数。与参数默认值一样,必须为尾参数

{
    function foo(a,b,...args){
        console.info(args)
    }
    foo(1,2,3,4,5,6) // [3, 4, 5, 6]
}

扩展运算符...:它好比 rest 参数的逆运算。可以将一个数组转为用逗号分隔的参数序列。

{
    // 更好的 apply 方法,例如我们在算最大值的时候:
    var arr = [1,2,3,4,5]
    console.info(Math.max.apply(null,arr))
    console.info(Math.max(...arr)) // 使用扩展运算符
    console.info(Math.max(1,2,3,4,5)) // 最终都会被解析成这样

    // 当然还能这样用
    var str = "string"
    var arr = [...str,4,5] // ["s", "t", "r", "i", "n", "g", 4, 5]

}

箭头函数 Arrow Functions:箭头函数并不是用来替代现有函数而出现的,并且也无法替代。它是用来作为回调函数使用的,主要是为了简化回调函数的写法。
主要有三个特性:

箭头函数自身没有 this 。函数内的 this 指向箭头函数 定义时所在的对象 ,而不是使用时所在的对象。

箭头函数内部,不存在 arguments 对象

不可以当作构造函数,不可以使用 new 指令。

简单用法,简化回调:

{
    // 我们都知道数组的 sort 并不是根据数值大小来排序的,需要排序时,要通过回调函数的形式来确定排序方式 
    var arr = [7,8,9,10]
    arr.sort() // [10, 7, 8, 9]
    arr.sort(function(a,b){return a-b}) // [7, 8, 9, 10]
    arr.sort((a,b)=> a - b ) // 箭头函数简化。当仅有一条语句时,有一个隐式的 return 
}

没有 arguments

{
    var foo = (a,b,c)=>{
        console.log(a,b,c)
        console.log(arguments)
    };
    foo(1,2,3)
    // 1 2 3
    // Uncaught ReferenceError: arguments is not defined      
}

不要在对象的方法中使用箭头函数:

{
    window.name="window";
    var obj = {
        name:"obj",     
        getName: function(){
            console.log(this.name)
        }
    }
    obj.getName() // obj
    var getName = obj.getName
    getName() // window, this 总是指向调用者
    //-----------------
    var obj = {
        name:"obj",     
        getName: () =>{
            console.log(this.name)
        }
    }
    obj.getName() // window
    /**
        这里由于对象 a,并不能构成一个作用域。所以会再往上达到全局作用域,所以 this 指向 window..
     */
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83363.html

相关文章

  • JS笔记

    摘要:从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。异步编程入门的全称是前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章,涉及到优化等多个方面。 TypeScript 入门教程 从 JavaScript 程序员的角度总结思考,循序渐进的理解 TypeScript。 网络基础知识之 HTTP 协议 详细介绍 HTT...

    rottengeek 评论0 收藏0
  • ES6-7

    摘要:的翻译文档由的维护很多人说,阮老师已经有一本关于的书了入门,觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中,显得越来越重要。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

    mudiyouyou 评论0 收藏0
  • Angular2 VS Angular4 深度对比:特性、性能

    摘要:的特性和性能是的超集,用于帮助的开发。注解提供了连接元数据和功能的工具。通过在库中提供基本信息可以调用函数或创建类的实例来检查相关元数据,从而简化了对象实例的构建。停用它会响应跳出旧控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web应用开发领域,Angular被认为是最好的开源JavaScri...

    孙淑建 评论0 收藏0
  • 2016年前端开发学习计划

    摘要:年,软件开发界发生了很多变化。六数据存储是一个关系型数据库管理系统,由瑞典公司开发,目前属于旗下公司。最流行的关系型数据库管理系统,在应用方面是最好的,关系数据库管理系统应用软件之一。七是最新的修订版本,年月由万维网联盟完成标准制定。 2015年,软件开发界发生了很多变化。有很多流行的新语言发布了,也有很多重要的框架和工具发布了新版本。下面有一个我们觉得最重要的简短清单,同时也有我们觉...

    asoren 评论0 收藏0
  • 2016年前端开发学习计划

    摘要:年,软件开发界发生了很多变化。六数据存储是一个关系型数据库管理系统,由瑞典公司开发,目前属于旗下公司。最流行的关系型数据库管理系统,在应用方面是最好的,关系数据库管理系统应用软件之一。七是最新的修订版本,年月由万维网联盟完成标准制定。 2015年,软件开发界发生了很多变化。有很多流行的新语言发布了,也有很多重要的框架和工具发布了新版本。下面有一个我们觉得最重要的简短清单,同时也有我们觉...

    Null 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<