JavaScript小技巧

蔚落 2021-09-01 08:41 419阅读 0赞

# JavaScript小技巧 #

## 1、严格检查格式 ##

在js的代码头加上这个就开启严格检查模式（ES6新语法），前提是浏览器支持ES6语法

'use strict';

开启之后在js代码块里就必须严格使用规范来书写代码，比如代码行使用分号。

## 2、字符串 ##

### 2.1多行字符串 ###

利用键盘`tab`上的\`\` \`（反引号）包裹起来可以输出多行字符串

'use strict';
    let msg=
        ` 测试 多行 字符 `;
    console.log(msg);

### 2.2字符串模板 ###

在字符串里利用`${xxx}`可以输出定义好的变量

'use strict';
    let name='测试';
    let age=18;
    let msg=`你好！${ name},年龄：${ age}`;
    console.log(msg);

### 2.3字符串长度 ###

利用str.length可以获得字符串的长度

'use strict';
    let str='abcdefg';
    console.log(str.length);			//7

### 2.4字符串的常用方法 ###

1.  toLowerCase()：将字符串全部转为小写。
    
        let msg='abcdefGHI';
        
        //将所有字符转为小写
        console.log(msg.toLowerCase());//abcdefghi
2.  toUpperCase()：将所有字符串全部转为大写。
    
        let msg='abcdefGHI';
        
        //将所有字符转为大写
        console.log(msg.toUpperCase());//ABCDEFGHI
3.  charAt(number)：返回指定下标位置的字符。如果index不再0-str.length则返回**空字符串**
    
        let msg='abcdefGHI';
        
        //输出下标为6的字符
        console.log(msg.charAt(6));//G
        //等价于msg.charAt(6)
        console.log(msg[6]);//G
        //超出范围
        console.log(msg.charAt(10));// (空字符串)
4.  charCodeAt(number)：返回指定下标位置的unicode编码，范围是0~65535。
    
    如果index不在0-str.length(不包含str.length)之间，返回NaN
    
        let msg='abcdefGHI';
        
        //输出下标为6的字符的unicode码
        console.log(msg.charCodeAt(6));//71
        //超出范围，输出NaN
        console.log(msg.charCodeAt(-1));//NaN
5.  indexOf(string,number)：查询指定字符string在字符串中第一次出现的下标，number（可选）指定从第几个字符查起
    
    **Tip**：string大小写敏感
    
        let msg='abcdefGHI';
        
        //b在字符串中第一次出现的下标
        console.log(msg.indexOf('d'));//3
        //从第二个字符开始，b在字符串中第一次出现的下标
        console.log(msg.indexOf('d',2));//3
        //没有该字符则返回-1
        console.log(msg.indexOf('k'));//-1
    
    注意第二个方法只是提供从哪个下标开始检索提高检索速度，而不改变检索出来的结果下标。
6.  lastIndexOf(string,number)：查询指定字符string在字符串中最后一次出现的下标，number（）
    
    **Tip**：倒着检索
    
        let str='abcdefgdfg';
        
        //d字符在字符串中最后一次出现的下标
        console.log(str.lastIndexOf('d'));//7
        //从第二个字符开始检索，d在字符串中最后一次出现的下标
        console.log(str.lastIndexOf('d',str.length));//7
7.  slice()：提取字符串两个下标间的字符
    
        let str='Hello,World!';
        
        //提取字符串两个下标之间的字符，2~最后一个
        console.log(str.slice(2));//llo,World!
        //2~2是空串
        console.log(str.slice(2,2));// (空字符串)
        //取下标2到5，不包括5
        console.log(str.slice(2,5));//llo
8.  substring()：提取指定长度的字符串
    
    **Tip**：和slice()用法一样
    
        let str='Hello,World!';
        
        //提取从下标2开始的所有字符
        console.log(str.substring(2));//llo,World!
        //提取从下标2开始到5的字符
        console.log(str.substring(2,5));//llo
9.  substr()：返回从指定下标开始指定长度的的子字符串
    
        let str='Hello,World!';
        
        //提取从下标2开始到末尾的所有字符
        console.log(str.substr(2));//llo,World!
        //提取从下标2开始，长度为5的字符串
        console.log(str.substr(2,5))//llo,W
        //从倒数第2个开始，长度为5的字符串
        console.log(str.substr(-2,5))//d!
10. split()：把字符串分割成字符串数组
    
        let string='45+741+87-413';
        
        //以空字符串''分割string字符串
        console.log(string.split(''));//["4", "5", "+", "7", "4", "1", "+", "8", "7", "-", "4", "1", "3"]
        //以'+'分割string字符串
        console.log(string.split('+'));//["45", "741", "87-413"]
        //以'-'分割string字符串
        console.log(string.split('-'));//["45+741+87", "413"]
11. replace()：用另外的字符串替换原有字符串中字符
    
        let str='Hello,World!';
        
        //把字符串中的o替换成**
        console.log(str.replace('o','**'));//Hell**,World!
12. match()：返回所有查找的关键字内容的数组。
    
        let str='Hello,World!hello';
        
        //正则表达式，匹配hello字符串，i表示不区分大小写，g表示全局查找
        let regExp=/hello/ig;
        //用正则表达式匹配字符串
        console.log(str.match(regExp));//["Hello", "hello"]

## 3、数组 ##

### 3.1 可以包含任意元素 ###

array可以包含任意对象

let array= ['c','字符串',123,false];

### 3.2 数组长度 ###

可以通过`array.length`改变数组长度，如果是扩容，空元素用undefined补齐，如果是减容，那么元素会丢失。

### 3.3 常用方法 ###

1.  indexOf()：查询指定字符string在字符串中第一次出现的下标
2.  slice()：提取字符串两个下标间的字符
3.  push()：向数组尾部添加元素（类似压栈）
    
        let array= ['A','B','D','F'];
        
        //向数组尾部添加'G'字符
        array.push('G');
        console.log(array);//["A", "B", "D", "F", "G"]
        //向数组尾部添加'H','J'字符
        array.push('H','J');
        console.log(array);//["A", "B", "D", "F", "G", "H", "J"]
4.  pop()：从数组尾部减少元素（类似出栈）
    
        let array= ['A','B','D','F'];
        
        //从数组尾部减去字符
        array.pop();
        console.log(array);//["A", "B", "D"]
5.  unshift()：向数组头部添加元素
    
        let array= ['A','B','D','F'];
        
        //向数组头部添加'G'字符
        array.unshift('G');
        console.log(array);//["G", "A", "B", "D", "F"]
        
        //向数组头部添加'H','J'字符
        array.unshift('H','J');
        console.log(array);//["H", "J", "G", "A", "B", "D", "F"]
6.  shift()：从数组头部减少元素
    
        let array= ['A','B','D','F'];
        
        //从数组头部减去字符
        array.shift();
        console.log(array);//["B", "D", "F"]
7.  sort()：数组排序
    
        let array= ['A','B','D','F'];
        
        //数组排序
        array.sort();
        console.log(array);//["A", "B", "D", "F"]
8.  reverse()：数组元素反转
    
        let array= ['A','B','F','D'];
        
        //数组元素反转
        array.reverse();
        console.log(array);//["D", "F", "B", "A"]
9.  concat()：拼接数组并返回新数组
    
    并不会修改原数组，只是返回一个新数组，打印array发现数组并没有发生变化
    
        let array= ['A','B','F','D'];
        
        console.log(array.concat('a','b','c'));//["A", "B", "F", "D", "a", "b", "c"]
        console.log(array);//["A", "B", "F", "D"]

## 4、对象 ##

### 4.1 定于对象 ###

js也是一门面向对象的编程语言，所以我们也可以定义对象

let student={ 
        name: '测试',
        age: 3,
        score: 0
    }
    var/let 对象名={ 
        属性名：值,
        属性名：值,
        属性名：值
    }

对象用`{}`括起来，里面对于属性名和属性值，类似key-value键值对。

\*\*Tip：\*\*JS里对象的键都是字符串，值可以是任意类型

### 4.2 对象赋值 ###

//给student的score赋值为100
    student.score=100;
    console.log(student);//{name: "测试", age: 3, score: 100}

### 4.3 动态添加对象元素 ###

直接给给想要新增的属性赋值就好了

//给student新增class属性
    student.class=1;
    console.log(student);//{name: "测试", age: 3, score: 100, class: 1}

### 4.4 动态删除对象中元素 ###

//删除student的name属性
    delete student.name;
    console.log(student);//{age: 3, score: 0}

### 4.5 判断对象中是否含有某属性 ###

console.log('name' in student);//true
    console.log('test' in student);//false

## 5、Map和Set集合 ##

Map和Set集合是ES的新特性。同样的，Map集合也是以key-value键值对的方式存储，key无序也不可重复；Set集合是无序且不可重复的

### 5.1 Map ###

1.  定义Map集合对象
    
    同样的，跟Java类似也是采用key-value键值对的方式存储
    
        let map=new Map([
            ['name','测试'],
            ['age',5],
            ['score',100]
        ]);
        console.log(map);//{"name" => "测试", "age" => 5, "score" => 100}
2.  通过key获得value
    
        //通过key得到value，key是string类型
        console.log(map.get('name'));//测试
3.  删除元素
    
    js里面是delete()，类似java里面的remove()
    
        map.delete('name');
        console.log(map);//{"age" => 5, "score" => 100}
4.  增加或者修改元素
    
        //增加元素class
        map.set('class',1);
        console.log(map);//{"name" => "测试", "age" => 5, "score" => 100, "class" => 1}
        
        //修改元素name
        map.set('name','管理员');
        console.log(map);//{"name" => "管理员", "age" => 5, "score" => 100, "class" => 1}
5.  集合大小
    
        map.size
6.  判断集合中是否包含元素
    
        //判断集合中是否包含元素
        console.log(map.has('name'));//true
7.  遍历Map集合
    
    因为map的keys()方法可以得到所有key的集合然后通过key来获得value
    
        //利用for(let i of 集合)的方式遍历
        for (let i of map){ 
            console.log(i);
        }
        
        //通过map.keys()方法得到所有的key的集合
        let keys=map.keys();
        //遍历key集合
        for (let key of keys) { 
            //通过查询key的方式得到value
            console.log(map.get(key));
        }
8.  遍历Set集合
    
        let set = new Set([3,4,5,7]);
        for (let i of set) { 
            console.log(i);
        }

## 6、函数 ##

### 6.1 定义函数的两种方式 ###

1.      function 函数名(参数列表) { 
            return 返回值;
        }
        
        //返回value的相反数
        function f(value) { 
            return -value;
        }
2.      var 函数名=function (参数列表){ 
            return 返回值;
        }
        
        //返回value的相反数
        var f=function (value) { 
            return -value;
        }

### 6.2 arguments ###

arguments可以获得函数接收到的所有参数

function f(value) { 
        for (let i = 0; i < arguments.length; i++) { 
            console.log(arguments[i]);
        }
        return -value;
    }
    //f函数实际上只需要第一个参数
    f(5,41,8,9);

### 6.3 rest ###

rest（自定义）可以获得函数接收的除了需要用的参数以外的参数

function f1(value,...rest) { 
        for (let i = 0; i < rest.length; i++) { 
            console.log(rest[i]);
        }
    }
    
    f1(5,41,8,9);

### 6.4 作用域 ###

尽量在头部就定义所有的变量，提高代码可维护性。

var x=1;
    var y=5;
    var z=10;

在js里，基本上所有的变量或者函数都会被存放到window对象里，为了尽量避免与他人的代码冲突，所以强烈建议自定义一个唯一的全局变量，再通过全局变量来定义变量或者函数

//定义唯一的全局变量
    var YK={ };
    
    //定义唯一的全局变量的函数
    YK.add=function (a,b) { 
        return a+b;
    }
    
    console.log(YK.add(10,5));//15

### 6.5 方法 ###

在对象里面定义函数就是方法

//定义
    var student={ 
        name: '测试',
        birthday: 1998,
        //在对象里面定义函数就是方法
        age: function () { 
            let age;
            //用当前日期减去birthday就是年龄
            age=new Date().getFullYear()-this.birthday;
            return age;
        }
    };
    
    //调用属性
    console.log(student.name);//测试
    //调用方法
    console.log(student.age());//22

## 7、Date对象 ##

Date如同Java中的日期对象一样，可以获得当前的时间

//定义date对象
    var date=new Date();
    console.log(date);//Fri Aug 07 2020 12:30:10 GMT+0800 (中国标准时间)
    //年
    console.log(date.getFullYear());//2020
    //月
    console.log(date.getMonth());//7 0~11
    //日
    console.log(date.getDate());//7
    //星期几
    console.log(date.getDay());//5
    //时
    console.log(date.getHours());//12
    //分
    console.log(date.getMinutes());//30
    //秒
    console.log(date.getSeconds());//10
    //当前时间的时间戳
    console.log(date.getTime());//1596791875863

## 8、JSON对象 ##

JSON是一种轻量级数据交换格式

1.  JS对象->JSON字符串对象
    
    利用`JSON.stringify()`方法
    
        //JS对象
        var user={ 
            name: '用户',
            age: 10,
            class: 1
        };
        console.log(user);//{name: "用户", age: 10, class: 1}
        //将JS对象转换为JSON字符串对象
        var jsonUser = JSON.stringify(user);
        console.log(jsonUser);//{"name":"用户","age":10,"class":1}
2.  JSON字符串对象->JS对象
    
    利用`JSON.parse()`方法
    
        //JSON字符串对象转换为JS对象
        var user = JSON.parse('{"name":"用户","age":10,"class":1}');
        console.log(user);//{name: "用户", age: 10, class: 1}

注意JS对象和JSON字符串对象的区别：

JS对象里其实不仅仅包含了这几个键值对，实际上还有许多方法，但是JSON对象就仅仅是字符串，所以键值对都是用引号括起来的。

js对象：{ name: "用户", age: 10, class: 1}
    JSON对象：{ "name":"用户","age":10,"class":1}

## 9、面向对象编程 ##

js同样是一门面向对象编程的编程语言。

1.  利用class定义类模板
    
        //User类
        class User { 
        
            //构造器
            constructor(name,age) { 
                this.name=name;
                this.age=age;
            }
        
            //方法
            print(){ 
                console.log(this.name);//打印name
                console.log(this.age);//打印age
            }
        
        }
        
        //通过类定义对象
        var user = new User('用户',20);
        console.log(user);//User {name: "用户", age: 20}
        //调用user类对象的print方法
        user.print();//用户 20
2.  使用extends关键字继承
    
        class Student extends User{ 
        
            //构造器
            constructor(studentId) { 
                super();//调用父类构造器
                this.studentId=studentId;
            }
        
            //重写了父类的print方法
            print() { 
                console.log('Student类');
                console.log(this.studentId);
            }
        }
        
        var student = new Student(2);
        //调用student类对象的print方法
        student.print();
    
    \*\*Tip：\*\*切记子类继承父类的构造器必须要使用`super()`调用父类的构造器才行，在Java里面是可以省略的，但是js里不可以省略。

## 10、操作BOM对象 ##

1.  window对象
    
    可以获得当前浏览器窗口对象
    
        //window对象
        window.alert();//弹窗
        window.confirm();//确认信息框
        window.print();//弹出打印对话框
        window.innerHeight;//浏览器内框高
        window.innerWidth;//浏览器内裤宽
        window.outerHeight;//浏览器外框高
        window.outerWidth;//浏览器外框宽
2.  location对象
    
    可以获得关于url的对象
    
        //location对象
        location.host;//当前url的域名和端口号
        location.hostname;//当前url的域名
        location.protocol;//当前url使用的协议
        location.assign(url);//导航到url
        location.reload();//刷鞋该页面
3.  navigator对象
    
    可以获得浏览器信息对象
    
        //navigator浏览器信息对象
        navigator.appName;//浏览器名称
        navigator.appVersion;//浏览器版本号
        navigator.appCodeName;//浏览器内核名称
        navigator.userAgent;//用户代理字符串
4.  screen对象
    
    屏幕尺寸
    
        screen.width;//屏幕宽度
        screen.height;//屏幕高度
5.  history对象
    
        //history对象
        history.forward();//前进
        history.back();//后退

## 11、操作DOM对象（重点） ##

DOM：文档对象模型

DOM树就是指html网页的标签的层级关系像树一样：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/firstJavaScript.js"></script>
    </head>
    <body>
    <div id="box">
        <h1>标题</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>
    </body>
    </html>

这段代码用DOM树画出来大致就是：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc0NzA4MA_size_16_color_FFFFFF_t_70]

操作DOM节点的话大致就分以下4个核心，对DOM节点的增删改查

1.  查询DOM节点
    
        //获得DOM节点
            var h1 = document.getElementsByTagName('h1');   //获得标签名为h1的节点
            var p1 = document.getElementById('p1');         //获得id为p1的节点
            var p2 = document.getElementsByClassName('p2'); //获得class为p2的节点
            var father = document.getElementById('box');    //获得父节点
            var children = father.children;                 //通过父节点得到子节点
2.  删除DOM节点，删除DOM需通过父节点来删除
    
        //1、获得想要删除的节点
            var p1 = document.getElementById('p1');
            //2、获得想要删除的节点的父节点
            var parent = p1.parentElement;
            //3、调用父节点的remove()方法删除节点
            parent.removeChild(p1);
3.  更新DOM节点
    
        //先获得节点
            var p1 = document.getElementById('p1');
        
            //修改文本
            p1.innerText='修改后的文本';//动态修改文本
            p1.innerHTML='<h2>标题2</h2>';//动态修改成超本文(HTML)
        
            //修改css
            p1.style.color='red';//修改color为red
            p1.style.fontSize='50px';//修改字体大小为50px
4.  增加DOM节点
    
    1.  移动已有的标签的位置
        
        我想要把p3移动到p2的下面
        
            <body>
            <p id="p3">p3</p>
            <div id="box">
                <h1>标题</h1>
                <p id="p1">p1</p>
                <p class="p2">p2</p>
            </div>
            <script> //1、获得想要移动的节点 var p3 = document.getElementById('p3'); //2、获得想要移动到的目标位置的父节点 var box = document.getElementById('box'); //3、父节点调用appendChild()方法将p3移动到box下面 box.appendChild(p3); </script>
            </body>
        
        ![在这里插入图片描述][20200808174906952.png]
    2.  创建新的节点并插入
        
            <body>
            <div id="box">
                <h1>标题</h1>
                <p id="p1">p1</p>
                <p class="p2">p2</p>
            </div>
            <script> //1、创建新的节点（标签名） var p3 = document.createElement('p'); //2、给刚创建的标签赋id p3.setAttribute('id','p3'); //3、给创建的节点赋文字 p3.innerText='新创建的p3'; //4、获得想要插入的位置的节点 var box = document.getElementById('box'); //5、将刚创建的节点放到box节点的子节点 box.appendChild(p3); </script>
            </body>
        
        ![在这里插入图片描述][20200808174917180.png]
    3.  setAttribute(key,value)
        
        节点的setAttribute()方法是利用键值对的方式设置参数的，有点万能，甚至还可以新建css标签和script标签
        
            <body>
            <div id="box">
                <h1>标题</h1>
                <p id="p1">p1</p>
                <p class="p2">p2</p>
            </div>
            <script> //1、创建script标签 var myScript = document.createElement('script'); //2、给script标签赋值 myScript.setAttribute('src','js/firstJavaScript.js'); //3、将script标签追加到head后面 document.getElementsByTagName('head')[0].appendChild(myScript); </script>
            </body>
        
        就实现了等价于下面一样的效果
        
            <head>
                <meta charset="UTF-8">
                <title>Title</title>
                <script src="js/firstJavaScript.js"></script>
            </head>
        
        ## 12、表单 ##
        
        ### 12.1 使用MD5加密算法加密密码 ###
        
        1.  引入在线cdn的md5的js
            
                <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
        2.  通过绑定按钮事件执行函数
            
            button按钮绑定了submit()函数
            
                <div id="dialog-from-label">
                    <form>
                        <label>用户名：</label>
                        <input type="text" name="username" id="userName">
                        <label>密码：</label>
                        <input type="password" name="password" id="passWord">
                
                        <button type="button" onclick="submit()">提交</button>
                    </form>
                </div>
        3.  函数中进行加密算法
            
            md5()就是刚刚引入的js里面的内置方法
            
                <script> function submit() { //获得用户名标签 var userName = document.getElementById('userName'); //获得密码标签 var passWord = document.getElementById('passWord'); //用md5进行加密 passWord.value=md5(passWord.value); console.log(userName.value); console.log(passWord.value); } </script>

## 12、jQuery ##

核心公式：

`$(selector).action()`

selector是选择器，同css一样，`#`是id选择器，`.`是类选择器；

action是事件。

利用jQuery实现浏览器全局加载函数

$(function () { 
            //代码块
        });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc0NzA4MA_size_16_color_FFFFFF_t_70]: /images/20210813/c54a9557fbe2477db5c9fdeb5b7725dd.png
[20200808174906952.png]: /images/20210813/f77d3c1afb0a417fa8fae48f606ad9ad.png
[20200808174917180.png]: /images/20210813/94c6c59439a44989959b9011f0b6c4f3.png