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

最新推荐文章于 2023-05-17 21:38:10 发布

amethystlmy9

最新推荐文章于 2023-05-17 21:38:10 发布

阅读量195

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/amethystlmy9/article/details/105120081

版权

更多语法内容可在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.字符串和正则的相关方法

search()

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

/*搜索字符串中是否含有abc 或aec 或 afc*/
var str = "hello aec afc";

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

split()

可以将一个字符串拆分为一个数组
方法中可以传递一个正则表达式
作为参数，方法会根据正则表达式来拆分
这个方法即是不指定全局匹配，也会全部拆分

/*根据任意字母来拆分*/
var str = "1a2b3C4d5E";

var result = str.split(/[A-z]/);
console.log(result);
//1,2,3,4,5

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

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）
第二位[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));

其他正则语法

\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