URL构造函数

作用

创建并返回指定url对象

语法

new URL(url,[base])

• url(必填): 若是rl 是相对 URL，则会将 base 用作基准 URL，如果 url 是绝对 URL，则无论参数base是否存在，都将被忽略
• base: 是一个表示基准 URL 的 DOMString，在 url 是相对 URL 时，它才会起效。如果未指定，则默认为 ‘’
• 举例说明

  // 由于第一个参数为相对URL，会将第二个参数作为基路径 
  // https://www.baidu.com/s?wd=2222
  new URL('/s?wd=2222', 'https://www.baidu.com')
  

  // 由于第一个参数为绝对URL，会将第二个参数忽略
  // https://www.baidu.com
  new URL('https://www.baidu.com','https://www.baidu.com')
  

返回值

返回值为一个URL对象

包含以下属性
[1]包含location对象的属性；

const url = new URL('https://element.eleme.cn/?id=111&name=222#/zh-CN/component/button')
console.log(url) // URL对象
console.log(url.href) // https://element.eleme.cn/?id=111&name=222#/zh-CN/component/button
console.log(url.origin) // https://element.eleme.cn
console.log(url.protocol)// https:
console.log(url.hostname) // element.eleme.cn
console.log(url.port) // 
console.log(url.search)// ?id=111&name=222
console.log(url.hash) // #/zh-CN/component/button

[2]searchParams属性

• 只读属性
• 返回值为 URLSearchParams对象
  • 不会直接显示属性
  • 通过点语法也获取不到
  • 需要通过指定方法获取
    • 获取指定属性

      const url = new URL('https://element.eleme.cn/?id=111&id=222&name=222#/zh-CN/component/button')
      const { searchParams } = url
      // 通过get方法获取仅能获取第一个指定属性的值
      const id = searchParams.get('id')
      console.log('id', id) // 111
      // 通过getAll方法获取可以获取所有的指定属性的值
      const ids = searchParams.getAll('id')
      console.log('ids', ids) // ['111','222']
      

    • 判断属性是否存在

      const url = new URL('https://element.eleme.cn/?id=111&id=222&name=222#/zh-CN/component/button')
      const { searchParams } = url
      console.log(searchParams.has('name'), searchParams.has('sex')) // true false
      

构造函数的特定方法

URL.createObjectURL

• 语法

  • URL.createObjectURL(object)
    

  • object参数可以是一个 File对象 或 Blob对象； 不可是远程链接！

    • URL.createObjectURL('http://test2.clipworks.com:8666/api/thirdSite/downloadTemplate') // 报错 Failed to execute 'createObjectURL' on 'URL'
      

• 返回值

  • 返回表示指定的 File 对象或 Blob 对象的本地url；
  • 在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过；
    • 浏览器在 document 卸载的时候，会自动释放它们；
    • 也可主动通过 revokeObjectURL 方法去主动释放内存；

URL.revokeObjectURL

• 作用：释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象

• 语法

  • URL.revokeObjectURL(object)
    

  • object:通过调用 URL.createObjectURL() 创建的 URL 对象

应用

[1]获取url携带参数

• (1)通过location对象获取参数

  • const { search } = location
    const paramsArr = search.split('?')[1].split('&')
    const id = paramsArr[0].split('=')[1] // 111
    const name = paramsArr[1].split('=')[1] // 222
    

• (2)通过创建URl对象获取参数

  • const { searchParams } = new URL(window.location)
    const id = searchParams.get('id') // 111
    const name = searchParams.get('name') // 222
    

[2]创建本地url

    const xhr = new XMLHttpRequest()
  	xhr.open('POST','https://file2.clipworks.com/4c217acc09226795a7ebb8461ddf548f/20220726/469c1056-749d-4c47-819e-35f91c70e163')
	xhr.responseType = 'blob'
	xhr.send()
	xhr.onload = function(){
	const url = URL.createObjectURL(xhr.response)
	console.log('结果', url) // 本地url
  }

[3]为每个文件生成一个uuid

// uuid是独一无二的
const blobUrl = URL.createObjectURL(new Blob())
file[0].uuid = blobUrl.slice(blobUrl.lastIndexOf('/') + 1)
// 主动释放内存
URL.revokeObjectURL(blobUrl)