【Javascript学习笔记】零碎的知识点

更多语法内容可在https://developer.mozilla.org/zh-CN/查阅

1. == VS===

== :相等
'5’ == 5 True(如果左右两边数据类型不同,默认先转化成相同类型)
===:绝对相等
‘5’ === 5 False(如果类型不一样,一定不相等)
建议使用 === 判断

2. swtich 和 if else

swtich 用 === 来判断,
而if()用 == 来判断

let a = 5;
switch(a)
{
    case '5':
        console.log('switch 判断相等');
        break;
    default:
        console.log('switch 判断不等');

}

if(a == '5')
{
    console.log('if 判断相等');
}else{
    console.log('if 判断不等');
}

打印结果:
在这里插入图片描述

3. 函数的默认返回值是undefined

function sum(m,n){
	let result = m + n;	
}
console.log(sum(1,2))

//打印得到undefined

4. 浏览器常用的输出方式

①console.log / dir / table…在控制台输出
.dir:输出一个对象的详细键值对信息
.table:把一个对象或数组在控制台按照表格的方式呈现
在这里插入图片描述
请注意,如果数组包含对象,则列将使用属性名称进行标记。

结果显示,如果数组中包含该对象,打印出来的列标签将是该对象的属性名
在这里插入图片描述

②浏览器窗口弹窗 alert / confirm / prompt

  • 三种输出方式的结果都必先经过toString()
    alert( {name:xxx} ) => [object Object]
  • 三种方式都会阻断JS代码执行

③document.wirte在页面中写入(现在不常用)

5. i++ 和 i+=1 和 ++i

i++是纯数学运算
i+=1 有时会是字符串拼接情况

let i = '10';
i += 1;
console.log(i)
//101

let i = '10';
i++;
console.log(i)
//11


i++和++i都是数学运算的累加1,区别是运算的顺序

i++ 先运算,再自增

let i = 1;
5+(i++)
//6
console.log(i)
//2

++i 先自增,再运算

let i = 1;
5+(++i)
//7
console.log(i)
//2

6. for in 循环

用来循环遍历对象中的键值对(continue 和 break同样适用)

var obj = {
    name : 'limy',
    age : 15,
    friends:'coco,一点点',
    1:[1818,2020]
}

for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(key,obj[key])       
    }
}

先循环数字的属性名
在这里插入图片描述

7.Math.random()

获取[n~m]之间的随机整数公式

Math.round(Math.random()*(m-n)+n)

整个四位随机验证码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>验证码</title>
    <style>
        div {
            box-sizing: border-box;
            width: 300px;
            padding: 20px;
            margin: 20px auto;
            border: 2px solid darkgoldenrod;
        }

        span, button{
           margin-top: 10px;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" id="codeInp">
        <br>
        <span id="codeBox">AAAA</span>
        <button id="changeCode">看不清换一张</button>
    </div>

    <script>
        let codeInp = document.getElementById('codeInp');
        let codeBox = document.getElementById('codeBox');
        let changeCode = document.getElementById('changeCode');
        const ARR = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',0,1,2,3,4,5,6,7,8,9];

        refresh();

        //刷新随机四位验证码
        function refresh(){
            let randomStr = '';
            for(var i=0;i<4;i++)
            {
                var str = ARR[Math.round(Math.random()*(ARR.length-1))];
                if(isNaN(str)) Math.random() > 0.5 ? str = str.toUpperCase() : null;
                randomStr+= str;
            }
            codeBox.innerHTML = randomStr;
        }

        changeCode.onclick = function(){
            refresh();
        }
        //当文本框失去焦点时
        codeInp.onblur = function(){
            if(codeInp.value.toUpperCase() === codeBox.innerHTML.toUpperCase()){
                codeInp.style.background = '#00ff00';

            }else{
                alert('验证码错误!');
                codeInp.value = '';
                refresh();
                codeInp.style.background = '#fff';
            }
        }

    </script>

</body>

</html>

8. 日期对象Date的常用操作

标准日期对象提供了一些属性和方法

  • getFullYear() 获取年
  • getMonth() 获取月 (结果是0~11,需要+1)
  • getDate() 获取日
  • getDay() 获取星期 (结果是0~6,0代表周日)
  • getHours() 获取时
  • getMinutes() 获取分
  • getSeconds() 获取秒
  • getMilliseconds() 获取毫秒
  • getTime() 获取当前日期距离1970/1/1 00:00:00 之间的毫秒差

其他方法

let time = new Date();

console.log(time.toLocaleDateString());
//2020/4/4
console.log(time.toLocaleString());
//2020/4/4 下午2:14:01
console.log(time.toString());
//Sat Apr 04 2020 14:14:01 GMT+0800 (中国标准时间)

时间不足十位补零

let addZero = val =>{
	val = Number(val);
	return val < 10 ? '0'+val : val;
}

时间格式化

let time = '2019-1-3 4:23:7';

let formatTime = time =>{
	//拿到所有的数字
    let ary = time.match(/\d+/g);
    time = new Date(time);

    let year = time.getFullYear(),
        month = addZero(time.getMonth()+1),
        day = addZero(time.getDate()),
        hours = addZero(time.getHours()),
        min = addZero(time.getMinutes()),
        sec = addZero(time.getSeconds());
    
 
    return year+'年'+month+'月'+day+'日 '+hours+':'+min+':'+sec;
}

let addZero = val =>{
	val = Number(val);
    return val < 10 ? '0'+val : val;
}
console.log(formatTime(time));
//2019年01月03日 04:23:07

公共的时间字符串处理方式

//======公共的时间字符串格式化处理方式
String.prototype.formatTime = function formatTime(template){
    typeof template === 'undefined' ? template = '{0}年{1}月{2}日{3}:{4}':null;

    let matchAry = this.match(/\d+/g);
    template = template.replace(/\{(\d+)\}/g,(x,y) =>{
        let val = matchAry[y] || '00';
        val.length < 2 ? val = '0'+val : null;
        return val;
    })

    return template;
}

let time = '2019-1-3 4:23:7';
console.log(time.formatTime());
//2019年01月03日04:23
console.log(time.formatTime("{0}/{1}/{2}"));
//2019/01/03
console.log(time.formatTime("{1}/{2} {3}:{4}"));
//01/03 04:23

9.DOM及其基本操作

DOM:document object model 文档对象模型,提供一些属性和方法共我们操作页面中的元素

  • document.getElementById()
  • [context].getElementsByTagName() 在指定上下文容器中,通过标签名获得一组元素集合
  • [context].getElementsByClassName() 在指定上下文容器中,通过样式类名获得一组元素集合(不兼容IE6~8)
  • document.getElementsByName() 在整个文档中,通过标签Name属性值获取一组节点集合(一般只用于表单元素)
  • document.head / document.body / document.documentElement 获取页面中的HEAD/BODY/HTML 三个元素
  • [context].querySelector([selector]) 在指定上下文容器中,通过选择器获取到指定的元素对象(不兼容IE6~8)
  • [context].querySelectorAll([selector]) 在指定上下文容器中,通过选择器获取到指定的元素集合(不兼容IE6~8)
//获取box下所有的a
let box = document.querySelector('#box');
let links = box.querySelectorAll('a');
//等同于
links = document.querySelectorAll('#box a');

10.字符串和正则的相关方法

  1. search()
  • 可以搜索字符串中是否含有指定内容
  • 如果搜索到指定内容,则返回第一次出现的索引,如果没有搜索则返回-1
  • 它可以接受一个正则表达式作为参数,然后根据正则表达式去检索字符串
  • search()只会查找第一个,即是设置全局匹配也没用
/*搜索字符串中是否含有abc 或aec 或 afc*/
var str = "hello aec afc";

var result = str.search(/a[bef]c/);
console.log(result);
//6

  1. split()
  • 可以将一个字符串拆分为一个数组
  • 方法中可以传递一个正则表达式
    作为参数,方法会根据正则表达式来拆分
  • 这个方法即是不指定全局匹配,也会全部拆分
/*根据任意字母来拆分*/
var str = "1a2b3C4d5E";

var result = str.split(/[A-z]/);
console.log(result);
//1,2,3,4,5
  1. match()
  • 可以根据正则表达式,从一个字符串中将符合条件的内容提取出来
  • 默认情况下match只会找到第一个符合要求的内容,然后找到后就会停止检索(可以设置正则表达式为全局匹配模式,这样就会匹配到所有的内容;可以为一个正则表达式设置多个匹配模式,顺序任意)
  • match()会将匹配到的内容封装在一个数组中返回,即便只查到一个结果
/*提取字符串中的所有字母*/
var str = "1a2b3C4d5E";

//可用[A-z],也可以用i忽略大小写;g为全局匹配,可以匹配出所所有值
var result = str.match(/[a-z]/gi);
console.log(result);
//a,b,C,d,E
  1. replace()
  • 可以将字符串中直顶内容替换为新的内容
  • 参数1:被替换的内容(可接受正则表达式),参数2:新的内容
  • 默认只替换第一个
/*替换字符串中的所有字母*/
var str = "1a2b3C4d5E";

var result = str.replace(/[a-z]/gi, "@");
console.log(result);
//1@2@3@4@5@

/*删掉其中所有的字母*/
 result = str.replace(/[a-z]/gi, "");
 console.log(result);
 //12345
  1. 用正则表达式检查手机号格式

手机号规则:

  • 以1开头 (^1)
  • 第二位[3-9] ([3-9])
  • 后九位[0-9]([0-9]{9}$)
var phoneStr = "13044556689";

var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(phoneStr));
  1. 其他正则语法
    在这里插入图片描述
  • \b 单词边界
  • \B 除了单词边界
/*创建一个正则表达式,检查一个字符串中是否有单词child*/
var reg = /\bchild\b/;

console.log(reg.test("hello children"));
//false

应用1:去除开头和结尾的空格

var str = "   peter Lee     ";

//  /^\s*|\s*$/g (*表0个或多个)
//  也可用/^\s+|\s+$/g (+表1个或多个)
str = str.replace(/^\s*|\s*$/g, "");
console.log(str);
//peter Lee
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值