предисловие
Программирование - очень приятная вещь. Для достижения цели у нас может быть много методов и путей. В этой статье мы представляем некоторые приемы и приемы JavaScript, которые предназначены только для справки. При написании кода в обычное время, например, много кратких и эффективные способы написания; добро пожаловать, чтобы оставить сообщение ниже.
1. Определение типа данных
1.1 typeof
Оператор typeof возвращает строку, представляющую тип невычисляемого операнда, тип данных оператора (возвращает строку, соответствующий список показан на рисунке)
1.2 instanceof
var str = "This is a simple string";
var num = 1111;
var boolean = true;
var und = undefined;
var nl = null;
var sb = Symbol('1111');
var obj = {}; // 非原始类型数据字面量定义
console.log(str instanceof String); // false
console.log(num instanceof Number); // false
console.log(boolean instanceof Boolean); // false
console.log(nl instanceof Object); // false
console.log(sb instanceof Symbol); // false
console.log(obj instanceof Object); // true
var strN = new String("This is a simple string");
var numN = new Number(1111);
var booleanN = new Boolean(true);
var objN = new Object();
console.log(strN instanceof String); // true
console.log(numN instanceof Number); // true
console.log(booleanN instanceof Boolean); // true
console.log(objN instanceof Object); // true
Оператор instanceof используется для проверки того, появляется ли свойство прототипа конструктора где-либо в цепочке прототипов объекта; Из приведенного выше результатаПримитивный тип данных, создаваемый литералом, не может быть оценен по экземпляру.
1.3 Object.propotype.toString
Object.prototype.toString.call('string'); //"[object String]"
Object.prototype.toString.call(1111); //"[object Number]"
Object.prototype.toString.call(true); //"[object Boolean]"
Object.prototype.toString.call(null); //"[object Null]"
Object.prototype.toString.call(undefined); //"[object Undefined]"
Object.prototype.toString.call(Symbol('111')); //"[object Symbol]"
Object.prototype.toString.call({}); //"[object Object]"
Вышеупомянутый способ является наиболее удобным и эффективным.
1.4 constructor
Сравните конструктор объекта с конструктором класса на равенство
var a = {}
a.constructor === Object // true
var b = '111';
b.constructor === String // true
var strN = new String('11111');
strN.constructor === String // true
var c = true;
c.constructor === Boolean // true
var d = Symbol('symbol')
d.constructor === Symbol // true
1.5 propotype
Сравнивает прототип объекта с прототипом конструктора на равенство
var a = {}
a.__proto__ === Object.prototype // true
var t = new Date();
t.__proto__ === Date.prototype // true
var str = 'sting';
str.__proto__ === String.prototype // true
var strN = new String('11111');
strN.__proto__ === String.prototype // true
2. Специальные операции с данными
2.1 Поменять местами два значения
2.1.1 Использовать числовое исключающее ИЛИ, равное 0, и операцию исключающего ИЛИ, чтобы соответствовать обменному курсу
var a = 3;
var b = 4
a ^= b; // a = a ^ b
b ^= a;
a ^= b;
console.log(a, b);
2.1.2 Использование назначения деструктуризации ES6
let a = 1;
let b = 2;
[b, a] = [a, b];
console.log(a, b);
2.2 десятичный
var num = 123.123
// 常用方法
console.log(parseInt(num)); // 123
// “双按位非”操作符
console.log(~~ num); // 123
// 按位或
console.log(num | 0); // 123
// 按位异或
console.log(num ^ 0); // 123
// 左移操作符
console.log(num << 0); // 123
2.3 Форматирование тысяч цифр
2.3.1 Использование Number.prototype.toLocaleString()
var num = 123455678;
var num1 = 123455678.12345;
var formatNum = num.toLocaleString('en-US');
var formatNum1 = num1.toLocaleString('en-US');
console.log(formatNum); // 123,455,678
console.log(formatNum1); // 123,455,678.123
2.3.2 Использование регулярных выражений
var num = 123455678;
var num1 = 123455678.12345;
var formatNum = String(num).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
var formatNum1 = String(num1).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
console.log(formatNum); // 123,455,678
console.log(formatNum1); // 123,455,678.12,345
3. Общие операции с объектными данными
3.1 Навыки глубокого клонирования
- 3.1.1 JSON.stringify преобразуется в символы, JSON.parse регенерирует тип данных JSON
function deepClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
var obj = {
number: 1,
string: 'abc',
bool: true,
undefined: undefined,
null: null,
symbol: Symbol('s'),
arr: [1, 2, 3],
date: new Date(),
userInfo: {
name: 'Better',
position: 'front-end engineer',
skill: ['React', 'Vue', 'Angular', 'Nodejs', 'mini programs']
},
func: function () {
console.log('hello better');
}
}
console.log(deepClone(obj))
Из результата печати можно нарисовать следующие выводы:
-
неопределенный, символ, тип функции напрямую отфильтровывают
-
тип даты автоматически преобразуется в строковый тип
- 3.1.2 Общий метод Простая рекурсия
function deepClone(obj) {
var newObj = obj instanceof Array ? [] : {};
for (let i in obj) {
newObj[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
}
return newObj;
}
var obj = {
number: 1,
string: 'abc',
bool: true,
undefined: undefined,
null: null,
symbol: Symbol('s'),
arr: [1, 2, 3],
date: new Date(),
userInfo: {
name: 'Better',
position: 'front-end engineer',
skill: ['React', 'Vue', 'Angular', 'Nodejs', 'mini programs']
},
func: function () {
console.log('hello better');
}
}
console.log(deepClone(obj))
Судя по напечатанным результатам, с этим методом реализации по-прежнему много проблем: этот метод может реализовывать только глубокое копирование определенных объектов (таких как объекты, массивы и функции) и не может реализовывать нулевые объекты и объекты-обертки Number, String, Boolean и Объект Date, копия объекта RegExp.
3.2 Метод обхода объекта
3.2.1 for-in
function A() {
this.a = 1
this.b = 1
}
A.prototype = {
c: 1,
d: 2
}
var a = new A()
for(var i in a) {
console.log(i)
}
Как видно из приведенных выше результатов печати, for-in будет проходить через свойства объекта, включая свойства в цепочке прототипов.
3.2.2 Object.entries()
function A() {
this.a = 1
this.b = 1
}
A.prototype = {
c: 1,
d: 2
}
var a = new A()
var et = Object.entries(a)
console.log(et)
Как видно из приведенных выше результатов, entry возвращает массив пар ключ-значение перечисляемых свойств самого данного объекта.
3.2.3 Object.keys(), Object.values()
function A() {
this.a = 1
this.b = 1
}
A.prototype = {
c: 1,
d: 2
}
var a = new A()
var keys = Object.keys(a)
var values = Object.values(a)
console.log(keys, values)
Как видно из приведенных выше результатов, ключи, значения возвращают массив перечисляемых свойств самого данного объекта и массив значений перечисляемых свойств собственного
4. Общие операции с массивами
4.1 Дедупликация массива
- 4.1.1 Настройка дедупликации
var arr = [1,2,1,1,22,4,5,6];
arr1 = [...new Set(arr)];
- 4.1.2 Сочетание метода фильтра массива с методом indexOf()
var arr = [1, 2, 3, 2, 6, '2', 3, 1];
function uniqueArr (arr) {
return arr.filter(function (ele, index, array) {
// 利用数组indexOf()方法，返回找到的第一个值的索引
// 如果数组元素的索引值与indexOf方法查找返回的值不相等，则说明该值重复了，直接过滤掉
return array.indexOf(ele) === index;
})
}
4.2 Одна строка кода для многомерных массивов для одномерного преобразования
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
var resultArr = arr.toString().split(',').map(Number);
console.log(resultArr); // [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]
4.3 Одна строка кода, чтобы узнать, сколько тегов использует веб-страница
[...new Set([...document.querySelectorAll('*')].map(node => node.tagName))].length;
4.4 Как реализовать a == 1 && a == 2 && a == 3
4.4.1 Переопределение метода toString массива
var a = [1, 2, 3];
// a.join = a.shift;
// a.valueOf = a.shift;
a.toString = a.shift;
console.log(a == 1 && a == 2 && a == 3); // true
Принцип: когда данные сложного типа сравниваются с данными базового типа, происходит неявное преобразование и вызывается метод toString() или valueOf().
4.4.2 Переопределение метода toString объекта
var a = {
value: 1,
toString: function () {
return a.value++;
}
}
console.log(a == 1 && a == 2 && a == 3); // true
4.5 Подсчитайте количество вхождений одного и того же символа в строку
var str = 'aaabbbccc66aabbc6';
var strInfo = str.split('').reduce((p, c) => (p[c]++ || (p[c] = 1), p), {});
console.log(strInfo); // {6: 3, a: 5, b: 5, c: 4}
4.6 Преобразование массивоподобных объектов в массивы
4.6.1 Использование Array.prototype.slice
var likeArrObj = {
0: 1,
1: 2,
2: 3,
length: 3
}
var arr1 = Array.prototype.slice.call(likeArrObj); // 或者使用[].slice.call(likeArrObj);
console.log(arr1); // [1, 2, 3]
4.6.2 Использование Array.from
var likeArrObj = {
0: 1,
1: 2,
2: 3,
length: 3
}
var arr = Array.from(likeArrObj);
console.log(arr); // [1, 2, 3]
4.6.3 Использование Object.values (здесь опущено)