В этом посте вы узнаете, как оптимизировать код по длине и удобочитаемости с помощью деструктуризации (функция из ECMAScript 6)!
Цель: распечатать пользователя с определенными свойствами с наименьшим объемом кода наиболее читаемым и чистым способом с деструктуризацией объекта.
/go1.js
var run = (userObject) => {
console.log("name", userObject.name);
console.log("age", userObject.age);
console.log("height", userObject.height);
}
var userObject = {name: "Ben", age: 20, height: 1.84}
run(userObject)
Сначала вы объявляете и инициализируете переменную run с помощью функции, которая принимает пользовательский объект в качестве единственного параметра. В рамках этой функции «запустить» вы распечатываете все пользовательские свойства.
Сразу под ним вы определяете пользовательский объект, который вы используете в следующей строке как аргумент функции для функции «run».
/go2.js
var run = (userObject) => {
userObject.age = userObject.age || '999'
console.log("name", userObject.name);
console.log("age", userObject.age);
console.log("height", userObject.height);
}
var userObject = {name: "Ben", height: 1.84}
run(userObject)
Единственное, что вы здесь добавили, - это «уловка»: если у пользователя нет свойства age, вы дадите ему значение «999».
/go3.js
ТЕПЕРЬ ИНТЕРЕСНО!
var run = ({name, age, height}) => {
age = age || 999
console.log("name", name);
console.log("age", age);
console.log("height", height);
}
run({name: "Ben", height: 1.84})
Вместо использования пользовательской переменной в качестве параметра функции теперь используется объект, который деструктурирует данный аргумент в свойствах, определенных внутри объекта. Это сделает определенные свойства доступными в самой функции.
Кроме того, вы не объявляете и не инициализируете объект пользователя отдельно, вместо этого вы передаете его напрямую в вызов функции, потому что он вам больше нигде не нужен.
Теперь вы видите самое большое преимущество деструктуризации, что означает, что вам не нужно использовать объект «userObject» для вызова каждого свойства, вместо этого вы используете свойства, как если бы они были определены как параметры функции по умолчанию. Вы также сохраняете некоторую избыточность, что делает ваш код меньше, легче читается и чище.
/go4.js
var run = ({age = 999, name, height}) => {
console.log("name", name);
console.log("age", age);
console.log("height", height);
}
run({name: "Ben", height: 1.84})
На последнем шаге вы удаляете вторую строку и вставляете ее в заголовок функции, чтобы уменьшить размер кода.
/go5.js
const someFunction = object => ({hello: 10, world: 15})
const {hello: firstValue, world} = someFunction()
console.log('hello', firstValue)
console.log('world', world)
Независимо от go1 – go4 есть еще один очень интересный случай, когда вы можете использовать этот шаблон кода. Деструктуризация кода позволяет обрабатывать несколько возвращаемых значений. Взгляните на go5, функция someFunction возвращает объект с двумя свойствами. Чтобы получить оба свойства как отдельные переменные, вы просто можете использовать деструктуризацию кода, как показано в строке 3. В строке 5/6 вы можете видеть, что и «hello», и «world» теперь являются отдельными переменными. Можно даже переименовать свойство объекта в операторе деструктуризации, как показано в строке 3 для свойства «hello».
