Метод data в jQuery даёт нам возможность связать произвольные данные с любым объектом документа или javaScript, что позволяет сделать ваш код более кратким и читаемым. Начиная с версии jQuery 1.4.3 появилась возможность использовать этот метод для объектов javaScript, а также отслеживать изменения этих данных.
Основы
Начнём с того, что вы можете вызвать метод data для jQuery объекта, а также использовать функцию $.data() напрямую.
// Использование метода: $("#myDiv").data("key","произвольное значение"); // Использование функции напрямую: $.data($("#myDiv").get(0),"key","произвольное значение");
Функция data - это низкоуровневая реализация, которая в действительности используется при вызове метода. Метод объекта jQuery гораздо удобнее, он также позволяет включать себя в качестве цепочки вызовов.
Также, обратите внимание, что в качестве первого параметра в функцию $.data вам необходимо передавать DOM-элемент, а не объект jQuery.
Метод объекта требует двух параметров - ключ и значение. Ключ - строковая константа, а значение - любая структура данных, включая функции массивы и объекты. Существует альтернативный синтаксис, в котором можно передавать объект как один параметр:
// Можно передать объект: $("#myDiv").data({"name":"Stevie","age":21}); // Тоже самое: $("#myDiv").data("name","Stevie").data("age",21);
Теперь, если вам необходимо получить сохранённые данные, вы можете вызвать функцию data , передав ей ключ в качестве параметра:
Var theValue = $("#myDiv").data("age"); // 21
Доступ к этим данным открыт в любом месте скрипта. Вы будете получать сохранённые данные, до тех пор, пока существует элемент, получаемый по заданному селектору.
Var theValue = $("div:first").data("name"); // Stevie $("div:first").click(function(){ alert($(this).data("age"); // 21 });
В jQuery 1.4.3 также доступны HTML5-данные, хранимые в атрибутах. Это означает, что если у вас есть элемент, объявленный следующим образом:
В этом случае вы можете получить данные из атрибута data-internal-id , вызвав метод $("#img1").data("internal-id") , что несомненно удобно при AJAX-запросах.
Использование метода data для javaScript-объектов
Возможно, вы будете удивлены, но метод data также можно использовать для обычных объектов javaScript. Эта функциональность официально появилась в jQuery 1.4.3.
Var myObj = {}; $(myObj).data("city","Springfield");
Приведённый пример, в действительности создаёт свойство city для заданного объекта. Почему бы в таком случае не написать просто myObj.city = "Springfield"? А отличие в том, что метод data добавляет объекту несколько полезных событий, упрощающих работу с этим объектом. Например:
Var progressBar = {}; $(progressBar).bind("setData",function(e,key,value){ switch(key){ case "percent": $("#progress").width(value+"%"); $("#percentText").text(value+"%"); break; case "color": $("#progress").css("color",value); break; case "enabled": $("#progress").toggleClass("active",value); break; } }); $(progressBar).data("enabled",true).data("percent",21).data("color","green"); console.log(progressBar.enabled);
В приведённом примере мы используем метод data чтобы создать простейший API с помощью которого мы можем обновлять элемент.
Существует ещё два события, которые могут использоваться для объекта javaScript:
- getData - срабатывает перед чтением данных. Вы можете использовать его для предобработки получаемых данных. Например, для пересчёта значения.
- changeData - срабатывает когда данные устанавливаются или изменяются. Это событие используется в плагине jQuery datalink . С его помощью можно связать данные формы с объектом javaScript и работать с полями формы как со свойствами объекта.
За кулисами
jQuery создаёт пустой объект (для любопытных, он называется $.cache), который и является хранилищем всех значений, которые вы сохраняете с помощью метода data . Каждому элементу из DOM, который используется с методом data , присваивается уникальный идентификатор, который затем является ключом для доступа к данным в объекте $.cache .
jQuery хранит в этом кэше не только пользовательские данные, туда попадают также внутренние данные, обработчики событий, которые вы навешиваете с помощью функций live() , bind() и delegate() . Использование центрального хранилища делает jQuery более надёжным.
Заключение
Метод data - это только одна из многочисленных возможностей jQuery, которая делает жизнь веб-разработчиков проще. В сочетании с другими возможностями библиотеки, она дополняет прочную основу, на которую мы можем положиться.
При работе с датой и временем в JavaScript используется объект Date . Думаю, что не надо объяснять, как часто приходится работать с датой и временем. И в этой статье Вы узнаете, как это делать в JavaScript .
Начнём, по традиции, с конструкторов объекта Date . Их целых четыре. Первый конструктор без параметров, и он возвращает текущие время и дату:
Var date = new Date();
document.write(date);
В результате, Вы увидите что-то в этом духе: "Thu Oct 14 2010 11:42:06 GMT+0400 ".
Второй конструктор объекта Date - это конструктор с одним параметром. Этот параметр содержит количество миллисекунд прошедших с 01.01.1970 (зарождение эпохи Unix ). Например, так:
Var date = new Date(135253235);
document.write(date);
В результате Вы увидите следующее: "Fri Jan 02 1970 16:34:13 GMT+0300 ".
Следующий конструктор позволяет создать объект Date с заданием следующих параметров: года, месяца и числа:
Var date = new Date(2010, 0, 12);
document.write(date);
Результат: "Tue Jan 12 2010 00:00:00 GMT+0300 ". Также заметьте, что 0-ой месяц - это январь, а 11-ый - это декабрь.
И последний конструктор класса Date в JavaScript позволяет создать объект Date со всеми параметрами даты и времени: год, месяц, число, часы, минуты и секунды.
Var date = new Date(2010, 0, 12, 23, 45, 12);
document.write(date);
Получится вот такая строка: "Tue Jan 12 2010 23:45:11 GMT+0300 ". Вот и все конструкторы объекта Date в JavaScript , которые нам предоставили разработчики.
Особых свойств у класса Date нет, поэтому сразу переходим к методам. Начнём сразу с группы методов, которые работают совершенно одинаково, но каждый из них возвращает свой элемент даты и времени:
Var date = new Date();
document.write("Год - " + date.getFullYear() + "
");
document.write("Месяц - " + date.getMonth() + "
");
document.write("Число - " + date.getDate() + "
");
document.write("День недели - " + date.getDay() + "
");
document.write("Час - " + date.getHours() + "
");
document.write("Минута - " + date.getMinutes() + "
");
document.write("Секунда - " + date.getSeconds() + "
");
document.write("Миллисекунда - " + date.getMilliseconds() + "
");
document.write("Количество миллисекунд прошедших с 01.01.1970 - " + date.getTime() + "
");
Запустив данный скрипт, Вы мгновенно поймёте, что каждый из этих методов делает. Единственное, что хочется заметить, что нумерация дней недели начинается также с нуля . Причём воскресенье имеет индекс 0 , а суббота - 6 .
Есть аналогичные методы, но показывающие дату и время по Гринвичу . Давайте напишем такой код:
Var date = new Date();
document.write("Год - " + date.getUTCFullYear() + "
");
document.write("Месяц - " + date.getUTCMonth() + "
");
document.write("Число - " + date.getUTCDate() + "
");
document.write("День недели - " + date.getUTCDay() + "
");
document.write("Час - " + date.getUTCHours() + "
");
document.write("Минута - " + date.getUTCMinutes() + "
");
document.write("Секунда - " + date.getUTCSeconds() + "
");
document.write("Миллисекунда - " + date.getUTCMilliseconds() + "
");
Запустив этот скрипт, Вы узнаете текущие дату и время на Гринвиче .
Противоположные методам get() являются методы - set() . Если первые возвращают определённые значения, то последние, наоборот, их изменяют. Собственно, данный скрипт я мог бы не приводить, но, чтобы не осталось никаких вопросов, давайте это сделаю:
Var date = new Date();
date.setFullYear(1990);
date.setMonth(11);
date.setDate(15);
date.setHours(9);
date.setMinutes(20);
date.setSeconds(0);
date.setMilliseconds(10);
document.write(date);
Надеюсь, Вы обратили внимание, что метода setDay() не существует. Это говорит о том, что день недели подбирается в зависимости от года, месяца и числа.
Существует также аналогичные методы для Гринвича. Только добавляется приставка UTC , например, для изменения месяца используется метод setUTCMonth() .
И последний метод - это setTime() . Принимает в качестве параметра число миллисекунд прошедших с 01.01.1970 :
Date.setTime(39293012);
document.write(date);
В результате Вы увидите вот это: "Thu Jan 01 1970 13:54:53 GMT+0300 ".
Вот и все конструкторы и методы объекта Date в JavaScript .
22 ответа
Отборочные
JavaScript имеет только один тип данных, который может содержать несколько значений: Объект . Массив - это особая форма объекта.
(Plain) Объекты имеют вид
{key: value, key: value, ...}
Массивы имеют форму
Оба массива и объекты отображают структуру key -> value . Ключи в массиве должны быть числовыми, тогда как любая строка может использоваться как ключ в объектах. Пара ключей-значений также называется "свойствами" .
Доступ к свойствам можно получить либо с помощью точечной нотации
Const value = obj.someProperty;
или нотация , если имя свойства не будет действительным JavaScript имя идентификатора , или имя - это значение переменной:
// the space is not a valid character in identifier names const value = obj["some Property"]; // property name as variable const name = "some Property"; const value = obj;
По этой причине элементы массива могут быть доступны только с использованием скобок:
Const value = arr; // arr.5 would be a syntax error // property name / index as variable const x = 5; const value = arr[x];
Подождите... как насчет JSON?
JSON - это текстовое представление данных, подобно XML, YAML, CSV и другим. Чтобы работать с такими данными, сначала необходимо преобразовать их в типы данных JavaScript, то есть массивы и объекты (и как это было объяснено). Как разбирать JSON объясняется в вопросе Parse JSON в JavaScript? .
Дополнительный материал для чтения
Как получить доступ к массивам и объектам является фундаментальным знанием JavaScript, и поэтому рекомендуется прочитать Руководство по JavaScript MDN , особенно разделы
Доступ к вложенным структурам данных
Вложенная структура данных представляет собой массив или объект, который относится к другим массивам или объектам, т.е. его значения представляют собой массивы или объекты. К таким структурам можно получить последовательное применение точечной или скобкой.
Вот пример:
Const data = { code: 42, items: [{ id: 1, name: "foo" }, { id: 2, name: "bar" }] };
Предположим, мы хотим получить доступ к name второго элемента.
Вот как мы можем сделать это шаг за шагом:
Как мы видим, data - это объект, поэтому мы можем получить доступ к его свойствам с помощью точечной нотации. Доступ к свойству items осуществляется следующим образом:
Data.items
Значение представляет собой массив, для доступа к его второму элементу мы должны использовать нотацию в виде скобок:
Data.items
Это значение является объектом, и мы снова используем точечную нотацию для доступа к свойству name . Поэтому мы в итоге получаем:
Const item_name = data.items.name;
В качестве альтернативы мы могли бы использовать условное обозначение для любого из свойств, особенно если имя содержало символы, которые сделали бы его недопустимым для использования точечной нотации:
Const item_name = data["items"]["name"];
Я пытаюсь получить доступ к свойству, но получаю только undefined назад?
В большинстве случаев, когда вы получаете undefined , объект/массив просто не имеет свойства с этим именем.
Const foo = {bar: {baz: 42}}; console.log(foo.baz); // undefined
В качестве альтернативы for...in с hasOwnProperty вы можете использовать Object.keys для получить массив имен свойств:
Object.keys(data).forEach(function(prop) { // `prop` is the property name // `data` is the property value });
Массивы
Чтобы перебрать все элементы массива data.items , мы используем цикл for:
For(let i = 0, l = data.items.length; i < l; i++) { // `i` will take on the values `0`, `1`, `2`,..., i.e. in each iteration // we can access the next element in the array with `data.items[i]`, example: // // var obj = data.items[i]; // // Since each element is an object (in our example), // we can now access the objects properties with `obj.id` and `obj.name`. // We could also use `data.items[i].id`. }
Можно также использовать for...in для итерации по массивам, но есть причины, по которым этого следует избегать: Почему "для (элемент var в списке)" с массивами, считающимися плохими практика в JavaScript? .
При увеличении поддержки браузера ECMAScript 5 метод массива forEach становится интересным альтернатива:
Data.items.forEach(function(value, index, array) { // The callback is executed for each element in the array. // `value` is the element itself (equivalent to `array`) // `index` will be the index of the element in the array // `array` is a reference to the array itself (i.e. `data.items` in this case) });
В средах, поддерживающих ES2015 (ES6), вы также можете использовать цикл for...of , который не только работает для массивов, но и для любого iterable :
For (const item of data.items) { // `item` is the array element, **not** the index }
В каждой итерации for...of непосредственно дает нам следующий элемент итерации, нет никакого "индекса" для доступа или использования.
Что делать, если "глубина" структуры данных мне неизвестна?
В дополнение к неизвестным ключам, "глубина" структуры данных (например, сколько вложенных объектов) она имеет, также может быть неизвестна. Как получить доступ к глубоко вложенным свойствам, как правило, зависит от точной структуры данных.
Но если структура данных содержит повторяющиеся шаблоны, например. представление двоичного дерева, решение обычно включает в себя рекурсивно доступ каждый уровень структуры данных.
Вот пример, чтобы получить первый лист node двоичного дерева:
Function getLeaf(node) { if (node.leftChild) { return getLeaf(node.leftChild); // <- recursive call } else if (node.rightChild) { return getLeaf(node.rightChild); // <- recursive call } else { // node must be a leaf node return node; } } const first_leaf = getLeaf(root);
Const root = { leftChild: { leftChild: { leftChild: null, rightChild: null, data: 42 }, rightChild: { leftChild: null, rightChild: null, data: 5 } }, rightChild: { leftChild: { leftChild: null, rightChild: null, data: 6 }, rightChild: { leftChild: null, rightChild: null, data: 7 } } }; function getLeaf(node) { if (node.leftChild) { return getLeaf(node.leftChild); } else if (node.rightChild) { return getLeaf(node.rightChild); } else { // node must be a leaf node return node; } } console.log(getLeaf(root).data);
Более общий способ доступа к вложенной структуре данных с неизвестными ключами и глубиной - проверить тип значения и действовать соответствующим образом.
Вот пример, который добавляет все примитивные значения внутри вложенной структуры данных в массив (при условии, что он не содержит каких-либо функций). Если мы сталкиваемся с объектом (или массивом), мы просто вызываем toArray снова на это значение (рекурсивный вызов).
Function toArray(obj) { const result = ; for (const prop in obj) { const value = obj; if (typeof value === "object") { result.push(toArray(value)); // <- recursive call } else { result.push(value); } } return result; }
Const data = { code: 42, items: [{ id: 1, name: "foo" }, { id: 2, name: "bar" }] }; function toArray(obj) { const result = ; for (const prop in obj) { const value = obj; if (typeof value === "object") { result.push(toArray(value)); } else { result.push(value); } } return result; } console.log(toArray(data));
Помощники
Поскольку структура сложного объекта или массива не обязательно очевидна, мы можем проверить значение на каждом шаге, чтобы решить, как двигаться дальше. console.log и console.dir помогите нам в этом. Например (вывод консоли Chrome):
> console.log(data.items) [ Object, Object ]
Здесь мы видим, что data.items представляет собой массив с двумя элементами, которые являются обоими объектами. В консоли Chrome объекты можно даже быстро развернуть и проверить.
> console.log(data.items) Object id: 2 name: "bar" __proto__: Object
Это говорит нам, что data.items является объектом, и после его расширения мы видим, что он имеет три свойства: id , name и __proto__ . Последний является внутренним свойством, используемым для прототипа цепочки объекта. Однако цепочка прототипов и наследование не подходят для этого ответа.
Если вы пытаетесь получить доступ к item из структуры примера с помощью id или name , не зная его позиции в массиве, самый простой способ сделать это - использовать библиотека underscore.js :
Var data = { code: 42, items: [{ id: 1, name: "foo" }, { id: 2, name: "bar" }] }; _.find(data.items, function(item) { return item.id === 2; }); // Object {id: 2, name: "bar"}
По моему опыту, использование функций более высокого порядка вместо циклов for или for..in приводит к получению кода, который проще рассуждать, и, следовательно, более обслуживаемому.
Только мои 2 цента.
Иногда доступ к вложенному объекту с использованием строки может быть желательным. Простым подходом является первый уровень, например
Var obj = { hello: "world" }; var key = "hello"; alert(obj);//world
Но это часто бывает не со сложным json. По мере усложнения json подходы к определению значений внутри json также становятся сложными. Рекурсивный подход для навигации по json лучше всего, и то, как эта рекурсия используется, будет зависеть от типа поиска данных. Если есть условные заявления, json search может быть хорошим инструментом для использования.
Если доступное свойство уже известно, но путь является сложным, например, в этом объекте
Var obj = { arr: [ { id: 1, name: "larry" }, { id: 2, name: "curly" }, { id: 3, name: "moe" } ] };
И вы знаете, что хотите получить первый результат массива в объекте, возможно, вы хотели бы использовать
Var moe = obj["arr.name"];
Однако это вызовет исключение, так как нет свойства объекта с этим именем. Решение, чтобы иметь возможность использовать это, было бы сгладить аспект дерева объекта. Это можно сделать рекурсивно.
Function flatten(obj){ var root = {}; (function tree(obj, index){ var suffix = toString.call(obj) == "" ? "]" : ""; for(var key in obj){ if(!obj.hasOwnProperty(key))continue; root = obj; if(toString.call(obj) == "")tree(obj,index+key+suffix+"["); if(toString.call(obj) == "")tree(obj,index+key+suffix+"."); } })(obj,""); return root; }
Теперь сложный объект может быть сплющен
Var obj = previous definition; var flat = flatten(obj); var moe = flat["arr.name"];//moe
Объекты и массивы имеют множество встроенных методов, которые могут помочь вам в обработке данных.
Примечание: во многих примерах я использую функции стрелок . Они аналогичны выражениям , но они привязывают значение this лексически.
Object.keys() , Object.values() (ES 2017) и Object.entries() (ES 2017)
Object.keys() возвращает массив ключей объектов, Object.values() возвращает массив значений объекта, а Object.entries() возвращает массив ключей объектов и соответствующих значений в формате .
Const obj = { a: 1 ,b: 2 ,c: 3 } console.log(Object.keys(obj)) // ["a", "b", "c"] console.log(Object.values(obj)) // console.log(Object.entries(obj)) // [["a", 1], ["b", 2], ["c", 3]]
Object.entries() с назначением for-loop и destructuring
Const obj = { a: 1 ,b: 2 ,c: 3 } for (const of Object.entries(obj)) { console.log(`key: ${key}, value: ${value}`) }
Очень удобно повторять результат Object.entries() с for-of loop и назначение деструкции .
For-loop позволяет вам итерации элементов массива. Синтаксис for (const element of array) (мы можем заменить const на var или let , но лучше использовать const , если мы не намерены изменять element).
Назначение деструктуризации позволяет извлекать значения из массива или объекта и назначать их переменным. В этом случае const означает, что вместо назначения массива element мы назначим первый элемент этого массива key , а второй - value . Это эквивалентно этому:
For (const element of Object.entries(obj)) { const key = element ,value = element }
Как вы можете видеть, деструктуризация делает это намного проще.
Array.prototype.every() и Array.prototype.some()
Метод every() возвращает true , если указанная функция обратного вызова возвращает true для каждого элемента массива. Метод some() возвращает true , если указанная функция обратного вызова возвращает true для некоторого (по крайней мере одного) элемента.
Const arr = // true, because every element is greater than 0 console.log(arr.every(x => x > 0)) // false, because 3^2 is greater than 5 console.log(arr.every(x => Math.pow(x, 2) < 5)) // true, because 2 is even (the remainder from dividing by 2 is 0) console.log(arr.some(x => x % 2 === 0)) // false, because none of the elements is equal to 5 console.log(arr.some(x => x === 5))
Array.prototype.find() и Array.prototype.filter()
Методы find() возвращают первый элемент, который удовлетворяет предоставленной функции обратного вызова. Метод filter() возвращает массив всех элементов, который удовлетворяет предоставленной функции обратного вызова.
Const arr = // 2, because 2^2 !== 2 console.log(arr.find(x => x !== Math.pow(x, 2))) // 1, because it the first element console.log(arr.find(x => true)) // undefined, because none of the elements equals 7 console.log(arr.find(x => x === 7)) // , because these elements are greater than 1 console.log(arr.filter(x => x > 1)) // , because the function returns true for all elements console.log(arr.filter(x => true)) // , because none of the elements equals neither 6 nor 7 console.log(arr.filter(x => x === 6 || x === 7))
Array.prototype.map()
Метод map() возвращает массив с результатами вызова предоставленной функции обратного вызова для элементов массива.
Const arr = console.log(arr.map(x => x + 1)) // console.log(arr.map(x => String.fromCharCode(96 + x))) // ["a", "b", "c"] console.log(arr.map(x => x)) // (no-op) console.log(arr.map(x => Math.pow(x, 2))) // console.log(arr.map(String)) // ["1", "2", "3"]
Array.prototype.reduce()
Метод reduce() уменьшает массив до одного значения, вызывая предоставленную функцию обратного вызова с двумя элементами.
Const arr = // Sum of array elements. console.log(arr.reduce((a, b) => a + b)) // 6 // The largest number in the array. console.log(arr.reduce((a, b) => a > b ? a: b)) // 3
Метод reduce() принимает необязательный второй параметр, который является начальным значением. Это полезно, когда массив, на который вы вызываете reduce() , может иметь нуль или один элемент. Например, если бы мы хотели создать функцию sum() , которая принимает массив в качестве аргумента и возвращает сумму всех элементов, мы могли бы написать это следующим образом:
Const sum = arr => arr.reduce((a, b) => a + b, 0) console.log(sum()) // 0 console.log(sum()) // 4 console.log(sum()) // 7
Этот вопрос довольно старый, так как современное обновление. С наступлением ES2015 есть альтернативы для получения требуемых данных. В настоящее время существует функция, называемая деструктурированием объектов для доступа к вложенным объектам.
const data = { code: 42, items: [{ id: 1, name: "foo" }, { id: 2, name: "bar" }] }; const { items: [, { name: secondName }] } = data; console.log(secondName);
В приведенном выше примере создается переменная с именем secondName из ключа name из массива, называемого items , одинокая, говорит, пропускает первый объект в массиве.
Примечательно, что это, вероятно, слишком велико для этого примера, так как простой массив доступа легче читать, но он пригодится при разрыве объектов в целом.
Это очень краткое введение в ваш конкретный прецедент, деструктурирование может быть необычным синтаксисом, чтобы привыкнуть к нему. Я бы порекомендовал вам прочитать документацию по назначению Mozilla Destructuring Assignment, чтобы узнать больше.
Чтобы получить доступ к вложенному атрибуту, необходимо указать его имя, а затем выполнить поиск по объекту.
Если вы уже знаете точный путь, вы можете жестко закодировать его в своем скрипте следующим образом:
Data["items"]["name"]
это тоже работает -
Data.items.name data["items"].name data.items["name"]
Когда вы не знаете точного имени заранее, или пользователь предоставляет вам имя. Затем требуется динамический поиск по структуре данных. Некоторые предположили, что поиск может быть выполнен с использованием цикла for , но существует очень простой способ обхода пути с использованием Array.reduce .
Const data = { code: 42, items: [{ id: 1, name: "foo" }, { id: 2, name: "bar" }] } const path = [ "items", "1", "name"] let result = path.reduce((a,v) => a[v], data)
Путь - это способ сказать: сначала возьмите объект с ключевыми items , который оказывается массивом. Затем возьмите 1 элемент -st (0 индексных массивов). Последнее, возьмите объект с name ключа в этом элементе массива, который является строкой bar .
Если у вас очень длинный путь, вы можете даже использовать String.split чтобы сделать все это проще -
"items.1.name".split(".").reduce((a,v) => a[v], data)
Это просто обычный JavaScript, без использования сторонних библиотек, таких как jQuery или lodash.
Использование JSONPath будет одним из самых гибких решений, если вы хотите включить библиотеку: https://github.com/s3u/JSONPath (node и браузер)
Для вашего случая использования путь json:
$..items.name
Var secondName = jsonPath.eval(data, "$..items.name");
Var ourStorage = { "desk": { "drawer": "stapler" }, "cabinet": { "top drawer": { "folder1": "a file", "folder2": "secrets" }, "bottom drawer": "soda" } }; ourStorage.cabinet["top drawer"].folder2; // Outputs -> "secrets"
//parent.subParent.subsubParent["almost there"]["final property"]
В основном, используйте точку между каждым потомком, который разворачивается под ним, и когда у вас есть имена объектов, состоящие из двух строк, вы должны использовать нотацию ["obj Name"]. В противном случае достаточно точки;
добавим, что доступ к вложенным массивам будет происходить так:
Var ourPets = [ { animalType: "cat", names: [ "Meowzer", "Fluffy", "Kit-Cat" ] }, { animalType: "dog", names: [ "Spot", "Bowser", "Frankie" ] } ]; ourPets.names; // Outputs "Fluffy" ourPets.names; // Outputs "Spot"
Еще один полезный документ, описывающий описанную выше ситуацию: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics#Bracket_notation
Доступ к собственности с помощью точечного хождения: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation
Если вы ищете один или несколько объектов, которые соответствуют определенным критериям, у вас есть несколько вариантов, используя query-js
//will return all elements with an id larger than 1 data.items.where(function(e){return e.id > 1;}); //will return the first element with an id larger than 1 data.items.first(function(e){return e.id > 1;}); //will return the first element with an id larger than 1 //or the second argument if non are found data.items.first(function(e){return e.id > 1;},{id:-1,name:""});
Есть также single и singleOrDefault они работают так же, как first и firstOrDefault соответственно. Разница лишь в том, что они будут бросать, если найдено более одного совпадения.
для дальнейшего объяснения query-js вы можете начать с этого поста
Старый вопрос, но как никто не упоминал lodash (просто подчеркивание).
Если вы уже используете lodash в своем проекте, я думаю, что это элегантный способ сделать это в сложном примере:
Get(response, ["output", "fund", "data", "0", "children", "0", "group", "myValue"], "")
то же самое, что:
Response.output.fund.data.children.group.myValue
Разница между первой и второй опцией заключается в том, что в Оптим 1 , если у вас есть одно из отсутствующих свойств (undefined), в пути вы не получите ошибку, он возвращает вы третий параметр.
Для фильтра массива lodash есть _.find() , но я бы предпочел использовать регулярный filter() . Но я все же считаю, что вышеприведенный метод _.get() очень полезен при работе с действительно сложными данными. В прошлом я столкнулся с действительно сложными API-интерфейсами, и это было удобно!
Я надеюсь, что это может быть полезно для тех, кто ищет варианты для обработки действительно сложных данных, которые подразумевает название.
Что такое библиотека JavaScript, которая предоставляет целый беспорядок полезных помощников functional programming без расширения каких-либо встроенных объектов.
Решение:
var data = { code: 42, items: [{ id: 1, name: "foo" }, { id: 2, name: "bar" }] }; var item = _.findWhere(data.items, { id: 2 }); if (!_.isUndefined(item)) { console.log("NAME =>", item.name); } //using find - var item = _.find(data.items, function(item) { return item.id === 2; }); if (!_.isUndefined(item)) { console.log("NAME =>", item.name); }
Доступ к динамически многоуровневому объекту.
Var obj = { name: "salut", subobj: { subsubobj: { names: "I am sub sub obj" } } }; var level = "subobj.subsubobj.names"; level = level.split("."); var currentObjState = obj; for (var i = 0; i < level.length; i++) { currentObjState = currentObjState]; } console.log(currentObjState);