1. Дополнительная цепочка
В javaScript доступ к цепочке свойств объекта легко появляется, потому что определенное свойство не существует. Невозможно прочитать свойство 'xxx' неопределенного, затем добавляется оператор опциональной цепочки?., он сначала оценивает предыдущее значение, если оно неопределенное или нулевое, оно завершит последующий вызов и вернет неопределенное значение напрямую;
1.1 Доступ к глубоко вложенным свойствам
const obj = {
foo: {
bar: {
baz: 42,
},
},
};
const baz = obj?.foo?.bar?.baz; // 42
const safe = obj?.qux?.baz; // undefined
// Optional chaining and normal chaining can be intermixed
obj?.foo.bar?.baz; // Only access `foo` if `obj` exists, and `baz` if
// `bar` exists
// Example usage with bracket notation:
obj?.['foo']?.bar?.baz // 42
1.2 Вызов глубоко вложенных функций
const obj = {
foo: {
bar: {
baz() {
return 42;
},
},
},
};
const baz = obj?.foo?.bar?.baz(); // 42
const safe = obj?.qux?.baz(); // undefined
const safe2 = obj?.foo.bar.qux?.(); // undefined
const willThrow = obj?.foo.bar.qux(); // Error: not a function
// Top function can be called directly, too.
function test() {
return 42;
}
test?.(); // 42
exists?.(); // undefined
1.3 Создание глубоко вложенных классов
const obj = {
foo: {
bar: {
baz: class {
},
},
},
};
const baz = new obj?.foo?.bar?.baz(); // baz instance
const safe = new obj?.qux?.baz(); // undefined
const safe2 = new obj?.foo.bar.qux?.(); // undefined
const willThrow = new obj?.foo.bar.qux(); // Error: not a constructor
// Top classes can be called directly, too.
class Test {
}
new Test?.(); // test instance
new exists?.(); // undefined
1.4 Установка и использование
- Установить:
npm install --save-dev @babel/plugin-proposal-optional-chaining
yarn add @babel/plugin-proposal-optional-chaining --dev
- Настроить.babelrc:
{
"plugins": ["@babel/plugin-proposal-optional-chaining"]
}
2. Произвольно сгенерировать комбинацию букв и массивов
Math.random().toString(36).substr(2);
3. Преобразование логических значений
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"
В-четвертых, конвертировать числа
let number = '10';
number = +number;
console.log(number); // 10
let number = '10';
number = ~~number;
console.log(number); // 10
5. Альтернативный Math.pow
console.log(Math.pow(2, 3));
// 替代1
console.log(2 ** 3);
// 替代二，只能以二作为基数
console.log(2 << (3 - 1));
Шесть, быстрое число с плавающей запятой в целое число
console.log(10.9 | 0); // 10
console.log(-10.9 | 0); // 10
console.log(~~10.9);
console.log(~~-10.9);
Семь, уменьшение размерности массива
Двумерный массив
let arr = [ [1], [2], [3] ];
arr = Array.prototype.concat.apply([], arr);
console.log(arr);// [1, 2, 3]
let array = [ [1], [2], [3] ];
array = array.flat(2);
console.log(array); // [1, 2, 3]
Многомерные массивы
let arrMore = [1, 2, [3], [[4]]];
arrMore = arrMore.flat(Infinity);
console.log(arrMore);
Восемь, чтобы определить, равны ли десятичные дроби
console.log(0.1 + 0.2 === 0.3); // false
function equal(number1, number2) {
return Math.abs(number1 - number2) < Math.pow(2, -52);
}
console.log(equal(0.1 + 0.2, 0.3));
Девять, определить, является ли переменная массивом
1. instanceof
2. array.__proto__.constructor === Array
3. array.constructor === Array
4. Array.isArray（兼容性问题）
5. Object.prototype.toString.call([]) === "[object Array]"（最通用）
PS: Переменные, оцениваемые instanceof и конструктором, должны быть объявлены на текущей странице. Например: родительская страница является фреймом, в фрейм вводится страница (дочерняя страница), массив, объявленный в дочерней странице, копируется в переменную родительского элемента, затем instanceof и конструктор оценивают переменную и возвращают false. -------------------------------------------------- -------------------------------------------------- ------------- причина: Массив является составным типом. В процессе передачи происходит только передача ссылочного адреса. Адрес, на который ссылается собственный объект массива каждой страницы, отличается. Массив, объявленный на подстранице, соответствует конструктору, который является объектом массива подстраницы. Когда оценивается родительская страница, это не подстраница. множество.
10. Занятость массива
let array = Array(3).fill('');
console.log(array); //["", "", ""]
11. Дедупликация массива несколькими способами
11.1 Набор (наиболее часто используемый)
Array.prototype.unique = function() {
return [...new Set(this)];
}
var array = [1, 2, 3, 43, 45, 1, 2, 2, 4, 5];
array.unique();
11.2 Map
Array.prototype.unique = function() {
const tmp = new Map();
return this.filter(item => {
return !tmp.has(item) && tmp.set(item, 1);
})
}
var array = [1, 2, 3, 43, 45, 1, 2, 2, 4, 5];
array.unique();
11.3 Array.prototype.indexOf()
Array.prototype.unique = function() {
return this.filter((item, index) => {
return this.indexOf(item) === index;
})
}
var array = [1, 2, 3, 43, 45, 1, 2, 2, 4, 5];
array.unique();
11.4 Array.prototype.includes()
Array.prototype.unique = function() {
const newArray = [];
this.forEach(item => {
if (!newArray.includes(item)) {
newArray.push(item);
}
});
return newArray;
}
var array = [1, 2, 3, 43, 45, 1, 2, 2, 4, 5];
array.unique();
11.5 Array.prototype.reduce()
Array.prototype.unique = function() {
return this.sort().reduce((init, current) => {
if (init.length === 0 || init[init.length - 1] !== current) {
init.push(current);
}
return init;
}, []);
}
var array = [1, 2, 3, 43, 45, 1, 2, 2, 4, 5];
array.unique();
12. Работа в режиме короткого замыкания (&& ||)
Использование && вернет первое значение, условие которого ложно. Возвращает последнее оцененное выражение, если каждый операнд имеет значение true.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // 3
console.log(0 && null); // 0
Использование || вернет значение первого истинного условия. Если каждый операнд оценивается как false, возвращается последнее оцененное выражение.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // 1
console.log(0 || null); // null
Тринадцать, отфильтруйте нулевые значения
let result1 = [1, 2, 0, undefined, null, false, ''].filter(Boolean);
console.log(result1);
14. Создайте пустой объект
let dict = Object.create(null);
15. Объединяйте объекты
const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };
const summary = { ...person, ...tools, ...attributes };
console.log(summary);
16. Удалите пробелы из строк
String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");};
17. Преобразование объектов в массивы
var argArray = Array.prototype.slice.call(arguments);
Восемнадцать, оператор запятой
var a = 0;
var b = ( a++, 99 );
console.log(a);
console.log(b);
Девятнадцать, localStorage.getItem('key') === localStorage.key
источник:Шен Мо_Комментарий.
localStorage.setItem('item', 1);
localStorage.getItem('item') === localStorage.item;
20. Получить номер телефона из кучи текста
источник:моль огоньКомментарий.
([\s,，、]*)?((手机|联系方式|电话|联系人)号?)?(号码)?([、:：\s]*)?(?:[\s(（]*?\+?(86)?[\s)）]*)(1\d{2})(?:[-\s]*)(\d{4})(?:[-\s]*)(\d{4})(?=\D|$)
Двадцать один, целочисленный обмен переменными
источник:счастливый накакоКомментарий.
let a = 10;
let b = 50;
a = a ^ b;
b = a ^ b;
a = a ^ b;
console.log(a, b); // 50 10
Двадцать два, обмен целыми переменными
var a = 2;
var b = 4;
a = a + b;
b = a - b;
a = a - b;
console.log(a, b); // 4 2
Двадцать три, обмен целыми переменными
источник:пьяный, в твоих рукахКомментарий.
let a = 10;
let b = 50;
[a,b]=[b,a]
console.log(a);
console.log(b)
Двадцать четыре, быстро сгенерируйте увеличивающийся массив
источник:РадугаРадугаКомментарий.
Array.from({length: 10},(val, index)=>index);
// [0,1,2,3,4,5,6,7,8,9,10]
Комментируйте своих «странных людей» и пусть все узнают.
Ссылаться на: