文章目录
前言
ES6的特点有以下几点:(相比于ES5.1)
(1)解决原有语法上的一些问题或者缺陷
(2)对原有语法进行增强
(3)全新的对象、全新的方法、全新的功能
(4)全新的数据类型和数据结构
一、声明变量的关键字使用
1.let
块级作用域:指的是用{}包裹起来的范围。块作用域内用var关键字定义的变量能够在块以外被调用,这样是不安全的,因此使用let关键字定义变量来替代var。
以下两个例子都是块级作用域:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//用let替代var,那么在块级作用域外就不能够被找到
if (true) {
var dd = "hello";
let gg = "hahaha";
}
console.log(dd);
console.log(gg);
</script>
</body>
</html>
2.const
const:和let的使用方法基本上相同,但是const是只读的,不能对他赋的值进行更改,所以必须要赋初始值。可以改内部内存中的内容,不可以改指针指向。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//const 必须赋初始值,不能进行更改(只读)
// const name = "zs";
// name = "lisi";
// console.log(name);
const na = {name: "zs",age: 18};
na.age = 20;
console.log(na);
</script>
</body>
</html>
二、解构
1.数组解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// const arr = [100,200,300];
// const [foo,bar,baz] = arr;
// console.log(arr);
// const arr = [100,200,300];
// const [ , ,baz] = arr;
// console.log(baz);
// const arr = [100,200,300];
// const [foo,...re] = arr;
// console.log(re);
const arr = [100,200,300];
const [foo,bar,baz = 456,more = 123] = arr;
console.log(baz)
console.log(more)
</script>
</body>
</html>
2.对象解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//对象解构
// const obj = {name: "zs",age: 17}
// const {name} = obj
// console.log(name)
const obj = {name: "zs",age: 17}
const name = "tom"
const {name: newName} = obj
console.log(name)
console.log(newName)
</script>
</body>
</html>
三、字符串
1.模板字符串
在模板字符串里面可以直接进行换行,可以调用变量通过${}方式,可以执行运算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//模板字符串(能够直接换行)
var str = `my name
is gd`
console.log(str)
//模板字符串里面可以调用变量,可以执行运算
var name = "gg";
var str1 = `${name},dd,${3 + 4}`
console.log(str1)
</script>
</body>
</html>
2.模板字符串标签函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//模板字符串标签函数
const name = "zs"
const gender = true
function fn(strings,name,gender) {
const sex = gender ? "man" : "woman"
return strings[0] + name + strings[1] + sex + strings[1]
}
const str = fn`${name} is a ${gender}`
console.log(str)
</script>
</body>
</html>
3.字符串扩展方法
includes():包含
startWith():开头字符
endWith():结束字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const str = `my name is gd`
console.log(str.startsWith("my"))
console.log(str.includes("name"))
console.log(str.endsWith("gd"))
</script>
</body>
</html>
4.参数默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//参数默认值
//当有多个参数时,默认值参数放到最后
function fn(enable = true) {
console.log(enable)
}
fn(false)
</script>
</body>
</html>
5.剩余操作符
…arg:表示从当前位置到最后一位是参数的数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//剩余操作符
function fn(n,...arg) {
console.log(arg)
}
fn(1,2,3,4,5)
</script>
</body>
</html>
6.展开操作符
…arr:可以将数组里面的每一项展开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr = ["foo","bar","baz"]
console.log(...arr)
</script>
</body>
</html>
四、函数表达式的定义方式
1.箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// const plus = (a,b) => {
// return a + b
// }
// console.log(plus(3,4))
//输出奇数的箭头函数
const arr =[1,2,3,4,5,6,7,8,9]
const arr1 = arr.filter(i => i % 2)
console.log(arr1)
</script>
</body>
</html>
优点:代码简短,读起来清晰易读
2.箭头函数this
箭头函数本身没有this,查找this时会向外层查找,使用外层的this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//this
const obj = {
name: "zs",
sayHi: function () {
setTimeout( () => {
console.log(`hello,my name is ${this.name}`)
},1000)
}
}
obj.sayHi()
</script>
</body>
</html>
五、对象
1.对象字面量的增强
对象中的函数方法可以直接书写,可以使用[]的方式动态添加属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//对象字面量的增强
const age = "age"
const obj = {
name: "zs",
sayHi () {
console.log("hi")
},
//动态向对象中添加
[age]: 18
}
console.log(obj)
</script>
</body>
</html>
2.Object.assgin方法
可以将源对象里面的属性和方法复制给新对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// const source1 = {
// a: 123,
// b: 456
// }
// const source2 = {
// a:345,
// d:8910
// }
// const target = {
// a: 678,
// c: 789
// }
// const result = Object.assign(target,source1,source2)
// console.log(target)
function Block(options) {
Object.assign(this,options)
}
const block1 = new Block({width:20,height:20,x:50,y:50})
console.log(block1)
</script>
</body>
</html>
3.Object.is方法
用于判断两个数字是否相等,在实际编程开发中仍然建议使用===来判断是否相等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//判断是否相等
console.log(
// 0 == false
// 0 === false
// +0 === -0
// NaN === NaN
Object.is(+0,-0),
Object.is(NaN,NaN)
)
</script>
</body>
</html>
4.class类
这种方式定义函数,使代码更加简洁易读工整,易于理解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
class Person {
constructor (name,age) {
this.name = name
this.age = age
}
sayHi () {
console.log(`hi,my name is ${this.name}`)
}
}
const p1 = new Person('zs',18)
p1.sayHi()
</script>
</body>
</html>
5.static静态方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
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)
p1.sayHi()
</script>
</body>
</html>
6.extends继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//父类
class Person {
constructor (name,age) {
this.name = name
this.age = age
}
sayHi () {
console.log(`hi,my name is ${this.name}`)
}
}
//子类继承父类
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",20,1814010512)
s1.hello()
</script>
</body>
</html>
六、其他
1.set数据结构
与数组类似,但set集合中的所有元素是不可重复的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//set集合
const s = new Set()
//给集合中添加,添加的重复项会自动过滤
s.add(1).add(2).add(3).add(4).add(2)
// console.log(s)
//遍历输出集合中的每一项
// s.forEach(i => console.log(i))
// for (let i of s) {
// console.log(i)
// }
//集合的长度
console.log(s.size)
//集合是否包含某项
console.log(s.has(1))
//清除某一项
console.log(s.delete(2))
console.log(s)
//清除集合中的所有项
s.clear()
console.log(s)
//集合常常应用于数组去重
const arr = [1,2,3,1,2]
// console.log(new Set(arr))
</script>
</body>
</html>
2.map数据结构
map能以任意类型当做键。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const map = new Map()
const a = {a: 1}
map.set(a,100)
console.log(map.get(a))
//has包含
//delete删除
//clear 清空
//遍历map
map.forEach((value,key) => console.log(key,value))
</script>
</body>
</html>
3.symbol数据类型
最主要的作用就是为对象添加独一无二的属性标识符,如果一个对象中的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//symbol数据类型 独一无二的值
const s = {}
s[Symbol()] = 123
s[Symbol()] = 456
console.log(s)
console.log(s[Symbol()])
//验证两个symbol的值是否是独一无二的
console.log(Symbol() === Symbol())
</script>
</body>
</html>
4.for…of遍历
可以遍历数组,set集合,map,但是不能遍历对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//遍历数组
const arr = [100,200,300,400]
for (const item of arr) {
console.log(item)
}
//遍历set
const s = new Set()
s.add(1).add(2)
for (const item of s) {
console.log(item)
}
//遍历map
const m = new Map()
m.set("a",1)
m.set("b",2)
for (const item of m) {
console.log(item)
}
//但是不能遍历对象
// const obj = {
// name: "zs",
// age: 18
// }
// for (const item of obj) {
// console.log(item)
// }
</script>
</body>
</html>
总结
ES6的新特性就学习到这里啦,ES2016也增加了两个新特性,一个是数组的includes方法,另一个是**运算符,用来计算几次幂。