前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js常用方法总结

js常用方法总结

原创
作者头像
IT工作者
发布2021-12-30 08:37:09
3.4K0
发布2021-12-30 08:37:09
举报
文章被收录于专栏:程序技术知识

数组去重

双FOR循环

代码语言:javascript
复制
for (let i = 0; i < arr.length - 1; i++) {
  let item = arr[i]
  for (let j = i + 1; j < arr.length; j++){
    if(item === arr[j]){
      // 用最后一项替代当前项
      arr[i] = arr[arr.length - 1]
      // 最后一项删掉
      arr.length--
      // 下一轮还和这一项比
      j--
    }
  }
}

缺点

  • 循环次数多,性能不好

对象的键值对

代码语言:javascript
复制
let obj = {}
for (let i = 0; i < arr.length; i++) {
  // 把每一次循环得到的当前项,作为对象的属性名和属性值存储进去
  let item = arr[i]
  if(obj[item] !== undefined){
    // 证明对象中有这个属性
    arr[i] = arr[arr.length - 1]
    arr.length--
    i--
    continue
  }
  obj[item] = item
}

优点

  • 只有一个循环,所以性能很好

缺点

  • 如果数组中出现对象则存在问题(因为对象的属性名不能是对象,遇到会转换为字符串)
  • 如果数组中存在数字10和字符串’10’,则也会认为是重复的
  • 数组中的值如果是undefined可能也会出现问题

indexOf检测方式

代码语言:javascript
复制
let newAry = []
for (let i = 0; i < arr.length; i++) {
  let item = arr[i]
  if(newAry.indexOf(item) == -1){
    newAry.push(item)
  }
}

缺点

  • 低版本浏览器不兼容

时间格式化

代码语言:javascript
复制
(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-1-1 11:11:11'
time.formatTime() // 2020年01月01日 11时11分11秒
time.formatTime('{1}-{2} {3}:{4}') // 01-01 11:11
time.formatTime('{0}年{1}月{2}日') // 2020年01月01日 

获取DOM标签的方式

document.getElementById

  • getElementById方法的上下文只能是document

[context].getElementsByTagName、[context].getElementsByClassName

  • 获取的结果是HTMLCollection元素集合(类数组:数字作为索引,length代表长度)
  • 想操作某一项需要通过索引获取后再操作

document.getElementsByName

  • 操作表单元素,尤其是单选框或者复选框

获取DOM节点的方式

节点类型

类型

nodeType

nodeName

nodeValue

文档节点

9

#document

null

元素节点

1

大写标签名

null

文本节点

3

#text

文本内容

注释节点

8

#comment

注释内容

属性

  • [container].childNodes获取到的是一个节点集合,包含容器中所有类型节点
  • [container].children获取到的只有元素节点集合

设置DOM元素自定义属性

[元素].xxx = xxx / 元素[xxx] = xxx

获取:[元素].xxx

删除:delete [元素].xxx

原理:操作堆内存

[元素].setAttribute(‘xxx’, xxx)

获取:[元素].getAttribute(‘xxx’)

删除:[元素].removeAttribute(‘xxx’)

原理:操作DOM结构

操作DOM元素样式

  • 行内样式:元素.style.xxx
  • ie:元素.currentStyle[“height”]
  • 非ie:getComputedStyle(元素).height

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 数组去重
    • 双FOR循环
      • 对象的键值对
        • indexOf检测方式
        • 时间格式化
        • 获取DOM标签的方式
          • document.getElementById
            • [context].getElementsByTagName、[context].getElementsByClassName
              • document.getElementsByName
              • 获取DOM节点的方式
                • 节点类型
                  • 属性
                  • 设置DOM元素自定义属性
                    • [元素].xxx = xxx / 元素[xxx] = xxx
                      • [元素].setAttribute(‘xxx’, xxx)
                      • 操作DOM元素样式
                      相关产品与服务
                      容器服务
                      腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档