Javascript Two

Judian_xd
137 阅读5分钟

一些方法

Math

  • abs 取绝对值
  • ceil 向上取整（无论正数，负数都取最大的）
Math.ceil(1.5) -> 2
Math.ceil(-1.1) -> -1
  • floor 向下取整(无论正数，负数都取最小的)
Math.floor(1.2) -> 1
Math.floor(-1.2) -> -2
  • round 四舍五入取整（负数：比0.5大一点就进位，0.5及以下就舍）
Math.round(1.5) -> 2
Math.round(-1.51) -> -2
Math.round(-1.5) -> -1
  • max/min 最大最小
  • sqrt 给一个数开方(负数开不了方)
Math.sqrt(9) -> 3
  • pow Math.pow(n,m) n的m次幂
Math.pow(2,3) -> 8
  • randow 0-1之间随机小数（不包含0，1）
  • Math.PI 3.14....圆周率

时间格式化

  • 正则方式处理
(proto => {
    function formatTime(template = '{0}年{1}月{2}日 {3}时{4}分{5}秒') {
        let arr = this.match(/\d+/g);
        return template.replace(/\{(\d+)\}/g,(_,n) => {
            let item = arr[n] || '0';
            item.length < 2 ? item = '0' + item : null;
            return item
        });
    }
    proto.formatTime = formatTime;
})(String.prototype);
let time = '2020-5-27 10:29:00';
console.log(time.formatTime('{1}-{2} {3}:{4}')); -> 05-27 10:29

URL 参数

  • 正则处理
(proto => {
    function queryURLParams() {
        let obj = {};
        this.replace(/([^?=&#]+)=([^?=&#]+)/g,(_,key,value) => obj[key] = value);
        this.replace(/#([^?=&#]+)/g,(_,hash) => obj['HASH'] = hash);
        return obj
    }
    proto.queryURLParams = queryURLParams;
})(String.prototype);
let url = 'http://www.xxx.cn/?lx=xxx&name=ggg&from=ii#video';
console.log(url.queryURLParams()); 
// -> { lx: 'xxx', namee: 'ggg', from: 'ii', HASH: 'video' }

类数组转数组的方法

  • Array.from
  • ... 展开运算符
let arr = [...args]
  • 利用apply
let arr = Array.apply(null,args)
  • 数组原型的slice方法
let arr = [].slice.call(args,0)
let arr = Array.prototype.slice.call(args,0)

...

  • 扩展运算符，解构赋值中
let [n,...m] = [12,13,14] ->n:12,m:[13,14]
  • 展开运算符，传递实参中
let arr = [1,2,3];
let min = Math.min(...arr);
let cloneArr = [...arr];
let obj = {name:'judian',age:'18'};
let cloneobj = {...obj,sex:'girl'};
  • 剩余运算符，接收实参中
let fn = (n,...args) => {
    // n:12,args:[12,13]
} 

fn(12,13,14)

检测数据类型

  • typeof：用来检测数据类型的运算符（连续出现两次及以上检测结果都是'string'）
  • instanceof：检测某个实例是否属于某个类，当前类的原型只要出现在了实例的原型链上就返回true
  • constructor：判断当前的实例的constructor的属性值是不是预估的类
  • toString.call()：Object.prototype.toString.call(被检测实例) 这个方法在object的原型上

DOM操作

节点操作

  • 获取所有子节点 [CONTAINER].childNodes

获取当前容器中所有的子节点，包含各种类型的节点。获取到的是一个节点集合，包含容器中的所有类型节点（空格换行是文本节点）

  • 获取元素子节点 [CONTAINER].children

获取当前容器中所有的元素子节点，获取的是一个元素集合，只有元素节点。只有元素标签的，在IE低版本浏览器中，也会把注释当作元素节点

  • 获取父节点 [NODE].parentNode

获取某一个节点的父节点

  • 获取一个哥哥节点 [NODE].previousSibling

获取某一个节点的上一个哥哥节点

  • 获取一个哥哥元素节点 [NODE].previousElementSibling

获取某一个节点的上一个哥哥元素节点（不兼容IE低版本浏览器）

  • 获取一个弟弟节点 [CONTAINER].nextSibling

获取某一个节点的下一个弟弟节点

  • 获取一个弟弟元素节点 [CONTAINER].nextElementSibling

获取某一个节点的下一个弟弟元素节点（不兼容IE低版本）

  • 获取第一个子节点 [CONTAINER].firstChild

获取容器中第一个子节点

  • 获取第一个元素子节点 [CONTAINER].firstElementChild

获取容器中第一个元素子节点（不兼容IE低版本）

  • 获取最后一个字节点 [CONTAINER].lastChild

获取容器中最后一个字节点

  • 获取最后一个元素子节点 [CONTAINER].lastElementChild

获取容器中最后一个元素子节点（不兼容IE低版本）

增删改

创建

  • document.createElement([标签名]) 动态创建一个DOM元素

增加

  • 插入指定容器末尾 [CONTAINER].appendChild([元素])

把元素动态插入到指定容器的末尾

  • 插入指定元素前 [CONTAINER].insertBefore([新元素],[原始页面中的元素])

把新创建的元素放置到指定容器原始页面元素的前面【原始页面中的元素】肯定在【CONTAINER】容器中

删除

  • [CONTAINER].removeChild([元素]) 在指定容器中移除元素

给DOM设置内容

  • innerHTML

给非表单元素设置或者操作其内容，能识别HTML标签

  • innerText

给非表单元素设置或者操作其内容，不能识别HTML标签

  • value

给表单元素设置或操作其内容

操作样式

  • 元素.style.xxx = '需要设置的行内样式'
  • 元素.className = '(空格) 样式类' （此处空格表示，不覆盖原有的基础上设置一个）

滚动到底部

vue中对document.body.scrollTop的设置不起作用的解决：

document.body.scrollTop = document.documentElement.scrollTop = document.body.scrollHeight

js中的盒子模型属性

client

  • width / height

    box.clientWidth/Height 获取盒子可视区域的宽高（内容宽度+左右padding）

let winW = document.documentElement.clientWidth || document.body.clientWidth
  • top / left：box.clientLeft/Top 获取盒子左边框/上边框的大小

offset

  • width / height：

    box.offsetWidth/Height 获取元素总宽度（在client的基础上加上border）

  • offsetParent：获取它的父参照物

  • top / left：box.offsetTop/Left 距离其父参照物的上/左边偏移

scroll

  • width / height：

    在没有溢出的情况下与client相同，溢出的情况等于真实内容的宽高（上下padding+真实内容的宽度/高度）

  • top / left：box.scrollTop/Left 竖向滚动条去的高度，横向滚动条去的宽度

原型和原型链

理解

  • 每一个函数都天生具备一个属性：prototype（原型），prototype的属性值是一个对象（浏览器会默认给开辟一个对堆内存）
  • 正类的prototype原型对象中，默认存在一个内置属性-constructor（构造函数），属性值就是当前类（函数）本身，
  • 每一个对象都天生具备一个属性 __proto__（原型链），属性值是当前实例（对象）所属类的prototype原型

原型上拓展属性和方法

堆内存是用来存储引用数据类型值的

栈内存是用来执行代码和存储基本类型值的

销毁：一般函数执行完后，形成的私有栈内存就会被释放，全局的栈内存需要关闭页面才能销毁

给类的原型上拓展属性和方法

  • Fn.prototype.xxx = xxx 向默认开辟的堆内存中添加属性和方法（默认开辟的堆内存中存在constructor属性）

  • Object.prototype.xxx = xxx 内置类原型上扩展方法

  • f1.__proto__.xxx = xxx 给原型上拓展属性方法

给内置类的原型上扩展属性方法

  • Array.prototype.xxx = xxx

一些关键字

this

执行函数的主体（是把函数执行的，那执行主体就是谁）

  • 全局作用域里的this是window（非严格模式下）
  • 回调函数里面的this一般是window
  • 构造函数的this是当前实例
  • 实例原型上的共有方法里的this一般是当前实例
avatar
文章
阅读
粉丝