JavaScript小技巧

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树画出来大致就是：

操作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>
      

      

   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>
      

      

   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 () {
        //代码块
    });