1、 Массив.карта()
Используя метод .map(), вы можете создать массив ревизий на основе исходного массива. Метод .map() принимает функцию, которая выполняет итерацию по всем элементам массива и изменяет их соответствующим образом.
Метод .map() удобен, когда вам нужно обновить все элементы в массиве и сохранить их в новый массив.
Например, есть массив списков статей, как показано ниже:
const articles = [{article_id: "6976209276364652558",title: "如何在 vue 的计算属性中传递参数",views: 1258,},{article_id: "6976113133358153736",title: "Angular数据状态管理框架：NgRx/Store",views: 2258,},{article_id: "6975722363241365534",title: "Angular管道PIPE介绍",views: 1568,},];
Теперь, основываясь на приведенном выше массиве списка статей, получите массив всех заголовков следующим образом:
const arrayTitles = articles.map((item) => item.title);console.log(arrayTitles);
Результаты на выходе следующие:
['如何在 Vue 的计算属性中传递参数','Angular数据状态管理框架：NgRx/Store','Angular管道PIPE介绍']
Конечно, если это массив, вы можете использовать .map(), а затем добавить информацию об авторе на основе приведенного выше массива заголовков следующим образом:
const arrayTitlesWithAuthor = arrayTitles.map((title) => `《${title}》作者：天行无忌`);console.log(arrayTitlesWithAuthor);
Вывод следующий:
['《如何在 Vue 的计算属性中传递参数》作者：天行无忌','《Angular数据状态管理框架：NgRx/Store》作者：天行无忌','《Angular管道PIPE介绍》作者：天行无忌']
Метод .map() — это общий метод для создания нового массива, изменения его содержимого и сохранения исходного массива без изменений. Полезно, когда возникает необходимость изменить содержимое существующего массива и сохранить результат как новую переменную.
2、Массив.фильтр()
Его назначение легко узнать из названия метода, да, он используется для фильтрации элементов массива.
Метод filter() получает элементы в массиве на основе определенного условия, как и метод .map(), он возвращает новый массив и сохраняет исходный массив без изменений.
Основываясь на приведенном выше массиве статей, получите список статей с просмотрами менее 2000 и более 2000 соответственно:
const lessArticles = articles.filter((item) => item.views < 2000);const muchArticles = articles.filter((item) => item.views > 2000);console.log(lessArticles);console.log("\r\n==========================================\r\n");console.log(muchArticles);
Результаты на выходе следующие:
[{article_id: '6976209276364652558',title: '如何在 Vue 的计算属性中传递参数',views: 1258},{article_id: '6975722363241365534',title: 'Angular管道PIPE介绍',views: 1568}]==========================================[{article_id: '6976113133358153736',title: 'Angular数据状态管理框架：NgRx/Store',views: 2258}]
Вы можете использовать .filter(), когда вам нужно удалить элементы из массива, которые не соответствуют определенным критериям.
3、Массив.найти()
Метод .find() очень похож на ранее представленный метод .filter(). То же, что и метод .filter(), возвращает элементы, соответствующие критериям, разница в том, что .find() возвращает только первый элемент, соответствующий заданным критериям, а не массив.
Измените указанный выше метод .filter() на .find() следующим образом:
const lessArticle = articles.find((item) => item.views < 2000);const muchArticle = articles.find((item) => item.views > 2000);console.log(lessArticle);console.log("\r\n==========================================\r\n");console.log(muchArticle);
Вывод следующий:
{article_id: '6976209276364652558',title: '如何在 Vue 的计算属性中传递参数',views: 1258}=========================================={article_id: '6976113133358153736',title: 'Angular数据状态管理框架：NgRx/Store',views: 2258}
** Когда использовать Array.find()? ** Когда вам нужно получить первый элемент массива, соответствующий заданному условию.
4、Массив.для каждого()
Метод .forEach() работает почти так же, как обычный цикл for, просматривая массив и выполняя функцию для каждого элемента. Первый аргумент .forEach() — это функция обратного вызова, которая содержит текущее значение и индекс зацикленного массива.
следующим образом:
articles.forEach((item, index) => {console.log(`文章索引 ${index} 的标题为《${item.title}》`);});
Вывод следующий:
文章索引 0 的标题为《如何在 Vue 的计算属性中传递参数》文章索引 1 的标题为《Angular数据状态管理框架：NgRx/Store》文章索引 2 的标题为《Angular管道PIPE介绍》
8、Массив.уменьшить()
Метод .reduce() принимает функцию обратного вызова в качестве первого аргумента и необязательное начальное значение в качестве второго аргумента.
Если начальное значение не указано, в качестве значения используется первый элемент массива. Функция обратного вызова предоставляет параметры аккумулятора и currentValue для выполнения вычисления сокращения.
Вот простой пример накопления и суммирования просмотров массива статей:
const sumViews = articles.reduce((accumulator, current) => accumulator + current.views,0);console.log(sumViews); // 5084
Метод .reduce() можно использовать для выравнивания массива, конечно, уже есть много способов сделать это, и это один из них.
const flattened = [[0, 1],[2, 3],[4, 5],].reduce((accumulator, current) => accumulator.concat(current), []);console.log(flattened); // [ 0, 1, 2, 3, 4, 5 ]
Когда вам нужно преобразовать массив в одно значение, манипулируя его значениями, вы можете использовать метод .reduce().
1, если
Вы устали от использования большого количества операторов if? Давайте рассмотрим некоторые варианты, которые могут здесь помочь.
//longhandif (fruit === 'apple' || fruit === 'banana' || fruit === 'orange' || fruit ==='mango') {//logic}//shorthandif (['apple', 'banana', 'orange', 'mango'].includes(fruit)) {//logic}
2. Сокращение для If...else
Это поможет вам, когда мы захотим использовать оператор if-else. Когда вы используете 2-3 if..else, это снижает читабельность вашего кода.
// Longhandlet mychoice: boolean;if (money > 100) {mychoice= true;} else {mychoice= false;}// Shorthandlet mychoice= (money > 10) ? true : false;//or we can use directlylet mychoice= money > 10;console.log(mychoice);
Вложенные условия следующие:
let salary = 300,checking = (salary > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';console.log(checking); // "greater than 100"
3. Объявление переменной
Мы можем избежать записи дважды, когда у нас есть переменные одного и того же типа.
//Longhandlet data1;let data2= 1;//Shorthandlet data1, data2= 1;
8. Назначение
//Longhandlet data1, data2, data3;data1 = 1;data2 = 2;data3 = 3;//Shorthandlet [data1, data2, data3] = [1, 2, 3];
9. Оператор присваивания
Он в основном используется, когда мы имеем дело с арифметическими операторами, и лично мне здесь нравится сокращение, потому что оно более удобочитаемо.
// Longhanddata1 = data1 + 1;data2 = data2 - 1;data3 = data3 * 30;// Shorthanddata1++;data2--;data3 *= 30;
5. Оператор спреда
Вы можете использовать оператор распространения (...), чтобы «распространить» элементы одного массива на другой массив. Например, давайте объединим два массива чисел:
const nums1 = [1, 2, 3];const nums2 = [4, 5, 6];// LONG FORMlet newArray = nums1.concat(nums2);// SHORTHANDnewArray = [...nums1, ...nums2];
Вы также можете использовать этот синтаксис вместо помещения значений в массив:
let numbers = [1, 2, 3];// LONGER FORMnumbers.push(4);numbers.push(5);// SHORTHANDnumbers = [...numbers, 4, 5];
7. Удалить дубликаты
const numbers = [1, 1, 20, 3, 3, 3, 9, 9];const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]
13. Функция
//Longhandfunction add(a, b) {return a + b;}//Shorthandconst add = (a, b) => a + b;
Давайте посмотрим на другой пример.
function function(value) {console.log('value', value);}function= value => console.log('value', value);
14. Короткие вызовы функций
Мы можем использовать тернарный оператор для достижения этих функций.
// Longhandfunction data1() {console.log('data1');};function data2() {console.log('data2');};var data3 = 1;if (data3 == 1) {data1();} else {data2();} //data1// Shorthand(data3 === 1 ? data1 : data2)(); //data1
18. Значения
//Longhandfunction add(data1, data2) {if (data1 === undefined) data1 = 1;if (data2 === undefined) data2 = 2;return data1 + data2;}//shorthandadd = (data1 = 1, data2 = 2) => data1 + data2;console.log(add()); //output: 3
20. Литеральная строка шаблона
Если вы ищете трюк для добавления нескольких значений в строку, то этот трюк для вас.
//longhandconst literal = 'Hi ' + data1 + ' ' + data2 + '.'//shorthandconst literal= `Hi ${data1} ${data2}`;
22. Назначение
let data1 = 'abcd';let data2 = 'efgh';//Longhandlet data = {data1: data1, data2: data2};//Shorthandlet data = {data1, data2};
11. Назначение атрибутов объекта
Если вы хотите, чтобы ключи объекта имели то же имя, что и значения, вы можете опустить литерал объекта:
const name = "Luis", city = "Paris", age = 43, favoriteFood = "Spaghetti";// LONGER FORMconst person = {name: name,city: city,age: age,favoriteFood: favoriteFood};// SHORTHANDconst person = { name, city, age, favoriteFood };
24. Деструктуризация заданий
//longhandconst data1 = this.data.data1;const data2 = this.data.data2;const data2 = this.data.data3;//shorthandconst { data1, data2, data3 } = this.data;
21. Используйте одну строку для назначения нескольких значений
Вы можете использовать деструктурирование для одновременного присвоения нескольких значений:
let num1, num2;// LONGER FORMnum1 = 10;num2 = 100;// SHORTHAND[num1, num2] = [10, 100];
Это также можно использовать при работе с объектами:
student = {name: "Matt",age: 29,};// LONGER FORMlet name = student.name;let age = student.age;// SHORTHANDlet { name, age } = student;
22. Поменять местами две переменные без третьей переменной
В JavaScript можно использовать деструктурирование для извлечения значений из массивов. Это также можно использовать для замены двух переменных без третьего помощника:
let x = 1;let y = 2;// LONGER FORMlet temp = x;x = y;y = temp;// SHORTHAND[x, y] = [y, x];
16. Объявить переменные
Вы можете аккуратно объединить объявления переменных в одну строку следующим образом:
// LONGER FORMlet name;let age;let favoriteFood = "Pizza";// SHORTHANDlet name, age, favoriteFood = "Pizza";
25. Метод поиска массива
Один из методов поиска первого совпадающего значения в массиве.
const data = [{type: 'data1',name: 'abc'},{type: 'data2',name: 'cde'},{type: 'data1',name: 'fgh'},]function datafinddata(name) {for (let i = 0; i < data.length; ++i) {if (data[i].type === 'data1' && data[i].name === name) {return data[i];}}}//ShorthandfilteredData = data.find(data => data.type === 'data1' && data.name === 'fgh');console.log(filteredData); // { type: 'data1', name: 'fgh' }
26. Побитовый индекс
Что, если бы мы могли объединить метод indexof с сокращением? Побитовый метод indexof делает то же самое для нас.
//longhandif (data.indexOf(item) > -1) { // item found}if (data.indexOf(item) === -1) { // item not found}//shorthandif (~data.indexOf(item)) { // item found}if (!~data.indexOf(item)) { // item not found}
Мы также можем использовать функцию contains.
if (data.includes(item)) {// true if the item found}
31. Найдите максимальное и минимальное
const data = [1, 4, 3];Math.max(…data); // 4Math.min(…data); // 1
32. Получить символы
let str = 'test';//Longhandstr.charAt(2); // s//ShorthandNote: this is only works if we know the index of matched characterstr[2]; // c
4. Получить текущий URL-адрес
Этот фрагмент кода поможет получить текущий URL-адрес, по которому запущен javascript. Это удобно при отладке переднего плана.
const currentURL = () => window.location.href;currentURL() // https://medium.com/@codedev10
16. Перенаправление на URL
Этот фрагмент — мой любимый, он перенаправляет вас на URL-адрес. Это удобно в веб-разработке, когда вы перенаправляете на веб-сайт. когда пользователь выполняет какие-либо действия.
const redirect = (url, asLink = true) => asLink ? (window.location.href = url) : window.location.replace(url);redirect('https://medium.com/')redirect('https://codedev101.medium.com/')
CSS
2. Повторное использование кода
Многие разработчики считают, что код очень повторяется, когда речь идет о CSS, что не является хорошей практикой при разработке проектов.
К счастью, теперь есть препроцессоры CSS (sass/scss, less, stylus, Turbine), которые позволяют нам лучше планировать код CSS и улучшать возможность его повторного использования.
Конечно, необходимо улучшить повторное использование кода, или необходима определенная основа CSS для разработки структуры кода, как показано ниже:
/* 不提倡 */.container {background-color: #efefef;border-radius: 0.5rem;}.sidebar {background-color: #efefef;border-radius: 0.5rem;}/* 建议 */.container,.sidebar {background-color: #efefef;border-radius: 0.5rem;}
3. Текстовая тень
text-shadow добавляет тени к веб-шрифтам, устанавливая соответствующие значения атрибута для атрибута text-shadow.
Свойства и значения описываются следующим образом:
text-shadow: [Смещение по X, Смещение по Y, Размытие, Цвет];
X-смещение: Относится к положению, в котором тень расположена по горизонтальному смещению шрифта.
Y-смещение: Относится к положению, в котором тень расположена по вертикальному смещению шрифта.
Размытие: Относится к значению размытия тени.
цвет: Относится к цвету тени;
h1{text-shadow: 5px 5px 5px #FF0000;}
15. Расстояние между текстом
Расстояние между текстом и отступом заголовка Word, расстояние между буквами и интервал между словами
p{text-indent：10px；//单词抬头距离letter-spacing：10px；//间距}