【学习】es6（3）

2022.1.18

【1】this关键字

传统函数当中，谁调用了函数，函数内部的this关键字就指向谁。

箭头函数中，没有自己的this，也就不具有这个特性；

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。

const obj = { name: '张三'} 
 function fn () { 
     console.log(this);//this 指向 是obj对象
     return () => { 
         console.log(this);//this 指向的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象。
     } 
 } 
 const resFn = fn.call(obj); 
 resFn();

【2】剩余参数

当函数实参个数大于形参个数时，我们可以将剩余的实参放到一个数组中（剩余参数语法，允许我们将一个不定数量的参数表示为一个数组）。

1.例1

function sum (first, ...args) {
console.log(first); // 10
console.log(args); // [20, 30]
}
sum(10, 20, 30)

…args表示接收所有的实参

2.例2

<script>
        const sum=(...args)=>{
            let total=0;
            args.forEach(item=> total += item)
            return total;
        };
        console.log(sum(10, 20));      // 返回 30
        console.log(sum(10, 20, 30));  // 返回 60
</script>

3.剩余参数和解构配合使用

let students = ['wangwu', 'zhangsan', 'lisi'];
let [s1, ...s2] = students;
console.log(s1); // 'wangwu'
console.log(s2); // ['zhangsan', 'lisi']
//s1 接收“wangwu”这个变量，s2接收剩余的变量

【3】扩展运算符（展开语法）

正好和剩余参数是相反的，它可以将数组或者对象转为用逗号分隔的参数序列。

let ary = [1, 2, 3];
...ary
console.log(...ary);  // 输出 1 2 3

数组变量ary前面加“…”，表示将数组元素拆分为以逗号分隔的参数序列。输出中没有逗号，是因为console.log方法中，逗号会被当做方法的参数分隔符。

【3】Array.from() 方法

它接收一个伪数组做参数，返回值（转换后的结果）是一个真正的数组（也即将类数组或可遍历对象转换为真正的数组）：

let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
//上面这段代码中的arrayLike变量，是一个伪数组。
//然后将此伪数组做为参数，传递到方法中，方法的返回值即是真正的数组。

//Array.from() 方法还可以接收第二个参数。第二个参数是一个函数。它的作用是对数组中的元素进行加工处理。
//数组中有多少个元素，函数就会被调用多少次。
//此函数有一个形参，代表要处理的值。只需将处理的结果返回即可。

let arrayLike = {
"0": 1,
"1": 2,
"length": 2
}
let newAry = Array.from(aryLike, (item) => {
		return item *2
});

//由于只有一个形参，且函数体内只有一句代码，因此可简写为：

let arrayLike = {
"0": 1,
"1": 2,
"length": 2
}
let newAry = Array.from(aryLike, item => item *2)

解释： 在函数内部，将数组中的每个值都乘以了2

【4】实例方法： find()

let ary = [{
id: 1,
name: '张三‘
}, {
id: 2,
name: '李四‘
}];
let target = ary.find((item, index) => item.id == 2);

//item和index是参数函数中的两个形参。item代表当前循环到的值，index是当前循环到的值的索引。由于当前没有用到index索引，因此index也可以省略不写。

let ary = [{
id: 1,
name: '张三‘
}, {
id: 2,
name: '李四‘
}];
let target = ary.find(item=> item.id == 2);
console.log(target)  // 输出 “李四”

【5】实例方法：findIndex()

includes()方法的作用是，判断数组中是否包含某一个元素（给定的值），返回布尔值。
括号内的参数，就是要判断的元素。

[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false

【6】模板字符串

ES6新增的声明字符串的方式，使用反引号定义。

示例：let name = `zhangsan`;

1.模板字符串中可以解析变量。

let name = '张三';
let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan

$和{}组合使用，即可解析变量内容，不需要用+连接字符串。

2.模板字符串中可以换行

let result = {
name: 'zhangsan',
age: 20, sex: '男'
}
let html = ` <div>
<span>${result.name}</span>
<span>${result.age}</span>
<span>${result.sex}</span>
</div> `;

3.在模板字符串中可以调用函数

字符串中调用函数的位置，会显示函数执行后的返回值。

const fn = () => {
	return '我是fn函数';
};
let str = `模板字符串：${fn()}`; // 模板字符串：我是fn函数

【7】实例方法：startsWith() 和 endsWith()

startsWith()：判断参数字符串是否以某字符串的开头，返回布尔值；

endsWith()：判断参数字符串是否以某字符串的结尾，返回布尔值。

let str = 'Hello world!';
str.startsWith('Hello') // true
str.endsWith('!') // true

【8】实例方法：repeat()

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"

将原字符串进行重复，返回一个新字符串。它接收一个数值n做为参数，表示将字符串重复n次

【9】Set 数据结构

应用场景 ，比如：
搜索功能，用户搜索完成后，网站要记录用户搜索的关键字，方便用户下次直接点击搜索历史关键字就可以进行搜索。

1.Set本身是一个构造函数。用来生成 Set 数据结构。
创建此构造函数的实例对象，就是在创建Set数据结构。

const s = new Set();

2.Set函数可以接受一个数组作为参数，用来初始化。

const set = new Set([1, 2, 3, 4, 4]);

3.利用Set数据结构做数组去重

const s1 = new Set();
console.log(s1.size)
const s2=new Set(["a","b"]);
const.log(s2.size);
const s3= new Set(['a','a','b','b'])
console.log(s3.size);
const ary = [...s3];
const.log(ary)

4.常用实例方法：

add(value)：添加某个值，返回 Set 结构本身；
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功；
has(value)：返回一个布尔值，表示该值是否为 Set 的成员；
clear()：清除所有成员，没有返回值

5.从Set数据结构中取值。
Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。
 

// forEach方法遍历取值
const s = new Set(['a','b','c']);
s.forEach(value => {
	console.log(value)  // 输出 a b c
})