Одновременно опубликовано в публичном аккаунте WeChat:Внешний микроблог
В прошлой статье "Советы, которые вы могли не знать о Chrome DevTools" я получил отзывы от многих разработчиков, что я действительно не знаю этих советов. Сегодня поговорим оEcmaScript 5/6+Некоторые из советов в разделе комментариев приветствуются для обсуждения других советов.
JSON.stringify
Мы часто используемJSONОбъект, например, когда мы хотим реализовать глубокую копию объекта, мы можем использоватьJSONобъектJSON.stringifyиJSON.parseскопировать идентичный объект без какой-либо ссылки на исходный объект. в настоящее время используетlocalStorage, он также используется, потому чтоlocalStorageМожно сохранить только содержимое в строковом формате, поэтому мы преобразуем значение вJSON字符串, когда он вынимается для использования, он преобразуется в объект или массив.
заJSON.stringifyметод, который может помочь нам поставитьобъект или массивпреобразовать вJSON字符串. Обычно мы используем только его первый параметр, на самом деле у него есть еще два параметра, благодаря которым он может выполнять некоторые очень полезные функции.
Сначала посмотрите на синтаксис:
JSON.stringify(value[, replacer [, space]])
параметр:
- value: значение переменной для сериализации
- заменитель: Заменитель. Может быть функцией или массивом, если это функция, то
valueКаждое свойство обрабатывается этой функцией, и возвращаемое значение этой функции является окончательным сериализованным значением. Если это массив, элементы массива должны быть строками, и эти элементы будут рассматриваться какvalueключ (key) для сопоставления, а окончательный сериализованный результат состоит в том, что каждый элемент массива содержит толькоkeyзначение . - пробел: определяет отступ кода выходного значения, используемый для украшения формата, который может быть числом или строкой. Если это число (до 10), оно показывает, на сколько пробелов нужно отступать в каждой строке кода. Если это строка, то строка (до первых десяти символов) будет отображаться перед каждой строкой кода.
На данный момент, вы должны знать. мы можем использоватьJSON.stringifyЧтобы выполнить фильтрацию во время сериализации, это эквивалентно тому, что мы можем настроитьJSON.stringifyлогика разбора.
Используйте функции для фильтрации и сериализации объектов:
// 使用“函数”当替代器
function replacer(key, value) {
if (typeof value === "string") {
return undefined;
}
return value;
}
var foo = {
foundation: "Mozilla",
model: "box",
week: 45,
transport: "car",
month: 7
};
var jsonString = JSON.stringify(foo, replacer);
// {"week":45,"month":7}
Используйте массив для фильтрации и сериализации объектов:
// 使用“数组”当替代器
const user = {
name: 'zollero',
nick: 'z',
skills: ['JavaScript', 'CSS', 'HTML5']
};
JSON.stringify(user, ['name', 'skills'], 2);
// "{
// "name": "zollero",
// "skills": [
// "JavaScript",
// "CSS",
// "HTML5"
// ]
// }"
Еще один интересный объектtoJSONАтрибуты.
если объект имеетtoJSONсвойство, когда оно сериализуется,Объект не будет сериализован, но егоtoJSON Возвращаемое значение метода сериализуется.
См. пример ниже:
var obj = {
foo: 'foo',
toJSON: function () {
return 'bar';
}
};
JSON.stringify(obj); // '"bar"'
JSON.stringify({x: obj}); // '{"x":"bar"}'
Дедупликация массива с помощью Set
существуетES6, вводится новый тип структуры данных:Set. иSetиArrayСтруктура очень похожа иSetиArrayмогут быть преобразованы друг в друга.
Дедупликация массива также является относительно распространенным вопросом на собеседовании перед интерфейсом.Существует много методов, поэтому я не буду здесь вдаваться в подробности. Давайте посмотрим на использованиеSetи...（拓展运算符）Дедупликацию массива можно сделать очень легко.
const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
//=> [42, "foo", true]
Избегайте конфликтов имен с областью действия блока
В процессе разработки обычно встречается проблема конфликта имен, то есть разные значения необходимо определять по разным сценариям для присвоения одной и той же переменной. Далее описано использованиеES6середина块级作用域метод решения этой проблемы.
Например, используяswitch case, мы можем сделать это:
switch (record.type) {
case 'added': {
const li = document.createElement('li');
li.textContent = record.name;
li.id = record.id;
fragment.appendChild(li);
break;
}
case 'modified': {
const li = document.getElementById(record.id);
li.textContent = record.name;
break;
}
}
Проверка значения функционального параметра
мы знаем, что вES6В , в функцию добавлена возможность значения параметра по умолчанию.Вы можете установить некоторые значения по умолчанию для параметров, что может сделать код более лаконичным и удобным в сопровождении.
На самом деле, мы можем использовать эту функцию, чтобы сделатьПроверка значений параметров функции.
Прежде всего, параметром функции может быть значение любого типа или функция, например следующая:
function fix(a = getA()) {
console.log('a', a)
}
function getA() {
console.log('get a')
return 2
}
fix(1);
// a 1
fix();
// get a
// a 2
Видно, что если позвонитьfixпараметры передаютсяa, функция не будет выполненаgetA, только если аргументы не переданыaКогда функция выполняетсяgetA.
В настоящее время мы можем воспользоваться этой возможностью для параметраaДобавляем обязательную проверку, код такой:
function fix(a = require()) {
console.log('a', a)
}
function require() {
throw new Error('缺少了参数 a')
}
fix(1);
// a 1
fix();
// Uncaught Error: 缺少了参数 a
Фильтрация свойств объекта с назначением деструктурирования
Ранее мы ввели использованиеJSON.stringifyметод для фильтрации свойств объекта. Здесь мы вводим другое использованиеES6середина解构赋值и拓展运算符Атрибуты для методов фильтрации свойств.
Например, следующий пример:
// 我们想过滤掉对象 types 中的 inner 和 outer 属性
const { inner, outer, ...restProps } = {
inner: 'This is inner',
outer: 'This is outer',
v1: '1',
v2: '2',
v4: '3'
};
console.log(restProps);
// {v1: "1", v2: "2", v4: "3"}
Получить свойства вложенных объектов с назначением деструктурирования
解构赋值Эта функция очень мощная, она может помочь нам легко получить то, что мы хотим, из множества глубоко вложенных свойств объекта. Например следующий код:
// 通过解构赋值获取嵌套对象的值
const car = {
model: 'bmw 2018',
engine: {
v6: true,
turbo: true,
vin: 12345
}
};
// 这里使用 ES6 中的简单写法，使用 { vin } 替代 { vin: vin }
const modalAndVIN = ({ model, engine: { vin }}) => {
console.log(`model: ${model}, vin: ${vin}`);
}
modalAndVIN(car);
// "model: bmw 2018, vin: 12345"
Объединить объекты
ES6добавлено в拓展运算符, который можно использовать для уничтожения массива или объекта, он может расширить все свойства объекта.
С помощью этой функции мы можем выполнять некоторые операции слияния объектов следующим образом:
// 使用拓展运算符合并对象，在后面的属性会重写前面相同属性的值
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { c: 5, d: 9 };
const merged = { ...obj1, ...obj2 };
console.log(merged);
// {a: 1, b: 2, c: 5, d: 9}
const obj3 = { a: 1, b: 2 };
const obj4 = { c: 3, d: { e: 4, ...obj3 } };
console.log(obj4);
// {c: 3, d: {a: 1, b: 2, e: 4} }
Используйте === вместо ==
существуетJavaScriptсередина,===и==большая разница,==Переменные с обеих сторон экранируются, и сравниваются экранированные значения, при этом===Это строгое сравнение, которое требует, чтобы переменные с обеих сторон не только имели одинаковое значение, но и имели одинаковый тип.
JavaScriptЧасто высмеиваемый как магический язык, именно из-за его свойств ускользания он используется с==Может ввести некоторые глубоко запрятанные ошибки. Держитесь подальше от ошибок, по-прежнему используйте===:
[10] == 10 // true
[10] === 10 // false
'10' == 10 // true
'10' === 10 // false
[] == 0 // true
[] === 0 // false
'' == false // true
'' === false // false
Конечно, используя===проблемы, такие как:
NaN === NaN // false
ES6Новый метод представлен в:Object.is(),она имеет===Некоторые особенности , и лучше и точнее, и лучше реализованы в некоторых особых сценариях:
Object.is(0 , ' '); //false
Object.is(null, undefined); //false
Object.is([1], true); //false
Object.is(NaN, NaN); //true
На картинке ниже примерно==,===иObject.isСравнение:
Цитировать: