ECMAScript 概述
ECMAScript 只是提供了最基本的语法
Javascript 在语言基础上进行了扩展
发展历程.png
ES2015 概述
很多开发者喜欢用ES6来泛指所有的新标准
- 解决原有语法上的一些问题或者缺陷
- 对原有语法进行增强
- 全新的对象、全新的方法、全新的功能
- 全新的数据类型和数据结构
准备工作
任何一个支持ES2015的环境都可以
在 VScode软件中使用 Chrome 调试
- Debugger for Chrome
- Live Server
- Browser Preview
let和块级作用域
作用域 - 某个成员能够起作用的范围
在 ES2015 之前，ES只有两种作用域 全局作用域和函数作用域
块，就是{}包裹起来的一个范围
非常适合设置 在 for 循环中的循环变量
let不会进行变量声明提升
const
特点：在 let 的基础上增加来一个【只读】效果
声明的时候必须同时赋初值
最佳实践：不用 var，主用 const，配合 let
数组的结构
//以前
const arr = [100, 200, 300]
const foo = arr[0]
const bar = arr[1]
const baz = arr[2]
console.log(foo, bar, baz)
//现在
const arr = [100, 200, 300]
const [foo, bar, baz] = arr
console.log(foo, bar, baz)
const arr = [100, 200, 300]
const [, , baz] = arr
console.log(baz)
const arr = [100, 200, 300]
const [foo,...rest] = arr
console.log(rest)
const path = "foo/bar/baz"
const [,,a] = path.split("/")
console.log(a)
对象的解构
const obj = { name: 'zs', age: 18}
const name = "tom"
const {name: newName = "jack"} = obj
console.log(name)
console.log(newName)
const {log} = console
log("hhh")
模版字符串
const str = `this is
a \`string`
console.log(str)
// 插值
const name = "tom"
const str = `hey, ${name}`
console.log(str)
模版字符串标签函数
const name = "zs"
const gender = true
function myTagFunc(strings,name,gender){
// console.log(strings,name,gender)
const sex = gender ? "man" : "woman"
return strings[0] + name + strings[1] + sex + strings[2]
}
const str = myTagFunc`hi, ${name} is a ${gender}`
console.log(str)
字符串的扩展方法
- includes()
- startsWith()
- endsWith()
const msg = 'Error: foo is not define'
console.log(msg.startsWith('Error'))
console.log(msg.endsWith('.'))
console.log(msg.includes(foo))
参数默认值
function foo(enable = true) {
}
foo()
剩余操作符
function fun(...args) {
console.log(args)
}
fun(1,2,3,4)
展开操作符
const arr = ['foo', 'bar', 'baz']
console.log(...arr)
剪头函数的this
内部不会改变this的指向
Object.assign 方法
将多个源对象中的属性复制到一个目标中
const sourse1 = {
a: 123,
b: 456
}
const target = {
a: 456,
c: 789
}
const result = Object.assign(target,sourse1)
// target:目标对象 sourse: 源对象
可以利用他复制对象
Object.is 方法
解决之前 === 不太合理的地方 但是不太使用 还是建议使用 === 运算符
let a = Object.is(+0,-0)
let b = Object.is(NaN,NaN)
console.log(a)
console.log(b)
class 类
class Person {
constructor (name, age) {
this.name = name;
this.age = age;
}
sayHi () {
console.log(`hi,my name is ${this.name}`)
}
}
const p1 = new Person("nick",18)
console.log(p1)
p1.sayHi()
静态方法 static
class Person {
constructor (name, age) {
this.name = name;
this.age = age;
}
sayHi () {
console.log(`hi,my name is ${this.name}`)
}
static create (name,age) {
return new Person(name,age)
}
}
const p1 = Person.create("zs",19)
image.png
image.png
类的继承
class Student extends Person{
constructor (name,age,number) {
super(name,age);
this.number = number
}
hello () {
super.sayHi()
console.log(`学号是 ${this.number}`)
}
}
const s1 = new Student("tom",18,101)
s1.hello();
Set 数据结构
const s = new Set()
s.add(1).add(2).add(3).add(4).add(2)
console.log(s)
// es5
s.forEach(i => console.log(i))
// es6
for(let i of s){
console.log(i)
}
console.log(s.size)
console.log(s.has(4))
console.log(s.delete(3))
s.clear() //清除集合中所有项
// 应用 去重
const arr = [1.3,4,6,2,4,7,8]
const b = Array.from(new Set(arr))
// const b = [...new Set(arr)]
console.log(b)
Map
// Map
const map = new Map()
const a = {a : 1}
map.set(a,100)
console.log(map)
console.log(map.get(a))
// has delete clear
// 遍历
map.forEach((value,key) => {
console.log(key,value)
})
Symbol 数据类型
// Symbol
// Symbol 符号，作用就是表示一个独一无二的值
const s = Symbol()
console.log(s)
console.log(typeof s)
// 添加
const obj = {
[Symbol()]:789
}
obj[Symbol()] = 123
obj[Symbol()] = 456
console.log(obj)
console.log(obj[Symbol()]) // undefined 外部无法访问
for of 遍历
作为遍历所有数据结构的统一方式
const arr = [100,200,300,400]
for (const item of arr){
console.log(item)
}
arr.forEach(item => {
console.log(item)
})
for of 内部可以用break打断
for (const item of arr){
console.log(item)
if(item >= 200){
break
}
}
ES2016
const arr = [1,true,NaN,23,'aaa']
// includes
console.log(arr.includes(NaN))
// 指数运算符 **
console.log(2 ** 10)
