菜鸡的求学之路-JavaScript

一只野生的小飞龙

已于 2022-10-18 09:38:14 修改

阅读量189

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-09-04 10:42:49 首次发布

本文链接：https://blog.csdn.net/qq_45404030/article/details/126686350

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript高级程序设计

JavaScript由ECMAScript + DOM + BOM >(核心语言+操作文档方法和接口+操作浏览器方法和接口）
ECMAScript>寄生于指定的生成环境，宿主环境例如Web浏览器 + node(服务器平台)

1.基本数据数据类型和引用数据类型(暂时并不包括es6)
2.for循环的两种形式
3.script的两个属性
4.JavaScript并没有重载
5.浅拷贝和深拷贝
6.typeof和instanceof
7.全局环境，局部环境，变量提升
8.作用域
9.垃圾回收机制
10.数据的检测
11.indexOf和lastIndexOf
12.执行代码的具体时间，起始时间和末尾时间
13.正则表达式new RegExp
14.arguments
15.call,apply
16.工厂模式，构造函数模式
17.监听页面刷新
18.innerWidth，innerHeight，outerWidth,outerHeight
19.Bom
20.事件循环，宏任务和微任务
21.获取自定义属性
22.跳转到指定位置
23.select事件
24.通过maxlength可以设置输入框的固定长度
25.contextmenu
26.继承方式
27.闭包
28.设备事件
29.new一个对象的过程实现

基本数据类型

常用的包括null，undefined，Boolean，String，object，Number(暂时并不包括es6中的两个数据类型），object是引用数据类型。

如果是拷贝基本数据类型的话，可以形成深拷贝，形成一个副本；如果是拷贝引用数据类型的话，那么复制的话只能形成浅拷贝，也就是改变之前或者改变现在的值得时候，这两个值都会发生改变，因为这种复制得话，只是形成了一个对象指针，修改得都是同一个值。
undefined和null十分类似，在==中是true
undefined：通常表示一个数据并没有初始化，所以才会显示这个。
null：如果你需要定义一个空对象的时候，这时候你可以定义这个，他代表着一个空对象指针，还有就是他的数据的前几位代表着数据类型，与object一样，所以也就误打误撞。
Number：他有着Number(),parseInt(),parseFloat()，相比较而言，parseInt更加精确，与此同时parseInt一共可以带两个参数，一个是需要转换的数据，一个是多少进制；而parseFloat并没有第二个参数。Number(空字符串)==>0,而parseInt(空字符串)==>NAN
toString()方法可以将一个数据转换为指定的进制字符串，空格内传入需要转换的进制数。

for循环

for…of（只能用于数组）

const arr = [1,2,3,4]
  for(let x of arr)
  {
    // 代表着数组中每一个具体值(1,2,3,4)
    console.log(x)
  }

for…in（既可以用于数组也可以用于对象）

const arr = [1,2,3,4]
  const arr1 = {
    a:1,
    b:2
  }
  for(let x in arr)
  {
    // 代表着索引值或者键值
    console.log(x)
    //代表着具体值或者对象值
    console.log(arr[x])
  }

script的两个属性

第一个是async，表示立即下载脚本，但是并不影响页面的其他操作，比如下载其他资源或等待加载其他脚本。
第二个是defer，可以延迟到文档完成被解析和显示之后再执行。

重载

它并不会因为函数的参数的长度或者引用的不同而创建尽管名字相同，但是功能不同的函数，他会进行覆盖，后者的函数会覆盖前者的函数。

浅拷贝和深拷贝

浅拷贝：顾名思义，就是浅浅的进行拷贝，比如引用数据类型，我们只是将数据进行了数据得指针指向，而并没有进行副本得创建，所以在其中一个值进行修改得时候，其他拷贝该数据得值也会因此发生变化，所以这种拷贝是不可取得。
深拷贝：比如基本数据类型的值，我们在进行拷贝的时候，是进行了一个副本的创建，两者是没有关联的，修改其中的一个值，并不会发生改变，就目前的理解，我个人觉得我们所创建的值是存放在栈里面，而引用数据类型的内部值是放在堆里面，平常的对于引用数据类型的拷贝，我们可以通过JSON的方式进行深拷贝，或者可以引用underscore或者loadash中里面的深拷贝方法。

typeof和instanceof

对于typeof来说，检测非引用数据类型的时候，十分好用；而检测引用数据类型的时候，instanceof好用，因为instanceof是根据原型链来检测数据类型是否正确，如果用instanceof来检测基本数据类型的值是否属于object的话，他的返回就是false，而typeof就会返回true，因为基本数据类型包括undefined，null，string，boolean，number。对于null来说，如果用typeof来检测的话，就是object，如果用instanceof来检测null是否为object的话，他就会返回false，因为null是基本数据类型不是引用数据类型。

全局环境，局部环境，变量提升

对于web浏览器来说，全局环境就是windows，局部环境，例如函数内部，就是函数内部局部环境。对于var和function来说，存在变量提升，变量提升顾名思义，就是把某个东西提升到最前面，但是他到底提升到哪里呢。对于全局环境下，如果在一个if的语句中，存在一个var x = 10的情况下，他会提升到全局环境下，如果在函数内部存在一个var x = 10的情况下，他也会变量提升，提升到函数内部局部环境中。

作用域

就是简单来说，对于一个城堡，大门并没有开，决定能不能见面，是由内部决定，外部并没有资格，也就是说，内部可以访问外部的变量，而外部并不能访问内部的变量。

垃圾回收机制

垃圾回收机制，如果不主动干预的话，他就是被动的，他回收什么呢？如果在一个函数内部，因为外部并不能访问内部，所以在这个函数结束之后，函数内部的变量将不再被其他人访问，等到一个timing之后，系统就会自动清除这个变量，将内存释放出来。如果你想进行人为的垃圾回收机制的时候，对于web浏览器来说，可以通过**window.CollectGarbage()**来进行主动的clear变量。
对于一些被使用的全局变量，因为对于垃圾回收机制来说，他并不知道你什么什么不用它，所以在你用完之后，将这个全局变量设置成null，进行内存的释放，减少内存，提升优化。

数据的检测

我们正常检测的时候是通过typeof和instanceof，但是有些时候，我们还可以使用数据类型自己自带的方法。比如：数组就可以用Array.isArray()；还可以用**isNAN()**来检测是否为数字。

indexOf和lastIndexOf

他们都可以传两个参数，一个是需要查询的值，一个是查询的起始位置。indexOf是从头开始查，而lastIndexOf是从末尾开始查。

执行代码的具体时间，起始时间和末尾时间

通过Date.now()在需要检测的代码的开头和末尾写上这个代码。
通过+new Date()在需要检测的代码的开头和末尾写上这个代码。

正则表达式

匹配模式共分为g（全局检测），i（不分大小写），m（可以换行继续检测）

最简单的检测方式就是：new RegExp(‘检测规则’,'检测的匹配模式’)
然后通过test方法进行需要内容的检测，如何合法就返回true否则就是false。

function getTime(){
	//acd或者bcd
    const pattern1 = new RegExp("[ab]cd",'gi')
    console.log(pattern1.test('abcd')) //true
  }
  getTime()

arguments

如果你想要指向函数本身的话，可以通过arguments.callee来进行函数的指向(借此可以代替递归当中函数里面的名字)

function getTime(x){
    if(x === 1)
    {
      return 1
    }
    else
    {
    	arguments.callee === getTime
      return x * arguments.callee(x - 1)
    }
  }
  const x = getTime(5)
  console.log(x) // 120

call,apply

call和apply的用处就是修改作用域，两者都能够传两个参数，一个是this，一个是传的参数；call的参数只能一个一个的写，而apply的参数可以写成arguments或者数组的形式。
同时call和apply会自执行一次。

1.function a1(){
console.log(this.x,this.y)
}
a1() // 这里的输出将都是undefined，因为全局环境中并没有x,y
2.function a1(){
console.log(this.x,this.y)
}
const obj = {
x:10,
y:20
}
a1.call(obj)  //这里a1会执行一次，同时作用域变成了obj，因为obj中有x，y，所以就会输出x，y。

工厂模式和构造函数模式

工厂模式：简单来说一个函数，用来解决多个对象的创造的汇总，里面的返回值是一个对象。

function createPerson(name,age,id){
let person = new Object()
person.name = name
person.age = age
person.id = id
return person
}

构造函数模式：单独来创建对象。

function Person(name,age,id){
this.name = name
this.age = age
this.id = id
}

监听页面刷新

可以通过window自带的onunload事件配合sessionStorage来使用，清除和创建和获取sessionStorage的方式来重置一些东西，比如浏览器高度，或者音乐播放器的重置等等。

innerWidth，innerHeight，outerWidth,outerHeight

outerWidth,outerHeight获取的就是该浏览器的大小和高度
innerWidth，innerHeight获取的是页面的大小和高度。

Bom

node接口

nodeName和nodeValue：前者可以获得节点名字，后者可以获得节点里面的值。
childNodes和parentNodes：前者可以获得所有的子节点，后者可以获得父节点。
nextSibling和previousSibling：前者可以获得自己后面的兄弟节点，后者可以获得自己前面的兄弟节点。
append和appendChild：前者可以（），后者可以给自己的子节点添加节点。
insertBefore：可以给自己的指定节点位置添加节点。
cloneNode：可以创建一个节点的副本，同时他还还有一个参数，true代表深复制，false代表浅复制，两者的区别就是能不能复制子节点。
replaceChild和removeChild：前者可以替换节点，后者可以移除节点。

document接口

documentElement和body：获得html标签
URL，domain：前者获得完整的URL，后者获得域名，如果想要将两个域名进行互通，可以将domain设置为相同。

宏任务和微任务

事件循环就是js是单线程，他拥有同步任务和异步任务，首先js是先执行同步任务，同步任务执行完毕之后，再之后异步任务，异步任务又包括宏任务和微任务，宏任务包括定时器等，微任务包括promise对象等，异步任务是先执行微任务再执行宏任务。

获取自定义属性

通过dataset来直接获取自定义属性。

跳转到指定位置

通过scrollIntoView方法直接跳转到。

select

通过选择输入框的内容然后触发事件。
获得选中的指定的内容

change.addEventListener('select',function(e){
      console.log(this.value.substring(this.selectionStart,this.selectionEnd))
  })

maxlength

通过maxlength依次对输入框进行聚焦

<input type="text" value="10" id="add" maxlength="4" autofocus/>
<input type="text" value="" id="add" maxlength="4"/>
<input type="text" value="" id="add" maxlength="4"/>
const change = document.querySelectorAll('input')
  change.forEach((item,index)=>{
    item.addEventListener('input',function(){
      console.log(this.value.length)
      if(this.value.length === this.maxLength)
      { 
        if(index === change.length-1)
          this.blur() 
        else
        {
          change[index+1].focus()
        }
      }
    })
  })

还可以设置min和max和step，进行数值的输入，step如果是5的话，那么就只能输入5的倍数。

contextmenu

目前只有fireFox支持这个

 <div contextmenu="menuId">上下文菜单
    <menu type="context" id="menuId">
      <menuitem label="微信分享"></menuitem>
      <menuitem label="微信分享"></menuitem>
    </menu>
  </div>

继承方式

第一种就是原型链继承：这个就很简单，简而言之就是从原型上面来继承父对象得内容，new 一个父对象，然后子的原型上面挂载着这个构造函数就可以了。

//子对象
function Person(){
    this.x = 10
}
//父对象
function Name(){
  this.y = 20
}
//原型上挂载这个父对象，实现继承。
Person.prototype = new Name
const x = new Person()

第二种就是构造函数继承：这个也很简单，就是通过两个构造函数，然后把需要继承的内容通过call来进行实现。

//需要被继承的构造函数
function a1(){
    this.z = 20
  }
function a2(){
//继承了a1这个构造函数
 a1.call(this)
 this.h = 30
}
  const ee = new a2()
  console.log(ee.z)

第三种就是组合继承：通过原型链继承和构造函数继承，把共用的部分放大原型链上面，不共用的地方放到构造函数里面。

function a1(){
    this.z = 20
  }
  function a2(){
    a1.call(this)
    this.h = 30
  }
  a2.prototype.a3 = function(){
    console.log(this.h)
  }
  const ee = new a2()
  ee.a3()

第四种就是类继承：通过class来创建一个特殊函数，基准还是以原型为主。

闭包

简而言之，就是另一个函数可以使用这个函数里面的变量。

1.我们通常使用的闭包如同：
function a1(){
let x = 10
return a2(){
console.log(x)
}
}
2.自执行也是一种闭包
 for (var i = 1; i <= 5; i++) {
  (function(j){
    setTimeout(function(){
      console.log(j)
    },i*1000)
  })(i)
}

设备事件

我们可以通过原生js，获取手机是水平的还是垂直的，通过orientationchange事件和orientation属性来获取。
触摸事件 ==> touchstart（点击屏幕），touchmove（在屏幕上滑动），touchend（离开屏幕）。
手势事件 ==> gesturestart(一个手指已经在屏幕上，又添加了一个手指在上面滑动,gesturechange（另一个手指在滑动）,gestureend.（手指离开）。