ES6使用实践总结[数组、扩展、解构]

【1】ES6中实例对象不能调用静态方法

Java中其实是可以的，虽然IDEA会提示但是编译器会通过。

如下所示，封装一个Toast类(这里以小程序中使用为例)：

export default class Toast{
    static showToLogin( title, duration) {
        wx.showToast({
            title: title?title:'请先登录！',
            duration: duration ? duration : 2000,
            mask: true,
            image: "/images/icon/fail.png",
            success: function () {
              setTimeout(function () {
                wx.switchTab({
                  url: '/pages/my/my',
                })
              }, duration ? duration : 2000,);
            }
          });
    }
  
   static show(icon, title, duration) {
        if (icon === 'loading') {
            wx.showToast({
                title: title?title:'加载中...',
                icon: 'loading',
                duration: duration ? duration : 2000,
            })
        } else if (icon === 'success') {
            wx.showToast({
                title: title?title:'请求成功！',
                icon: 'success',
                duration: duration ? duration : 2000,
            })
        } else if (icon === 'warn') {
            wx.showToast({
                title: title,
                duration: duration ? duration : 2000,
                image: '../images/icon/fail.png'
            })
        } else if (icon === 'fail') {
            wx.showToast({
                title: title?title:'请求失败！',
                duration: duration ? duration : 2000,
                image: '../images/icon/fail.png'
            })
        }
    }
}

index.js中引入并测试：

//index.js
import Toast from "../../utils/toast.js";
let toast=new Toast();

  onLoad: function () {
    toast.show('loading',null,null);
    // Toast.showToLogin(null,null);
}

Toast.showToLogin是ok的，类调用静态方法，java中也一样。但是 toast.show('loading',null,null);就会报错,如下提示：

把statis show改为show ,也就是非静态方法则OK！

【2】数组的操作

① 数组遍历-forEach遍历

let split = val.split("_");
split.forEach(function (item,index,array) {
	console.log(item);
})

② 判断数组中是否有某个元素：

split .includes('某个元素') ; // true or false

split .indexOf('某个元素') > -1 // true or false

③ 从数组删除某个元素

// findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
// splice(index,num);  index代表的是数组元素的下标位置，num代表的是删除的个数  
arr.splice(arr.findIndex(item => item.id === data.id), 1)

④ map遍历数组

map方法和forEach方法的区别就在于，map方法可以return出一个新的数组，并且不会改变原来的数组。

let result = seatObj.map(function (val, index) {
   return val.name;
 })

【3】filter函数

根据某个条件进行过滤，将符合条件的归并为一个新的数组。

如下所示，即删除数组中最后一个元素。

this.currItem=  array.filter(function(ele,idx,array){
    return array.length - 1 !== idx;
});

【4】扩展运算符

Vue扩展运算符是JS中一个可以遍历数组和对象的一种特殊运算符，可以用来从数组和对象中构建出新的对象或数组。也就是说使用扩展运算符可以将某个对象的所有属性展开，从而获得一个对象或数组的副本。

① 对象的拷贝

let person={
	name: "jane",
	age: 22,
	sex:"男"
}

let person2={...person}

console.log(person2===person);//false
console.log(person2);//{name: 'jane', age: 22, sex: "男"}

② 合并对象

使用扩展运算符合并对象时，如果两个对象中有相同的属性，则对象最后的属性会覆盖先前的属性。

const obj1 = { a: 1 };
const obj2 = { b: 2 };

let newObj ={...obj1,...obj2}
console.log(newObj); // { a: 1, b: 2}

③ 修改/删除对象属性

修改一个属性

let a = {name: 'jane', age: 18};
//janus 替换 jane
let c = {...a, name: 'janus'};
console.log(c);
// 打印结果  {name: "janus", age: 18}

删除一个属性

let a = {name: 'jane', age: 18};
let {name, ...c} = a;
console.log(name, c);
//  打印结果 jane {age: 18}

④ 合并数组

// 数组合并
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

⑤ 数组添加元素

let array= ['1', '2', '3'];
console.log(['0', ...array, '4']);
// 打印结果  ["0", "1", "2", "3", "4"]

⑥ 数组删除元素

和对象删除属性一样，取出一个元素，与结构赋值的结合。

const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first);
// 打印结果 1
console.log([...rest]);
// 打印结果 [2, 3, 4, 5]

【5】解构

在 Vue.js 中，解构（destructuring）是一种从对象或数组中提取值的技术，常用于简化代码并提高可读性。解构可以分为两种类型：对象解构和数组解构。

对象解构

对象解构允许你从一个对象中提取出一个或多个属性，并将它们赋值给单独的变量。例如：

const user = {
  name: 'Alice',
  age: 30,
  email: 'alice@example.com'
};

const { name, email } = user;

console.log(name); // 输出 "Alice"
console.log(email); // 输出 "alice@example.com"

在 Vue 组件或组合式 API (setup) 中，你可能会看到这样的用法：

import { ref, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello Vue!'
    });

    // 解构 state 对象
    const { count, message } = state;

    return {
      count,
      message,
      increment() {
        count++; // 注意这里的 count 实际上不会改变 state.count 的值，因为它是只读的。
      }
    };
  }
};

在上述例子中，我们从 state 对象中解构出了 count 和 message 属性。需要注意的是，如果解构出来的变量需要修改原始对象中的值，你需要通过引用而不是直接修改解构出来的变量。

数组解构

数组解构则是从数组中提取出一个或多个元素。例如：

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

const [firstColor, secondColor] = colors;

console.log(firstColor); // 输出 "red"
console.log(secondColor); // 输出 "green"

在 Vue 中，数组解构同样可以用于简化代码：

export default {
  data() {
    return {
      items: ['item 1', 'item 2', 'item 3']
    };
  },
  computed: {
    // 解构 items 数组
    ...mapState(['items']), // 这里实际上不是解构赋值，而是将 items 映射到计算属性中
    firstItem() {
      return this.items[0];
    },
    secondItem() {
      return this.items[1];
    }
  }
};

在实际开发中，你可能会看到 ... 用于将一个数组或对象展开（spread），而不是解构。例如，在模板中传递 props 到子组件时：

<template>
  <ChildComponent :{ ...$props } />
</template>

这实际上是将父组件接收到的所有 prop 传递给子组件。请注意，这里的 ... 是展开运算符，不是解构赋值。

总结来说，解构是一种让代码更简洁清晰的技术，它可以帮助你从复杂的数据结构中提取你需要的部分。在 Vue 中，无论是对象还是数组，解构都能让你更方便地管理和访问数据。