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或者bcdconst 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 === getTimereturn 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.（手指离开）。

new一个对象的过程实现

首先应该创建一个空对象，然后this指向这个空对象，同时继承他的原型。
往里面添加属性和方法
this指向这个新的对象

菜鸡的求学之路-JavaScript相关推荐

一个菜鸡的ACM之路
花絮做为一个大三计软狗,那么菜,打完19年的区域赛,也没时间打20年的区域赛了吧.这个学期,是我的第一次,也是最后一次,打CCPC和ICPC,忙前忙后,共打了3场:打完后,又去赶各种死亡DDL:DD ...
Android菜鸡的提升之路---自闭症儿童游戏的实现
最近花了几天时间写一个帮助自闭症儿童的小项目,项目主要包括4个小游戏,实现的逻辑不难,没太多技术含量,但是有一些小知识点,相当于汇总一下. 写在最上面:当你的项目需要加载很多图片的时候,千万不要在xm ...
菜鸡毕业路：量化策略（二）JoinQuant入门
菜鸡毕业路:量化策略(二) 学习目标量化入门(一) 学习计划学习目标量化策略学习主要分为一下几个方向: 1) python基础,爬虫 2)机器学习深度学习理论基础 3)常用的量化模型 4)数据库 ...
【实习之路】投了109份简历，幸运的大二菜鸡终于拿到欢聚时代的offer了！！
文章目录前言正文面试过程笔试情况一轮面试: 二轮面试: 三轮面试: 发放offer 总结前言我是一名普通3本(本地叫2本,外地叫3本)的大二(准大三)学生,学校是一个民办独立院校,软件工 ...
Android菜鸡的苦逼求职路
转载请注明出处. 本文主要包含以下几部分内容: 写在前面准备工作面试进行时总结写在最后 ##1.写在前面本人2014年10月底以菜鸡的水平进入薯片公司手机团队做Android 应用开发.20 ...
双非菜鸡的春招之路！顺丰，vivo，携程，字节跳动，希望我的面经对你们有帮助！
前言本人双非本科,物理专业,无实习经历,菜鸡一枚. 差不多3月初开始投递简历,总共30余家公司,简历没过的有十家左右,3月中旬陆陆续续参加笔试,面试.一些笔试因为时间冲突或者后续流程等太久,就没有参 ...
分享四个体验不错的云游戏平台—网易云游戏、腾讯云游戏、菜鸡云游戏、格莱云游戏
随着科技的发展,云游戏这个幻想中的事物开始浮现在大家的眼前,越来越多的厂商开始布局云游戏平台.这次,我就来分享几个还算不错的云游戏网站.本次没有体验谷歌云游戏,主要原因是目前谷歌云游戏还只在少数国家开 ...
一个一年工作经验的菜鸡程序员的一年总结
坎坷并且顺利的一年前言一.为什么会干这一行? 二.入职 1.被大佬照顾的小白 2.被浪潮拍死的弄潮儿 3.重新出世的大菜鸡回顾以前展望未来前言刚开始准备投入这个行业是2020年8月的时候,当 ...
如何申请博士----一只科研弱鸡的上岸之路
先讲一下我自身的经历,2018年硕士毕业后,就职京东,干了一年多程序员:一个偶然的机会到高校成为了专任教师,在高校工作了两年多:2021年下半年一直在准备申请博士,直到今年三月份尘埃落定,到现在已 ...
ctfshow菜鸡杯部分wp
参加了ctfshow组织的菜鸡杯,自我感觉还是比较不错的,让自己学习了好多新东西.还有感谢师傅们的耐心解答.真的真的感谢. 1. misc3 这道题考察的是jsfuck编码(参考),直接将编码放入浏览 ...

菜鸡的求学之路-JavaScript