ES6基础

BigTomato 发布于2019-08-23 16:57 / 791人阅读

一、块级作用域 1. var

首先看看ES5中得变量声明方式

if (true) {
    var a = 2
}
console.log(a) // 2

以上代码等同于

var a
if (true) {
    a = 2
}
console.log(a)

以上可知：

在块内部定义变量变量提升，到函数最顶部

通过var声明的变量，无论在何处声明，均为全局作用域

2.let 和 const

再来看看ES6中的let和const

let

if (true) {
    let b = 2
}
console.log(b) // b is not defined

此时在{} 外部访问b 将会报错，因为 let 的作用域仅为 { } 的内部，及块级作用域

const

if (true) {
    const c = 2
}
console.log(c) // c is not defined

从上面可知 const 也是也仅为块级作用域const的作用域与let作用域相同：只在声明所在的块级作用域内有效

让我们看看const 更多的特性：

const 表示常量：

const d = 2
d = 3 // Assignment to constant variable.

此时，当 d 为 基本数据类型的时候，改变其值，将会报错！！！

但是它的常量仅仅表示的是地址常量对象的成员可以改变值

看看下面的例子：

const people = {name: "张三", age: 23}
people.age = 25
console.log(people) // {name: "张三", age: 25}

看看此时 people已经被改变了

why?

对象是复杂的数据类型 它的地址保存在 栈里面， 值保存在堆里面cosnt仅仅是保证这个地址不改变，至于地址对应的数据，是可以进行改变的
基本类型值在内存中占据固定大小的空间 因此被保存在栈内存中。比如 const a = 1 ; 这时候其直接保存在栈里面

二、字符串 1. 字符串拼接 ES5中字符串拼接

// ES5 
var name = "Hunter"
console.log("hello " + name)

ES6中字符串拼接

// ES6
let name = "Hunter"
console.log(`hello ${name}`) // hello Hunter

注意：用 ${}来拼接字符串，注意此时要使用 ` `（反单引号）; 如下所示：单引号将无法将其转义

console.log("hello ${name}") // hello ${name}

ES6的字符串换行

// ES5
    var template = " 
                        hello world 
                    "
// ES6
    let template2 = ` 
                        hello world
                    
`

ES5中需要用反斜杠来进行多行字符串拼接，ES6直接使用  ` `(反单引号）

2. 字符串方法 padStart() 和 padEnd()

ES6 引入了字符串补全长度的功能，如果某个字符串不够指定长度，会在头部或者尾部补全。

padStart() 用于头部补全；

padEnd() 用于尾部补全。

如下一个例子：例子来源

 setInterval(() => {
        const now = new Date()
        const hours = now.getHours().toString()
        const minutes = now.getMinutes().toString()
        const seconds = now.getSeconds().toString()
        console.log(`${hours.padStart(2, 0)}:${minutes.padStart(2, 0)}:${seconds.padStart(2, 0)}`)
    }, 1000)

先不管箭头函数

看看其中的hours.padStart(2,0) , 表示当小时不够两位数时，在前面补0，如8，补充成 08

后面遇到更多的字符串函数会补充

三、变量的解构赋值

// ES5
let a = 1;
let b = 2;
let c = 3;

1.ES6数组解构赋值

let [a,b,c] = [1,2,3];
console.log(`${a} ${b} ${c}`) // 1 2 3

默认值

let [d = 2, e] = [undefined, 3];
console.log(`${d} ${e}`) // 2 3

当赋值为undefined时取默认值 当赋值为其他的有效值或者null时 取所赋值的值

let [f = 2, g = 3] = [null, 4];
console.log(`${f} ${g}`) // null 4

2.对象解构赋值

数组按照顺序解构 对象按照key值进行解构

let {foo, bar} = {foo: "hi", bar: "hello"} //可以调换位置
console.log(`${foo} ${bar}`) *// hi hello

注意：先定义再解构需要在解构语句那块加上圆括号

let soso;
// { soso } = { soso: "hi"}; // 错误
({ soso } = { soso: "hi"}); //得加上圆括号 ()
console.log(soso) // hi

3.字符串的解构赋值

const [h,i,j,k,l] = "hello";
console.log(`${h} ${i} ${j} ${k} ${l}`)

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

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

前端基础进阶（十四）：es6常用基础合集

摘要：在继承的构造函数中，我们必须如上面的例子那么调用一次方法，它表示构造函数的继承，与中利用继承构造函数是一样的功能。 showImg(https://segmentfault.com/img/remote/1460000009078532); 在实际开发中，ES6已经非常普及了。掌握ES6的知识变成了一种必须。尽管我们在使用时仍然需要经过babel编译。 ES6彻底改变了前端的编码风格，...

Ryan_Li 2019-08-21 18:31 评论0 收藏0
前端基础进阶（十五）：详解 ES6 Modules

摘要：下载地址安装一个好用的命令行工具在环境下，系统默认的非常难用，所以我个人比较推荐大家使用或者。下载地址安装在命令行工具中使用查看版本的方式确保与都安装好之后，我们就可以安装了。前端基础进阶系列目录 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 对于新人朋友来说，想要自己去搞定一个E...

Lowky 2019-08-21 18:31 评论0 收藏0
ES6零基础教学_解析彩票项目-学习笔记（一）

摘要：彩票项目实战学习记录一完整走了一遍课程，觉得还不错。支持正版人人有责零基础教学解析彩票项目下面是项目课程的目录路线一个项目分为三部分业务逻辑，自动构建系统，模拟数据和真实数据接口处理。彩票项目实战学习记录（一）完整走了一遍课程，觉得还不错。总结: es6的知识点说得还算清楚，主要是为了了解和使用，不是深究，所以浅尝即止即可，所以觉得还不错。完整还原了项目开发的代码设计和开发过...

blastz 2019-08-22 13:52 评论0 收藏0
es6基础0x010：增强的对象字面量

摘要：概述在中，对象字面量的语法被增强了更短的属性声明如果属性的属性名和属性值引用的变量名一致，可以直接省略之前更短的函数声明如果属性的属性名和属性值函数的函数名一致或者属性值函数没有函数名，可以省略关键字和属性名之前可动态计算的属性名属性名可以 0x000 概述在es6中，对象字面量的语法被增强了 0x001 更短的属性声明如果属性的属性名和属性值引用的变量名一致，可以直接省略 let...

fox_soyoung 2019-08-23 13:09 评论0 收藏0
【前端】ES6入门基础知识

摘要：关于的入门了解新增模板字符串为提供了简单的字符串插值功能箭头函数操作符左边为输入的参数，而右边则是进行的操作以及返回的值。将对象纳入规范，提供了原生的对象。增加了和命令，用来声明变量。关于ES6的入门了解新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）、for-o...

philadelphia 2019-08-21 17:21 评论0 收藏0