JavaScript基础语法速查手册

单行注释 //

多行注释：/* */

代码以；结尾

2. 变量：let //定义变量

Let name; //未赋值输出undefined

Var用于es6之前现在用let

Const //用于声明常量就是不变的值

变量命名规范：1. 区分大小写 2. 由字母，数字，下划线，美元数字组成不能以数字开头。

3. 不能和关键字同名

由多个单词组成的时候通常使用驼峰命名法

4. 基本数据类型：

number, string, Boolean,undefined,null,symbol和bigint（大整数）

原始数据类型：number, string, boolean: 0为false,1为true.

Nan为number属性

模板字符串：`${变量}`

5. 显式类型转换：console.log(Number(name));

纯数字字符串转换为普通数字

非纯数字字符串转换为nan

空字符串转换为0。

布尔类型转换：0和nan转为false,其他为true

6. 隐式类型转换：

变量前面加一个加号就可以将其转换为数字类型。

let ss =+"sdfsdf"

console.log(typeof ss); //number

7. 输入：

let number = +prompt("请输入一个数")

获取的默认是字符串+隐式转换为数字也可以后面乘以1

parseInt(ss) //从中抽取出整数部分

parseFloat(ss) //从中抽取出浮点数部分

let name= 34;

console.log(typeof name);

typeof //查看数据类型

8. 运算符：

+，-，*，/，%取余

字符串拼接

console.log(345+"sdfdsf");

赋值运算符：=，+=，-=，*=，/=，%=，++，--

比较运算符：>,<,>=,<=，==，!=，===(全等)，不全等!==

==只判断两边的数据是非相等，===不但判断数据还判断类型

逻辑运算符：&&与（同时满足），||或，！非

9. 运算符优先级：

乘除大于加减

！，&，|

数字>关系运算>逻辑运算

10. 判断语句：

单分支：if(){}

多分支：If（条件）{

}else if(条件表达式){

代码块}else if(){}

11. For循环：

For(let I =0 ; i<aa.length; I++){代码块；}

for(let i=0;i<34;){

console.log(ss);

i++ //也可以写在下面

}

do.......while:

do {

循环体

}while(循环执行条件)

While(循环执行条件){

代码块；}

do...while和while的区别： do...while不管条件成不成立都会执行一次

12. Switch：

每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构

javascript 复制代码

var day = 6;

switch(day){

case 0:

console.log("今天星期一")

break;

case 1:

console.log("今天是星期二")

break;

case 2:

console.log("今天星期三");

break;

case 3:

console.log("今天星期四");

break

case 4:

console.log("今天星期五");

break;

case 5:

console.log("今天星期六");

break;

default:

console.log("今天星期日");

}

13. 三目运算：

(条件)?表达式1 : 表达式2

Var Num=1

Var ss=num%2===0 ? "偶数"："奇数"

Log(ss)

14. 字符串操作：

javascript 复制代码

 <script>

    var dsd = "hallo";

    var sds="word"

    console.log(dsd.charAt(3));//l输出下标为4的字符串

    console.log(dsd.concat(sds));  //halloword 拼接字符串

  </script>

SubString(1,2)

javascript 复制代码

<script>

    var dsd = "hallo";

    var sds="word"

    var wat = "  s|s|s|d\t"

    console.log(dsd.substring(2));//llo 从1开始到结束

    console.log(dsd.substring(2,3));//l 从二到三索引

    console.log(sds.substr(1,4));//ord 从1索引开始，4为长度

    console.log(sds.indexOf("r"));//2 返回字符索引，如果没有返回-1

    console.log(wat.trim());//去除前后空格，和回车

    console.log(wat.split("|"));//['  s', 's', 's', 'd\t'] 写上面按什么分割，不写按字母分割，最终返回一个数组。

  </script>

15. 数组：

Arr.[0]=1 //修改数组0索引的值，如果有会覆盖原来的

数组.push() //末尾添加

数组.unshift() //开头添加

数组.pop() //删除最后一个

数组.shift() //删除第一个

数组.splice(从那开始删【】，删几个) //删除指定元素

数组.length //获取数组长度

16. 函数使用

函数的声明语法

function 函数名(){

函数体}

例

function sayHi(){

document.write('hai~~')

}

2. 函数的调用语法

函数名()

3. 函数返回值

当函数需要返回数据出去时，用return关键字

javascript 复制代码

<script>

  function getmax(arr=[]){

    let max = arr[0]

    for (let i=1;i<arr.length;i++) {

      if (max<arr[i]) {

        max= arr[i]

      }

    }

    return max

  }

  let ss= getmax([34,34,45,67,345])

  console.log(ss);

</script>

函数名相同，调用就叫近原则

函数一旦碰到return就不会在往下执行了函数的结束用return

4. 匿名函数

function(){}

函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用我们将这个称为函数表达式语法:

let fn = function（）{

函数表达式

}

调用：fn()

17. 对象是什么

（1).对象(object):JavaScript里的一种数据类型

可以理解为是一种无序的数据集合，注意数组是有序的数据集合用来描述某个事物，例如描述一个人

人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能

如果用多个变量保存则比较散，用对象比较统一

javascript 复制代码

let obj ={
uname:'员某 '

age: 18,

gender:'女'
}

(2).对象声明语法

let 对象名 = {}

(3).查：

属性-查声明对象，并添加了若干属性后，可以使用.获得对象中属性对应的值，我称之为属性

访问语法:对象名.属性

简单理解就是获得对象里面的属性值。

对象名['属性名'] 例如：obj['age'] //属性名有""时

(4).改

语法:对象名.属性=新值

增加和修改相同

没有就是新增，有就是改

(5).删

语法:delete 对象名.属性

18. 方法：

声明对象，并添加了若干方法后，可以使用.调用对象中函数，我称之为方法

javascript 复制代码

let person ={name: 'andy',

sayHi:function(){document.write('hi~~')

//对象名.方法名()}

}

person.sayHi()

(1).遍历对象：for in

javascript 复制代码

et obj ={

    name:"pink",

    age:34,

    gender:"男"

  }

  for(let key in obj){

    console.log(key);

    console.log(obj[key]);

  }

19. Dom树

Dom树作用:可以更直观的表现标签与标签之间的关系

(1).Dom对象：将网页变为对象处理

javascript 复制代码

   const ss = document.querySelector(".two")  #只能获取第一个dom对象

   const sd = document.querySelector("#id")

   const df = document.querySelector("li")

   const fg = document.querySelectorAll("ul li")

 #可以获取多个dom对象

document.querySelector只能获取第一个dom对象

document.querySelectorAll可以获取多个dom对象

(2). const random3 = Math.floor(Math.random()*list.length) #获取数组随机数

(3). 操作元素内容：

对象.innerText=修改后的值 #不解析标签

对象.innerHTML=修改后的值 #解析标签

(4).操作元素常用属性

还可以通过JS 设置/修改标签元素属性，比如通过 src更换图片

最常见的属性比如:href、title、src等

语法: 对象.属性 = 值

javascript 复制代码

<body>

  <img src="../../代码/html/tupian/2.jpg" alt="">

  <script>

     const img = document.querySelector("img")

     img.src="../../代码/html/tupian/3.jpg"

     img.title="我的"

  </script>

</body>

20. 随机数函数：

javascript 复制代码

      function getRandom(N,M){

return Math.floor(Math.random() * (M-N+ 1))+ N

}

getrandom(1,4)

21.操作元素样式属性

通过 style 属性操作CSS

语法: 对象.style.样式属性 = 值

javascript 复制代码

img.style.width="700px"

img.style.backgroundColor="red"

img.style.marginTop= "300px"

(1).操作className操作css元素属性:

元素.className="box"

使用新值替换旧值，会覆盖旧的值，可以写两个类名

(2).为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

元素.classList.add('类名') #追加一个类

元素.classList.remove('类名') #删除一个类

元素.classList.toggle('类名') #切换一个类有就删除没有就添加

classList.contains()看看有没有包含某个类，如果有则返回true，么有则返回false

(3). 获取表单里面的值：表单.value

javascript 复制代码

 表单<input type="text" name="" id="" value="ss">

 <script>

  const inp = document.querySelector("input")

  inp.value="我的电脑"

  inp.type="checkbox"

  inp.checked=true

 </script>

butt.disabled=true //使按钮不能点击

(4). 自定义属性：通常以data-开头

javascript 复制代码

表单<input type="text" name="" id="" value="ss" data-id ="盒子"><br>

 <button>按钮</button>

 <script>

  const inp = document.querySelector("input")

  console.log( inp.dataset.id);  //inp.dataset全部自定义属性

在DOM对象上一律以dataset对象方式获取

pane[e.target.dataset.id].style.display='block'

//e.target点击对象 e.target.dataset.id点击对象的id

Pane All获取过来的数组，pane[e.target.dataset.id]点击的id

22. 定时器：

setInterval（函数，毫秒） //这里的函数如果要调用写好的函数名后不能加小括号

javascript 复制代码

<script>

         setInterval(function(){

           alert("傻逼")

          },1000)

  </script>

关闭定时器： clearInterval(num)

23. 用户协议：

javascript 复制代码

<button class="clt" disabled>我已经阅读用户协议(60)</button>

  <script>

    let i = 3

    let clt =document.querySelector(".clt")

    console.log(clt);

    let ss = setInterval(function(){

      i--

      clt.innerHTML=`我已经阅读用户协议${i})`  //将定时器里的数字填入按钮

      if(i===0){

        clearInterval(ss)      //等于0时关闭定时器

        clt.disabled=false     //等于0时让按钮显示可以点击

      }

    },1000)

   

  </script>

24. 事件监听

语法:

元素对象.addEventListener('事件类型'，要执行的函数)

(1).事件监听三要素:

事件源: 那个dom元素被事件触发了，要获取dom元素

事件类型:用什么方式触发，比如鼠标单击click、鼠标经过 mouseover等

事件调用的函数:要做什么事

display: none; //隐藏盒子

DOM LO

事件源.on事件=function(){} //写两个会出现覆盖

(2). 鼠标触发

click 鼠标点击

mouseenter 鼠标经过

mouseleave 鼠标离开

mouseover和mouseout会有冒泡效果

mouseenter 和 mouseleave 没有冒泡效果(推荐)

表单获得光标

获得焦点focus

失去焦点blur

键盘触发

Keydown 键盘按下触发

键盘抬起触发Keyup

表单输入触发

input 用户输入事件

表单提交事件：submit:

点击跳转到action路径。

如果密码什么的错误就不让提交：e.preventDefault()

25.获取事件对象

目标:能说出什么是事件对象事件对象是什么

也是个对象，这个对象里有事件触发时的相关信息

例如:鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息使用场景

可以判断用户按下哪个键，比如按下回车键可以发布新闻>可以判断鼠标点击了哪个元素，从而做相应的操作

(1).语法:如何获取

在事件绑定的回调函数的第一个参数就是事件对象

一般命名为event、ev、e

元素.addEventListener('click',function(e){

E就是事件对象

(2).部分常用属性

type

口获取当前的事件类型

clientX/clientY

口获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY

口获取光标相对于当前DOM元素左上角的位置

key

口用户按下的键盘键的值

口现在不提倡使用keycode

26. this指向函数调用者

谁调用this就是谁

27. display=none //css里面none不用加引号，js.style.display里要加

//none隐藏，block显示

Input.value//获取表单里面的值

Input.trim() //去除字符串两边的空格

<textarca>大表单文本框

28. 事件流经过的2个阶段：冒泡和捕获

事件流指的是事件完整执行过程中的流动路径

捕获阶段是从父到子冒泡阶段是从子到父

(1).事件捕获:

从DOM的根元素开始去执行对应的事件(从外到里)

代码：DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

addEventListener第三个参数传入 true 代表是捕获阶段触发(很少使用)

若传入false代表冒泡阶段触发，默认就是false

(2).事件冒泡：

当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

事件冒泡是默认存在的

L2事件监听第三个参数是 false，或者默认都是冒泡

(3). 阻止冒泡：

语法:

e事件对象.stopPropagation()

注意:此方法可以阻断事件流动传播不光在冒泡阶段有效，捕获阶段也有效

解除事件：btn.addEventListener('click',fn)

//L2 事件移除解绑

btn.removeEventListener(Iclick',fn)

29. 事件委托：

原理：利用事件冒泡的特点

给父及元素绑定事件，点击子级元素会冒泡到父级元素

注意：父元素里的子标签类型过多时不适合用事件委托

javascript 复制代码

<script>

    const ul = document.querySelector("ul")

    ul.addEventListener("click",function(e){

      console.log(e.target.tagName);

      if (e.target.tagName==="LI") {    

 //e.target.tagName==="LI"点击元素的名称：为大写

        e.target.style.color= "red";   //e.target点击的对象

      }

     

    })

  </script>

30.排他思想：

判断点击的是否为什么，然后取消原有的类（效果），重新添加

e.target //点击的对象

e.target.tagName //点击的对象名，通常为标签的字母大写

31. 阻止事件默认行为：

javascript 复制代码

e.prevntDefault()

<form action="http://wwww.baidu.com">

    <input type="submit" value="百度一下">

  </form>

  <script>

    const form = document.querySelector("form")

    form.addEventListener("click",function(e){

      e.preventDefault()

    })

  </script>

页面加载事件

加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件

事件名:load

监听页面所有资源加载完毕:

给 window 添加 load 事件

页面加载事件window.addEventListener('load'function(){})

注意:不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

javascript 复制代码

<script>

  window.addEventListener("load",function(){

    const button = document.querySelector("button")

    button.addEventListener("click",function(){

      alert("加载事件")

    })})

  </script>

</head>

<body>

  <button>按钮</button>

</body>

32.页面加载事件:

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

事件名:DOMContentLoaded

监听页面DOM加载完毕:

给 document 添加 DOMContentLoaded 事件

javascript 复制代码

document.addEventListener('DoMcontentLoaded'. Function(){})



 document.addEventListener("DOMContentLoaded",function(){

      const button = document.querySelector("button")

    button.addEventListener("click",function(){

      alert("加载事件")

    })

    })

  </script>

</head>

<body>

  <button>按钮</button>

33. 滚动事件：

scroll //可以给window和document或其他元素

Css: overflow:scroll //添加滚动条

ScrollTop //获得被卷去的上面大小

ScrollLeft //获得被卷去的左边大小

Window.scrollTop //会显示undefined

javascript 复制代码

 document.documentElement. //相当于html

 <script>

     const div = document.querySelector("div")

     div.addEventListener("scroll",function(){

      // console.log(div.scrollTop);

     

     })

     window.addEventListener("scroll",function(){

       const n= document.documentElement.scrollTop

       if(n>100){

        div.style.display="block"

       }

     

     })

  </script>

document.documentElement.scrollTop=800

也可以直接赋值：可读写scroll

33. 页面滚动事件-滚动到指定的坐标

scrollTO()方法可把内容滚动到指定的坐标

语法:

元素.scrollTo(x,y)

让页面滚动到y 轴1000像素的位置：window.scrollTo(0，1080)

34. 页面尺寸事件

会在窗口尺寸改变的时候触发事件: resize

window.addEventListener('resize',function(){/1 执行的代码

检测屏幕宽度:

javascript 复制代码

window.addEventListener('resize',function(){

let w= document.documentElement.clientWidthconsole.log(w)

}

clientWidth和clientHeight //不包含边框和外边距

（1).元素尺寸于位置-尺寸

获取宽度：

获取元素的自身宽高、包含元素自身设置的宽高、padding、border

offsetWidth和offsetHeight //获取内容，padding,border的宽度

获取出来的是数值,方便计算

获取位置：

offsetLeft和offsetTop 注意是只读属性

注意：如果父盒子有定位按父盒子算

35. 日期对象:

用来表示时间的对象

实例化

目标:能够实例化日期对象

在代码中发现了 new 关键字时，一般将这个操作称为实例化创建一个时间对象并获取时间

Const date= new Date(); //获取当前时间

Const date= new Date("2022-03-12 12：34：67") ; //获取指定时间

(1).日期对象方法：

div.innerHTML = date.toLocaleString()// 2022/4/1 09:41:21

div.innerHTML = date.toLocaleDateString()// 2022/4/1

div.innerHTML = date.toLocaleTimeString()// 12:23:43

(2).时间戳：

是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

算法：今天的毫秒数-昨天的毫秒数=剩余的毫秒数

1000ms等于1秒

(3).获取时间戳的三种方式：

javascript 复制代码

<script>

// 1. getTime()

const date = new Date()

console.log(date.getTime())

// 2. +new Date()

console.log(+new Date())

// 3. Date.now()

console.log(Date.now());

</script>

(4).转换公式

javascript 复制代码

d=parseInt(总秒数/60/60 /24);// 计算天数

h=parselnt(总秒数/60/60%24)// 计算小时

m=parselnt(总秒数/60 %60);// 计算分数

s=parselnt(总秒数%60)// 计算当前秒数

注意：算出来是毫秒需要转为秒再参与计算。

在定时器外也需要调用一次不然刷新的时候会有一个一秒的默认值出现。

(5).日期对象：

用来表示时间的对象

实例化

目标:能够实例化日期对象

在代码中发现了 new 关键字时，一般将这个操作称为实例化创建一个时间对象并获取时间

javascript 复制代码

Const date= new Date();  //获取当前时间

Const date= new Date("2022-03-12 12：34：67") ;  //获取指定时间

(6).日期对象方法：

javascript 复制代码

div.innerHTML = date.toLocaleString()// 2022/4/1 09:41:21

div.innerHTML = date.toLocaleDateString()// 2022/4/1

div.innerHTML = date.toLocaleTimeString()// 12:23:43

(7).时间戳：

是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

算法：今天的毫秒数-昨天的毫秒数=剩余的毫秒数

1000ms等于1秒

(8).获取时间戳的三种方式：

javascript 复制代码

<script>

// 1. getTime()

const date = new Date()

console.log(date.getTime())

// 2. +new Date()

console.log(+new Date())

// 3. Date.now()

console.log(Date.now());

</script>

(9).转换公式

javascript 复制代码

d=parseInt(总秒数/60/60 /24);// 计算天数

h=parselnt(总秒数/60/60%24)// 计算小时

m=parselnt(总秒数/60 %60);// 计算分数

s=parselnt(总秒数%60)// 计算当前秒数

注意：算出来是毫秒需要转为秒再参与计算。

在定时器外也需要调用一次不然刷新的时候会有一个一秒的默认值出现。

36.节点操作：

DOM节点

节点类型

元素节点所有的标签比如 body、 div

html是根节点

属性节点：

所有的属性比如 href

文本节点：

所有的文本

其他

(1).关系查找节点：父子节点，兄弟节点

parentNode 属性

返回最近一级的父节点找不到返回为null

子元素.parentNode //亲爸爸

子元素.parentNode可以代表父元素

(2).子节点查找:

childNodes

获得所有子节点、包括文本节点(空格、换行)、注释节点等

children 属性 (重点)

仅获得所有元素节点

返回的还是一个伪数组

(3).父元素.children

兄弟关系查找:

下一个兄弟节点

nextElementsibling 属性

上一个兄弟节点

previousElementSibling 属性

(4).新增节点：

创建一个新的节点

把创建的新的节点放入到指定的元素内部

创建元素节点方法:

document.createElement('标签名')

(5).追加节点：

插入父元素的后面：

父元素.appendchild(要插入的元素)

插入到父元素中某个子元素的前面

父元素.insertBefore(要插入的元素，在哪个元素前面)

(6).克隆节点

元素.cloneNode(布尔值)

若为true，则代表克隆时会包含后代节点一起克隆

若为false，则代表克隆时不包含后代节点

默认为false

(7).删除节点：

语法

父元素.removechild(要删除的元素)

如不存在父子关系则删除不成功

删除节点和隐藏节点(display:none)有区别的: 隐藏节点还是存在的，但是删除，则从html中删除节点

javascript 复制代码

<script>

    const ul = document.querySelector("ul")

    console.log(ul);

    let li1=ul.children[0].cloneNode(true)

    ul.appendChild(li1)   //克隆追加

    ul.removeChild(ul.children[1])  //删除

  </script>

37. this.reset() //重置提交事件

38. bom浏览器对象模型

通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法

39. 定时器-延时函数

JavaScript 内置的一个用来让代码延迟执行的函数，叫setTimeout

语法:

setTimeout(回调函数，等待的毫秒数)

setTimeout 仅仅只执行一次

清除延时函数:

javascript 复制代码

 let timer = setTimeout(回调函数，等待的毫秒数)

  clearTimeout(timer)

  <script>

      let ss =  setTimeout(function(){

           console.log("延时函数");

            },4000)

           clearTimeout(ss)

         </script>

40. 同步任务

同步任务都在主线程上执行，形成一个执行栈

异步任务

J5 的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型:

1、普通事件，如 click、resize 等

2、资源加载，如 load、error 等

3、定时器，包括 setInterval 每几秒执行一次、setTimeout几秒后执行等

执行过程：一般先执行同步任务，后执行异步任务

41. Location对象

Location.href='' //js跳转

javascript 复制代码

<script>

    const div = document.querySelector("div")

    let num=5

    setInterval(function(){

      num--

      div.innerHTML=`${num}秒后跳转到百度`

      if(num==0){

        location.href="http://www.baidu.com"

      }

    },1000)

  </script>

42.常用属性和方法:

search 属性获取地址中携带的参数，符号?后面部分

console.log(location.search)

hash属性获取地址中的哈希值，符号#后面部分

console.log(location.hash)

43. 常用属性和方法:

reload 方法用来刷新当前页面，传入参数true 时表示强制刷新

javascript 复制代码

<button>点击刷新</button>

<script>

let btn = document.querySelector('button')

btn.addEventListener('click',function(){

location.reload(true)}}

//强制刷新 类似 ctrl + f5

</script>

44. navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息常用属性和方法:

userAgent 检测浏览器的版本及平台

//检测userAgent(浏览器信息)

javascript 复制代码

!(function (){

const userAgent = navigator.userAgent

/验证是否为Android或iPhone

const android = userAgent.match(/(Android);?「¥s¥/+([¥d.1+)?/]

const iphone =userAgent.match(/(iPhone¥sOS)¥s([¥d ]+)/)

/如果是Android或iPhone，则跳转至移动站点

if(androidl iphone){

location.href ='http://m.itcast.cn'

}

）}（）

45.histroy对象

history 的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

常用属性和方法:

46. 本地存储：

将数据存储在浏览器中，可以使页面刷新不丢失

本地存储分类-localstorage

目标:能够使用localstorage 把数据存储的浏览器中

作用:可以将数据永久存储在本地(用户的电脑),除非手动删除，否则关闭页面也会存在

特性:

可以多窗口(页面)共享(同一浏览器可以共享)

以键值对的形式存储使用

语法:

存储数据:

javascript 复制代码

localStorage.setltem(key, value)

  <script>

    localStorage.setItem("name","yaohao")

  </script>

可以在这查看：

javascript 复制代码

let ss = localStorage.getItem("name")    //获取值

    console.log(ss);

    localStorage.removeItem("name")   //删除

本地存储只能存储字符串：如果是数字类型会自动转换为字符串

(1).本地存储分类- sessionstorage

特性:

生命周期为关闭浏览器窗口

在同一个窗口(页面)下数据可以共享

以键值对的形式存储使用

用法跟localstorage 基本相同

(2).复杂数据类型：

复杂数据类型存储必须转换为json字符串存储

javascript 复制代码

const obj={

      name:"张三",

      age:18,

      gerder:"男"

    }

    localStorage.setItem("obj",JSON.stringify(obj))

再将json字符串转化为json对象：

console.log(JSON.parse(localStorage.getItem('obj')));

47.字符串拼接新思路:(效果更高，开发常用的写法)

利用 map()和join()数组方法实现字符串拼接

javascript 复制代码

 <script>

    const arr =["red",'bule',"pink"]

    const newArr= arr.map(function(ss,index){

      console.log(ss); //数组中的每个元素

      console.log(index); //数组中的索引号

      return ss+"颜色"

    })

    console.log(newArr);

   

  </script>

Return 返回一个数组

48. 数组中join方法

join()方法用于把数组中的所有元素转换一个字符串

语法:

javascript 复制代码

const arr =['red颜色'，'blue颜色'，'green颜色']
// red颜色blue颜色green颜色
console.log(arr.join(''))

参数:

数组元素是通过参数里面指定的分隔符进行分隔的，空字符串(")，则所有元素之间都没有任何字符

javascript 复制代码

console.log(newArr.join()); //red颜色,bule颜色,pink颜色，原样输出

console.log(newArr.join("|")); //red颜色|bule颜色|pink颜色

49. 正则表达式

用于匹配字符串中字符组合的模式

可以替换文本中的敏感词，从字符串中获取特定部分，验证表单

语法：const 变量=/表达式/

//匹配表达式自变量

判断是否有符合规则的字符串：Test()方法

Regob.test(被检测字符串)返回true或fals

javascript 复制代码

<script>

    const ss = "大撒反对梵蒂冈地方官风格化法国不虚此行"

    const reg=/不/ 

    console.log(reg.test(ss));   //规则在前

  </script>

console.log(reg.exec(ss));

exec如果有返回数组，不然返回null

(1). 元字符

为了方便记忆和学习，我们对众多的元字符进行了分类:

边界符(表示位置，开头和结尾，必须用什么开头，用什么结尾)

量词 (表示重复次数)

字符类 (比如 \d 表示 0~9)

javascript 复制代码

console.log(/^我/.test("我的哦"));  //以我开头

console.log(/^我$/.test("我"));    //以我开头以我结尾

console.log(/^我$/.test("我我"));   //返回false^$为精确判定只能有一个

(2).量词用来设定某个模式出现的次数：

//*量词相当于 >=0

javascript 复制代码

console.log(/^我*$/.test("我我"));  //我可以出现0次或无数次

console.log(/^我*$/.test("我的"));  //返回false只能以我开头我结尾  

console.log(/^我*$/.test(""));  //true

console.log(/^我+$/.test(""));  //false +相当于>0 不包含0

//?相当于0||1 要么1次要么没有

javascript 复制代码

  console.log(/^我?$/.test("我"));  //true

  console.log(/^我?$/.test(""));  //true

  console.log(/^我?$/.test("我我我我")); //false

//{n,m}n,m次>=n || <=m

javascript 复制代码

console.log(/^我{1,3}$/.test("我"));  //true

console.log(/^我{1,3}$/.test(""));  //false

console.log(/^我{1,3}$/.test("我我我")); //true

(3).字符类:[]匹配字符集合

后面的字符串只要包含 abc 中任意一个字符，都返回 true

console.log(/[abc]/.test('andy')) // true

/^[abc]$/.test("a") //false 精确匹配只能是一个

console.log(/^[a-zA-Z0-9]{1,3}$/.test("s34")); //true 数字大小写字母且不超过3位

(4).字符类:[]里面加上^取反符号

比如:

>[^a-z]匹配除了小写字母以外的字符

注意要写到中括号里面

(5).字符类:

预定义:指的是某些常见模式的简写方式,

日期符号：^\d{4}-\d{1,2}-\d{1,2}$\

50. 修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等语法:

/表达式/修饰符

i是单词 ignore 的缩写，正则匹配时字母不区分大小写9 是单词 global的缩写，匹配所有满足正则表达式的结果

javascript 复制代码

console.log(/a/i.test('a'))// true

console.log(/a/i.test('A'))// true    i不区分大小写

(1).修饰符

替换 replace 替换

语法:

字符串.replace(/正则表达式/，'替换的文本')

javascript 复制代码

<script>

    const reg ="php是世界上最好的语言，PHp替换"

    const ss = reg.replace(/php/ig,"java") //i替换大写，g替换全部i只能替换一个

    console.log(ss)  //java是世界上最好的语言，java替换

  </script>

51.验证码按钮：

javascript 复制代码

 <script>

        const code = document.querySelector(".code")

        let fast =true

        code.addEventListener('click',function(){

           

            if(fast){

                fast=false

                let i=10

            code.innerHTML="10"   //减少定时器延时，优化用户体验

            let setCodee= setInterval(function(){

            i--

            code.innerHTML="0"+i

            if(i===0){

                clearInterval(setCodee)

                code.innerHTML="重新获取验证码"

                fast=true    //到点了后重新获取

            }

        },1000)

            }

       })

</script>

52.change 事件内容发生了变化且失去焦点触发（表单）

手机号正则：/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/

53. h5非空：required

html里加了这个不能为空，如果是空无需验证账号，密码

< form action=""autocomplete="off">

autocomplete="off" //关闭浏览器输入提示

54. 作用域：规定了变量能够访问的范围

分为：局部作用域和全局作用域。

局部作用域又分为函数作用域和块作用域。

块作用域：在js中用{ }包裹的代码块

Let const 声名的会有块作用域，块外无法访问。

Var声明的不会有块作用域，块外仍可访问

Var声明的变量会遵循就近原则，覆盖旧值

(1).全局作用域：《script》标签和js文件的最外层就是全局作用域。

作用域链：本质是底层变量的查询机制。

优先查询当前作用域，如果当前没有就会由内而外，逐级向上查找。

子作用域可访问夫作用域的变量，夫作用域不能访问子作用域的变量。

(2). Js的垃圾回收机制：js中的内存分配和垃圾回收都是自动回收，内存在不使用的情况下会被垃圾回收器自动回收。

内存生命周期：

内存分配：声明时系统自动分配内存

内存使用：读写内存，使用变量，函数等

内存回收：使用完毕由垃圾回收器自动回收。

全局变量只有在关闭浏览器界面时才会回收，局部变量不用时就会被自动回收

内存泄漏：内存中该回收的变量由于某种原因无法回收就会形成内存泄漏。

栈：存放基本数据类型

堆：由程序员分配释放，存放复杂数据类型

(3).Js常见的垃圾回收算法：引用计数法和标记清除法

引用计数法：看一个对象是否指向它的引用，引用次数为0则释放内存。

如果两个对象相互引用，引用次数也不会清0，不使用时也无法回收，导致内存泄漏。

标记清除法（现在常用的）：从底部全局变量开始扫描，将无用的对象标记后回收。

闭包：闭包=内存函数+外层函数的变量。（closure）

里层函数用到外层函数的变量。

作用：外部也可以访问函数内部的变量

实现数据私有，闭包会有内存泄漏。

javascript 复制代码

function fn(){

let count =1

function fun(){

count++console.log(`函数被调用${count}次`)

}

return fun

const result = fn()

result()//2

result()// 3

变量提升：仅存在于var声明的变量

将所有var声明的变量提升到当前作用域的最前面，只提升声明不提升赋值

Let,const声明的变量不存在变量提升

实际开发中推荐先声明再访问

javascript 复制代码

var num

  console.log(num +'件')

  num = 10

56. 函数提升：

会把所有函数声明提升到当前作用域的最前面，只提升函数声明，不提升赋值。所有函数表达式用函数提升就会报错

函数表达式必须先声明赋值后调用。

javascript 复制代码

fn()

function fn() {

console.log('函数提升')

}



函数表达式： bar() // 错误

  var bar =function(){

  console.log('函数表达式不存在提升现象...')

  }

(1).函数参数：动态参数，剩余参数。

动态参数：

javascript 复制代码

arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参

arguments是个伪数组

<script>

  function getsum(){

    let sum = 0;

    for(let i = 0; i<arguments.length;i++){

      sum+=arguments[i]

    }

    return sum

  }

  console.log(getsum(1,2,3,43,4));

</script>

(2).剩余参数

剩余参数允许我们将一个不定数量的参数表示为一个数组

javascript 复制代码

function getSum(...other){

// other 得到[1,2,3]

console.log(other)

}

getsum(1，2，3)

剩余参数是个真数组。

<script>

  function fn(a,b,...arr){

    return arr        

  }

console.log(fn(2,43,3,5,6,7)); //arr里面就装的[6,5,2,7] 2传给a,43传给b



</script>

展开运算符：

javascript 复制代码

const arr=[1，5，3，8，2]

console.log(...arr)//15382

使用场景：求数组最大值，拼接数组。

let array = [2,3,56,78]

console.log(Math.max(...array));  //求最大值

console.log(Math.min(...array));

数组拼接：

let array = [2,3,56,78]

let array2= [2,3,5,8]

console.log(...array,...array2);

57.箭头函数

箭头函数更适用于那些本来需要匿名函数的地方

javascript 复制代码

Const fn=() =>{}

Fn()



const fn1=x => console.log(x); //只有一个形参时小括号可以省略，只有一行代码时大括号可以省略

fn1(2)

const fn2= x => x-x //省略returt



const fn3=name =>({uname:name})   //返回对象

console.log(fn3("李白"));

箭头函数里没有arguments参数，但有剩余参数。

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。

57.数组解构：

将数组元素批量复制给一系列变量的简洁语法

javascript 复制代码

 let arr = [21,45,56,23]

    const  [a,b,c,d]=arr   // const [a,b,c,d]=[21,45,56,23]

    console.log(a);  //21

    console.log(b);   //45

    console.log(c);   //56



//交换值

    let nubmet1 =1

    let nubmet2 =2;   //这个分号必须加

    [nubmet2,nubmet1]=[nubmet1,nubmet2]

    console.log(nubmet2);  //1

    console.log(nubmet1);  //2

立即执行函数也必须加分号：(function(){})();

const [a,b,c,d]=[21,45,56]   //d为undefined



//剩余参数解构数组

    const [A,B,...e]=[23,32,34,12]  

    console.log(e);  //[34,12]

防止有undefined传递单元值的情况，可以设置默认值:

 const [num1=0,num2=0]=[]

    console.log("num1="+num1);

    console.log("num2="+num2);

多维数组解构：const [a,b,[c,d]]=[1,2,[3,4]]

console.log(a)// 1

console.log(b)//2

console.log(c)// 3

58.对象解构:

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法

对象中找不到与变量名一致的属性时变量值为 undefined

javascript 复制代码

const {name,age}={name:"deq",age:18}

    console.log(name);

    console.log(age);



const {name:username,age:age1}={name:"deq",age:18}

    console.log(username);   //dep

    console.log(age1);       //18

解构数组对象：

const pig=[{

      uname:"佩奇",

      age:119    

    }

  ]

  const [{uname,age}]=pig

  console.log(uname);

  console.log(age);

多重对象解构：

const obj={

    name:"小黑黑",

    age:34,

    family:{

      mother:"灰太狼",

      father:"红太囊"

    }

   }

  const {name,age,family:{mother,father}}=obj

  console.log(father);

多重数组对象解构：

const obj=[{

    name:"小黑黑",

    age:34,

    family:{

      mother:"灰太狼",

      father:"红太囊"

    }

   }]

  const [{name,age,family:{mother,father}}]=obj

  console.log(father);

forEach()方法用于调用数组的每个元素，并将元素传递给回调函数

语法：被遍历的数组.forEach(function(当前数组元素，当前元素索引号){

//1 函数体

}）

javascript 复制代码

const arr = ["prink","red","geer"]

  arr.forEach(function(item,index){

    console.log(item);

  })

构造函数

构造函数语法:大写字母开头的函数

javascript 复制代码

 function Pig(name,age){

      this.name=name

      this.age=age

    }

    const pig1 = new Pig("sdfs",23)

    console.log(pig1);

    console.log(pig1.age);

    console.log(pig1.name);

实例化构造函数时没有参数时可以省略()

构造函数内部无需写return，返回值即为新创建的对象

构造函数内部的 return 返回的值无效，所以不要写return

javascript 复制代码

   Pig.play=function (){

      console.log("我是静态方法");  //静态方法

    }

    Pig.play()

    Pig.num=23;

    console.log(Pig.num);//23 静态变量

JavaScript基础语法速查手册

单行注释 //

2. 变量：let //定义变量

3. 不能和关键字同名

4. 基本数据类型：

5. 显式类型转换：console.log(Number(name));

6. 隐式类型转换：

7. 输入：

8. 运算符：

9. 运算符优先级：

10. 判断语句：

11. For循环：

12. Switch：

13. 三目运算：

14. 字符串操作：

15. 数组：

16. 函数使用

例

2. 函数的调用语法

3. 函数返回值

4. 匿名函数

17. 对象是什么

(2).对象声明语法

(3).查：

(4).改

(5).删

18. 方法：

(1).遍历对象：for in

19. Dom树

(1).Dom对象：将网页变为对象处理

(2). const random3 = Math.floor(Math.random()*list.length) #获取数组随机数

(3). 操作元素内容：

(4).操作元素常用属性

20. 随机数函数：

21.操作元素样式属性

(1).操作className操作css元素属性:

(2).为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

(3). 获取表单里面的值：表单.value

(4). 自定义属性 ：通常以data-开头

22. 定时器：

23. 用户协议：

24. 事件监听

(1).事件监听三要素:

(2). 鼠标触发

键盘触发

表单提交事件：submit:

25.获取事件对象

(1).语法:如何获取

(2).部分常用属性

26. this指向函数调用者

27. display=none //css里面none不用加引号，js.style.display里要加

28. 事件流经过的2个阶段：冒泡和捕获

(1).事件捕获:

(2).事件冒泡：

(3). 阻止冒泡：

29. 事件委托：

30.排他思想：

31. 阻止事件默认行为：

32.页面加载事件:

33. 滚动事件：

33. 页面滚动事件-滚动到指定的坐标

34. 页面尺寸事件

（1).元素尺寸于位置-尺寸

35. 日期对象:

(1).日期对象方法：

(2).时间戳：

(3).获取时间戳的三种方式：

(4).转换公式

(5).日期对象：

(6).日期对象方法：

(7).时间戳：

(8).获取时间戳的三种方式：

36.节点操作：

(1).关系查找节点：父子节点，兄弟节点

(2).子节点查找:

(3).父元素.children

(4).新增节点：

(5).追加节点：

(6).克隆节点

(7).删除节点：

(4). 自定义属性：通常以data-开头

52.change 事件内容发生了变化且失去焦点触发（表单）