ES6基本

一、块级作用域

1. var

起首看看ES5中得变量声明体式格局

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

以上代码等同于

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

以上可知 :

  1. 在块内部定义变量 变量提拔,到函数最顶部
  2. 经由过程var声明的变量,不论在那边声明,均为全局作用域

2.let 和 const

再来看看ES6中的letconst

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 = "<div> \
                        <span>hello world</span> \
                    </div>"
// ES6
    let template2 = `<div> 
                        <span>hello world</span>
                    </div>`

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://segmentfault.com/a/1190000018887345
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞