Array.from()
Метод Array.from() создаёт новый экземпляр Array из массивоподобного или итерируемого объекта.
Интерактивный пример
Синтаксис
Array.from(arrayLike[, mapFn[, thisArg]])
Параметры
Массивоподобный или итерируемый объект, преобразуемый в массив.
Отображающая функция, вызываемая для каждого элемента массива.
Значение, используемое в качестве this при выполнении функции mapFn .
Возвращаемое значение
Описание
Array.from() позволяет вам создавать массивы из:
- массивоподобных объектов (объектов со свойством length и элементами по индексным ключам) или
- итерируемых объектов (объектов, из которых вы можете достать их элементы, например Map (en-US) или Set ).
Array.from() имеет необязательный параметр mapFn , который позволяет вам выполнять функцию map для каждого элемента создаваемого массива (или его подкласса). Проще говоря, вызов Array.from(obj, mapFn, thisArg) эквивалентен цепочке Array.from(obj).map(mapFn, thisArg) , за исключением того, что он не создаёт промежуточного массива. Это особенно важно для некоторых подклассов массива, вроде типизированных массивов, поскольку промежуточный массив неизбежно приведёт к усечению значений, чтобы они подпали под подходящий тип.
Свойство length метода from() равно 1.
В ES2015 классовый синтаксис позволяет создавать подклассы как встроенных классов, так и классов, определённых пользователем; в результате статические методы класса, вроде Array.from «наследуются» подклассами Array и создают новые экземпляры подкласса, а не класса Array .
Примеры
Массив из строки String
.from("foo"); // ['f', 'o', 'o']
Массив из Set
var s = new Set(["foo", window]); Array.from(s); // ['foo', window]
Массив из Map
var m = new Map([ [1, 2], [2, 4], [4, 8], ]); Array.from(m); // [[1, 2], [2, 4], [4, 8]]
Массив из массивоподобного объекта (arguments)
function f() return Array.from(arguments); > f(1, 2, 3); // [1, 2, 3]
Использование стрелочной функции и Array.from()
// Использование стрелочной функции в качестве функции отображения для // манипулирования элементами Array.from([1, 2, 3], (x) => x + x); // [2, 4, 6] // Генерирования последовательности чисел Array.from( length: 5 >, (v, k) => k); // [0, 1, 2, 3, 4]
Полифил
Метод Array.from был добавлен к стандарту ECMA-262 в 6-м издании; поэтому он может отсутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать Array.from в реализациях, которые не поддерживают этот метод. Этот алгоритм является точно тем, что описан в ECMA-262 6-го издания; он предполагает, что Object и TypeError имеют свои первоначальные значения и что callback.call вычисляется в оригинальное значение Function.prototype.call . Кроме того, поскольку истинные итерируемые объекты не могут быть заменены полифилом, эта реализация не поддерживает общие итерируемые объекты, как они определены в 6-м издании ECMA-262.
// Шаги алгоритма ECMA-262, 6-е издание, 22.1.2.1 // Ссылка: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from if (!Array.from) Array.from = (function () var toStr = Object.prototype.toString; var isCallable = function (fn) return typeof fn === "function" || toStr.call(fn) === "[object Function]"; >; var toInteger = function (value) var number = Number(value); if (isNaN(number)) return 0; > if (number === 0 || !isFinite(number)) return number; > return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); >; var maxSafeInteger = Math.pow(2, 53) - 1; var toLength = function (value) var len = toInteger(value); return Math.min(Math.max(len, 0), maxSafeInteger); >; // Свойство length метода from равно 1. return function from(arrayLike /*, mapFn, thisArg */) // 1. Положим C равным значению this. var C = this; // 2. Положим items равным ToObject(arrayLike). var items = Object(arrayLike); // 3. ReturnIfAbrupt(items). if (arrayLike == null) throw new TypeError( "Array.from requires an array-like object - not null or undefined", ); > // 4. Если mapfn равен undefined, положим mapping равным false. var mapFn = arguments.length > 1 ? arguments[1] : void undefined; var T; if (typeof mapFn !== "undefined") // 5. иначе // 5. a. Если вызов IsCallable(mapfn) равен false, выкидываем исключение TypeError. if (!isCallable(mapFn)) throw new TypeError( "Array.from: when provided, the second argument must be a function", ); > // 5. b. Если thisArg присутствует, положим T равным thisArg; иначе положим T равным undefined. if (arguments.length > 2) T = arguments[2]; > > // 10. Положим lenValue равным Get(items, "length"). // 11. Положим len равным ToLength(lenValue). var len = toLength(items.length); // 13. Если IsConstructor(C) равен true, то // 13. a. Положим A равным результату вызова внутреннего метода [[Construct]] // объекта C со списком аргументов, содержащим единственный элемент len. // 14. a. Иначе, положим A равным ArrayCreate(len). var A = isCallable(C) ? Object(new C(len)) : new Array(len); // 16. Положим k равным 0. var k = 0; // 17. Пока k < len, будем повторять. (шаги с a по h)var kValue; while (k len) kValue = items[k]; if (mapFn) A[k] = typeof T === "undefined" ? mapFn(kValue, k) : mapFn.call(T, kValue, k); > else A[k] = kValue; > k += 1; > // 18. Положим putStatus равным Put(A, "length", len, true). A.length = len; // 20. Вернём A. return A; >; >)(); >
Спецификации
| Specification |
|---|
| ECMAScript Language Specification # sec-array.from |
Совместимость с браузерами
BCD tables only load in the browser
Как создать простой массив из массива объектов? (взять только первое поле)
Как создать простой массив из массива объектов? Нужно взять только первое поле в объекте. Чтобы получить что-то похожее на это 
Отслеживать
задан 24 дек 2020 в 9:54
Alina Homyakova Alina Homyakova
113 2 2 серебряных знака 11 11 бронзовых знаков
А какое первое поле у объекта?
24 дек 2020 в 10:02
@StepanKasyanenko name
24 дек 2020 в 10:08
Но, насколько я вижу из консоли — name — это string, а результат у вас — массив number. Что-то не сходится.
24 дек 2020 в 10:16
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
Можно использовать Array.map для перебора массива и получения нужного значения.
let array = [,,,,,]; let result = array.map(item => item.name); console.log(result);Отслеживать
ответ дан 24 дек 2020 в 10:05
Aziz Umarov Aziz Umarov
22.5k 2 2 золотых знака 10 10 серебряных знаков 33 33 бронзовых знака
Очевидно же — перебрать массив объектов, взять значения первого поля, и сформировать из них новый массив. Осталось лишь решить для себя, какое поле у объекта считать «первым».
var objectsArray = [< "name": "1", "value": 1 >, < "name": "2", "value": 2 >, < "name": "3", "value": 3 >, < "name": "4", "value": 4 >, < "name": "7", "value": 7 >, < "name": "10", "value": 10 >, < "name": "9", "value": 9 >, < "name": "6", "value": 6 >, < "name": "11", "value": 11 >, < "name": "8", "value": 8 >, < "name": "12", "value": 12 >, < "name": "5", "value": 5 >]; var result = []; for (i = 0; i < objectsArray.length; i++) < result[i] = objectsArray[i].name; >document.write(result);П.С. Намеренно даю максимально легкий для понимания вариант ответа.
Отслеживать
ответ дан 24 дек 2020 в 10:04
Инквизитор Инквизитор
5,935 1 1 золотой знак 6 6 серебряных знаков 25 25 бронзовых знаков
const arr = [< name: 'a', value: 1 >, < name: 'b', value: 2 >, < name: 'c', value: 3 >]; const arrValues = []; for (let i = 0; i < arr.length; i++) < // цикл по массиву arr const elem = arr[i]; // текущий, итерируемый элемент в массиве, в данном случае это объект с полями value и name arrValues.push(elem.value); // добавить в конец массива значение свойства value >console.log(arrValues);Отслеживать
ответ дан 24 дек 2020 в 10:19
Михаил Камахин Михаил Камахин
8,674 2 2 золотых знака 16 16 серебряных знаков 55 55 бронзовых знаков
в случае если имя поля известно то так:
(очередность полей в объекте не обязательна, но если они не модифицируются то скорее всего будет та которая при создании была)
const arr = [, ] const firstField = 'name'; console.log(arr.map(e => e[firstField])) // Object.keys(объект)[0] = имя первого поля для объекта console.log(arr.map(e => e[Object.keys(e)[0]])) const newArray = arr.map(e => e.name)) это тоже самое что: const newArray = []; for(let i = 0; i
Объекты в JavaScript. Что такое массив объектов? Создание массива объектов
В этой статье поговорим об объектах в языке программирования JavaScript. Рассмотрим, что это такое и как создавать объект. Также уделим время созданию массива объектов.
Как вам хорошо известно, в JavaScript существуют разные типы данных. 7 из них являются примитивными, ведь они содержат лишь одно значение, причём неважно, строка это, число, либо что-нибудь иное. Пришло время поговорить и про объекты. Они применяются в JavaScript, например, в целях хранения коллекций разных значений, а также каких-нибудь сложных сущностей. В целом они используются довольно часто, и это особенность языка. Разумеется, мы должны их понимать.
Синтаксис создания объекта
Объект можно создать, используя фигурные скобки с необязательным перечнем свойств. В нашем случае свойство является парой «ключ: значение», причём ключ здесь – это строка (называется ещё «именем свойства»), а вот уже значение бывает чем угодно.
Давайте представим объект в форме ящика, где лежат подписанные папки. Таким образом, каждый элемент данных лежит в своей папке, а на той папке написан ключ. Раз есть ключ, папку можно без проблем найти, и не только найти, но ещё удалить либо добавить что-нибудь в неё.
Создадим пустой ящик объект в JavaScript, что можно сделать, используя один из 2-х вариантов синтаксиса:
let user = new Object(); // синтаксис "конструктор объекта" let user = <>; // синтаксис "литерал объекта", литеральный синтаксисКак правило, используется вариант с фигурными скобками <. >. В этом случае объявление называют литералом объекта либо литеральной нотацией.
Особенности литералов и их свойства
Когда мы используем литеральный синтаксис <. >, у нас есть возможность помещать в объект сразу несколько свойств, соответственно, используя пары «ключ: значение»:
let user = < // объект name: "Bob", // под ключом "name" сохраняется значение "Bob" age: 50 // под ключом "age" сохраняется значение 50 >;Свойства объекта в JavaScript иногда называют поля объекта.
Идём далее. Каждое свойство имеет ключ («имя» либо «идентификатор»). После имени/идентификатора свойства идёт двоеточие ":", потом указывается значение свойства. Когда в объекте есть несколько свойств, они перечисляются через запятую.
В объекте user у нас находятся 2 свойства: 1. Свойство с именем "name" и, соответственно, значением "Bob". 2. Свойство с именем "age" и, соответственно, значением 50.
Мы можем предположить, что объект user – это не что иное, как ящик с 2-мя папками, которые подписаны «name» и «age». Также у нас есть возможность добавить в ящик новые папки в любой момент. Либо удалить их. Или же прочитать содержимое.
Чтобы обратиться к свойствам воспользуемся записью «через точку»:
// получение свойств объекта: alert( user.name ); // Bob alert( user.age ); // 50Значение способно быть любого типа. Попробуем добавить свойство, имеющее логическое значение:
user.isAdmin = true;А чтобы удалить свойства, нам пригодится оператор delete:
delete user.age;Что касается имени свойства, то оно может включать в себя несколько слов, но в этом случае оно должно заключаться в кавычки:
let user = < name: "Bob", age: 50, "likes birds": true // имя свойства из нескольких слов в кавычках >;Последнее свойство объекта может оканчиваться запятой:
let user =
Что это за «висячая запятая»? На самом деле, она здесь не просто так. Реализованный подход упростит добавление, перемещение и удаление свойств в JavaScript, ведь все строки нашего объекта становятся одинаковыми.
Создаём массив объектов
Теперь давайте поговорим о том, как реализовать создание массива из объектов в JavaScript. Но для начала создадим объект с помощью специального метода:
var myNewObject =
Кстати, для этих целей существуют и другие методы:
/* создаём пустой объект */ var emptyObject = new Object(); var someObject = new Object( ); /* получаем объект someObject, у которого заданы key:value 0: "one", 1: "two" */ var fullObject = new Object( ); /* получаем объект fullObject, у которого заданы key:value first: "one", second: "two" */Кроме того, мы можем задать ключи и значения объектов, если обратимся к нашим объектам в JavaScript, как к ассоциативному массиву:
var customObject = new Object(); customObject["id"] = "1"; customObject["name"] = "goodObject"; /* На выходе будет объект customObject: id: "1", name: "goodObject" */Переходим непосредственно к созданию массива объектов:
var arrObjects = []; // объявляем массив arrObjects[0] = < id: "1", name: "firstArrElement" >arrObjects[1] = < id: "2", name: "secondArrElement" >/* На выходе мы получим массив из 2 объектов, у которых заданы id и name */Вот и всё! Более продвинутые навыки вы всегда сможете получить на наших курсах!
При подготовке статьи использовались следующие материалы:
- "Объекты";
- "Создание объектов и массива объектов в JavaScript".
как создать массив объектов js
Для создания массива объектов в JavaScript можно выполнить следующие шаги:
- Создать объект
- Создать массив и добавить созданный объект в массив
// Создаем объект const car1 = make: 'Toyota', model: 'Camry', year: 2019 >; const car2 = make: 'Honda', model: 'Civic', year: 2018 >; // Создаем массив объектов const cars = [car1, car2]; console.log(cars); // Массив двух объектов Также, объекты можно указывать и создавать сразу в массиве:
const cars = [ make: 'Toyota', model: 'Camry', year: 2019 >, make: 'Honda', model: 'Civic', year: 2018 >, ]; console.log(cars); // Массив двух объектов В обоих случаях мы создали массив объектов cars , который содержит два элемента — объекты car1 и car2 .