ES6使用实践总结-阿里云开发者社区

ES6使用实践总结

2023-12-14 15

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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]