различное представление массивов в консоли Chrome - PullRequest
Новая
       22

различное представление массивов в консоли Chrome

0 голосов
/ 05 ноября 2018

Вот мой код 

let loadInitialImages = ($) => {
 let html = "";
 let images = new Array();
 const APIURL = "https://api.shutterstock.com/v2/images/licenses";

 const request = async() => {
    const response = await fetch(APIURL, { headers: auth_header() } );
    const json = await response.json();
    json.data.map((v) => images.push(v.image.id)); //this is where the problem is
 }

 request();

 // I can see the contents of the array when I log it.
 console.log(images);
 // But I can't see any elements when logging this way:
 images.map((id) => console.log(id));
}

Здесь все работает нормально, но проблема в том, что когда я помещаю элементы в массив, он выходит из скобок массива [] ниже приведен скриншот моего массива: Array output

Я не могу перебрать массив здесь.

Так выглядит обычный массив в консоли. Usual Array

См. Фигурные скобки здесь. Элементы кажутся внутри [1, 2, 3]

Ответы [ 3 ]

0 голосов
/ 05 ноября 2018

Поскольку ваша функция request равна async, вам нужно обработать ее результат как Promise.

Это также причина, по которой вы видите, что он представлен по-разному в chrome консоли. Пустой массив печатается, но ссылки в консоли обновляются динамически, поэтому вы все равно можете развернуть его и просмотреть содержимое.

Если вы хотите записать содержимое массива статически, вы можете использовать что-то вроде JSON.stringify, чтобы распечатать его. Это напечатает строковое представление точного состояния массива во время регистрации. 

// You will need to check the output in the browser console.
// Your code could be reduced to this:
const a = []; 
setTimeout(() => a.push(1, 2), 100); 
console.log('a:', a);

// A filled array logs differently:
const b = [1, 2]; 
console.log('b:', b);

// Stringify gives you a fixed state:
const c = []; 
setTimeout(() => c.push(1, 2), 100);
console.log('c:', JSON.stringify(c));

Что касается вашего кода, помимо ожидания request(), если вы используете map, вы должны воспользоваться тем, как он работает . Вы можете использовать его для генерации всего массива, не используя, например, push. Если вы все еще хотите использовать свой массив и push() к нему, вам следует использовать json.data.forEach вместо json.data.map, поскольку он не дублирует массив. 

// Making your function `async` so you can `await` for the `request()`
let loadInitialImages = async ($) => {
  let html = "";
  const APIURL = "https://api.shutterstock.com/v2/images/licenses";

  const request = async () => {
    const response = await fetch(APIURL, { headers: auth_header() } );
    const json = await response.json();
    // Array.map will return a new array with the results of applying 
    // the given function to the original array, you can use that as 
    // an easy way to return your desired array.
    return json.data.map((v) => v.image.id); 
  }

  // Since request() is async, you need to wait for it to complete.
  const images = await request();
  // Array.forEach lets you iterate over an array without generating a
  // copy. If you use map here, you would be making an unneeded copy 
  // of your images array.
  images.forEach(i => console.log(i));
}
0 голосов
/ 05 ноября 2018

Фрагмент ниже демонстрирует вашу проблему (ваш случай arr1, вы хотите arr2).
Если loadInitialImages не может быть async, используйте сценарий arr3. 

async function main(){
let arr1 = [], arr2 = [], arr3 = [];

const getArray = ()=> (new Promise(resolve=>setTimeout(()=>{resolve([1,2,3])},1000)))



async function request(arr, number){
  var result = await getArray();
  result.forEach((el)=>(arr.push(el)))
  console.log(`inner${number}`, arr)
  return result;
}

request(arr1, 1);

console.log("outer1", arr1)

await request(arr2, 2);

console.log("outer2", arr2)

request(arr3, 3).then(()=>{
  console.log("then3",arr3)
})
console.log("outer3", arr3)
}

main();
0 голосов
/ 05 ноября 2018

Я думаю, что проблема в том, что console.log () запускается до заполнения массива, и потому что console.log работает со ссылкой, он печатает как состояние массива (когда оно пустое, так и после заполнения его картой .map). )

Вы можете проверить этот код? консоль сразу после цикла 

let loadInitialImages = ($) => {
    let html = "";
    let images = new Array();
    const APIURL = "https://api.shutterstock.com/v2/images/licenses";

    const request = async() => {
       const response = await fetch(APIURL, { headers: auth_header() } );
       const json = await response.json();
       json.data.map((v) => images.push(v.image.id)); //this is where the problem is
       console.log(images);
    }

    request();

}


let loadInitialImages = ($) => {
        let html = "";
        let images = new Array();
        const APIURL = "https://api.shutterstock.com/v2/images/licenses";

        const request = async() => {
           const response = await fetch(APIURL, { headers: auth_header() } );
           const json = await response.json();
           json.data.map((v) => images.push(v.image.id)); //this is where the problem is
           console.log(images);
        }

        request();

    }
    
    loadInitialImages();
...