Эта статья приняла участие"Проект "Звезда раскопок"", чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.
Автор: Хасиб Анвар Переводчик: Front-end Xiaozhi Источник: среда
Есть мечта, есть галантерейные товары, поиск в WeChat【Переезд в мир】Обратите внимание на эту мудрость чаши-щетки, которая все еще моет посуду ранним утром.
Эта статьяGitHubGitHub.com/QQ449245884…Включено, и есть полные тестовые площадки, материалы и мой цикл статей для интервью с производителями первой линии.
В JavaScript есть много интересных функций, о которых большинство начинающих и средних разработчиков не знают. Делюсь некоторыми сегодня, некоторыми трюками, которые я часто использую в своих проектах.
1. Условное добавление свойств к объектам
Мы можем использовать оператор спреда (...) для быстрого условного добавления свойств к объектам JS.
const condition = true;
const person = {
id: 1,
name: 'John Doe',
...(condition && { age: 16 }),
};
Если значение каждого операндаtrue,но&&Оператор возвращает последнее оцененное выражение. поэтому возвращает объект{age: 16}, который затем расширяется доpersonчасть объекта.
еслиconditionдляfalse, JavaScript сделает что-то вроде этого:
const person = {
id: 1,
name: '前端小智',
...(false),
};
// 展开 `false` 对对象没有影响
console.log(person); // { id: 1, name: 'John Doe' }
2. Проверьте, существует ли свойство в объекте
можно использоватьinключевое слово, чтобы проверить, существует ли свойство в объекте JavaScript.
const person = { name: '前端小智', salary: 1000 };
console.log('salary' in person); // true
console.log('age' in person); // false
3. Динамические имена свойств в объектах
Задать свойства объекта с помощью динамических ключей очень просто. просто используйте['key name']чтобы добавить свойства:
const dynamic = 'flavour';
var item = {
name: '前端小智',
[dynamic]: '巧克力'
}
console.log(item); // { name: '前端小智', flavour: '巧克力' }
Тот же прием можно использовать для ссылки на свойства объекта с помощью динамических ключей:
const keyName = 'name';
console.log(item[keyName]); // returns '前端小智'
4. Деструктуризация объекта с помощью динамических ключей
Мы знаем, что при деструктурировании объектов мы можем использовать:чтобы переименовать разрушенное свойство. Но знаете ли вы, что когда имя ключа является динамическим, также возможно деструктурировать свойства объекта?
const person = { id: 1, name: '前端小智' };
const { name: personName } = person;
console.log(personName); // '前端小智'
Теперь мы деструктурируем свойство с помощью динамических ключей:
const templates = {
'hello': 'Hello there',
'bye': 'Good bye'
};
const templateName = 'bye';
const { [templateName]: template } = templates;
console.log(template); // Good bye
5. Нулевое слияние??оператор
Когда мы хотим проверить, является ли переменнаяnullилиundefinedчас,??Операторы полезны. когда его левый операндnullилиundefinedКогда возвращается количество операндов справа, в противном случае возвращается количество операндов слева.
const foo = null ?? 'Hello';
console.log(foo); // 'Hello'
const bar = 'Not null' ?? 'Hello';
console.log(bar); // 'Not null'
const baz = 0 ?? 'Hello';
console.log(baz); // 0
В третьем примере вернитесь0, потому что даже если0считается ложным в JS, но это неnullилиundefinedиз. Вы можете подумать, что мы можем использовать оператор ||, но между ними есть разница.
Вы можете подумать, что мы могли бы использовать здесь||Оператор, но между ними есть разница.
const cannotBeZero = 0 || 5;
console.log(cannotBeZero); // 5
const canBeZero = 0 ?? 5;
console.log(canBeZero); // 0
6. Дополнительная цепь?.
Часто ли мы сталкиваемся с такими ошибками:TypeError: Cannot read property ‘foo’ of null. Это раздражающая проблема для каждого разработчика Yi. Для решения этой проблемы была введена необязательная цепочка. Посмотри:
const book = { id:1, title: 'Title', author: null };
// 通常情况下，你会这样做
console.log(book.author.age) // throws error
console.log(book.author && book.author.age); // null
// 使用可选链
console.log(book.author?.age); // undefined
// 或深度可选链
console.log(book.author?.address?.city); // undefined
Вы также можете использовать необязательную цепочку таких функций:
const person = {
firstName: '前端',
lastName: '小智',
printName: function () {
return `${this.firstName} ${this.lastName}`;
},
};
console.log(person.printName()); // '前端 小智'
console.log(persone.doesNotExist?.()); // undefined
7. Используйте!!оператор
!!операторы можно использовать для быстрого преобразования результата выражения в логическое значение (trueилиfalse):
const greeting = 'Hello there!';
console.log(!!greeting) // true
const noGreeting = '';
console.log(!!noGreeting); // false
8. Преобразование строк и целых чисел
использовать+оператор для быстрого преобразования строк в числа:
const stringNumer = '123';
console.log(+stringNumer); //123
console.log(typeof +stringNumer); //'number'
Чтобы быстро преобразовать числа в строки, вы также можете использовать+оператор, за которым следует пустая строка:
const myString = 25 + '';
console.log(myString); //'25'
console.log(typeof myString); //'string'
Эти преобразования типов очень удобны, но они менее наглядны и менее читаемы в коде.Поэтому актуальная разработка должна быть тщательно отобрана и использована.
9. Проверка ложных значений в массиве
Все должны были использовать метод массива:filter,some,every, эти методы можно комбинировать сBooleanметод для проверки истинных и ложных значений.
const myArray = [null, false, 'Hello', undefined, 0];
// 过滤虚值
const filtered = myArray.filter(Boolean);
console.log(filtered); // ['Hello']
// 检查至少一个值是否为真
const anyTruthy = myArray.some(Boolean);
console.log(anyTruthy); // true
// 检查所有的值是否为真
const allTruthy = myArray.every(Boolean);
console.log(allTruthy); // false
Вот как это работает. Мы знаем, что эти методы массива принимают функцию обратного вызова, поэтому мы передаемBooleanкак функция обратного вызова.BooleanСама функция принимает один параметр и возвращает значение на основе истинности параметра.trueилиfalse. так:
myArray.filter(val => Boolean(val));
Эквивалентно:
myArray.filter(Boolean);
10. Сглаживание массивов
Есть метод на прототипе Arrayflat, вы можете сделать один массив из массива массивов.
const myArray = [{ id: 1 }, [{ id: 2 }], [{ id: 3 }]];
const flattedArray = myArray.flat();
//[ { id: 1 }, { id: 2 }, { id: 3 } ]
Вы также можете определить уровень глубины, указав, насколько глубоко должна быть сплющена вложенная структура массива. Например:
const arr = [0, 1, 2, [[[3, 4]]]];
console.log(arr.flat(2)); // returns [0, 1, 2, [3,4]]
11.Object.entries
Большинство разработчиков используютObject.keysметод для перебора объектов. Этот метод возвращает только массив ключей объекта, а не значений. мы можем использоватьObject.entriesдля получения ключей и значений.
const person = {
name: '前端小智',
age: 20
};
Object.keys(person); // ['name', 'age']
Object.entries(data); // [['name', '前端小智'], ['age', 20]]
Чтобы перебрать объект, мы можем сделать следующее:
Object.keys(person).forEach((key) => {
console.log(`${key} is ${person[key]}`);
});
// 使用 entries 获取键和值
Object.entries(person).forEach(([key, value]) => {
console.log(`${key} is ${value}`);
});
// name is 前端小智
// age is 20
Оба вышеуказанных метода возвращают один и тот же результат, ноObject.entriesЛегче получить пары ключ-значение.
12. Метод замены всех
В JS, чтобы заменить все вхождения строки другой строкой, нам нужно использовать регулярное выражение, подобное этому:
const str = 'Red-Green-Blue';
// 只规制第一次出现的
str.replace('-', ' '); // Red Green-Blue
// 使用 RegEx 替换所有匹配项
str.replace(/\-/g, ' '); // Red Green Blue
Но в ES12 файл с именемreplaceAllДобавлен новый методString.prototype, он заменяет все вхождения строки другим строковым значением.
str.replaceAll('-', ' '); // Red Green Blue
13. Разделитель чисел
Вы можете использовать подчеркивание в качестве разделителя цифр, что упрощает подсчет количества нулей в числе.
// 难以阅读
const billion = 1000000000;
// 易于阅读
const readableBillion = 1000_000_000;
console.log(readableBillion) //1000000000
Разделитель подчеркивания также можно использовать для чисел BigInt, как показано в следующем примере.
const trillion = 1000_000_000_000n;
console.log(trillion); // 1000000000000
14.document.designMode
Связанный с интерфейсом JavaScript, режим дизайна позволяет редактировать любой контент на странице. Просто откройте консоль браузера и введите следующее.
document.designMode = 'on';
15. Логический оператор присваивания
Логический оператор присваивания определяется логическим оператором&&,||,??и оператор присваивания=комбинированный.
const a = 1;
const b = 2;
a &&= b;
console.log(a); // 2
// 上面等价于
a && (a = b);
// 或者
if (a) {
a = b
}
экзаменaВерно ли значение, если верно, то обновитьaценность . использовать логические или||Операторы также могут сделать то же самое.
const a = null;
const b = 3;
a ||= b;
console.log(a); // 3
// 上面等价于
a || (a = b);
Используйте оператор объединения null??:
const a = null;
const b = 3;
a ??= b;
console.log(a); // 3
// 上面等价于
if (a === null || a === undefined) {
a = b;
}
Уведомление:??оператор только проверяетnullилиundefinedценность .
~~ Готово, я посудомойка мудрость Лайки и просмотры лучшая поддержка для меня Я буду хорошо мыть посуду.
Добро пожаловать для обсуждения в области комментариев, официальный представитель Nuggets будет вПроект «Звезда раскопок»После мероприятия в комментариях будет разыграно 100 штук Наггетсов, подробности розыгрыша читайте в статье о мероприятии.
Ошибки, которые могут быть в редактировании, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки потом, много времени тратится на отладку журнала.Кстати, всем рекомендую полезный инструмент мониторинга BUG.Fundebug.
оригинал:
лучшее программирование.универсальное/10-современное-просто… лучшее программирование.универсальный/5-cool-touch...
общаться с
Статья постоянно обновляется каждую неделю, вы можете искать в WeChat **【Moving the World】Сначала прочитай, ответь[Благополучие] **Вас ждет много фронтенд-видео, эта статья GitHubGitHub.com/QQ449245884…Он был записан, добро пожаловать в Star.