предисловие
Эта статья в основном инкапсулирует некоторые функции, обычно используемые в работе, из аспектов даты, массива, объекта, аксиом, обещания и оценки символов, на которые действительно можно напрямую ссылаться в проекте для повышения эффективности разработки.
1. Дата
Дата по-прежнему часто используется в фоновой системе управления, как правило, как измерение хранения данных и управления ими, поэтому потребуется много обработки дат.
1.1 Преобразование новой даты в гггг-ММ-дд ЧЧ:мм:сс
Дата по умолчанию, полученная средством выбора даты DatePicker, по умолчанию является объектом Date, но нам нужно использовать yyyy-MM-dd в фоновом режиме, поэтому нам нужно преобразовать его
Метод 1: Преобразование пятницы, 23 марта 2018 г., 12:19:48 GMT+0800 (международное время) в дд-мм-гггг ЧЧ:мм:сс
export const dateToFormat=(date)=>{
date.toLocaleString("en-US", { hour12: false }).replace(/\b\d\b/g, '0$&').replace(new RegExp('/','gm'),'-')
}
Способ второй: Атрибут value-format предоставляется из версии 2.x element-UI, которая может напрямую устанавливать значение, возвращаемое селектором.
1.2 Преобразование гггг-ММ-дд в новую дату()
То есть он преобразуется в тип, который может принять элемент управления датой. прямая инициализация
export const forMatToDate=(date)=>
return new Date('2018-04-16 19:43:00');
}
1.3 Получить текущее время гггг-ММ-дд ЧЧ:мм:сс
Добавьте 0, если не полный 10
export default const obtainDate=()=>{
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day=date.getDate();
let hours=date.getHours();
let minu=date.getMinutes();
let second=date.getSeconds();
//判断是否满10
let arr=[month,day,hours,minu,second];
arr.forEach(item=>{
item< 10?"0"+item:item;
})
return year+'-'+arr[0]+'-'+arr[1]+' '+arr[2]+':'+arr[3]+':'+arr[4]
}
1.4 Преобразование метки времени в формат гггг-ММ-дд ЧЧ:мм:сс
export default const returnTimestamp=(strTime)=>{
let middleDate=new Date(strTime)
return middleDate.toLocaleString('zh-CN',{hour12:false}).replace(/\b\d\b/g, '0$&').replace(new RegExp('/','gm'),'-')
})
1.5 Сравнение размера времени гггг-мм-дд
Если одиночное сравнение является более сложным, оно обрабатывается непосредственно как числовое сравнение.
export default const compareTwo=(dateOne,dateTwo)=>{
return Number(dateOne.replace(/\-/g,""))<Number(dateTwo.replace(/\-/g,""))
}
1.6 Рассчитать разницу в месяцах между двумя датами в формате (гггг-ММ-дд)
export default const disparityFewMonth = (dateOne, dateTwo) => {
let datesOne = dateOne.split('-').map(item => Number(item));
let datesTwo = dateTwo.split('-').map(item => Number(item));
const diff = [0, 0, 0].map((value, index) => {
return datesOne[index] - datesTwo[index]
});
return (diff[0] * 12 + diff[1]) + '月' + diff[2] + '天'
}
1.7 Допустимые параметры для нового объекта Date
1、new Date("month dd,yyyy hh:mm:ss");
2、new Date("month dd,yyyy");
3、new Date(yyyy,mth,dd,hh,mm,ss); 注意：这种方式下，必须传递整型；
4、new Date(yyyy,mth,dd);
5、new Date(ms); 注意：ms:是需要创建的时间和
6.new Date(yyyy-MM-dd hh:mm:ss)
GMT时间1970年1月1日之间相差的毫秒数；当前时间与GMT1970.1.1之间的毫秒数：var mills = new Date().getTime();
注意:mth:用整数表示月份，从0（1月）到11（12月）
2. Массив
2.1 Проверить, является ли это массивом
export default const judgeArr=(arr)=>{
if(Array.isArray(arr)){
return true;
}
}
2.2 Метод установки дедупликации массива
1. Общее использование цикла и indexOf (метод массива ES5, который может возвращать позицию, где значение впервые появляется в массиве) здесь подробно описываться не будет.Вот способ использования набора ES6 для достижения дедупликации.
2.set — это новая структура данных, похожая на массив, но одной из ее характеристик является то, что все элементы уникальны.
3. установить общие операции Вы можете обратиться к следующему: [Использование новой структуры данных Set][3]
4.установить код дедупликации
export const changeReArr=(arr)=>{
return Array.from(new Set([1,2,2,3,5,4,5]))//利用set将[1,2,2,3,5,4,5]转化成set数据,利用array from将set转化成数组类型
}
或者
export const changeReArr=(arr)=>{
return [...new Set([1,2,2,3,5,4,5])]//利用...扩展运算符将set中的值遍历出来重新定义一个数组,...是利用for...of遍历的
}
Array.from может преобразовывать подобные массиву объекты с атрибутами длины в массивы, а также может преобразовывать проходимые объекты, такие как строки, в массивы.Он получает 2 параметра, объект преобразования и функцию обратного вызова, ... и Array.from Это все методы ES6
2.3 Чистая сортировка массива
Пузырьки и выбор являются общими, здесь я пишу о сортировке с использованием
export const orderArr=(arr)=>{
arr.sort((a,b)=>{
return a-b //将arr升序排列,如果是倒序return -(a-b)
})
}
2.4 Сортировка объектов массива
export const orderArr=(arr)=>{
arr.sort((a,b)=>{
let value1 = a[property];
let value2 = b[property];
return value1 - value2;//sort方法接收一个函数作为参数，这里嵌套一层函数用
//来接收对象属性名，其他部分代码与正常使用sort方法相同
})
}
2.5 Максимальное значение в массиве
export const maxArr=(arr)=>{
return Math.max(...arr)
}
或者export const maxArr=(arr)=>{
return Math.max.apply(null,arr)
}
2.6 "Короткое замыкание" массивов каждый и некоторые
Название операции короткого замыкания массива было добавлено мной, т.к. обычно есть такое требование, что если одно или все условия в массиве удовлетворяют условиям, то он вернет true
情况一:全部满足
export const allTrueArr=(arrs)=>{
return arr.every((arr)=>{
return arr>20;//如果数组的每一项都满足则返回true,如果有一项不满足返回false,终止遍历
})
}
情况二:有一个满足
export default const OneTrueArr=(arrs)=>{
return arr.some((arr)=>{
return arr>20;//如果数组有一项满足则返回true,终止遍历,每一项都不满足则返回false
})
}
Вышеприведенные два сценария очень похожи на операцию короткого замыкания || и &&, поэтому я назвал ее операцией короткого замыкания.Конечно, в обоих случаях вы можете оценить каждый элемент путем обхода, а затем использовать break и вернуть false для завершения цикла и функции.
2.7 Фильтрация массива и метод карты обработки
filter: фильтровать значения массива, соответствующие определенному условию, и возвращать новый массив
export const filterArr = (arr, operator, judgeVal) => {
return arr.filter(item => {
if (operator == '>') {
return item > judgeVal;
} else if (operator == '<') {
return item > judgeVal;
} else if (operator == '==') {
return item == judgeVal;
}
})
}
карта: обработать массив и вернуть новый массив
export const mapArr = (arr) => {
return arr.map(item => item + 10;)//箭头函数的{}如果省略,则会默认返回,不用写return
}
3. Объект
3.1 Обход объекта
export const traverseObj=(obj)=>{
for(let variable in obj){
//For…in遍历对象包括所有继承的属性,所以如果
//只是想使用对象本身的属性需要做一个判断
if(obj.hasOwnProperty(variable)){
console.log(variable,obj[variable])
}
}
}
3.2 Свойства данных объектов
1. Классификация свойств объекта: свойства данных и свойства доступа;
2. Атрибут данных: содержит расположение значения данных, может быть прочитан и записан, содержит четыре характеристики, содержит четыре характеристики:
configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性，默认为true
enumerable:表示能否通过for-in循环返回属性
writable：表示能否修改属性的值
value：包含该属性的数据值。默认为undefined
3. Измените свойства данных по умолчанию и используйте Object.defineProperty().
export const modifyObjAttr=()=>{
let person={name:'张三',age:30};
Object.defineProperty(person,'name',{
writable:false,
value:'李四',
configurable:false,//设置false就不能对该属性修改
enumerable:false
})
}
3.3 Свойства доступа к объектам
1. Четыре характеристики свойств доступа:
configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性，默认为false
enumerable:表示能否通过for-in循环返回属性,默认为false
Get：在读取属性时调用的函数,默认值为undefined
Set：在写入属性时调用的函数,默认值为undefined
2. Определение: Свойства аксессора могут быть определены только с помощью метода Object.defineProperty().
export const defineObjAccess=()=>{
let personAccess={
_name:'张三',//_表示是内部属性,只能通过对象的方法修改
editor:1
}
Object.defineProperty(personAccess,'name',{
get:function(){
return this._name;
},
set:function(newName){
if(newName!==this._name){
this._name=newName;
this.editor++;
}
}
//如果只定义了get方法则改对象只能读
})
}
Суть базового реактивного принципа в vue заключается в захвате свойств геттеров и сеттеров данных через defineProperty для изменения данных.
4.axios
4.1 получить метод axios
export const getAjax= function (getUrl,getAjaxData) {
return axios.get(getUrl, {
params: {
'getAjaxDataObj1': getAjaxData.obj1,//obj1为getAjaxData的一个属性
'getAjaxDataObj2': getAjaxData.obj2
}
}).then(data=>{
//成功返回
}).catch(err=>{
//错误返回
})
}
4.2 Пост-метод аксиом
export const postAjax= function (getUrl,postAjaxData) {
return axios.post(postUrl, {
'postAjaxDataObj1': postAjaxData.obj1,//obj1为postAjaxData的一个属性
'postAjaxDataObj2': postAjaxData.obj2
}).then(data=>{
//成功返回
}).catch(err=>{
//错误返回
})
}
4.3 Перехватчик аксиом
Он в основном делится на два перехватчика: запрос и ответ.Перехват запроса обычно заключается в настройке соответствующей информации заголовка запроса (применимо к общим методам запроса, хотя метод get ajax не имеет заголовка запроса, но он инкапсулирован в axios) , а ответ обычно относится к обработке перехвата ответа, если возвращаемый результат равен [], его можно преобразовать в 0
1. Перехват запроса: поместите текущую информацию о городе в заголовок запроса
axios.interceptors.request.use(config => {
config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get('cityCode')
return config
},
2. Перехват ответа: обработка результата ответа
axios.interceptors.response.use((response) =>{
let data = response.data
if(response.request.responseType === 'arraybuffer'&&!data.length){
reponse.date=0
}
})
5.promise
Promise — это простой в использовании механизм управления асинхронными задачами, который инкапсулирует будущие значения, в основном решает адские обратные вызовы и контролирует порядок асинхронности.
5.1 Способ применения 1
export const promiseDemo=()=>{
new Promise((resolve,reject)=>{
resolve(()=>{
let a=1;
return ++a;
}).then((data)=>{
console.log(data)//data值为++a的值
}).catch(()=>{//错误执行这个
})
})
}
5.2 Метод приложения два
export const promiseDemo=()=>{
Promise.resolve([1,2,3]).then((data)=>{//直接初始化一个Promise并执行resolve方法
console.log(data)//data值为[1,2,3]
})
}
6. Оценка текстового поля
6.1 Все номера
Способ 1 (самый простой):
export const judgeNum1=(num1)=>{
if(typeof num1=='number'){
return true;
}else{
return false;
}
}
Метод 2: isNaN
export const judgeNum1=(num1)=>{
if(!isNaN(num1)){
return true;
}else{
return false;
}
}
Примечание. Когда num1 равно [] (пустой массив), "" (пустая строка) и null будут преобразованы в 0 числового типа в процессе, поэтому он также вернет false, таким образом оценивая число, поэтому вы можете использовать typeof для преобразования вышеуказанного. Особые случаи исключены.
Способ 3: Обычный
export const judgeNum1=(num1)=>{
let reg=/^[0-9]*$/
if(!reg.test(num1)){
console.log('num1是0-9')
}
}
6.2 Только цифры или буквы
Это обычное суждение Определите регулярку: пусть reg=/^[0-9a-zA-Z]*$/g
6.3 Допускаются только цифры, буквы и запятые
Потому что бывают случаи, когда вводится несколько чисел, разделенных запятыми. Определите регулярку: пусть reg=/^[0-9a-zA-Z,]*$/g
6.4 Судя по тому, что количество введенных цифр не превышает 16 цифр
Непосредственно используйте недавно добавленный атрибут длины строки для оценки
export const judgeNum1=(num1)=>{
if(num1.length>16){
console.log('num1超过16位')
}
}
6.5 Удаление пробелов слева и справа от символов
export const trimLeOrRi=(str)=>{ //Удаляем пробелы слева и справа return str.replace(/(^\s*)|(\s*$)/g, ""); }
конец
Я рад, что вы все еще можете видеть это здесь, эти классы могут не использоваться вами сейчас, но вы можете сначала сохранить их. Все могут общаться друг с другом, и следующая разработка проекта будет использоваться напрямую.Сейчас проект спешит в марте, это действительно может повысить эффективность разработки!Желаю вам счастливого нового года.