2021/11/8 前端开发之JavaScript+jQuery入门 第七章ECMAScript6基础

目录

一、声明方式let：

1.块作用域

 2.let不能提升

3.不能重复声明

4.暂时性死区

二、常量声明方式Const

1.只读常量

2.使用说明：

三、解构赋值

1.数值解构赋值

2.字符串解构赋值

3.对象解构赋值

4.函数解构赋值

四、模板字符串

1.加入变量

2.调用函数

五、数组扩展

1.扩展运算符

2. Array.from和 Array.of

3. find 和 findIndex

4.includes

5.fill

六、函数拓展

1.设置默认值

2.箭头函数

七、对象拓展

1.Object.getOwnProertyDescriptor()

2.Object.assign

3.Object.keys、Object.values、Object.entries

八、Class

1.class创建对象

2.使用extends继承class

3.静态方法static

本章总结

---

一、声明方式let：

在ES中引入了新的声明方式let，let类似于var，let区别于其他的声明方式主要在于let，仅在他所作用的代码块中有效。

1.块作用域

let声明的变量会作用于块作用域中，外部无法调用。

for(var i=0;i<5;i++){}
console.log(i)
//输出结果：5
 
for(let i=0;i<5;i++){}
console.log(i)
//输出结果：i is not defined

 2.let不能提升

var声明的变量可以预解析，而let声明的变量不能预解析。

    console.log(a)
    var a = 123
    //输出结果：undefined
    
    console.log(a)
    let a = 123
    //输出结果：a is not defined

3.不能重复声明

var重复声明变量会覆盖之前声明过的变量的值，而let拒绝重复声明变量，使用let重复声明的话即会报错。

var a = 123
var a = 456
console.log(a)
//输出结果：456
 
let a = 123
let a = 456
console.log(a)
//输出结果：Identifier 'a' has already been declared

4.暂时性死区

在块作用域中，let声明的变量即会成为暂时性死区。暂时性死区：外部声明的变量无法在内部使用，内部声明的变量外部亦无法使用。

var a = 123
for(let i=0;i<5;i++){
    let a =456
}
console.log(a)  
//输出结果：123
 
var a = 123
for(let i=0;i<5;i++){
    console.log(a)  
    let a =456
}
输出结果：a is not defined

二、常量声明方式Const

ES中引入了声明方式Const，被Const声明的变量存在栈区的内存地址是不能改变的。数值、字符串、布尔值存在于栈区，所以被const声明后，这些值是无法改变的；对象、数组的内存地址是不能改变的，但内存地址指向的数据是可以改变的。

1.只读常量

const声明为只读常量，改变const声明的简单类型（数值，字符串，布尔值）的变量会报错，改变复合类型（数组，对象）的变量的值则可进行修改，改变符合类型变量的内存地址则会报错。

const a = 123
a = 345
//输出结果：Assignment to constant variable
 
const b = [1,2,3]
b.push(4,5,6)
coosole.log(b)
//输出结果：[1,2,3,4,5,6]
 
const c = [1,2,3]
c = []
//输出结果：Assignment to constant variable

2.使用说明：

(1)不能预解析

console.log(a)
const a = 123
//输出结果：a is not defined

(2)暂时性死区 

for(let i=0;i<5;i++){
    const a = 123
}
console.log(a)
//输出结果：a is not defined

(3)不可重复声明

const a = 123
const a = 456
//输出结果：Identifier 'a' has already been declared

三、解构赋值

在ES6中，添加了解构赋值，解构赋值语法是一个Javascript表达式,这使得可以将值从数组或属性从对象提取到不同的变量中。

1.数值解构赋值

var [a,b,c] = [1,2,3]
console.log(a)
console.log(b)
console.log(c)
//输出结果：
1
2
3

2.字符串解构赋值

var [a,b,c,d,e] = "Hello"
console.log(a)
console.log(b)
console.log(c)
console.log(d)
console.log(e)
//输出结果：
H
e
l
l
o

3.对象解构赋值

var {first,second} = {first:"Hello",second:"World"}
console.log(first)
console.log(second)
//输出结果：
Hello
World

4.函数解构赋值

function f(x,y){
    console.log( x + y)
}
f(1，2)
//输出结果：3

四、模板字符串

模板字符串使用反引号(` `)来代替普通字符串的单引号和双引号。模板字符串中包含特定语法(${})的占位符。占位符中的表达式和周围的文本组成了模板字符串。

1.加入变量

模板字符串加入变量需要将变量嵌套在${}中。

var name = "小王"
var age = 18
console.log(`你好，我是${name},今年${age}岁。`)
//输出结果：你好，我是小王,今年18岁。

在模板字符串中可以对调用的函数进行运算。

var a = 1
var b = 2
console.log(`1+2=${a+b}`)
输出结果：1+2=3

2.调用函数

在模板字符串中，${}可以调用函数。

function f(){
return "Hello World"
}
console.log(`${f()}`)
//输出结果：Hello World

五、数组扩展

1.扩展运算符

(1)合并数组

扩展运算符可以实现数组的合并，如下：

var a = [1,2,3]
var b = [...a,4,5,6]
console.log(b)
//输出结果：[1,2,3,4,5,6]

(2)复制数组

扩展运算符可以复制数组，如下：

var a = [1,2,3]
var b = [...a]
console.log(b)
//输出结果：[1,2,3]

(3)解构赋值

var [a,b,c] = [1,2,[3,4]]
console.log(a,b,c)
//输出结果：1 2 [3,4]

(4)将类数组转换为数组

扩展字符串是将类数组转换为数组的方法之一。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    var lis = document.getElementsByTagName("li")
    var arr = [...lis]
    console.log(Array.isArray(arr))
</script>//
//输出结果：ture

(5)将字符串转换为数组

var a = "hello"
var b = [...a]
console.log(b)
//输出结果：["h", "e", "l", "l", "o"]

2. Array.from和 Array.of

(1)Array.from

作用：将类数组转化为真正的数组。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    var lis = document.getElementsByTagName("li")
    var arr = Array.from(lis)
    console.log(Array.isArray(arr))
</script>
//输出结果：ture

(2)Array.of

作用：将一组值转化为数组

Array.of(1,2,3)
//输出结果：[1,2,3]

3. find 和 findIndex

(1)find

作用：寻找数组中的是否存在符合要求的值,存在则返回该值，如果不存在符合要求的值则返回undefined。

var a = [1,2,3,4]
console.log(a.find((index)=>index > 2))
//输出结果：3

(2)findIndex

作用：寻找数组中是否寻在符合要求的值，存在则返回该值所在的位置，不存在的话则返回-1。

var a = [1,2,3,4]
console.log(a.findIndex((index)=>index > 2))
//输出结果：2

4.includes

判断元素是否在数组中存在，存在返回ture，不存在则返回false。

var a = [1,2,3]
a.includes(1)
//得到结果：ture
a.includes(4)
//得到结果：false

5.fill

作用：给数组填充某个指定的值，若已存在值则会被覆盖。 fill可以有第二参数和第三参数，表示填充的起点和终点（起点为闭区间，终点为开区间）。

var a = [1,2,3]
console.log(a.fill("*",0,2))
//输出结果：["*","*",2]

六、函数拓展

1.设置默认值

在ES6之前，函数的参数不能设默认值，在ES6中进行了更改，我们可以在函数参数中为函数设定默认值。

function f(x,y=2){
    console.log(x,y)
}
f(2)
//输出结果：2 2

2.箭头函数

在ES6中，允许使用箭头(=>)构造函数。如果函数只有一行指令，在箭头函数中即可省略大括号。

var f = function(a,b){return a+b}
 
var f = (a,b) => a+b
//上面两个函数相等，箭头函数即可实现上述函数的功能

七、对象拓展

1.Object.getOwnProertyDescriptor()

获取对象中的自身属性。

var a = 1;
console.log(Object.getOwnPropertyDescriptor(window,"a"))
//输出结果：{value: 1, writable: true, enumerable: true, configurable: false}

2.Object.assign

Object.assign就去用于对象的合并，将源对象的所有的可枚举属性，复制到目标对象。

var obj1 = {a:"hello"}
var obj2 = {b:"world"}
console.log(Object.assign(obj1,obj2))
//输出结果：{a: "hello", b: "world"}

3.Object.keys、Object.values、Object.entries

(1)Object.keys

Object.keys返回一个数组，包括参与对象键值对中的键。

var obj = {a:"hello",b:"world"}
console.log(Object.keys(obj))
输出结果：["a", "b"]

(2)Object.values

Object.values返回一个数组，包括参与对象键值对中的值。

var obj = {a:"hello",b:"world"}
console.log(Object.values(obj))
输出结果：["hello", "world"]

(3)Object.entries

Object.entries返回一个数组，包括参与对象键值对数组。

var obj = {a:"hello",b:"world"}
console.log(Object.entries(obj))
输出结果：[["a", "hello"]  , ["b", "world"]]

八、Class

类实际上是个“特殊的函数”，就像你能够定义的函数表达式和函数声明一样，类语法有两个组成部分：类表达式和类声明。

1.class创建对象

格式：

class 类名{
    constructor(参数){
        this.属性 = 参数；
    }
    mothod(){}
}

使用class创建一个类：

class NBAPlayer{
    constructor(name,age,stature){
        this.name = name;
        this.age = age;
        this.stature = stature;
    }
    say(){
        console.log(`我是${this.name}，今年${this.age}岁，身高${this.stature}cm。`)
    }
}
var curry = new NBAPlayer("curry","30",191)
console.log(curry.say())
//输出结果：我是curry，今年30岁，身高191cm。

2.使用extends继承class

格式：

class 子类 extends 父类{
    construtor(参数){
        super(参数)
        this.属性 = 值
    }
}

使用extends实现继承

class NBAPlayer{
    constructor(name,age,stature){
        this.name = name;
        this.age = age;
        this.stature = stature;
    }
}
class MVP extends NBAPlayer{
    constructor(name,age,stature,year){
        super(name,age,stature)
        this.year = year
    }
    say(){
         console.log(`我是${this.name}，今年${this.age}岁，身高${this.stature}cm，是${this.year}年的MVP。`)
    }
}
var curry = new MVP("curry",30,191,2015)
console.log(curry.say())
//输出结果：我是curry，今年30岁，身高191cm，是2015年的MVP。

3.静态方法static

可直接通过类名来访问的方法就叫做静态方法，我们可以通过static来为类创建静态方法。

class NBAPlayer{
    constructor(name,age,stature){
        this.name = name;
        this.age = age;
        this.stature = stature;
    }
    static jump(){
        console.log("jump:90cm")
    }
}
NBAPlayer.jump()
//输出结果：jump:90cm

本章总结

1. ES6新增了let命令与const命令来声明变量和常量。
2. rest（...）参数用于获取函数的多余参数。类似Java的可变长参数。
3. 函数name属性可以返回该函数的函数名。
4. 箭头函数解决了匿名函数中this对象的指向问题。

练习小作业

1. 弹出按钮下标
2. 在控制台输出个人信息
3. 在控制台输出个人信息及朋友姓名
4. 新增学员和显示学员信息