JavaScript 笔记

JS 数组与字符串之间的转换

1.数组->字符串：join()方法

2.字符串->数组：split()方法

JS 数组的常用方法

栈方法(后进先出)

ArrayObj.push(); //向数组末尾添加新的元素，返回新数组。
ArrayObj.pop(); //删除数组最后一个元素并且返回该元素，如果数组为空就返回undefined。

队列方法（先进先出）

ArrayObj.unshift(); //向数组头部添加新的元素，返回新数组。
ArrayObj.shift(); //删除数组第一个元素并且返回该元素，如果数组为空就返回undefined。

重排序方法

ArrayObj.reverse(); //反转数组的顺序。
var values = [1, 2, 3, 4, 5];
values.reverse();
consol.log(values); //5,4,3,2,1

ArrayObj.sort(); //排序方法。
ArrayObj.sort((a, b) => {
  return a - b; //升序
  return b - a; //降序
});

操作方法

ArrayObj.concat()
//用于连接两个或多个数组，该方法不会改变现有的数组，而是返回被连接数组的一个副本。

const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]

//ES6语法改进(去重)
const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]

ArrayObj.slice(start,end)
//返回一个新的数组，包含从 start 到 end （不包括该元素）的元素。

start 必需。
//规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。

end 可选。
//规定从何处结束选取。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
//如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。


ArrayObj.splice()
//用于插入、删除或替换数组的元素

删除
//需要两个参数，要删除的第一项的位置和要删除的项数。
var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1);
console.log(colors); // greeen, blue
console.log(removed); // red

插入
//需要三个参数：起始位置、0（要删除的项数）和要插入的项
var colors = ["red", "green", "blue"];
var removed = colors.splice(1,0,"yellow", "orange");
console.log(colors); // ["red", "yellow", "orange", "green", "blue"]
console.log(removed); // 返回空

替换
//需要三个参数：起始位置、要删除的项数和要插入的任意数量的项。
var colors = ["red", "green", "blue"];
var removed = colors.splice(1,1,"yellow", "orange");
console.log(colors);  // ["red", "yellow", "orange", "blue"]
console.log(removed); // ["green"]

JS 取两位小数

var num = 2.446242342;
num = num.toFixed(2); //四舍五入2.45
num = num.floor(2); //不四舍五入2.44

JS 获取时间

1.返回固定格式

const dt = new Date();
const y = dt.getFullYear();
const m = (dt.getMonth() + 1 + "").padStart(2, "0");
const d = (dt.getDate() + "").padStart(2, "0");
const hh = (dt.getHours() + "").padStart(2, "0");
const mm = (dt.getMinutes() + "").padStart(2, "0");
const ss = (dt.getSeconds() + "").padStart(2, "0");
// yyyy-mm-dd hh:mm:ss
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

2.实时时间

var t = null;
t = setTimeout(time, 1000); //開始运行
function time() {
  clearTimeout(t); //清除定时器
  var dt = new Date();
  var y = dt.getFullYear();
  var mt = (dt.getMonth() + 1 + "").padStart(2, "0");
  var day = (dt.getDate() + "").padStart(2, "0");
  var h = (dt.getHours() + "").padStart(2, "0"); //获取时
  var m = (dt.getMinutes() + "").padStart(2, "0"); //获取分
  var s = (dt.getSeconds() + "").padStart(2, "0"); //获取秒
  document.querySelector(".showTime").innerHTML =
    "当前时间：" +
    y +
    "年" +
    mt +
    "月" +
    day +
    "日" +
    " " +
    h +
    "时" +
    m +
    "分" +
    s +
    "秒";
  t = setTimeout(time, 1000); //设定定时器，循环运行
}

JS 获取浏览器宽高

document.body.clientWidth; //网页可见区域宽
document.body.clientHeight; //网页可见区域高
document.body.offsetWidth; //网页可见区域宽 (包括边线的宽)
document.body.offsetHeight; //网页可见区域高(包括边线的高)
document.body.scrollWidth; //网页正文全文宽
document.body.scrollHeight; //网页正文全文高
document.body.scrollTop; //网页被卷去的高
document.body.scrollLeft; //网页被卷去的左
window.screenTop; //网页正文部分上
window.screenLeft; //网页正文部分左
window.screen.height; //屏幕分辨率的高
window.screen.width; //屏幕分辨率的宽
window.screen.availHeight; //屏幕可用工作区高度
window.screen.availWidth; //屏幕可用工作区宽度
scrollHeight; // 获取对象的滚动高度。
scrollLeft; //设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop; //设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth; //获取对象的滚动宽度
offsetHeight; //获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft; //获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop; //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX; //相对文档的水平座标
event.clientY; //相对文档的垂直座标
event.offsetX; //相对容器的水平坐标
event.offsetY; //相对容器的垂直坐标
document.documentElement.scrollTop; //垂直方向滚动的值
event.clientX + document.documentElement.scrollTop; //相对文档的水平座标+垂直方向滚动的量

JS encodeURI() 函数

定义和用法

encodeURI()函数可把字符串作为URI进行编码。

语法

encodeURI(URIstring);

返回值

URIstring的副本，其中的某些字符将被十六进制的转义序列进行替换。

说明

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码：- _ . ! ~ * ' ( )。

提示

encodeURI() 函数是不会进行转义的：; / ? : @ & = + $ , #。如果 URI 组件中含有分隔符，比如 ? 和 #，则应当使用 encodeURIComponent() 方法分别对各组件进行编码。

合并对象

const obj = Object.assign({}, obj1, obj2); //{a:1,b:1}

//ES6
const obj1 = {
  a: 1,
};
const obj2 = {
  b: 1,
};
const obj = { ...obj1, ...obj2 }; //{a:1,b:1}

关于输入框非空的判断

if (value !== null && value !== undefined && value !== "") {
  //...
}

// ES6
if (value ?? "" !== "") {
  //...
}

异步函数&并发请求

// 异步请求
const fn = async () => {
  const res1 = await fn1();
  const res2 = await fn2();
  console.log(res1); // 1
  console.log(res2); // 2
};

// 并发请求时，用到 Promise.all()
// 如果并发请求时，只要其中一个异步函数处理完成，就返回结果，要用到 Promise.race()。
const fn = () => {
  Promise.all([fn1(), fn2()]).then((res) => {
    console.log(res); // [1,2]
  });
};

添加一个事件监听器并且只运行一次

// 可以使用 once 选项
element.addEventListener("click", () => console.log("I run only once"), {
  once: true,
});