es6-函数、数组迭代器、Set、Map

最新推荐文章于 2024-09-14 18:52:56 发布

lwq_qqq

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量163

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/m0_48180834/article/details/119740444

版权

一、函数

1.箭头函数：没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

语法：(参数)=>{执行的语句}

当只有一个参数时，圆括号可以不写，当代码块只有一条语句时，可以不用写大括号，多条语句就需要加上大括号

例如：

接下来通过代码来了解箭头函数

2.函数参数：ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。通常情况下，定义了默认值的参数，应该是函数的尾参数，函数的length属性，将返回没有指定默认值的参数个数，

Function.length：指明函数的形参个数

arguments.length表示的是实际上向函数传入了多少个参数,这个数字可以比形参数量大,也可以比形参数量小

（1）函数的默认值不设置在尾参数，形参的长度计算到设置默认值前的哪个参数，后面没有设置默认参数的不会进行计算。

function myFun (a, b=0, c) {
  console.log(a, b, c);
}
myFun(1,2,3);
console.log(myFun.length);

因为传的参数为1，2，3，所以这里的默认值无效，没有指定默认值的参数个数使用的是函数的length属性进行计算，这里的输出值为1，因为未指定默认值的个数要计算到设置默认值的前一个参数。后面没有设置默认值的也不会计算到。

（2）函数的默认值设置在尾参数，形参的长度计算到设置默认值前的哪个参数。

function myFun (a, b, c=0) {
  console.log(a, b, c);
}
myFun(1,2,3);
console.log(myFun.length);

因设置默认参数为尾参数，所以myFun.length的值为2

（3）rest参数：拓展运算符（在这里有聚合作用）用在函数的参数时，语法为(...变量名)，用于获取函数的多余参数，这样就不需要使用arguments对象（类数组对象,可进行迭代）了。

let myFun = (a, ...b) => {
  console.log(a, b);
}
myFun(1, 2, 3, 4, 5);

当传入参数时，a会匹配到1，...b会匹配到剩余的数字，这里的拓展运算符有聚合的作用。

（4）参数解构

对象参数解构，参数为对象

let fun = ({ name, age = 0 }) => {
  console.log(name, age);
}
fun({ name: '张三' })

数组参数解构，参数为数组

let fun = ([a, b, ...c]) => {
    console.log(a, b, c);
  }
fun([1, 2, 3, 4])

二、数组迭代器

迭代器：是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。使用for...of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）。

迭代器（Iterator ）的作用：

1.是为各种数据结构，提供一个统一的、简便的访问接口；

2.是使得数据结构的成员能够按某种次序排列；

3.是ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。

迭代器的遍历过程：

1.keys()、values()、entries()方法都是实例方法

let arr = ['张三', '李四', '王五'];

let key = arr.keys();

let value = arr.values();

let entry = arr.entries();

console.log(key, value, entry);

因为这些方法都是实例方法，所以可直接使用实例进行调用，调用结果为数组迭代器对象

迭代器是随着next()方法移动的，next()方法返回迭代器刚刚经过的元素。

console.log(key.next());

console.log(key.next());

console.log(key.next());

console.log(key.next());

2.使用for...of循环遍历

（1）遍历数组迭代器对象

for (let k of key) {
  console.log(k);
}
for (let val of value) {
  console.log(val);
}
for (let en of entry) {
  console.log(en);
}

上面分别是对属性名、属性值、键值对组成的数组迭代器对象进行遍历输出

（2）遍历字符串（使用for...of进行遍历，每个字符串都会被遍历出来）

let str = 'hello'
for (let i of str) {
  console.log(i);
}

遍历字符串出来for...of方法外，还有很多方法，要想用其他方法进行遍历，首先要做的是将字符串转为数组，转换的方法有：

1. let arr1 = str.split('');

2.let arr2 = Array.from(str);

3. let [...arr3] = str;

三、Set:本身是一个构造函数，用来生成Set 数据结构展，

Set可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。类似于数组，但是成员的值都是唯一的，没有重复的值。

Set API（以下的这些方法都为实例方法，可直接用实例来调用）

add()：方法中每次只能放一个值，即只能放置一个参数

delete(value)：删除某个值，返回一个boolean值，表示删除是否成功

has(value) 返回一个布尔值，表示该值是否为Set的成员。

clear() 清除所有成员，没有返回值。

keys() 返回键名的遍历器,即返回迭代器对象

values() 返回键值的遍历器

entries() 返回键值对的遍历器

forEach() 使用回调函数遍历每个成员

let set = new Set([1, 2, 3, 4, 1, 2, 3, 6]);
// 添加某个值，返回Set结构本身
set.add('hello');
console.log(set.size);//查询长度
console.log(set.has('hello'));//判断是否有某个元素

Set集合中的key和value是一样的，key值就是value值本身。

console.log(set.keys());
console.log(set.values());
console.log(set.entries());
// forEach()方法
set.forEach((item) => {
  console.log(item);
})
// Set应用
console.log(Array.from(set));

四、Map:提供了“值—值”的对应，是一种更完善的 Hash 结构实现。

Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Object 结构提供了“字符串—值”的对应，如果你需要“键值对”的数据结构，Map 比 Object 更合适。Map 可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

Map API

Set.prototype.size 返回 Map 结构的成员总数。

Set.prototype.set(key, value) set方法设置键名key对应的键值为value，然后返回整个map结构。如果key已经有值，则键值会被更新，否则就新生成该键。

Set.prototype.get(key) get方法读取key对应的键值，如果找不到key，返回undefined。

Set.prototype.has(key) has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。

Set.prototype.delete(key)delete方法删除某个键，返回true。如果删除失败，返回false。

Set.prototype.clear() 清除所有成员，没有返回值

Set.prototype.keys() 返回键名的遍历器

Set.prototype.values() 返回键值的遍历器

Set.prototype.entries() 返回键值对的遍历器

Set.prototype.forEach() 使用回调函数遍历每个成员

这里的方法和Set的大多是一样的，

不同的一点在于：

Map的forEach循环是先遍历key，再遍历value

let obj = {
    name: '张三',
    age: 12,
    gender: 'male'
  }
  let entry = Object.entries(obj);
  // Map构造函数，参数接受数组的键值对集合
  let map = new Map(entry)
  // 添加
  map.set({ username: 'admin1' }, [1, 2, 3]);
  console.log(map.has('name'));
  // keys values entries
  console.log(map.keys());
  console.log(map.values());
  console.log(map.entries());
  console.log(map); 
  // forEach()
  map.forEach((value, key) => {
    console.log(key + ':' + value);
  })