在前端开发中，我们经常会使用location对象来获取或设置当前页面的URL。这个对象有两个常用属性：href和location。虽然它们看起来很相似，但实际上有着不同的作用。
location.href
location.href是一个字符串类型的属性，包含当前文档的完整URL。当我们想要跳转到另一个页面时，可以将需要跳转的URL赋值给location.href属性，浏览器会自动加载新的页面。
// 跳转到百度首页 location.href = 'http://www.baidu.com';
location
location是一个对象，包含了当前文档URL的各个部分，例如协议、主机名、路径等等。与location.href不同，location对象还包含一些其他的属性和方法。
location.protocol
location.protocol属性返回当前文档使用的协议（通常是http或https），并以冒号结尾。
console.log(location.protocol); // 输出：http:
location.host
location.host属性返回当前文档的主机名和端口号。
console.log(location.host); // 输出：www.example.com:8080
location.pathname
location.pathname属性返回当前文档的路径部分，即除去主机名和查询参数以外的部分。
console.log(location.pathname); // 输出：/path/to/file.html
location.search
location.search属性返回当前文档的查询参数部分，即URL中问号后面的部分。
console.log(location.search); // 输出：?key=value
location.hash
location.hash属性返回当前文档的锚点部分，即URL中井号后面的部分。
console.log(location.hash); // 输出：#section1
总结
虽然location.href和location对象都可以用来获取或设置当前文档的URL，但它们具有不同的作用。location.href是一个字符串类型的属性，用于直接跳转到其他页面；而location对象则包含了当前文档URL的各个部分，可以通过各种属性和方法来操作这些部分。
在实际开发中，我们可以根据需要选择使用哪个属性或方法。例如，如果我们只是想要获取当前文档的某个部分（比如路径或查询参数），那么使用location对象会更加方便；如果我们想要跳转到另一个页面，那么直接将URL赋值给location.href属性就可以了。
希望本文能够帮助大家更好地理解location.href和location之间的关系，并在实际开发中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24172