chrome 控制台中数组的不同表示

Question

这是我的代码

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));
}

这里一切正常，但问题是当我将元素推入数组时超出了数组大括号 [] 下面是我的数组的屏幕截图：

我无法在此处循环遍历数组。

这是控制台中常见数组的样子

请参阅此处的数组大括号。元素似乎在 [1, 2, 3]

内

Answer 1

我认为问题是 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();

Answer 2

由于您的 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，您应该利用 of how it works。例如，您可以使用它来生成整个数组，而无需使用 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));
}

Answer 3

下面的代码片段演示了您的问题（您的情况是 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();

chrome 控制台中数组的不同表示

different representation of arrays in chrome console

javascript

arrays

google-chrome

async-await

console.log