ES6的一些用法

45 阅读2分钟
  1. 数组解构
const [a, b, c, d] = numbers;
 console.log(a, b, c, d); // 输出:1 2 3 4
  1. 字符串解构
const person = { name: 'asd', age: 20 };
 const { name, age,sex } = person;
console.log(name, age,sex); // 输出:asd 20 undefined
  1. 剩余操作符
const numbers = [1, 2, 3, 4];
const [a, b, ...rest] = numbers;
console.log(a, b, rest); // 输出:1 2 [3, 4]
 
const person = { name: 'Alice', age: 20, gender: 'female' };
const { name, ...rest } = person;
console.log(name, rest); // 输出:Alice { age: 20, gender: 'female' }

  1. 扩展运算符

4.1数组的展开

  const arr1 = [1, 2, 3];
  const arr2 = [4, 5, 6];

  const combinedArray = [...arr1, ...arr2];
  console.log(combinedArray); // 输出:[1, 2, 3, 4, 5, 6]

4.2字符串的展开

  const str = 'hello';
  const chars = [...str];

  console.log(chars); // 输出:['h', 'e', 'l', 'l', 'o']

4.3对象的展开

const obj1 = { foo: 'bar' };
const obj2 = { baz: 'qux' };
 
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // 输出:{ foo: 'bar', baz: 'qux' }

5.数组的一些用法

5.1 arr.find()方法

find() 方法返回数组中满足指定条件的第一个元素。如果找到了符合条件的元素,则返回该元素;否则返回 undefined。

const arr = [1, 2, 3, 4, 5];
 // 查找数组中第一个大于等于 3 的元素
const result = arr.find(item => item >= 3);
console.log(result); // 输出:

5.2 arr.findIndex()方法

findIndex() 方法返回数组中满足指定条件的第一个元素的索引。如果找到了符合条件的元素,则返回该元素的索引;否则返回 -1。

const arr = [1, 2, 3, 4, 5];
// 查找数组中第一个大于等于 3 的元素的索引
const index = arr.findIndex(item => item >= 3);

 console.log(index); // 输出:2

5.3 arr.includes()方法

includes() 方法判断数组中是否包含指定元素,如果包含则返回 true;否则返回 false。

const arr = [1, 2, 3, 4, 5];
 // 判断数组中是否包含 3
const isIncluded = arr.includes(3);

console.log(isIncluded); // 输出:true

5.4 arr.fill()方法

fill() 方法用指定的值填充数组中的所有元素。

const arr = [1, 2, 3, 4, 5];
 // 将数组中所有元素都填充为 0
arr.fill(0);

console.log(arr); // 输出:[0, 0, 0, 0, 0]

5.5 arr.flat()方法

flat() 方法将多维数组扁平化为一维数组。

 // 扁平化数组
 const flatArr = arr.flat();

 console.log(flatArr); // 输出:[1, 2, 3, 4, 5]

6.map和forEachh区别

forEach()

遍历数组全部元素,利用回调函数对数组进行操作,自动遍历数组.length次数,且无法break中途跳出循环

因此不可控

不支持return操作输出,return只用于控制循环是否跳出当前循环,因此难操作成新数组,新值,

map()

1、创建新数组

2、不改变原数组

3、输出的是return什么就输出什么新数组

4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出,会循环数组每一项,并在回调函数中操作