ES6基础

ES6基础

1. ES6概述

1. 什么是ES6

ES:是ECMA缩写，是欧洲计算机是欧洲计算机制造商协会联盟组的缩写，这个组织结合国际标准化组织制定了大量的计算机行业的规范和标准，被所有的计算机制造商和计算机周边遵守！

1. 变量声明扩展

（1）.原生JS

原生Javascript中声明变量：

//直接使用变量（不推荐）

name = “damu”

//标准语法

//存在变量 预解析

var age = 22

 (2).ES6

鉴于原生JS中var声明变量的方式，对变量的行为不可控，导致代码的运行结果难以预测，ES6规范中扩展了两个用来声明操作数的关键字

let：声明变量，存在块级作用域（大括号范围也可以是一个作用域），没有变量预解析，不能重复声明等等

const：声明变量，常量一旦声明不能改动

总结：

ES6中针对变量使用,扩展提供了两个关键字,let,const,是对原生JS语法补充,并不表示原来的var关键字过时了.

如果一个变量需要预解析操作,建议使用var 声明

如果一个变量不需要解析器,为了避免全局污染可以使用let声明

如果一个变量一旦声明不希望被修改,可以使用const声明(使用最多)

3.运算符扩展

ES6针对原来的运算符,在项目中使用场景,扩展了两个常用的运算符

spread 延展运算符,展开运算符

rest 剩余参数运算符

1. spread延展运算符

基本语法:

//语法:…变量,将变量中的数组/对象数据进行展开

//经常用于变量中数据的复制

//1.数组展开操作

Let arr = [1,2,3,4,5,8,6]

Console.log(arr)

//展开运算符

Console.log(…arr)

//复制数组,先展开数组中的数据,然后使用方括号包裹成新数组

Let arr2 = […arr]

Arr2.push(“新数据”)

Console.log(arr)

Console.log(arr2)

//2.对象展开操作

Let person = {name:”tom”,age:22}

Console.log(person)

Let person2 = {…person}

Person.gender = “男”

Console.log(person)

Console.log(person2)

Console.log(person === person2)

1. rest剩余运算符

经常用在函数的形式参数中(参数的最后一个位置),用于接受剩余的所有参数

原生JS，给函数提供了一个特殊变量arguments，可以接受函数接受的所有参数.

4.数据类型扩展

ES6中为了让数据的封装更加完善,提供了一种新的基本类型:Symbol,用来表示唯一的数据,在项目中经常用来封装只读的属性或者私有属性

基本语法:创建匿名Symbol对象,创建具名的Symbol对象

//创建一个Symbol对象

Var a1 = Symbol()

//语义上提示,可以给一个Symbol起个名字

//”name”名称没有实际意义,语义上的一个名称,提高代码的可读性

Var a2 = Symbol(“name”)

5.数组扩展

ES6给数组的操作提供了两个特殊的函数,补充原生JS中数组操作的复杂性

Array.of(): 创建数组对象

Array.from(): 将类数组对象转换成数组

6.字符串扩展

字符串String是项目中使用最多的一种数据结构

1. 模板字符串

字符串的拼接是字符串使用最多的一种操作

基本语法:

//声明变量

Let name = “他昂木”

Let age = 20

Let gender = “男”

//原始拼接

Console.log(“姓名: ” + name + “;年龄:” + age + “;性别:” + gender)

//ES6提供了一种 模板字符串语法

Console.log(`姓名:${name},年龄:${age},性别:${gender}`)

 

1. 字符串函数

ES6针对字符串的函数进行了一定的扩展

startsWith(s):判断字符串是否以指定字符串开头

endsWith(s):判断字符串是否以指定字符串结束

padStart(length,fill):指定字符串输出的长度,不够的位置前面补fill字符

padEnd(length,fill):指定字符串输出长度,不够的位置后面补fill字符

7.对象扩展

(1)属性函数简写

//1.属性函数简写

//原生对象

Let name = “tm”

Let tom = {

Name:name,

Age:22,

Paly:function() {
console.log(`${this.name} 在游戏中…`)

}

}

//ES6简写语法

Let tom2 = {

Name:name,

Age:22,

Study() {

Console.log(`${this.name}编程中…`)

}

}

(2)支持属性运算符

//2.属性运算符

Let jerry = {

Name:”杰瑞”

// 属性运算符：和数组语法类似，主要出现在对象的属性名称上进行使用

// 作用1：在一定程度上对对象的属性名称进行了保护

// 作用2：属性名称，可以动态变化

let jerry2 = {

["n" + "ame"]: "杰瑞" // ES6提供的属性运算符，属性名称支持表达式运算

 // name: "杰瑞"

}

1. Object扩展

ES6 针对对象的操作，提供了三个额外的函数：

Object.assign(tgt, val1, val2 ,...) ：对象合并，将多个对象合并成一个对象

Object.keys() ：获取对象中的所有属性

Object.values() ：获取对象中的所有值

1. JSON扩展

JSON 字面量对象， ES6 提供了两个非常重要的函数

JSON.stringify(jsonObj) ：将一个 json对象转换成 json格式字符串

JSON.parse(jsonStr) ：将一个 json格式字符串转换成 json对象

8.解构赋值

ES6 针对数组中或者对象中的数据，提取数据并赋值给变量的一种新语法如从数组中获取一个数据：原始语法和新语法对比

var arr = ["詹姆斯·高斯林", "李纳斯·托瓦兹", "肯·汤普森", "丹尼斯·里奇"]

// 获取其中第一个、第二个数据

var n1 = arr[0]

var n2 = arr[1]

console.log(n1, n2)

// 解构获取第一个、第二个数据

var [x1, x2] = arr

console.log(x1, x2)

1. 什么是解构赋值

ES6 根据数组的结构、对象的结构，按照结构的形式进行解析赋值的方式，称为解构赋值

// 数组

var a = [1, 2, 3]

// 解析结构：[数据1, 数据2, 数据3]

// 根据结构，进行变量赋值

var [x1, x2, x3] = a

// x1=1 x2=2 x3=3

1. 数组解构赋值

// 1、数组解构

let brr = [1, 2, 3, 4, 5]

// 完全解构：将数组中的数据全部提取出来

var [a1, a2, a3, a4, a5] = brr

console.log(a1, a2, a3, a4, a5)

// 不完全解构：按照结构顺序提取数据[重点]

var [b1, b2] = brr

console.log(b1, b2) // 提取第一个和第二个数据

var [, , b3, b4] = brr // 提取第三个和第四个数据

console.log(b3, b4)

// 解构失败：超出结构的数据，下面的c6解构失败的数据

var [c1, c2, c3, c4, c5, c6] = brr

console.log(c1, c2, c3, c4, c5, c6)

// 解构默认值：如果某个数据解构失败，可以使用默认数据

var [d1, d2, d3, d4, d5 = "默认值", d6 = "默认值"] = brr

console.log(d1, d2, d3, d4, d5, d6)

1. 对象的解构赋值

// 2、对象数据解构

let tom = { name: "汤姆", age: 20, gender: "男", email:

"tom@163.com" }

// 完全解构：根据属性名称，将所有属性进行结构

var { name, age, gender, email } = tom

console.log(name, age, gender, email)

// 不完全结构

var { name, email } = tom

console.log(name, email)

// 解构失败: 对象没有phone属性，所以解构失败得到undefined

var { name, age, phone } = tom

console.log(name, age, phone)

// 解构默认值

var { name, age, phone = "16699990000" } = tom

console.log(name, age, phone)

// 解构重命名

var { name: n, age: a } = tom

console.log(n, a) // 不能再使用name,age了

// console.log(name, age)