首页 > 其他分享 >js的一些小技巧

js的一些小技巧

时间:2023-07-01 11:35:22浏览次数:54  
标签:function console 函数 js log date 一些 null 技巧


作用域

  1. 全局作用域
  2. 局部作用域(函数里)也称函数作用域
  3. 块级作用域 {}包裹的 例如if for 括号()也算

变量

  1. 全局变量 谁都能用,在函数内也可以
  2. 局部变量,只能在该函数内用,如果这个函数嵌套了子函数,那么父函数定义的变量,子函数也能用,不能颠倒,父亲的钱就是儿子的钱,儿子的钱不是父亲的钱
  3. 块级变量 (){} 只能在{}生效

函数作用域作用

  • 隔离变量,不同作用域下同名变量不会有冲突
  • 变量有一个坑,特殊情况
  • 如果函数内部或者块级作用域内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐
function fn(){
   num = 10
}
console.log(num)// 10
// 函数里面的形参是局部变量

作用域链:就近原则

//具名函数: 
function fn(){
   // fn 是函数名
    }  
//匿名函数 
let sum = function(){
   // sum 不是函数名,只是一个变量
   }

立即执行函数

立即执行,无需调用 避免全局变量之间的污染

//写法一:
function(形参){
   })(实参)   
function fn(形参){
  //可写函数名,可不写 
   })(实参)
//写法二:
(function(形参){
   }(实参))

多个立即执行函数必须加结束符,否则报错

(function(){
   console.log(111)
   })();
(function(){
   console.log(222)
  })();

当函数没有设置形参,而调用时传递了实参,会在函数内默认用arguments这个伪数组来存储实参,说他是伪数组是因为没有 pop push等方法,但是有length属性

原生js

document.querySelector('css选择器') 返回匹配的第一个元素 得到的都是一个DOM对象 document.querySelectorAll('css选择器') 返回所有匹配的元素,放在一个伪数组里

let box = document.querySelector('div')
box.className = 'active' 
// 原生js增加类,active 是类名但是会覆盖之前的类,当要修改很多样式时,可以将之前的类也写在=‘’里面

通过classList操作类控制CSS

为了解决className容易覆盖以前的类名,我们可以通过classList方式追加和删除类名语法:

  1. 追加一个类 元素. classList.add('类名')
  2. 删除一个类 元素.classList.remove('类名')
  3. 切换一个类 元素. classList.toggle('类名')

定时器--间歇函数

  • 返回值 intervalID 是一个非零数值,用来标识通过setInterval()创建的定时器,这个值可以用来作为 clearInterval() 的参数来清除对应的定时器。
  • 一般let 一个变量来存储返回值,方便后续清除定时器 // clearInterval(存储返回值的变量)

开启定时器

//写法一:函数代码写在里面
setInterval(function(){
console.log('你好啊')
},1000)//每间隔1s ,就会调用这个函数一次

//写法二:在外面定义一个函数,在setInterval(函数名,1000),只写函数名,不写(),因为一写就是调用,会立即执行,定时器就失去作用
function show(){
   console.log('你好啊')
}
setInterval(show,1000)

定时器--延迟函数

let qq  = setTimeout(function(
    console.log(111)
){
}10000) // 会在10s后调用这个函数,只会执行一次  

//清除延时 
clearTimeout(qq)

实例化时间对象

new Date()
//获取当前本地时间
let operateTime = new Date().toLocaleString()

时间格式化

<div> {{item.date | format('yyyy-MM-dd hh-mm-ss')}} </div>

Vue.filter('format',function(value,arg){
  function dateFormat(date,format){
    if(typeof date === "string"){
       var mts = date.match(/(\/Date\((\d+)\)\/)/);
       if(mts && mts.length >= 3){
             date = parseInt(mts[2]);
           }
      }
      date = new Date(date);
      if(!date || date.toUTCString() == "Tnvalid Date") {
          return "";
       }
       var map = {
           "M":date.getMonth() + 1,  // 月份
          “d”:date.getDate(),  // 日
            “h”:date.getHours(),  // 小时
             “m”:date.getMinutes(),  // 分
            “s”:date.getSeconds(),  // 秒
            “q”:Math.floor((date.getMonth() + 3) / 3),  // 季度
              “S”:date.getMilliseconds(),  // 毫秒
        };
       format = format.replace(/([yMdhmsqS])+/g,function(all,t){
          var v = map[t];
          if(v !== undefined) {
                if(all.length > 1) {
                      v = '0' + v;
                      v = v.substr(v.length - 2);
                 }
                 return v;
           }else if (t == 'y'){
                return (date.getFullYear() + ' ').substr(4 - all.length);
           }
           return all;
        });
       return format;
   }
})

判断类型

instanceof

  • 只能判断对象的具体类型(判断对象里面的属性和方法)
  • 其中instance 是实例 例子的意思
  • 能用===判断类型的只有两种 null undefined ,因为这两个类型只有一个值

typeof

  • 返回数据类型的字符串表达式
  • typeof 判断不了null 与 object ,object与array
  • 可以判断 undefined /字符串/数值/Boolean/function
  • null 和undefined 没有toString()方法
  • undefined是变量定义了但未赋值
  • null 是var a = null 定义赋值了,值为null
  • 初始赋值为 null,表明将要赋值为变量
  • 结束前,赋值为null,是为了让对象成为垃圾对象,被垃圾回收器回收
console.log(typeof null)   // 'object'
  • 数据类型分为 基本类型 和 对象类型
  • 变量类型分为 基本类型和引用类型(变量内存值的类型)
  • 基本类型:保存的就是基本类型的数据
  • 引用类型:保存的是地址值

var c = {}, c 保存的是这个对象的地址值,c准确的说是引用类型,{}这个数据,也是对象c

正则表达式

  1. 设定规则
  2. 进行检测匹配
let reg = /前端/
let str = '我要学前端'

检测方法一:reg.test(str)

  • 判断是否有符合规则的字符串
  • 要么是true 要么是false

检测方法二:reg.exec(str)

  • 检索(查找)是否有符合规则的字符串 找到返回数组 否则返回null
  • 普通字符:数字和英文字母
  • 元字符:[a-z] ,[0-9] // 相当于abcdefg......xyz 规定用户只能输入0-9
  • 边界符

^ 以什么开头

console.log(/^哈/.test( '二哈'))   // false
console.log(/^哈/.test('我开心的哈哈大笑'))  //faLse

& 以什么结尾

// 当 ^& 一起用时,表示精确查找   /^哈$/   被查找的字符串只能是哈
console.log(/^哈$/.test('我开心的哈哈大笑")) //  false
console.log(/^哈$/.test('哈哈')) // false 
console.log(/^哈$/.test('哈'))/ /true   精确匹配
  • 量词{n,m} 只能出现n到m次
  • 字符类[ ]
  • 连字符 - 表示一个范围 [a-z] ,[0-9] [a-zA-Z]只选其中一个

constructor 构造函数

  • 所有在class里面的函数都不用写 function //constructor(){} 是用来接收 new 实例化时传递的参数
// 创建类 class
     class  Star {
        constructor(uname,age){
           this.uname = uname;
           this.age = age;
          }
       sing(){
          console.log("我唱歌")
       }
}
  • 多个函数方法之间,不需要逗号分隔
// 利用类创建对象 new
  let  dh =  new  Star('刘德华',18)
  • in 运算符 ,检查某个属性是否在对象中,返回true 和 false
console.log("age" in  ldh)// true
  • 基本数据类型变量在栈内存中,保存的就是值,引用数据类型保存的是内存地址

获取元素子节点

  • 元素.getElementsByTagName()
  • 元素.childNodes 子节点不是子元素,子节点有空白
  • childNodes 会返回包括文本节点在内的所有的节点,标签间的空白(换行)也当做是文本节点,但是在IE8及以下版本不会将空白计算到文本节点中
  • 元素.firstChild 子节点不是子元素,子节点有空白文本节点
  • 元素.lastChild 子节点不是子元素,子节点有空白文本节点

子元素

  • 元素.children 只包含标签
  • 元素.firstElementChild 不兼容IE8 及以下

其他元素

  • 获取body document.body
  • 获取html document.documentElement
  • 所有元素 document.all

读取样式

  • 通过 style 设置和读取的都是内联样式,优先级较高,读不到样式表
div.style.width
  • currentStyle 可以读取正在显示的样式
div.currentStyle.width  //只有IE 浏览器支持
  • 常用 getComputedStyle() 传递两个参数,第一个参数是目标元素,第二个一般是null
getComputedStyle(div,null) // 返回的是一个对象,所有样式都在这个对象obj中
getComputedStyle(div,null).width   // 不支持IE8 及以下

getComputedStyle(div,null) 与 currentStyle 区别

  • 在没有设置值时,getComputedStyle()会返回真实的值,而不是默认值,比如width,后者会返回auto,前者返回真实值
  • currentStyle 和 getComputedStyle() 获取的 样式都只是可读的,不能修改

 


标签:function,console,函数,js,log,date,一些,null,技巧
From: https://blog.51cto.com/u_14627797/6598565

相关文章

  • JS高级用法:像大神一样玩转JavaScript
    前言众所周知,JavaScript是一种非常流行的编程语言,它已经成为了网页开发的必备技能。但是,在我们从事JavaScript编程的时候,我们却没有完全发掘和利用它的全部潜力。在本文中,我们将分享一些高级的JavaScript技巧,希望帮助掘友们更好地理解和掌握JavaScript编程。关于JS高级用法在学习Ja......
  • js 链路表和反向链路
     /***数组转链路表数据-{value:A,next:{value:B,next:{value:C}}*@param{*}listarr*@returns*/functioncreateLink(list){letlength=list.length;//最后一级,没有nextletcurrNode={value:list[length-1],};//[1,2,3......
  • Git的一些常用操作
    Git的一些操作配置基本用户信息 gitconfig--globaluser.name<用户名> gitconfig--globaluser.email<邮箱地址>创建一个新仓库 gitinit从远程服务器克隆一个仓库 gitclone<远程仓库的Url>显示当前的工作目录下的提交文件状态<!--类似于GitKraken右方窗口显......
  • js基础速成
    js记录js中对象类型object创建对象vartest=newobject();直接添加属性test.name='熊大'没有属性,系统不会报错,会返回undefined删除属性deletetest.name创建对象varobj={}或者newobjectjs中函数也是一个对象varfun=newfunction()常规写法functionfun(......
  • [转]前台传递给后台的JSON字符串中的引号 “” 在JAVA后台被转义为 &quot
    1、问题:前台数据,JSON字符串带有引号“”,数据被传递到后台,引号被转义为&quot,后台无法解析。前台数据如下:正常后台数据如下:大部分正常,只有JSON字符串中的“”被转义为&quot2、解决:方法一:使用apache的lang包里的方法StringappJson=StringEscapeUtils.un......
  • idea的使用技巧
    查找快捷键介绍Ctrl+F在当前文件进行文本查找Ctrl+R在当前文件进行文本替换Shift+Ctrl+F在项目进行文本查找Shift+Ctrl+R在项目进行文本替换Shift+Shift快速搜索Ctrl+N查找classCtrl+Shift+N查找文件Ctrl+Shift+Alt+......
  • JSR107
    JSR107JSR是JavaSpecificationRequests的缩写,Java规范请求,故名思议提交Java规范,JSR-107呢,就是关于如何使用缓存的规范,是java提供的一个接口规范,类似于JDBC规范,没有具体的实现,具体的实现就是ehcache等这些缓存解决方案。  JSR107核心接口JavaCaching(JSR-1......
  • 原生JS滚动条触底
    /console.log("UL的高度",main.clientHeight);//console.log("所有的LI的高度",main.scrollHeight);//console.log("可以滚动的距离",main.scrollHeight-main.clientHeight);//console.log("main.scrollTop",main.scrollTop);if(main.scr......
  • 基于PhantomJS的网站截图服务API设计与开发
    为公司某业务实现“服务端对网站截图”功能,搜罗了很多技术最终采用了PhantomJS无头浏览器技术。什么是PhantomJS?PhantomJS是一个基于webkit的javaScriptAPI。它使用QtWebKit作为它核心浏览器的功能,使用webkit来编译解释执行javaScript代码。任何你可以基于在webkit浏览器做的事情,......
  • vane 一个适用于前端打工人的全栈框架,nodejs+vue3+typescript
    vane写这个的初衷是因为每次用node写接口的时候总是需要一些写大一堆的东西,也有些人把很多接口都放在一个js文件内,看起来很是杂乱,后来用到nuxt写的时候,感觉用文件名来命名接口路径很是方便,无论是query参数还是params参数,都可以通过文件名来命名,也可以通过文件夹层级......