Location 对象,URL 对象,URLSearchParams 对象间关系以及实际开发用到

Location 对象

通过window.location和document.location属性,可以拿到这个对象。这是我遇到的第一个没有构造函数的对象
开发实际常用:Location.search:查询字符串部分,从问号?开始。

**2.1 encodeURI()**
encodeURI()方法用于转码整个 URL。它的参数是一个字符串,代表整个 URL。它会将元字符和语义字符之外的字符,都进行转义。
encodeURI('http://www.example.com/q=春节')
// "http://www.example.com/q=%E6%98%A5%E8%8A%82"

**2.2encodeURIComponent()**
encodeURIComponent()方法用于转码 URL 的组成部分,会转码除了语义字符之外的所有字符,即元字符也会被转码。所以,它不能用于转码整个 URL。它接受一个参数,就是 URL 的片段。
encodeURIComponent('春节')
// "%E6%98%A5%E8%8A%82"
encodeURIComponent('http://www.example.com/q=春节')
// "http%3A%2F%2Fwww.example.com%2Fq%3D%E6%98%A5%E8%8A%82"
上面代码中,encodeURIComponent()会连 URL 元字符一起转义,所以如果转码整个 URL 就会出错。

**2.3decodeURI()**
decodeURI()方法用于整个 URL 的解码。它是encodeURI()方法的逆运算。它接受一个参数,就是转码后的 URL。
decodeURI('http://www.example.com/q=%E6%98%A5%E8%8A%82')
// "http://www.example.com/q=春节"

**2.4decodeURIComponent()**
decodeURIComponent()用于URL 片段的解码。它是encodeURIComponent()方法的逆运算。它接受一个参数,就是转码后的 URL 片段。
decodeURIComponent('%E6%98%A5%E8%8A%82')
// "春节"

URL 对象

URL接口是一个构造函数,浏览器原生提供,可以用来构造、解析和编码 URL。一般情况下,通过window.URL可以拿到这个构造函数。

看到上面这句话我懵了,URL接口居然可以new

实例属性

URL 实例的属性与Location对象的属性基本一致,返回当前 URL 的信息。

静态方法

URL.createObjectURL():URL.createObjectURL()方法用来为上传/下载的文件、流媒体文件生成一个 URL 字符串。这个字符串代表了File对象或Blob对象的 URL。
注意,每次使用URL.createObjectURL()方法,都会在内存里面生成一个 URL 实例。如果不再需要该方法生成的 URL 字符串,为了节省内存,可以使用URL.revokeObjectURL()方法释放这个实例。
URL.revokeObjectURL():URL.revokeObjectURL()方法用来释放URL.createObjectURL()方法生成的 URL 实例。它的参数就是URL.createObjectURL()方法返回的 URL 字符串。

var div = document.getElementById('display');
function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var img = document.createElement('img');
    img.src = window.URL.createObjectURL(files[i]);
    div.appendChild(img);
    img.onload = function() {
      window.URL.revokeObjectURL(this.src);
    }
  }
}

一旦图片加载成功以后,为本地文件生成的 URL 字符串就没用了,于是可以在img.onload回调函数里面,通过URL.revokeObjectURL()方法卸载这个 URL 实例。

URLSearchParams 对象(了解)

URLSearchParams对象是浏览器的原生对象,用来构造、解析和处理 URL 的查询字符串(即 URL 问号后面的部分)。
2020/4/8查询了URLSearchParams的用途,FormDate对象最合适.而且ie不兼容

发布了15 篇原创文章 · 获赞 0 · 访问量 163

猜你喜欢

转载自blog.csdn.net/qq_33393540/article/details/105285170