前端基础

//sessionStorage 用法
//赋值(保存的是字符串)
sessionStorage.shiftOptios = JSON.stringify(this.shiftOptios);

//如果只是单页面使用，离开时需要销毁
//同methods同级别
beforeDestroy() {
    sessionStorage.shiftHourOptios = null;
    sessionStorage.shiftOptios = null;
},

//跨页面使用sessionStorage对象时（初始化时执行，类似data）
computed: {
    shiftHourOptios() {
      return JSON.parse(sessionStorage.shiftHourOptios);
    },
    shiftOptios() {
      return JSON.parse(sessionStorage.shiftOptios);
    },
},

//自定义组件方法，为组件赋值，
//直接使用 this.items = response.data.detailList; 不能成功，需要点击两次，才能赋值成功

//先需要初始化
this.items = new Array(response.data.detailList.length);
//表示强制执行该方法绑定数据
this.$nextTick(() => {
  this.items = response.data.detailList;
});

var checkDetail = true;
//校验排班明细列表不为空
if (this.items?.length) {
    //遍历
    this.items.find((val) => {
        if (val.sequence === null) {
            checkDetail = false;
        }
        ....
    });
}
if (!checkDetail) {
    this.$refs.tip.textContent = '顺序号/班次/班时不能为空';
} else {
    ...
}

// 浅复制（指向原来对象）  params.isOpen =1 , 那么 this.form.isOpen 也是为1；
const params = this.form;
//表单相关数据，全部赋值给params（深复制）
const params = {
	...this.form,
};
//处理明细
Object.assign(params, {
	detailList: this.items,
});

// 数组深度拷贝
copyArray(arr) {
  return arr.map((e) => {
    return Object.assign({}, e);
  });
},

this.items.find((val) => {
    console.log(val);
    if (val.sequence === null) {
        checkDetail = false;
    }
    ....
});

// 查找  2024-11-19
const item = this.items.find((o)=>o.id === xxx);
// 赋值 this.form = {...this.form,...item};

// 用七种方式遍历下列数组
let arr = ['a', 'b', 'c', 'd', 'e', 'f'];

//1、for循环
console.log("for循环")
for (let i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}
console.log("----------------")

// 2、for in 和for of
// for in 只能打印index
console.log("for in")
for (const key in arr) {
	console.log(arr[key]);
}
console.log("----------------")
// for of 打印值
console.log("for of")
for (const key of arr) {
	console.log(key);
}
console.log("----------------")

//3、foreach
console.log("foreach");
arr.forEach((item, index) => {
	console.log(index + "=>" + item);
})
console.log("----------------")

// 4、Symbol
console.log("Symbol")
let item = arr[Symbol.iterator]();
for (const key in arr) {
	console.log(item.next().value)

}
console.log("----------------")

//5、map
// 数组.map()会返回一个新数组，数组的大小跟原始数组一样
// 数组元素是函数返回的结果
console.log("map")
let newArr_map = arr.map((item, key) =>{
	console.log(item)
	return item*2;
})
console.log("----------------")

// 6、filter
// filtet是一个过滤器，也是返回一个新数组，原数组中满足返回要求的元素就复制到新数组中，不满足就不复制
// 不会改变原数组的内容
console.log("filter")
let newArr_filter = arr.filter((item, key) =>{
	console.log(item);
	return item == 'a';
})
console.log("----------------")

//7、Object.entries()
// 简单说就是 Object.entries() 可以把一个对象的键值以数组的形式遍历出来
console.log("Object.entries() ")
let newArr_entries = Object.entries(arr);
newArr_entries.forEach((item, index)=>{
	// item是个数组：['0','a']
	console.log( item[1]);

})

methods: {
    titleTest (rule, value, callback) {
      // const title= /^[\u0391-\uFFE5A-Za-z]+$/
      const title= /^[\a-\z\A-\Z0-9\u4e00-\u9fe5]\_+$/
      if (!title.test(value)) {
        callback(new Error('标题只能输入中文、下划线、数字和英文'))
      }else{
        callback()
      }
    },
}

//生命周期事件：
 destroyed() {},// 销毁时操作可编辑在此处,例如：A组件跳转B组件，此时A组件会被销毁，则会调用
 activated() {
     //每次进入页面时执行
 },