页面console.log为什么获取不到数组长度？

AJAX获取数据，数据是已经拉下来了，但我在页面使用console.log(date)为什么打印出来的是0，而我直接在控制台使用console.log(date.length)打印出来的是1000。现在我知道是异步的原因造成了，但是如何解决呢，如果我不想设置sync的话？

如果我想在下面的dateFilter函数中取得值该怎么写？是直接将filter卸载ajax的success中么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form class='search-form'>
        <input type="text" class='search' placeholder="City or State"/>
        <ul class='suggestions'>
            <li>filter for a city</li>
            <li>or a city</li>
        </ul>
    </form>
</body>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script>
    var endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
    
    var cities=[];
    var input=$(".search").val();
    function getDate(url){
         $.ajax({
            url:url,
            success:function(res){
                let result=JSON.parse(res);
                cities.push(...result);
            }
        })

        return cities;
    }
    var date=getDate(endpoint);
    // console.log(date)
    console.log(date.length);
    // alert(date)
    var dateFilter=date.filter(function(item){
        return item.city=="New York"
    })
    console.log(dateFilter)
</script>
</html>

javascript

阅读 4.4k

4 个回答

Wenci丶

✓ 已被采纳

因为ajax是异步请求，当你调用var date=getDate(endpoint);的时候，ajax 请求才发出去，还没有返回结果，succss 的回调函数并没有执行，所以此时cities 还是为空数组，并且被赋值给了date。但是当你打开控制台打印的的时候ajax 已经返回结果并且执行success函数了，此时cities已经被赋值为返回的结果了。并且因为数组是引用类型，cities和date指向同一个数组。当你通过cities修改了数组，date也引用这个数组，所以你打印date.length 发现date数据变得正常了了。