window.location= 和 window.location.replace() 有什么区别？

Question

这两条线有区别吗？

var url = "http://www.google.com/";
window.location = url;
window.location.replace(url);

Answer 1

window.location将一个项目添加到您的历史记录中，您可以（或应该能够）单击“返回”并返回当前页面。

window.location.replace替换当前的历史记录项，因此您无法返回它。

请参阅window.location ：

assign(url) ：在提供的URL处加载文档。

replace(url) ：将当前文档替换为提供的URL。 与assign()方法的不同之处在于，在使用replace() ，当前页面将不会保存在会话历史记录中，这意味着用户将无法使用“后退”按钮导航到该页面。

哦，一般来说：

window.location.href = url;

受到青睐：

window.location = url;

Answer 2

TLDR;

使用location.href或更好地使用window.location.href ;

但是，如果你读到这个，你将获得无可否认的证据。

事实是，使用它是好的，但为什么做有问题的事情。 你应该采取更高的道路，并按照可能应该做的方式去做。

location = "#/mypath/otherside"
var sections = location.split('/')

这段代码在语法方面完全正确，逻辑明智，类型方面你知道它唯一的错误吗？

它有location而不是location.href

那这个呢

var mystring = location = "#/some/spa/route"

mystring的价值是什么？ 没有做一些测试，有没有人真的知道。 没人知道这到底会发生什么。 我刚刚写了这个，我甚至不知道它做了什么。 location是一个对象，但我分配一个字符串，它将传递字符串或传递位置对象。 让我们说如何实现这一点有一些答案。 你能保证所有的浏览器会做同样的事情吗？

我可以猜测所有浏览器都会处理相同的问题。

var mystring = location.href = "#/some/spa/route"

如果你将它放入打字稿中，它会破坏，因为类型编译器会说这是一个对象吗？

然而，这个对话比location对象更深刻。 这个转换是关于你想成为什么样的程序员的？

如果你采取这种捷径，是的，今天可能没事，你明天可能没问题，永远可能没事，但你先生现在是一个糟糕的程序员。 它不会对你好，它会让你失望。

会有更多的对象。 会有新的语法。

你可以定义一个只接受一个字符串但是返回一个对象的getter，最糟糕的部分就是你会认为你正在做一些正确的事情，你可能会觉得你很聪明这个聪明的方法，因为这里的人可耻地让你误入歧途。

var Person.name = {first:"John":last:"Doe"}
console.log(Person.name) // "John Doe"

使用getter和setter这个代码实际上可以工作，但仅仅因为它可以完成并不意味着这样做是“明智的”。

大多数编程爱好的人喜欢编程，喜欢变得更好。 在过去的几年里，我已经相当不错并且学到了很多东西。 我现在知道的最重要的事情，特别是当您编写库时，一致性和可预测性。

做你可以坚持做的事情。

+"2" < - 这里将此字符串解析为数字。 你应该用吗？ 或者你应该使用parseInt("2") ？

var num =+"2"怎么样？

从你学到的东西，到stackoverflow的思想，我不是太希望。

如果你开始遵循这两个词的一致性和可预测性。 您将了解有关stackoverflow的大量问题的正确答案。

让我告诉你这是如何得到回报的。 通常我放置; 在我写的每一行javascript上。 我知道它更有表现力。 我知道它更清楚了。 我遵守了我的规则。 有一天我决定不这样做。 为什么？ 因为有这么多人告诉我它不再需要它了，JavaScript可以没有它。 所以我决定这样做。 现在因为我已经确定自己是一名程序员（因为你应该享受掌握一门语言的成果）我写了一些非常简单的东西而且我没有检查它。 我删除了一个逗号，我认为我不需要重新测试删除一个逗号这么简单的事情。

我在es6和babel中写了类似的东西

var a = "hello world"
(async function(){
  //do work
})()

这段代码失败了，并且需要永远弄明白。 出于某种原因它看到了什么

var a = "hello world"(async function(){})()

隐藏在源代码深处，它告诉我“你好世界”不是一个功能。

为了更有趣，节点不显示已转换代码的源映射。

浪费了这么多愚蠢的时间。 我还向某人介绍了ES6如何才华横溢，然后我不得不开始调试并展示无头痛和更好的ES6。 没有说服力。

我希望这能回答你的问题。 对于下一代来说，这是一个古老的问题，那些仍在学习的人。

人们说无论哪种方式都无关紧要的问题。 机会更明智，更有经验的人会告诉你其他明智的。

怎么会有人覆盖位置对象。 他们会为旧浏览器做垫片。 它将获得一些需要填充的新功能，并且您的3岁代码将失败。

我在思考的最后一点。

编写干净，清晰，有目的的代码可以为您的代码做一些无法正确或错误回答的代码。 它的作用是让你的代码成为推动者。

您可以使用更多插件，库，而不用担心代码之间的中断。

作为记录。 使用

window.location.href

Answer 3

起源与解决方案

问题

这两条线有区别吗？
window.location = "http://www.google.com/";
window.location.replace("http://www.google.com/");

简答

是的。

背景资料

首先，你想知道：

window.location = "https://stackoverflow.com"是window.location.href = "https://stackoverflow.com" = "https://stackoverflow.com" 的别名，因此具有相同的功能。

window.location VS window.location.replace

window.location:

在这里，我在其上下文中将 window.location = "https://website.com window.location = "https://website.com"称为window.location.href = "https://website.com"

• location 对象的 href 属性存储当前网页的 URL。
• 在更改 href 属性时，用户将被导航到新的 URL。
• 这会将一个项目添加到历史列表中
• 移动到下一页后，用户可以点击浏览器中的“返回”按钮返回到该页面。

window.location.replace:

• 替换功能用于导航到新 URL，而不向历史记录添加记录。
• 此函数正在覆盖最顶层的条目并从历史堆栈中替换它。
• 通过单击“返回”按钮，您将无法在移动到下一页后返回到重定向之前访问的最后一页。

结论：

要回答这个问题：

是的，我们的两个主题之间存在差异，主要在于window.location允许您返回浏览器历史记录，而window.location.replace()不允许您返回浏览器历史记录，因此删除了浏览器历史记录中的先前 URL 记录。

奖励：哪个更快？

当你使用这个时： window.location = "http://www.google.com/"; 您正在直接更新href属性，这比使用window.location.replace("http://www.google.com/"); 因为更新函数比直接更新属性要慢。

更多关于window.location

window.location返回内部看起来像这样的Location对象：

console.log(window.location);

// This is how the Location object that returns from window.location looks like
{
    "ancestorOrigins": {},
    "href": "https://stackoverflow.com/",
    "origin": "https://stackoverflow.com",
    "protocol": "https:",
    "host": "stackoverflow.com",
    "hostname": "stackoverflow.com",
    "port": "",
    "pathname": "/",
    "search": "",
    "hash": ""
}

Location对象还具有以下方法（函数）：

Location.assign()
在参数中提供的 URL 加载资源。

Location.reload()
重新加载当前 URL，如刷新按钮。

Location.toString()
返回一个包含整个 URL 的字符串。 它是 Location.href 的同义词，但不能用于修改值。