高阶-ES6语法糖
# 1.ES6概念
CMAScript 6.0（以下简称 ES6）是JavaScript语言的下一代标准
# 2.解构赋值
# 2.1 数组的解构赋值
//数组解构赋值
let arr = [100,'小明',200];
let [a,b,c] = arr;
let [,,m] = arr;
let [x,y] = [100,200];
1
2
3
4
5
6
2
3
4
5
6
# 2.2 对象的解构赋值
//对象解构赋值
//将对象中的某个属性 通过变量提取出来
// 按照对象属性名进行匹配
let user = {name:'张麻子',age:20};
let {age,name} = user;
console.log( name);
console.log(age);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 2.3 函数的解构赋值
//函数解构赋值
function sum([a,b]){
return a+b;
}
console.log( sum([100,200]));
//
function userCreate({name,like='打麻将'}){
return '我是：'+name+'我的爱好：'+like
}
console.log( userCreate({name:'张麻子;',age:20,sex:'男'}));
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 2.4 解构赋值案例
- 请求json文件并拿到json数据
$http.get('data.json',({id,status,data} )=>{
console.log(id);
console.log(status);
console.log(data);
})
1
2
3
4
5
2
3
4
5
# 3.展开运算符 ...
作用：将字符串 数组 对象 进行展开
// 1.展开字符串
let str = 'xxczxcxc';
console.log(...str);
// 字符串转为数组
// let strArr = str.split('');
let strArr = [...str];
console.log(strArr);
//2.展开数组
let arr = ['xxx','aaaa','333'];
let arr1 = ['张麻子','张三'];
console.log(...arr);
//数组合并【浅拷贝】
// let arr2 = arr.concat(arr1);
let arr2 = [...arr1,...arr];
console.log(arr2);
//将伪数组转换为真数组
function sum(){
let argArr = [...arguments];
console.log(argArr);
}
sum(1,5,69,8,9,5,5,5,5);
//将对象进行展开
let user={name:'张三',age:'20'};
let info = {sex:'男',like:'打游戏'};
//对象合并【浅拷贝】
// let obj = Object.assign({},user,info);
let obj = {...user,...info};
console.log(obj);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 4.模板字符串
作用： 字符串拼接 可以在字符串拼接中写变量 ${data}
let user={
name:'张麻子',
age:45,
like:['抽烟','喝酒','烫头']
}
// let str = '我的名字：'+user.name+';'+'我的年龄：'+user.age+'我的爱好：'+user.like[0]+','+user.like[1]+','+user.like[2];
let str = `
我的名字：${user.name},
我的年龄:${user.age},
我的爱好:${user.like[0]}，${user.like[1]},${user.like[2]}
`
console.log(str);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 5.ES6的类
# 5.1 最简单类的写法
// ES6 人类
class Prosen{
// 构造器 接收参数--构造属性
constructor(name,age){
this.name = name;
this.age = age;
}
//方法
eat(){
console.log('吃.....');
}
}
let user = new Prosen('黄四郎',25)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 5.2 类的属性 类的静态方法
// ES6 人类
class Prosen{
//类特有的属性--常量
have='两只眼睛';
features = '一张嘴巴';
// 构造器 接收参数--构造属性
constructor(name,age){
this.name = name;
this.age = age;
}
//方法--公有方法
eat(){
console.log('吃.....');
}
//静态方法---类的私有方法
//只有类才可以使用的方法
static war(){
console.log('打仗...');
}
}
let user = new Prosen('黄四郎',25)
console.log(Prosen.war());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 5.2 ES6 类的 继承
- ES6 子类可以完美继承所有父类所有的东西
- 父类的属性（常量） 父类公共方法 父类静态方法 父类构造器中的属性
//子类写法
class 子类名 extends 父类名{
constructor(){
super(传递给父类的数据)；
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//人类
class Prosen{
features="两只眼睛 一张嘴巴";
//构造器
constructor(name,age){
this.age= age;
this.name = name;
}
//公共方法
eat(){
console.log('吃东西...')
}
//静态方法
static war(){
console.log('战争...');
}
}
//医生类
class Doctor extends Prosen{
constructor(name,age,genre){
// 继承父类的属性及方法
super(name,age);
this.genre=genre;
}
//公共方法
show(){
console.log('看病')
}
//静态方法
static likeColor(){
console.log('喜欢穿白色的衣服');
}
}
let doctor1 = new Doctor('张麻子',40,'外科')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# 6.模块化
模块的优点：
1.高内聚：尽可能将一个功能的实现 写到一个模块中
2.低耦合：尽可能每个模块之间相互不产生影响
# 6.1 回顾node环境中的模块导入与导出
//导出
export.moudle = {xx}
//导入
require('./index.css');
const xx = requrie('./a.js');
1
2
3
4
5
6
2
3
4
5
6
# 6.2 ES6环境的模块导入导出
# 6.2.1 语法一
//导出.js
export let a= '张三';
export let age = '25';
export let arr = [11,32,3,556,2,5]
1
2
3
4
5
2
3
4
5
//导入js
import {a,age,arr} from './导出语法1.js'
console.log(a);
console.log(age);
console.log(arr)
1
2
3
4
5
6
7
2
3
4
5
6
7
<!-- 引入最终的主模块到html页面 -->
<script src="./导入.js" type="module"></script>
1
2
3
2
3
# 6.2.2 语法二【用得更多】
//导入js
let name= '张麻子';
let user ={
name:'黄四郎',
age:20
}
let likes = ['抽烟','喝酒','烫头'];
export default {
name,
user,
likes
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
//导入js
//语法二
//1.接收一个对象
// import userInfo from './导出语法2.js'
// console.log(userInfo);
//2.对象解构赋值接收
//注意：必须先用一个变量对象接收了值 之后才能使用结构拿到每个属性
import userInfo from './导出语法2.js'
let {name,user,likes} = userInfo;
console.log(name);
console.log(user);
console.log(likes);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 引入最终的主模块到html页面 -->
<script src="./导入.js" type="module"></script>
1
2
3
2
3
编辑 (opens new window)
上次更新: 2022/05/28, 19:34:46