ES6 -- 对象和函数的函数解构、in 运算符、常见的数组的遍历方法（forEach、filter、some、map、every、join）09

结论先行：

对象的函数解构：从对象中提取属性并创建变量、从数组中提取元素并创建变量

只能提取对象的属性，并不能直接提取对象的方法。 因为可能存在 this 指向改变的问题

数组的函数解构：从数组中提取元素并创建变量

可以配合使用扩展运算符 ...

in 运算符：用来判断一个对象或者数组中是否存在某个特定的属性或索引，返回布尔值

常见的数组的遍历方法：

forEach：用于遍历数组中的每个元素，并对每个元素执行指定的回调函数

filter：用于筛选数组中满足指定条件的元素，并返回一个新的数组

some：用来判断数组中是否存在满足特定条件的元素，返回一个布尔值

map：用于对数组中的每个元素执行指定操作，并返回一个新的数组，起到一个替换的作用

every：用于检测数组中的所有元素是否满足指定条件，返回一个布尔值。 

以下两个方法不会改变原数组，而是返回一个新的字符串。

join：用于将数组中所有元素连接成一个字符串。

toString：用于将数组转换为一个以逗号分隔的字符串。

 

具体分析：

1、对象的函数解构

我们在前后端分离时，后端经常返回来JSON格式的数据，前端的美好愿望是直接把这个JSON格式数据当作参数，传递到函数内部进行处理。ES6就为我们提供了这样的解构赋值。

let json = {
a:'jspang',
b:'技术胖'
}
function fun({a,b='jspang'}){
console.log(a,b);
}
fun(json);

是不是感觉方便了很多，我们再也不用一个个传递参数了。

在 JavaScript 中，对象的函数解构是一种便捷的语法，用于从对象中提取属性并创建变量。下面是一个简单的示例，演示了如何使用对象的函数解构： 

// 定义一个对象
const person = {
  name: 'Alice',
  age: 30,
  sayHello: function() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
};

// 使用对象的函数解构
const { name, sayHello } = person;

// 调用解构出来的函数
console.log(name); // 输出: Alice
sayHello(); // 输出: Hello, my name is undefined and I'm undefined years old.

在这个示例中，我们定义了一个包含 name 和 sayHello 属性的 person 对象。然后，通过对象的函数解构，我们从 person 对象中解构出 name 和 sayHello，并分别赋值给了相应的变量。最后，我们调用了解构出来的 sayHello 函数。

需要注意的是，在解构过程中，我们只能提取对象的属性，并不能直接提取对象的方法。

因此，虽然我们成功解构出了 sayHello 方法，但由于该方法中使用了 this 关键字，导致在解构后调用时会出现问题。

如果想要在解构后调用方法，需要手动绑定正确的 this 值，或者使用箭头函数来避免 this 绑定问题。

总之，对象的函数解构是一种方便的语法，可以快速地从对象中提取属性并创建变量，但需要注意对方法的处理方式。

2、数组的函数解构

函数能解构JSON，那解构我们的数组就更不在话下了，我们看下边的代码。我们声明一个数组，然后写一个方法，最后用…进行解构赋值。

let arr = ['jspang','技术胖','免费教程'];
function fun(a,b,c){
console.log(a,b,c);
}

fun(...arr);

在 JavaScript 中，数组的函数解构是一种便捷的语法，用于从数组中提取元素并创建变量。下面是一个简单的示例，演示了如何使用数组的函数解构： 

// 定义一个数组
const numbers = [1, 2, 3, 4, 5];

// 使用数组的函数解构
const [first, second, ...rest] = numbers;

// 输出解构出来的变量
console.log(first); // 输出: 1
console.log(second); // 输出: 2
console.log(rest); // 输出: [3, 4, 5]

在这个示例中，我们定义了一个包含多个元素的 numbers 数组。然后，通过数组的函数解构，我们从 numbers 数组中解构出第一个元素赋值给 first 变量，第二个元素赋值给 second 变量，剩余的元素赋值给 rest 变量（使用扩展运算符 ...）。

需要注意的是，在解构过程中，可以使用扩展运算符 ... 来将剩余的元素收集到一个新数组中，这在解构出部分元素后，处理剩余元素很有用。

除了使用数组的函数解构，还可以使用对象的函数解构来提取数组中的元素，例如：

// 定义一个数组
const numbers = [1, 2, 3, 4];

// 使用对象的函数解构
const { 0: first, 1: second, length } = numbers;

// 输出解构出来的变量
console.log(first); // 输出: 1
console.log(second); // 输出: 2
console.log(length); // 输出: 4

在这个示例中，我们使用对象的函数解构从数组中解构出了第一个元素和第二个元素，并使用 length 属性获取了数组的长度。

总之，数组的函数解构是一种方便的语法，可以快速地从数组中提取元素并创建变量。它可以帮助简化代码，提高开发效率。

3、in 运算符的用法

in 运算符是用来判断一个对象或者数组中是否存在某个特定的属性或索引，返回布尔值

① 对象判断

对于对象，in 运算符可以判断一个属性是否存在于对象中，返回一个布尔值。 

      let obj = {
        a: "strawberry",
        b: "最棒",
      };
      console.log("a" in obj); // true

② 数组判断

对于数组，in 运算符可以判断一个索引是否在数组范围内，返回一个布尔值。

先来看一下 ES5 判断的弊端，以前会使用 length 属性进行判断，为0表示没有数组元素。但是这并不准确，或者说真实开发中有弊端。

let arr=[,,,,,];
console.log(arr.length); // 5

上边的代码输出了5，但是数组中其实全是空值，这就是一个坑啊。那用 ES6 的 in 就可以解决这个问题。

      let arr1 = [, , , , ,];
      console.log(0 in arr1); // false

      let arr2 = ["strawberry", "最棒"];
      console.log(0 in arr2); // true

const fruits = ["apple", "banana", "orange"];

console.log(0 in fruits); // true
console.log(3 in fruits); // false

注意：这里的 0 指的是数组下标位置是否为空。

拓展：除了 in 运算符，还可以使用 Array.prototype.includes()方法来判断一个值/元素是否存在于数组中。

const colors = ["red", "blue", "green"];

console.log(colors.includes("blue")); // true
console.log(colors.includes("yellow")); // false

4、数组的遍历方法

① forEach

forEach 是 JavaScript 中 Array 对象的一个方法，用于遍历数组中的每个元素，并对每个元素执行指定的回调函数。 

该方法接受一个回调函数作为参数，该回调函数会被依次应用于数组中的每个元素。

回调函数可以接受3个参数：当前遍历的元素值、当前元素的索引和正在遍历的数组本身。

let arr = ["111", "222", "333"];
arr.forEach((val, index, arr) => console.log(index, val, arr));

 

在回调函数中，您可以根据需要对每个元素执行特定的操作。forEach 方法没有返回值，仅用于遍历数组。如果需要对数组进行转换或过滤操作，可以考虑使用 map、filter 等方法。 

let arr = [, , ,];

 forEach 循环的特点是会自动省略为空的数组元素，相当于直接给我们筛空了。当是有时候也会给我们帮倒忙。

 

② filter

该方法为 “过滤”、“筛选”之意，返回过滤后的新数组。JavaScript 中 Array 对象的一个方法，用于筛选数组中满足指定条件的元素，并返回一个新的数组。 

filter 方法接受一个回调函数作为参数，该回调函数会被依次应用于数组中的每个元素。

回调函数应该返回一个布尔值，表示当前元素是否符合筛选条件。符合条件的元素将被包含在返回的新数组中。 

      const arr = [1, 2, 3, 4];
      const filterArr = arr.filter((x) => x > 2);
      console.log(filterArr); // [3, 4]

不会改变原始数组，而是返回一个新的包含符合条件元素的数组。这使得它成为了一个非常有用的数组操作方法，特别是在需要对数组进行筛选操作时。

filter 的 callback 函数需要返回布尔值 true 或 false

如果为 ​​​​​​​true 则表示，恭喜你，通过啦！

如果为 false 只能高歌“我只能无情地将你抛弃……”。

可能会疑问，一定要是 Boolean 值吗？我们可以简单测试下嘛，如下：

var data = [0, 1, 2, 3];
var arrayFilter = data.filter(function(item) {
    return item;
});
console.log(arrayFilter); // [1, 2, 3]

有此可见，返回值只要是弱等于== true/false 就可以了，而非非得返回 === true/false.

 

③ some

意指“某些”，指是否“某些项”合乎条件。JavaScript 中 Array 对象的一个方法，用于检测数组中是否至少有一个元素满足指定条件，返回一个布尔值。

该方法接受一个回调函数作为参数，该回调函数会被依次应用于数组中的每个元素。

回调函数应该返回一个布尔值，表示当前元素是否满足指定条件。

const scores = [5, 8, 3, 10];
const current = 7;

function higherThanCurrent(score) {
  return score > current;
}

if (scores.some(higherThanCurrent)) {
  console.log("存在高于7分的~~"); // 存在高于7分的~~
}

      if ([5, 8, 3, 10].some((score) => score > 7)) {
        console.log("存在高于7分的~~"); // 存在高于7分的~~
      }

some 要求求至少有1个值让 callback 返回 true 就可以了

我们自然可以使用 forEach 进行判断。不过相比 some, 不足在于 some 只要有 true 即返回不再执行了。

如果有任何一个元素使回调函数返回 true，则 some 方法会立即返回 true，不再继续遍历后续元素。如果数组中所有元素都不满足条件，some 方法最终返回 false。

 

④ map

这里不是“地图”的意思，而是指“映射”。也就是原数组被“映射”成对应新数组。是 JavaScript 中Array 对象的一个方法，用于对数组中的每个元素执行指定操作，并返回一个新的数组。

该方法接受一个回调函数作为参数，该回调函数会被依次应用于数组中的每个元素。

回调函数应该返回一个新的值，用于替换原始数组中对应位置的元素。

通常用于对数组中的元素进行转换、处理或映射操作。

通过提供一个操作函数，我们可以轻松地对数组的每个元素进行计算或转换，并获得一个新的数组，其中包含了这些操作的结果。 

 

      const arr = ["111", "222", "333"];
      console.log(arr.map((x) => "web")); // ['web', 'web', 'web']

map在这里起到一个替换的作用。

在实际使用的时候，我们可以利用 map 方法方便获得对象数组中的特定属性值们。

const users = [
    { name: "111", email: "111@email.com" },
    { name: "222", email: "222@email.com" },
    { name: "333", email: "333@email.com" },
];

const emails = users.map((user) => user.email);
console.log(emails); //  ['111@email.com', '222@email.com', '333@email.com']

该方法会遍历数组中的每个元素，对每个元素都调用回调函数，并将回调函数的返回值存储在新的数组中。最终，map 方法返回一个包含所有回调函数返回值的新数组，不改变原始数组。 

 

⑤ every

JavaScript 中 Array 对象的一个方法，用于检测数组中的所有元素是否满足指定条件，返回一个布尔值。 

该方法接受一个回调函数作为参数，该回调函数会被依次应用于数组中的每个元素。

回调函数应该返回一个布尔值，表示当前元素是否满足指定条件。

      if ([5, 8, 3, 10].every((item) => item > 0)) {
        console.log("全部满足大于0"); // 全部满足大于0
      }

只有当数组中的所有元素都使回调函数返回 true 时，every 方法才会最终返回 true 

如果数组中有任何一个元素使回调函数返回 false，则 every 方法会立即返回 false，不再继续遍历后续元素。

 

⑥ join() 和 toString() 

join() 方法就是在数组元素中间，加了一些间隔，将数组元素用某个符号连接起来，用于将数组中所有元素连接成一个字符串。

方法可以接受一个可选的参数，用作连接数组元素的分隔符。

如果省略这个参数，数组元素将直接连接在一起，没有任何分隔符。

这在构建特定格式的字符串时非常有用，比如构建CSV格式的数据、构建用于展示的列表等。 

const elements = ['Fire', 'Wind', 'Rain'];
const result = elements.join();
console.log(result); // 输出 "Fire,Wind,Rain"

 在这个示例中，使用" - "作为自定义的分隔符。

const elements = ['Fire', 'Wind', 'Rain'];
const result = elements.join(' - ');
console.log(result); // 输出 "Fire - Wind - Rain"

toString() 方法是 JavaScript 中 Array 对象的一个方法，用于将数组转换为一个以逗号分隔的字符串。

该方法会遍历数组中的所有元素，并将每个元素转换为字符串。

然后，它将这些字符串连接起来，使用逗号作为分隔符，形成一个新的字符串。

const elements = ['Fire', 'Wind', 'Rain'];
const result = elements.toString();
console.log(result); // 输出 "Fire,Wind,Rain"

toString()方法通常用于将数组转换为字符串，以便于输出或其他处理。它提供了一种简单的方式来快速查看数组内容或将其传递给需要字符串参数的函数。

需要注意的是，toString()方法不会改变原始数组，而是返回一个新的字符串。