ES6 入坑笔记：说说一些新概念

scq000 发布于2019-08-20 10:21 / 1989人阅读

摘要：虽然现在还需要借助的力量但未来一定是属于。将类引入了，大大简化了原先复杂的工作从前要实现继承得多麻烦工厂模式无法解决对象识别，构造函数模式内存浪费，原型模式私有方法还要结合构造模式定义实例实现类的继承，我要用到继承类可以重写父类的方法

虽然现在还需要借助babel的力量但未来一定是属于ES6。（那ES7？-_-|||）

let

在ES6之前javascript只有两种作用域，即全局作用域和函数作用域，let的出现弥补JS了没有块作用域的痛点

let的块作用域

function cat(){
    let mew = "喵"
    let angry = true
    console.log(mew)
    if(angry){
        let mew = "..."  //外层{}成为块作用域
        console.log(mew)
    }
    console.log(mew)
}
cat()
//喵
//...
//喵

让我们和var做一下对比

function cat(){
    var mew = "喵"
    var angry = true
    console.log(mew)
    if(angry){
        var mew = "..."  //外层 mew 被覆盖
        console.log(mew)
    }
    console.log(mew)
}
cat()
//喵
//...
//...

而let由于产生了块作用域似的mew = "..." 只在块作用域内被使用，所以第三次输出mew是"喵"

如上由于var不产生块作用域所以if语句中的var mew = "..."相当于覆盖了函数中第一个mew（即函数作用域中的）所以在次输出mew是"..."

应用

上述例子中，通过let的使用可以避免变量被不必要地覆盖
让我们再看一个栗子：

var a = []
for (var i = 0; i < 5; i++) {
  a[i] = function () {
    console.log(i)
  }
}
a[3]()  // 5

为了输出3，通常会使用闭包来处理

var a = []
for (var i = 0; i < 5; i++) {
  a[i] = (function(i){
      var j = i
      return function () {
          console.log(j)
      }
  })(i)
}
a[3]()  //3

这不仅使代码变得冗长了不少，而且的外层可以访问到i（说明i在使用完并未被清除，内存泄漏）

使用let声明只在块级作用域内有效

var a = []
for (let i = 0; i < 5; i++) {
  a[i] = function () {
    console.log(i)
  }
}
a[3]()  // 3

一些需要注意的点 暂时性死区

在var 声明前使用变量，会得到undefined

console.log(abc) //undefined
var abc

但在let 声明前使用变量，会报错

console.log(abc)  //错误
var abc

这是由于在let的作用域中，let申明之前会形成暂时性死区，在变量定义之前，使该变量都是不可用的。

重复声明

在块级作用域中重复声明会报错

{
var color = "black"
let color = "white"
}
//  报错
{
let color = "black"
var color = "white"
}
//  报错
{
let color = "black"
let color = "white"
}
//  报错

箭头函数

箭头函数的使用可以使书写更为简练

计算数组各项平方

let ary = [1,2,3,5]
let res = ary.map(function(item){return item*item}) //[1, 4, 9, 25]

使用箭头函数可以简化书写

let ary = [1,2,3,5]
let res = ary.map((item) => {return item*item}) //[1, 4, 9, 25]

更进一步可以省略括号（多个参数不能省略括号）

let ary = [1,2,3,5]
let res = ary.map(item => {return item*item}) //[1, 4, 9, 25]

函数可以进一步简化成：

let ary = [1,2,3,5]
let res = ary.map(item => item * item )  //[1, 4, 9, 25]

模板字符串

模版字符串是对字符串拼接的改进，以往输出带有变量的语句时，我们采用字符串拼接的方式，而模板字符串可以在字符串中直接使用变量，即简化书写同时也降低出错的风险

let name = "Yoda"
console.log("My name is " + name) //
console.log(`My name is ${name}`) //模板字符串

模板字符串使用反引号 ( ) 来代替普通字符串中的用双引号和单引号；

模板字符串使用包含特定语法(${expression})的占位符；

模板字符串可以不需换行符直接使用换行：

let name = "Yoda"
console.log(`My name is ${name}
what‘s your name`) 
// My name is Yoda
// what‘s your name

可以直接显示计算结果

let a = 1
let b = 2
console.log(`${a} + ${b} = ${ a + b }) 
// 1 + 2 = 3

延展操作符

let cuboid  = [2,3,4]
let cuboidVolume = (a,b,c) => {console.log(a*b*c)}
cuboidVolume(cuboid[0], cuboid[1], cuboid[2])  //24
//延展操作符
cuboidVolume(...cuboid)
// 24

延展操作符可以将数组拆分传作为参数入函数

延展操作符可以用于数组拼接：

let fruit  = ["orange","apple","banana"]
let meat = ["beef"]
let breakfast = [...fruit, ...meat , "bread"]
// ["orange", "apple", "banana", "beef", "bread"]

Classes（类）与继承

总所周知，js的原型链继承向来以难以理解外加坑多著称
（构造函数，原型对象，实例对象它们之间剪不断理还乱的关系，如果再加上继承，prototype和[[prototype]]的指向@_@说多了都是泪啊）
由于JS中没有类的概念，许多初学者都掉坑原型链之中。
ES6将类引入了，大大简化了原先复杂的工作（从前要实现继承得多麻烦：工厂模式无法解决对象识别，构造函数模式内存浪费，原型模式私有方法还要结合构造模式...）

定义

class Person {
    constructor(name,age){
        this.name = name
        this.age = age
    }
    say(){
        console.log(`Hello my name is ${this.name}`)
    }
}
//person 实例
let person = new Person("Yoda",2000)
person.name  //"Yoda"
person.say() //Hello my name is Yoda

实现类的继承，我要用到extend：

class Programmer extends Person{
    constructor(name,age, language){
        super(name,age)
        this.language = language
    }
}
let javaProgrammer = new Programmer("Jack",22,"java")
javaProgrammer.language //"java"

继承类可以重写父类的方法：

class Programmer extends Person{
    constructor(name,age, language){
        super(name,age)
        this.language = language
    }
    say(){
        console.log(`I am a programmer using ${this.language}`)
    }
}
let javaProgrammer = new Programmer("Jack",22,"java")
javaProgrammer.say() //I am a programmer using java

GPU云服务器云服务器入坑篇小入坑入坑到放入坑指北

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

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

JS笔记

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

rottengeek 2019-08-22 13:58 评论0 收藏0
2017-06-23 前端日报

摘要：前端日报精选大前端公共知识梳理这些知识你都掌握了吗以及在项目中的实践深入贯彻闭包思想，全面理解闭包形成过程重温核心概念和基本用法前端学习笔记自定义元素教程阮一峰的网络日志中文译回调是什么鬼掘金译年，一个开发者的好习惯知乎专 2017-06-23 前端日报精选大前端公共知识梳理：这些知识你都掌握了吗？Immutable.js 以及在 react+redux 项目中的实践深入贯彻闭包思...

Vixb 2019-08-20 17:28 评论0 收藏0
流程控制： jQ Deferred 与 ES6 Promise 使用新手向入坑！

摘要：谢谢大大指出的关于中用的不到位的错误，贴上大大推荐的文章中的菜鸟和高阶错误，文章很详细说明了一些使用中的错误和指导。另外更正内容在后面补充。从开始说到异步流程控制，之前用的比较多的是的。 showImg(https://segmentfault.com/img/remote/1460000006771934); 谢谢n͛i͛g͛h͛t͛i͛r͛e͛大大指出的关于Promise中catc...

tomlingtm 2019-08-19 18:16 评论0 收藏0
前端入坑体验与分享

摘要：同源策略同源策略是一种约定，由公司年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到等攻击。一、Vue变化检测背景初始化对象，属性未知；某些事件触发时，对象改变（新增属性），Vue监听不到原因 Vue.js 不能检测到对象属性的添加或删除，因为Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 dat...

hss01248 2019-08-22 18:09 评论0 收藏0
vue入坑笔记（持续更新）

摘要：如果我们能把不同路由对应的组件分割成不同的代码块，只在路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。一、代码分割,让页面按需加载，加快首屏速率 vue.js构建单页应用虽然能通过路由来实现多页面效果，但是实际上打包后所有的代码都只有一个入口文件app.bundle.js,当项目变得十分庞大的时候，app.bun...

tanglijun 2019-08-21 18:28 评论0 收藏0