JS 相关API

窗口相关API

alert

弹窗，要注意的是其在弹窗中展示内容是会隐式调用内容的toString()方法，因此像对象输出的就是[object Object]，而不是其本身的内容

console

控制台内容输出API

console.log

打印日志，还可以设置样式，举例：

// %c开头可以设置样式
console.log("%chhh", "color:white;padding:10px 20px;background:black;display:block;")

console.dir

打印对象的内容

console.table

将数组以表格形式打印

console.time/console.timeEnd

计算代码运行时间，举例：

console.time("test")
for (let i=0; i<10000000; i++);
console.timeEnd("test")
// test是给一段运行代码的命名，代表对这块代码进行运行时间的计算
// test: 22.085ms

更多console参考

你可能不知道console强大：https://www.cnblogs.com/liyunhua/p/4529079.html

confirm()

确认弹框，举例：
html中：

删除

js中：

function fun(){
    return window.confirm("确认删除吗")      //点击确认后就返回true，否则返回false
}

prompt()

弹出一个输入框，接收输入的数据，举例：
js中：

var str = prompt("please input:", "please input...");       //第一个参数是一个label，第二个是输入框里的default值
document.write(str)

open()

会打开一个新的页面窗口（如果里面为空，则打开一个新的空标签页）举例：
js中：

open("success.html")

注：
如果想设置打开页面时的相关属性，比如窗口打开时要在第二个参数添加"AD页"，然后多个属性用分号隔开，举例：
js中：

open("success.html","AD页","width=30;height=30")

close()

关闭窗口

print()

打印页面，一般在打印时我们可能会只想打印页面的部分内容，或者对打印页面做部分处理，此时我们就可以封装一个结合自己需求的打印方法，例如我们不想打印#aaa下的内容，其他内容则希望隐藏，那么我们可以封装一个函数，在调用print()之前隐藏不需要的控件，print()执行完之后再显示回来，举例：

function myPrint() {
  document.getElementById("aaa").style.hidden = true;
  print();
  document.getElementById("aaa").style.hidden = false;
}

并且由于打印时，页面也会根据A4纸尺寸进行调整（例如bootstrap的栅格布局），因此也要考虑好对应的处理措施
注：
如果打印时，发现一些样式不生效，那么可以给这些样式加上!important，这样基本就解决了，而对于背景、图表等内容，还需要在打印设置中勾选上背景图表之类的选项才能够正确显示

工具类相关

Math

数学计算相关类，里面有很多计算公式

random()

随机数

ceil()/floor()/round()

向上取整/向下取整/四舍五入

PI

圆周率

max()/min()/abs()/sin()/cos()/tan()/log()/pow()/exp()/...

相关数学计算

Date

日期相关类

now

静态方法，返回时间戳，举例：

Date.now()
// 1588325720187

parse

静态方法，将字符串转时间戳

getFullYear/getMonth/getDate/...

对象方法，返回年月日...
注：

• getMonth获取的月份是从0开始的，需要加1
• getDay是获取星期几，并且以星期日为第一天进行计算
• getDate获取的是当前月的第几天

封装日期格式化函数

function dateFormat(date, format="YYYY-MM-DD HH:mm:ss") {
  const config = {
      YYYY: date.getFullYear(),
      MM: date.getMonth() + 1,
      DD: date.getDate(),
      HH: date.getHours(),
      mm: date.getMinutes(),
      ss: date.getSeconds()
  }
  for (let key in config) {
      format = format.replace(key, config[key]);
  }
  return format;
}

let date = new Date();
console.log(dateFormat(date));

• 前面补零：

const toFixLength = (num, length, fill = '0') => {
  return (Array(length).join(fill) + num).slice(-length);
};

function dateFormat (date, format = 'YYYY-MM-DD HH:mm:ss') {
  const config = {
    '[Y]{1,}': date.getFullYear(),
    '[M]{1,}': date.getMonth() + 1,
    '[D]{1,}': date.getDate(),
    '[H]{1,}': date.getHours(),
    '[m]{1,}': date.getMinutes(),
    '[s]{1,}': date.getSeconds(),
  };
  for (let key in config) {
    const reg = new RegExp(key);
    const res = format.match(reg);
    if (!res) continue;
    const len = res[0].length;
    const fixRes = toFixLength(config[key], len);
    format = format.replace(res[0], fixRes);
  }
  return format;
};

let date = new Date();
console.log(dateFormat(date));

JSON

序列化/反序列化相关类

stringify

将对象转JSON格式

parse

将JSON字符串转对象

json自定义序列化

这里介绍两种方式

1.JSON.stringify(obj, [property1, property2, ...], tabSize)

该方法接收三个参数，依次是序列化的对象、序列化的属性以及tab的空格数，除了第一个参数外，后面的参数都可以省略（默认全部属性和0空格，即：(obj, null, 0)），举例：

let a = {x:1, y:2}
console.log(JSON.stringify(a, ["x"], 2));
// {
//     "x": 1
// }

2.编写toJSON方法

可以通过在对象中编写toJSON方法，自定义需要序列化的属性，举例：

let a = {
    x:1, 
    y:2, 
    toJSON(){
        return {
            x:this.x
        };
    }
}
console.log(JSON.stringify(a));
// {"x":1}

JSON解析回调

JSON.parse方法可以传入第二个参数，是一个回调函数（接收key和value），当每解析出一对key/value便会调用回调遍历对象（包括最终的对象本身，key为空，value为整个对象），举例：

let s = '{"x":1,"y":2}';
let a = JSON.parse(s, (key, value) => {
    if (key === "x") value++;
    console.log(key, value)
    return value;
})
// x 2
// y 2
//  { x: 2, y: 2 }

可以看到最后一次输出时，key为空，value为对象整体

数据结构相关

Symbol

定义一个唯一的内容，一般Symbol对象之间是不相等的

定义Symbol

a = Symbol()
a = Symbol("a")  // 里面加描述
a = Symbol.for("a")  // 用for方法

第三种比较特殊，如果同样用for创建，且描述相同的两个symbol是相等的（原理：用for方法创建时，如果创建对象时发现该描述已经被创建过，那么就会复用他；而别的方式创建，都是直接创建一个新的），其他定义方法都是不相等的，举例：

console.log(Symbol() === Symbol()); // false
console.log(Symbol("a") === Symbol("a"));   // false
console.log(Symbol.for("a") === Symbol.for("a"));   // true

获取描述

可以通过description属性、Symbol.keyFor()获取描述，举例：

b = Symbol.for("a");
console.log(Symbol.keyFor(b));
// a

Symbol使用场景

例如两个重名的name放在一个对象里，前者会被覆盖，因此可以给他们都设置一个symbol的key，从而使得存储不会重复，举例：
key重复导致被覆盖：

let a = {name: "aaa", age:10};
let b = {name: "aaa", age: 20};
let o = {};
o[a.name] = a;
o[b.name] = b;
console.log(o[a.name]);
console.log(o[b.name]);
// 可以看到a的被覆盖

使用Symbol解决：

let a = {name: "aaa", key: Symbol(), age:10};
let b = {name: "aaa", key: Symbol(), age: 20};
let o = {};
o[a.key] = a;
o[b.key] = b;
console.log(o[a.key]);
console.log(o[b.key]);

Symbol遍历

使用普通的for ... in o/for ... of o无法遍历到Symbol为key的值（有时候也可以可以利用Symbol的该特性，实现对不想被遍历的属性进行保护），如果想要遍历Symbol可以用以下方式：

• Object.getOwnPropertySymbols：遍历所有的Symbol属性，其他属性不会遍历
• Reflect.ownKeys：遍历所有普通属性和Symbol属性，举例：

a = {
    x: 1,
    [Symbol()]: 2
}

console.log(Object.keys(a));    // [ 'x' ]
console.log(Object.getOwnPropertySymbols(a));   // [ Symbol() ]
console.log(Reflect.ownKeys(a));    // [ 'x', Symbol() ]

Set

集合，举例：

s = new Set([1,2,3,3])
// Set(3) {1, 2, 3}，可以看出结果为3个
s.size
// 3，相当于length
s.add(4)
// Set(4) {1, 2, 3, 4}，添加了4进去
s.delete(5)
// false，没有5，删除失败
s.delete(3)
// true，删除成功
s.has(2)
// true，存在2
s.clear()
// 清空集合

map

一个以键值方式存放的存储类型对象，相比与object，object当中的key只能是字符串，而map中的key则可以是各种类型，举例：

let a = {x:1};
let b = {
    [a]: 1
}
let m = new Map();
m.set("aaa", "bbb");
m.set(a, "object");
console.log(b)  // { '[object Object]': 1 }
console.log(m)  // Map { 'aaa' => 'bbb', { x: 1 } => 'object' }

has

判断某个key是否存在

set

设置key

get

根据key获取value

keys

遍历所有key，返回一个迭代器（通过next()遍历）

values

遍历所有value，返回一个迭代器（通过next()遍历）

entries

遍历key+value，返回一个迭代器（通过next()遍历）

weakmap

相比于map类型，weakmap的key必须是引用类型，并且无法对里面的内容进行遍历以及很多其他操作（只提供了has/delete/get/set这些常用操作），其特性就是对于添加进去的引用数据，其在内存中的引用计数并不会加1，所以当外部对该数据引用减为0时，不会因为weakmap里有对应的数据而不进行垃圾回收，举例：

let a = {x:1};
let b = a;
let wm = new WeakMap();
wm.set(a, 1);
a = null;
b = null;
setTimeout(() => {
    console.log(wm);
}, 5000);
// 因为垃圾回收不一定会马上进行，所以等待查看结果，会发现WeakMap内部的a也被回收了
// 这里如果将WeakMap改成Map类型就可以看出对比了（Map类型会使得引用计数+1，所以不会回收）

操作类相关

proxy对象

代理类，通过该类来操作数据，期间我们可以进行一些自定义行为，举例：

let a = {
    x: 1
}

// 创建代理类，绑定对象a
const proxy = new Proxy(a, {
    set(obj, property, val) {
        console.log(`给属性${property}赋值：${val}`);
        obj[property] = val;
    },
    get(obj, property) {
        console.log(`获取属性${property}`);
        return obj[property];
    }
})

proxy.x = 1;
// 通过代理操作对象
console.log(proxy.x);
// 给属性x赋值：1
// 获取属性x
// 1

使用代理器还可以绑定各种类型，例如绑定函数：

function test(times) {
    for(let i=0; i< times; i++);
}

// 创建代理类，绑定对象a
let proxy = new Proxy(test, {
    apply(func, obj, args) {
        console.time("func");
        func.apply(this, args);
        console.timeEnd("func");
    }
});

proxy.apply({}, [10000000]);
// func: 17.827ms

会话相关

cookie

所有当前页面的cookie数据都存放在document.cookie中，cookie操作封装举例：

// 设置过期时间（以秒为单位）
function setCookie(key, value, expires) {
  let exdate = new Date();
  exdate.setTime(exdate.getTime() + expires * 1000);
  document.cookie = key + "=" + encodeURI(value) + (expires == null ? "" : ";expires=" + exdate.toGMTString());
}

// 获取cookie
function getCookie(key) {
  if (document.cookie.length <= 0) return "";
  let c_start = document.cookie.indexOf(key + "=");
  if (c_start === -1) return "";
  c_start = c_start + key.length + 1;
  let c_end = document.cookie.indexOf(";", c_start);
  if (c_end == -1) c_end = document.cookie.length;
  return decodeURI(document.cookie.substring(c_start, c_end));
}

// 删除cookie（让cookie立即过期）
function removeCookie(key) {
  setCookie(key, "", -1);
}

sessionStorage/localStorage

可以将内容以键值对方式（但存储的内容必须为字符串格式）存放到浏览器当中，两者使用方法相同，其中sessionStorage里存放的数据在当前窗口关闭后会自动销毁，而localStorage则需要手动销毁（需要注意在IE中由于其安全策略，localStorage可能无法正常使用），举例：

localStorage.setItem("name", "aaa");
localStorage.getItem("name");  // "aaa"
localStorage.removeItem("name");
localStorage.getItem("name");  // 不存在的内容返回值为null

浏览器相关

navigator

浏览器信息

screen

屏幕信息

history

当前页面浏览历史

back

回到上一个页面

forward

进入下一个页面

go

以当前页面为基准进入到前/后第几个页面

pushState

往当前页面添加一条历史记录，并改变地址栏地址（但不会进行访问）

replaceState

修改历史记录

参考：https://www.jianshu.com/p/bbc2f9552c06

location

页面地址相关api，如跳转到某个页面（默认file协议），举例：

location.href = "http://www.baidu.com"————跳转到百度
location.href = "www.baidu.com"————跳转到：file:///C:/Users/Dawsonenjoy/Desktop/www.baidu.com，看到差别了吧

注：
对于location.href是使用get方法跳转访问页面，如果希望采用post方法，可以使用js拼接表单并提交或者ajax获取数据后使用document.write重写页面，这里示例第一种方法：

function StandardPost (url,args) 
    {
        var form = $("
");
        form.attr({"action":url});
        for (arg in args)
        {
            var input = $("");
            input.attr({"name":arg});
            input.val(args[arg]);
            form.append(input);
        }
        $(document.body).append(form);
        form.submit();
    }
$('div').click(function(){
    StandardPost("http://www.baidu.com", "aaa")
})

具体可以参考：https://www.cnblogs.com/wangdengbin/articles/3892572.html

localStorage/sessionStorage

html5出现的存储对象，可以设置键值，前者只要不去删除永不过期，后者当session关闭则过期
localStorage使用参考：https://www.runoob.com/jsref/prop-win-localstorage.html
sessionStorage使用参考：https://www.runoob.com/jsref/prop-win-sessionstorage.html

URL相关

new URL(url)

创建一个url对象

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/URL

URL对象操作

• 示例：

// 获取url中的parameter参数
new URL(window.location.href).search
// 将参数转字典，并通过get方法获取对应参数值
new URLSearchParams(new URL(window.location.href).search).get("id")

URL.createObjectURL(object)

对一个Blob/File对象创建对应的url，举例-上传图片文件，创建对应url展示：

  
    

      

        
        上传图片
      
      

        
      
    
  
  

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications

URL.revokeObjectURL(url)

释放通过URL.createObjectURL()创建的对象

API参考

https://www.runoob.com/jsref/obj-window.html

粘贴板操作

示例

// 方法一
navigator.clipboard.writeText('Copy this text to clipboard');

// 方法二
const copyToClipboard = (val) => {
  const input = document.createElement("input");
  document.body.appendChild(input);
  input.setAttribute("value", val);
  input.select();
  if (document.execCommand("copy")) {
    document.execCommand("copy");
  }
  document.body.removeChild(input);
};

// 方法三（IE）
window.clipboardData.setData("Text", 'Copy this text to clipboard')

参考：http://www.ruanyifeng.com/blog/2021/01/clipboard-api.html