Javascript: вызов функции в литературе объекта

Question

Я учусь программировать в Javascript, и мне нужна помощь/разъяснение.

Я объявил массив, содержащий имена животных. Я определил функцию, которую я использую, чтобы разделить строку на две части. Затем я создаю пустой литерал объекта и добавляю животное и соответствующую породу. Я пытаюсь вызвать функцию separateWords в объектном литерале, но мне нужно уточнение. Вот мой код:

var myPets = ["Bengal Bobcat", "Beagle"]; 

var separateWords = function (string) { 
    return string.split(" "); 
}; 

var nameCollection = {}; 
nameCollection.cat = separateWords(myPets[0]); 
nameCollection.dog = myPets[1]; 
nameCollection.fish = null; 

Когда я вхожу console.log (nameCollection) я получаю следующее:

Object {cat: Array[2], dog: “Beagle”, fish: null} 
cat: Array[2] 
0: "Bengal" 
1: "Bobcat" 
length: 2 

Однако, когда я вхожу console.log (separateWords (myPets [0])), Я вижу:

[“Bengal”, “Bobcat”] 

Я не понимаю, почему значение кошки появляется как массив [2].

Answer 1

Это просто, как работает javascript (и многие другие языки). Когда вы пытаетесь напечатать «nameCollection», javascript автоматически не выполняет хорошую работу по печати массива cat. Вместо этого он просто печатает некоторую информацию, относящихся к типу, который в данном случае говорят «кошка» представляет собой массив длину 2.

Answer 2

Вы присваиваете cat результат вызова в separateWords() функции, передавая myPets[0] в качестве параметра.

separateWords() возвращает массив, и с входом myPets[0] он возвращает новый массив с "Bengal" и "Bobcat" значений расщепленных на пробельных.

Функция split() - это та, которая создает массив с разделенными значениями, и этот результат возвращается вашей функцией separateWords(), которая также является значением, назначенным объекту-объекту cat.

Answer 3

String.prototype.split() возвращает массив, содержащий два значения в строке, которые были разделены. Read through this.

nameCollection.cat = separateWords(myPets[0])[0]; // nameCollection.cat == Bengal 
nameCollection.cat = separateWords(myPets[0])[1]; // nameCollection.cat == Bobcat 

Answer 4

Консоль отображает его как массив [2], как это будет (потенциально) нечитаемым, если он полностью расширил его. Один из способов, чтобы увидеть все это stringify его с помощью JSON.stringify которая проходит через каждый элемент в объекте рекурсивно и вызывает toString() на нем:

var myPets = ["Bengal Bobcat", "Beagle"]; 
 

 
var separateWords = function (string) { 
 
    return string.split(" "); 
 
}; 
 

 
var nameCollection = {}; 
 
nameCollection.cat = separateWords(myPets[0]); 
 
nameCollection.dog = myPets[1]; 
 
nameCollection.fish = null; 
 

 
document.body.textContent = JSON.stringify(nameCollection);

Answer 5

Каждый браузер реализует свою консоль, как он хочет.

Итак, ваш браузер решил реализовать описанное вами поведение.

Если вам это не нравится, предложите лучшую идею разработчикам этого браузера. Или используйте другой браузер.

Answer 6

Я собираюсь предположить, что вы используете Chrome Developer Tools или Firebug.

Инструменты разработчика конструируют массивы и объекты в легко читаемые строки, которые вы затем проверяете дальше.Я имею в виду, вы нажимаете маленькую стрелку рядом с каждой строкой в ​​журнале консоли для дальнейшего осмотра каждого объекта. Я буду использовать фотографии, чтобы объяснить это.

Здесь я задаю массив, а затем назначить элемент в объекте к этому массиву, как так:

Как вы можете видеть, когда я вхожу объект это показать это массив [2], а чем развернуть массив. На следующем рисунке я развернул массив, чтобы проверить его.

Почему это точно? Моя первая мысль - легкость чтения. Если у вас есть сложное приложение, и у вас есть множество журналов консоли отладки, вы можете увидеть все журналы в одиночных линиях, что облегчает поиск определенных журналов. Кроме того, если у вас очень большой и сложный объект, то, возможно, легче прочитать все корневые элементы в каждой строке без расширения всех объектов и массивов, найденных внутри этого объекта, рекурсивно.