JavaScript学习笔记

一、数据类型
  • 基本数据类型：number、String、Boolean、null、undefined、symbol（唯一值）
  • 引用数据类型：Object、数组、函数
    区别：基本数据类型是存放在栈中，引用数据类型时存放在堆中，但是在栈中会存放引用数据类型的指针。

typeof（数据名），如果时typeof（null）会报出object，object是一切数据类型的最终父类，再往上则为空

===：表示数值、数据类型、地址都要相等。

二、隐式转换：
  • 加法：如 1+‘1’那么结果会将1进行隐式转换变成‘1’，结果为‘11’
  • 减法：如1 -‘1’那么结果会将‘1’进行隐式转换为1，结果为0，但如果字符串无法转换时，结果会是NAN（not a number），乘除法与减法相同
三、循环：
  • for in: 可以循环遍历数组或者对象 
    var arr1=[‘a’,’b’,’c’,’d’,’e’];
var obj1={name:”小王”, sex:”男”,age:21};
for(item in arr1)   item为数组的序列号，0,1,2,3,4
for(item in obj1)   item 为对象中的属性名，为 name 、sex 、age 要拿属性值为obj1[item]
  • for of:可以循环遍历数组 
    for(item of arr2)  // item 为数组中的值 为 a,b,c,d,e
  • foreach: 可以遍历数组 
    arr1.foreach( function(item,index){
})      //item固定接收数组的值，index固定接收序列号
四、数字类型
  • isNAN( a ) : 检测变量是否为非数字，返回true就是非数字，返回false就不是非数字 
    var a = “abc”  //isNAN(a) 的结构为false
  • Number( a ) : 把任意数据类型“强行转化”成数字类型,无法转换就形成NAN
  • Math.round( ) ：四舍五入
  • Math.random( ) ：随机数 使用公式：Math.random() * ( Max - Min ) + Min
  • Math.abs( a ) ：绝对值
  • Math.ceil( ) ：向上取整
  • Math.floor( ) ：向下取整
  • parseInt( ) :解析一个字符串，并返回一个整数 var a= 6.66 parseInt(a) =6 
    parseInt(‘10.00’) //10      
parseInt(‘10.33’)//10.33  
parseInt(‘ 10 ’)//10   
parseInt(‘10 20 30’)//10  
parseInt(‘aaab’)// NAN  
number.toFixed(2) //保留小数点后两位
  • Math.max() / Math.min() :数组里的最大值
五、字符串
        var str=”今晚你要奖励自己吗?”;
  • indexOf( ) : 
    str.indexOf(‘励’)  //找指定字符串的位置，从0开始计数，结果为5，找不到则返回-1.
str.indexOf(‘励’ , 5) //从下角标5开始找
  • lastIndexOf() : 
    str.lastIndexOf(‘励’) //查询指定文本在目标字符串当中最后一次出现的位置，找不到则返回-1
  • slice：
    用于截取目标内容片断，且截取过程当中不会破坏原始目标长度。开始下角标可以接受负数，负号仅作为方向，代表倒数第几位。如果只写一个数字，则截取对应下角标开始往后的字符串。 
    str.slice(开始下角标，结束下角标)//   [1,4)  1 2 3
  • subString:
    截取字符串，基本特性与slice一致，但不能使用负数 
    str.substring(2)
  • substr：
    截取字符串 
    str.substr(开始下角标，你要截取的长度)
  • concat：
    拼接字符串 
    目标文本1.concat(目标文本2 , 目标文本3 , .....)//目标文本1目标文本2目标文本3
  • trim：
    去除内容前后的空白 
    str4.trim( );
  • replace：
    替换字符串，如果匹配规则为常规的字符串写法，则仅会替换第一次出现的字符。需要用正则表达式来替换全文 
    str.replace(匹配规则，用来替换的内容)
str.replace(“123”,”456”);//只有第一个出现的123会被替换
str.replace(/123/g,”456”);//出现的123都会被替换
toUpperCase():小写字母转大写
toLowerCase():大写字母转小写
//两者可连续调用：
str.toUpperCase().toLowerCase();//这叫链式调用
  • split():
    把字符串拆分，拆分之后以数组的格式存放 
    str.split(‘拆分的依据’)
str.split(‘’)//str=”123”  [‘1’ , ’2’ , ’3’]
join():

把数组连接成字符串

 str.join(“连接符”)
六、数组：

  • Array.isArray(变量名) : 判断变量是否为数组格式，是则返回true：

    Array.isArray(arr)

  • 变量名 instanceof Array: 判断变量是否为数组格式，是则返回true

    arr  instanceof  Array

  • push(): 数组末尾添加一个数据

    arr=[1,2,3];
arr.push( {} );//arr=[1,2,3,{} ]

  • pop(): 数组末尾删除一个

    arr=[1,2,3];
arr.pop();//arr=[1,2]

  • unshift(): 头部添加一个数据

    arr=[1,2,3];
arr.unshift(“4”);//arr=[4,1,2,3]

  • shift(): 头部删除一个元素

    arr=[1,2,3];
arr.shift();//arr=[2,3]

  • splice():可以实现数组的添加、删除、替换操作
    数组.splice(开始位置，要删除多少个，你要替换的内容)
    arr=[1,2,3];

（1）添加

 arr.splice(1 , 0 , ’aaa’ )//[1,’aaa’, 2 , 3 ];

（2）删除

 arr.splice( 1 , 1 )//[1,3];

（3）替换

 arr.splice(2 , 1 , ’aaa’ )//[1 , 2 , ’aaa’ ];
  • sort():
    排序：升序：1 2 3 4 5 降序 5 4 3 2 1 
    arr=[2,1,4,5,3];
var temp=arr.sort( function(a,b){
return a-b //升序   return b-a //降序   })
  • reverse()：
    对数组数据进行反转 
    arr=[1,2,3];
arr.reverse();// 3 2 1
七、函数：
 function  fun(参数列表) { 代码块 }

  • 自我调用函数：

    !function  fun(参数列表) { 代码块 }()    //不用调用，定义就执行
(function  fun(参数列表) { 代码块 })()    //不用调用，定义就执行

    以on开头的内置函数都属于监听器，监听某个行为

  • 标签绑定：
    （1）id选择器：

    var dom= document.getElementById(‘标签设定的id名’);
dom.onclick = function(){  .....  }

    事件监听：

    dom.addEventListener(‘你要监听的事件（不加on）’，function(){
函数内容
})

（2）直接在标签内绑定自定义函数

  • this指针：
    只有在调用阶段才能明确this指针指向的是谁，同时this始终指向它的调用者。例如一个函数，谁调用了这个函数就是指向谁。在<script>标签内调用函数，是window对象调用的，则this指向的是window。如果是obj.函数()，则this指向的就是obj。可以使用.call(“目标对象名”)将this的指针指向目标对象。

window对象指代整个浏览器的内容。

  • window.document//文档对象,主要用于管理标签
  • window.navigator//管理浏览器导航地址部分
  • window.screen//管理浏览器页面的宽高
  • window.history//管理浏览器的历史网页
  • window.location//获取浏览器的地址
八、定时器

每过一段间隔时间执行一次函数，每次创建定时器的时候最好赋给一个变量，方便后续关闭定时器。打开定时器需要及时关闭，否则浏览器跳转至下个页面时，定时器还会继续运行。

  • 定义定时器： 
    var timer=setInterval(执行函数, 间隔时间（毫秒）)//1000ms=1s 
setInterval(function(){} , 15*1000);
  • 停止定时器： 
    clearInterval(timer);
延时器

延时器只执行一次，把需要执行的函数延迟多少时间再执行，但如果在延迟时间内，编译到清除延时器，那么会出现延时器的函数还未执行，就清除了定时器。

  • 定义延时器： 
    var timer=setTimeout(function(){},延迟时间)
  • 清除延时器 
    clearTimeout(timer)
九、日期对象：
  • 定义日期对象： 
    var time = new Date( );
  • 转换为格林威治时间： 
    time.toUTCString()
  • 获取当前年份： 
    time.getFullYear()//2023
  • 获取月份：（0-11） 
    time.getMonth()//一般使用需要+1
  • 获取星期：（0-6）0代表上星期日，1代表这周一 
    time.getDay()
  • 获取日期：(1-31) 
    time.getDate()
  • 获取小时(0-23) 
    time.getHours()
  • 获取分钟:(0-59) 
    time.getMinutes()
  • 获取秒数（0-59） 
    time.getSeconds()
  • 获取毫秒数（0-999）： 
    time.getMilliseconds()
  • 时间戳：指的是从1970年1月1日到至今的毫秒数 
    time.getTime()
  • 获取未来时间： 
    var x=new Date(2025,0,14)//获取时间为2025年1月14日 00:00:00
  • 将年份进行修改： 
    x.setFullYear(2012)
十、正则表达式：

校验目标字符串的格式

 var str = 'abc'

校验规则：var reg = /a/ //是否有出现a字母

量词：

  • ^:从字符串开头进行匹配 
    var reg = /^a/;// 如果字符串不是以a开头则不匹配
  • $:从字符串末尾进行匹配 
    var reg = /b$/;// 如果字符串不是以b为结尾则不匹配
  • 要匹配特殊符号需要加\: 匹配. 则: 
    var reg=/ \./
  • n+：至少出现一次n的字符串 
    var reg = /a+/;
  • n?：出现n字符零次或者一次
  • n*：表示0次或多次
  • n{连续出现的次数x}：n字符必须连续出现x次数 
    /a{4}/ //必须出现aaaa才为true
  • n{连续出现的次数x，}：n字符至少连续出现x次，最多出现次数不做上限
  • n{最小连续出现次数x，最大连续次数y}：目标字符至少连续出现x次，至多出现y次
  • 匹配数字类型： 
    var reg=/[0-9]?/  //匹配任一0~9的数字且出现的次数时0次或1次 //
  • /^[0,9]/ ：指匹配以0-9开头的字符串
  • /[^0,9]/ ：指匹配除了0-9之外的字符串
  • 匹配字母类型： 
    var reg=/[a-zA-z]/ //匹配任一字母
  • test 测试/验证： 
    校验规则.test(检测的目标字符串)//符合返回true
reg.test(str);
  • 修饰符：修饰符可以混合使用，如： 
    var reg = /a/img;
  • g：全局查询所有符合条件的内容之后，才会停止 
    var reg = /a/g;
  • i：对字母大小写不敏感 
    var reg = /a/i;//如果str是大写的A也会匹配
  • m:多行匹配 ，使用条件:
    ①字符串中有出现\n（换行）
    ②匹配规则内部要有^或$，这个时候才会生效
  • 元字符：
    • \d : 查询[0-9]的任一数字 /[0-9]/ → /\d/
    • \D : 查询除了数字以外的所有内容
    • \w : 查询数字\字母\下划线的字符串
    • \W : 查询除了数字\字母\下划线的字符串
    • \s : 查询字符串内的空白符（空格或tab键或换行）
    • \ ^\s | \s$ \: 检测开头有空白符或结尾有空白符
    • \S：查询所有非空白符的内容
    • . :匹配所有内容，但是除了^和$符号
十一、事件：
  • 事件捕捉：根据事件调用寻找对应标签
  • 事件冒泡：根据所找到的标签，找到包裹着它的外围标签，直到最外面一层
  • 事件委托（事件代理）：利用事件冒泡机制实现的技巧。事件冒泡从最里面的标签往外标签找的时候，会触发外部标签绑定的事件。如果某个标签的子标签执行的操作是一样的话，可以把触发事件委托给子标签共同的上一级元素，即当前标签，由于事件冒泡会遍历所有包裹着子标签的外层标签，所以外层标签绑定的事件，子标签都可以运行 
    <ul>
<li>按钮一</li>//点击此标签时会触发
<li></li>
<li></li>
</ul>

    var ul = document.getElementById(‘ ul-box’);
ul.addEventListener(‘click’ , function(event){
console.log(event.target.innerHTML);//输出标签内的内容：按钮一
console.log(event.target);//输出事件目标：<li>按钮一</li>
event.stopPropagation();//禁止外层的事件调用
} , false)//事件监听器
//false ：可执行的函数将会在冒泡阶段触发（默认为false）
//true ：可执行的函数将会在捕捉阶段触发
十二、Dom：文档对象模型

  • Dom基本操作：
    选择器：
    ID选择器：document.getElementById() //单一的目标
    标签选择器：document.getElementsByTagName()//集合
    类名选择器：document.getElementByClassName()//集合
    查询选择器：document.querySelector()//

     <div id="liuliumei">
      <div class="juejuezi"></div>
</div>

    document.querySelector('#liuliumei.juejuezi')//括号里面加引用路径 
//用于单一目标
document.querySelectorAll('#liuliumei div')//查询liuliumei标签内包含的所有div   //用于集合

  • innerHTML和innerText的区别
    （1）innerHTML返回指定元素的HTML内容，包括其内部的标记和文本。获取的是目标内部当中的元素和普通文本，且赋值时如果有标签，将会将标签编译为对应的元素。
    （2）innerText获取的是目标内部当中的普通文本，且赋值当中如果有标签，将不会进行编译，只会当成普通的字符串文本

            <div id="liuliumei">
          内容1
          <div class=“juejuezi”>内容2</div>
        </div>

    var $bom = document.querySelector('#liuliumei')
console.log($bom.innerHTML)
<!--  输出的是：
内容1
          <div class=“juejuezi”>内容2</div> 
-->

console.log($bom.innerText)

<!-- 输出的是：
内容1
内容2 
-->

    $bom.innerText=‘<div>我是新的内容</div>’;//
会把：

内容1
          <div class=“juejuezi”>内容2</div>

替换成：
<div>我是新的内容</div> //但不会编译div，标签会原封不动显示在页面上
$bom.innerHTML=‘<div>我是新的内容</div>’;//会编译div 不会显示标签在页面上，只会显示标签的内容

  • childNodes和children的区别
    children：获取目标内部的子元素结点
    childNodes：获取目标内部当中的元素和普通文本(包括不同标签之间的缝隙，例如<ul>和<li>中间的缝隙也是文本）

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

    var $ul = document.querySelector('ul')

    $ul.children为：四个li对象的数组

    $ul.childNodes为：text 和li共同组成的对象数组

  • dom的获取操作方法：

    • parentNode：获取直系上一级的父级元素节点
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

    var $ul = document.querySelector('ul')
$ul.children[0]// <li>1</li>
$ul.children[0].parentNode //<ul></ul>
    • previousSibling：获取相邻结点（上一个相邻结点）
    • nextSibling：获取相邻结点（下一个相邻结点）//但由于标签间隙也算也一个文本结点，所以要拿到下个标签，需要连续调用两次
    • 元素.remove()：移除当前元素
    $ul.children[0].remove（） //移除<li>1</li>
    • 父元素.removeChild(子元素)：通过父元素移除某个指定的子元素
    $ul.removeChild（$ul.children[0]） //移除<li>1</li>

  • 创建结点：

    document.createElement(“创建的元素”)：
 var $div=document.createElement("div");//创建<div></div>
                $div.innerHTML="123";//<div>123</div>

  • 添加子节点：

    • appendChild：把某个新元素添加到父元素结束标签之前
    $ul.appendChild($div);

    <ul>
<li>*4
<div>123</div>
</ul>

  • 使用标签属性：

     <a href="www.baidu.com">链接</a>

    var a1 = document.getElementsByTagName('a')[0];//获取a标签
a1.attributes.href  //href="www.baidu.com" 为只读方法
a1.setAttribute(指定属性名称,属性值)//设置标签属性名
a1.setAttribute("href","www.jingdong.com");
十三、浏览器存储机制

存储机制分为：cookie 、localStorage 、 sessionStorage

  • 共同点：（1）都是存储在浏览器上（2）都不安全

  • 不同点：
    cookie：
    （1）在谷歌浏览器下，需要服务器支持
    （2）单条数据存储大小只有4KB（不一定，不同浏览器不一样）
    （3）一个浏览器最多存储300条，且每个域名最多存储50条
    （4）如果不设置过期时间，关闭浏览器就会删除
    localStorage（本地存储 或 永久存储）:
    （1）在谷歌浏览器下，不需要服务器支持
    （2）存储数据为5mb
    （3）如果不删除，永久保存
    sessionStorage（会活存储 或者 临时存储）
    （1）在谷歌浏览器下，不需要服务器支持
    （2）存储数据为5mb
    （3）关闭浏览器就会删除数据

  • cookie：

    var now = new Date(‘2022/11/17 17:30:00’);
var cName = ‘测试name’;//key
var cValue = ‘测试value’;//value
document.cookie = cName + ’=’ +cValue + ’;expires=’+now;
//cookie到2022/11/17下午五点半之前有效
    • expires：cookie的有效期
    • document.cookie：获取浏览器的的cookie，更改赋值只会新增cookie，原先运行的cookie会一直存在，如果因此方法获取的cookie会获取浏览器所有的cookie，且以一个字符串形式返回
    • 获取cookie：
    function getCookie(){
var cookieStr = document.cookie;
var cookieArr=cookieStr.split(“;”)
}

  • localStorage:
    (sessionStorage用法相同，但不是永久存储，仅在浏览器未被关闭时生效)

    • 永久存储： 
      localStorage.setItem(key , value);
      value不能直接传送obj，在浏览器中无法查看具体数值

    JSON.stringify( ) : 把目标转化为JSON字符串

    可以使用:

    localStorage.setItem(key , JSON.stringify( obj));
    • 获取value值： 
      localStorage.getItem(key)
      如果value时对象格式，需要把JSON字符串格式转化为原来的obj： 
      JSON.parse(localStorage.getItem(key))
    • 删除数据： 
      localStorage.removeItem(key);//单条数据
localStorage.clear();//全部删除（一般不用，删除不可逆）
十四、构造函数

es5的普通函数（方法）：

    function myName(){}
  • 构造函数：借助new创建一个模板
    new：创建或者构造生成实例
    function Person(){//构造函数的首字母要大写，采用大驼峰格式
    this.name=”名字”;
    this.num=123;
    this.fun=function(){
    alert(“111”);
    }
    }
    var per = new Person() //per是一个实例对象
    per.name//名字
  • 字面量的定义方式：
var obj={//生成的是一个对象
name:”123”;
}
var num = 1;
十五、错误捕捉
try { } catch(err) {
console.log(error);
<!-- 会以普通信息的方式输出在控制台，且后续代码会继续执行
格式为：     错误名称：错误信息
错误名称可以通过：error.name进行访问
throw  “报错信息” , 在控制台输出错误信息，后续代码不会执行  -->
 }
十六、原型、原型链
  • 原型：他是一个允许共享属性的对象
  • 隐式原型：类似于指针(像this指针)
  • 显式原型：存放属性
    特点：
    （1）所有引用类型都有一个_proto_(隐式原型)属性，属性值是一个普通对象（父级对象）。
    （2）所有函数都有一个prototype（显式原型）属性，属性值是一个普通的对象。显式原型下管理着自己的隐式原型。 
    prototype{
__proto__: 
}

（3）所有引用类型的_proto_属性指向它的构造函数的prototype。（隐式原型指向父级的显式原型，最终的父级是对象Object，对象的显示原型当中的隐式原型指向的是null）

hasOwnProperty():验证一个对象是否含有特定属性，返回bool值

```js
function Car(){
this.name=’123’;
}                
var car = new Car() ;
```

car._proto_ ：指向的是构造函数Car()
car. _proto_ . _proto_ ：指向的时Car()的父级对象Object
car._proto_ ._proto_ ._proto_ ：指向null

  • 原型链：访问一个对象是否有某个属性值时，如果本身没有，则依靠隐式原型不停往上寻找对应的显示原型当中的属性值拿来使用
    实例对象定义自己的属性： 
      var time = new Date() 
  time.prototype.fun=function(){.....}//通过自己的显式原型进行定义
  time.fun()//调用
十七、函数柯里化、闭包
  • 函数柯里化：把函数的一次可以传入多个参数变成每次执行操作的时候只传一个 :

add(1)(2)(3) 求输出结果为1+2+3

  function add(a){
  var sum =0;
  sum+=a; // 0+1
  return function(b){
  sum+=b;//1+2
  return function(c){
  sum+=c;//1+2+3
  return sum;
        }
     }
  }
  • 闭包：函数A里面包含了函数B，函数B就能访问到函数A里面所定义的局部变量。 
    function A(){
    var a=1;
return function (){
console.log(a);
}  
}
    弊端：内存溢出
十八、ajax
  • ajax：async JavaScript and XML （异步js和可扩展标记语言），用于异步操作中向后台发起请求获得数据的支持
  • 同步：从上往下执行，如果任一行发生异常，那么下一行则无法运行，这种情况叫做进程阻塞，通常在主进程中执行的都是同步操作。
  • 异步：当某条任务语句执行时间相对较长时，可以把它分配到任务队列里进行结果等待，这样将不影响主进程往下执行

fun1(){执行时间5s};
fun2(){};
主进程（执行队列） 异步通道（任务队列）
fun1()执行之后------------------------->fun1()等待结果处理
fun2()执行
fun1()结果处理完成
fun1()

  • XMLHttpRequest： XMLHttpRequest（XHR）是一种用于在浏览器中发送HTTP请求和接收服务器响应的技术。它是现代浏览器提供的一个内置对象，通常用于通过JavaScript与服务器进行数据交互，以在页面上实现动态内容和异步更新。

    • （1）初始化请求实例对象 
      var xhr = new XMLHttpRequest();
    • （2）构建发送通道 
      xhr.open( ‘GET’  ,  ’地址’ )
    • （3）发送 
      var obj={   
name : ’123’,
long : 123
}
JSON.stringify(obj)//传回后端的参数
xhr.send(JSON.stringify(obj));//向后端发送请求
    • （4）监听请求实例对象发送的状态 
      xhr.onreadystatechange = function(){ //设置一个监听
//请求实例对象发送完成且接收到后端返回的数据，并且后端也返回了一个请求成功的结果给我们（200）
if(xhr.readyState===4&&xhr.status ===200){
var res = xhr.response;
JSON.parse(res)
}
}

    readyState：XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。

  • 状态码（status）：是服务器在处理请求时返回给客户端的一个3位数字代码，用于表示请求的处理状态。它能够向客户端传达关于请求成功、失败或其他特定状态的信息。
    常见的HTTP状态码包括：
    1xx：正在发送
    2xx：表示请求已成功处理，发送成功。
    3xx：表示需要进一步操作，比如重定向。
    4xx：表示客户端发出了错误的请求，比如请求的资源不存在或请求参数错误。（前端错误）
    404：地址错误 400：参数错误
    5xx：表示服务器在处理请求时发生了错误。（后端错误）
    500：服务器停止

  • 获取本地XML数据：
    XML：标签自定义 用于存储数据 <liuliumei>
    HTML: 标签浏览器可识别 <div>
    本地项目中新建一个index.xml文件 ： 
    <?xml version=’1.0’ encoding=’UTF-8’>
<student>
<name>小王</name>
<age>18</age>
</student>
    • （1）初始化请求实例对象 
      var xhr = new XMLHttpRequest();
    • （2）构建发送通道 
      xhr.open( 'GET'  ,  '../index.xml' )
    • （3）发送 
      xhr.send();//
    • （4）监听请求实例对象发送的状态 
      xhr.onreadystatechange = function(){ //设置一个监听
if(xhr.readyState===4&&xhr.status ===200){
var res = xhr.responseXML;
res.getElementsByTagName(‘name’)[0].innerHTML;//小王
    }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容