ES6新特性

一、let和const

二、数组解析和对象解析

1、将数组中的值赋值给变量——es6和es6之前对比

1
2
3
4
5
6
7
8
9
let arr = [1,2,3];//定义一个数组

//======================es6 之前将数组中的值一个一个赋值给变量====================
a = arr[0]; b = arr[1] ; c = arr[2];//数组中的三个值分别赋值给a,b,c
console.log(a,b,c);

//=========================使用es6中的新语法赋值=========================================
let [a,b,c] = arr;//直接一次性赋值
console.log(a,b,c);

2、将对象中的值赋值给变量——es6和es6之前对比

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//定义一个对象
const person = {
    name:"张三",
    age:12
}

//======================es6 之前将对象中的值一个一个赋值给变量==============================
const name = persion.name;
const age = persion.age;
console.log(name,age);

//======================使用es6将对象中的值一个一个赋值给变量==============================
const {name,age} = persion;
console.log(name,age);

三、字符串扩展使用

1、检测字符串API使用

1
2
3
4
5
let str = "hello.vue";
console.log(str.startsWith("hello"));//true 字符串是否以hello开始
console.log(str.endsWith(".vue"));//true	字符串是否以.vue结尾
console.log(str.includes("e"));//true		字符串是否包含 e
console.log(str.includes("hello"));//true	字符串是否包含hello

dsads

2、定义长字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
//==========================es6之前==============================================
let str = "<div>" +
    "es6之前定义长字符串" +
    "</div>";
console.log(str);//输出结果只是拼接，不会换行

//==========================es6==============================================
let es6After = `
<div>
	es6定义长字符串
</div>
`;
console.log(es6After);//es6定义的字符串，会自动换行

3、在字符串中拼接参数

使用es6的方法定义字符串的时候，在字符串中拼接变量可以使用${}表达式来拼接

${}里面可以填任意表达式，包括调用函数，变量相加等，只要外面可以使用的表达式都可以使用

1
2
3
4
5
6
7
8
let name = "李白", age = 18;
//==========================es6之前==============================================
let esBefore = "我叫" + name + "，我今年" + age + "岁";
//==========================es6==============================================
let esAfter = `我叫${name},今年${age + 20}岁`;
//==========================输出==============================================
console.log("esBefore：" + esBefore);
console.log("esAfter：" + esAfter);

四、函数参数定义和箭头函数

1、函数参数默认值

1
2
3
4
5
6
7
8
9
10
11
12
function sum(a, b) {
    return a + b;
}

function sum2(a, b = 2) {//没有传入参数使用默认值，传入了参数使用传入的值
    return a + b;
}

//和Java中的不定长参数一样，只能定义在最后面，将没有被接收的参数全部接收
function paramLen(...params) {
    console.log("传入参数的个数为：" + params.length);
}

2、箭头函数

有函数名称的函数

1
2
3
4
5
6
7
//以前声名一个函数
function sum1(a, b) {
    console.log(a+b);
}

//使用箭头函数声明一个函数，只有一行代码可以不需要写 {}
let sum = (a, b = 2) => console.log(`${a} + ${b} = ${a + b}`)
1
2
3
4
5
6
7
//es6之前
function test(a){
    return a;
}

//es6，如果直接返回的话，可以不需要写return ，如果只有一个参数的话可以不需要写括号，如果只有一条语句的话可以不需要写{}，直接写执行的语句即可
let test1 = a => a;

dsdsd

1
2
3
4
5
//当两条及两条句需要执行的之后可以使用 {} 
let sum = (a, b = 3) => {
    console.log(`${a} + ${b} = ${a + b}`);
    return a + b;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
//传入对象
person = {
    name: "韩信",
    age: 18,
}

//写法一：
let hello = obj => obj.name;

//写法二：结合对象解析来使用
let hello = ({ name }) => name;

console.log(hello(person));

实战：箭头函数和对象解析表达式的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//需求，声明一个对象，hello 方法需要对象的个别属性

const person = {
    name: "jack",
    age: 21,
    language: ['java', 'js', 'css']
}
//以前的方式：
function hello(person) {
    console.log("hello," + person.name)
}
//现在的方式，({ name }) 指传入一个对象
var hello2 = ({ name }) => { console.log("hello," + name) };
//测试
hello2(person);

匿名函数

箭头函数解决了一个重要的地方，this的指向问题

箭头函数this是由外向内寻找的，直到找到有this定义的那一层，this就指向他

五、ES6对象优化

对象中键和值的获取

1
2
3
4
5
6
7
8
let person = {
    name: "韩信",
    age: 18,
}

console.log(Object.keys(person));//打印键 输出：["name", "age"]
console.log(Object.values(person));//打印键 输出：["韩信", 18]
console.log(Object.entries(person));//打印键和值 输出：[Array(2), Array(2)]

将多个对象合并为一个对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let person = {
    name: "韩信",
    age: 18,
}

let target = { a: 1 }
let target1 = { b: 2 }

//Object.assign方法的第一个参数是目标对象，后面的参数都是源对象
Object.assign(person, target, target1)

console.log(Object.keys(person));//打印键 输出：["name", "age", "a", "b"]
console.log(Object.values(person));//打印键 输出：["韩信", 18, 1, 2]
//打印键和值 输出：[Array(2), Array(2), Array(2), Array(2)]
console.log(Object.entries(person));

声名对象简写

1
2
3
4
5
6
7
8
let name = "韩信";
let age = 18;
//以前
let person = { name: name, age: age }
console.log(person)
//现在
let person1 = { name, age }
console.log(person1)

对象的函数属性简写

对象里面定义函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
name = "李白";
let person = {
    name: "韩信",
    
    eat: function (food) {
        console.log(`${this.name}在吃${food}`);
    },
    
    //箭头函数this指向的是最外层的，this是由外向内寻找的，找到之后就停止寻找，箭头函数想要使用对象中的属性，直接使用对象名称.属性名称
    do: motion => console.log(`${person.name}在做${motion}运动`),
    
    findName: () => console.log(`这里的this指向的是谁呢：name = ${this.name}，可以看到，这里的name找到的是person外面的name属性`),
    
    say(language) {
        console.log(`${this.name}在说${language}`)
    }
}

person.eat("苹果");
person.do("跑步");
person.findName();
person.say("汉语")

对象扩展运算符

拷贝对象，可以去了解下深拷贝和浅拷贝

1
2
3
4
5
6
7
8
9
name = "李白";
let person = {
    name: "韩信",
    age: 18
}
//复制对象，'...'是将对象中的所有东西都复制过去
let copyPerson = { ...person }

console.log(copyPerson)

合并对象

1
2
3
4
5
6
// 2、合并对象
let age = { age: 15 }
let name = { name: "Amy" }
let person2 = { ...age, ...name } // 如果两个对象的字段名重复，后面对象字
// 段值会覆盖前面对象的字段值
console.log(person2) //{age: 15, name: "Amy"}

六、map和reduce

1、map

接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

1
2
3
4
5
let num = [1, 2, 3, 4, 5, 6]

num = num.map(item => item * 2)

console.log(num)

2、reduce

1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））

2、currentValue （数组中当前被处理的元素）

3、index （当前元素在数组中的索引）

4、array （调用 reduce 的数组）

1
2
3
4
5
6
7
let arr = [1, 20, -5, 3];
//reduce：将最后的执行结果返回
//没有初始值：
console.log(arr.reduce((a, b) => a + b));//1+20+(-5)+3 = 19，将数组中的所有元素相加之后返回
console.log(arr.reduce((a, b) => a * b));//1*20*(-5)*3 = -300
//指定初始值：
console.log(arr.reduce((a, b) => a + b, 1));//20，先有个初始值：1+1+20+(-5)+3 = 20

七、ES6异步编排 Promise

优先导入jQuery，写好Ajax封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//封装好的Ajax请求
function get(url, data) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: url,
            data: data,
            success: function (data) {
                resolve(data)
            },
            error: function (error) {
                reject(error)
            }
        })
    })
}

测试

1
2
3
4
5
6
7
8
9
10
11
12
13
//测试
get("第一次请求地址")
    .then((data) => {
    console.log("返回的数据为：" + data)
    return get("第二次请求的地址")
})
    .then((data) => {
    console.log("返回的数据为：" + data)
    return get("第三次请求的地址")
})
    .catch((error) => {
    console.log("出现异常：" + error)
})

八、模块化