前端JS深入理解-CSDN博客

本文链接：https://blog.csdn.net/zc_ad/article/details/84328603

最近公司要使用前端，因此再次学习一遍。此笔记是看《疯狂HTML 5+CSS 3+JavaScript讲义》后的个人笔记

#<noscript>元素
用来向不支持JS或禁止了JS的浏览器显示提示信息
eg:
<body>
<noscript>
<h1>this is the test!</h1>
</noscript>
</body>

#js数据类型和变量

隐式定义变量：直接给变量赋值
现式定义变量：使用var关键词定义变量

eg:
<script type="text/javascript">
a = "this is test!";
alert(a);

var b;
b = true;
</script>

var a, b=0,k=1;
var a=b=c=7; //a b c都为7

#js的类型转换（）
1.自动转换

2.强类型转换
toString();
parseInt();
parseFloat();

3.使用parseInt()、parseFloat()时
字符串值:如果字符串是一个数值字符串，则可以转换成一个数值，否则将转换成NaN
undefined,null,布尔类型及其他:一律转为NaN

4.使用toString()函数时
结果全部是object

#变量作用域
在全局范围定义的变量(不管是否使用了var),不使用var定义的变量都是全局变量
eg:
<script type="text/javascript">
var a = "test";
function myfun(){
age = 20;
var isMale = true;
}
alert(test + ":" + age + ":" + isMale)
</script>
在此js中全局变量有：a,age。isMale是局部变量

#变量提升
是指变量申明总是会被解释器“提升”到函数的顶部
eg:
<script type="text/javascript">
var a = "test";
function myfun(){
document.writeln(a);
if(false){
var a = "mark";
}
}
</script>
#此时打印的是undefined，因为函数内变量提升
等同于：
<script type="text/javascript">
var a = "test";
function myfun(){
var a;
document.writeln(a);
if(false){
a = "mark";
}
}
</script>

#let变量，此变量与java中的变量效果一样
1.与var不同，有作用域。eg:在if中定义的变量，在if外不能使用
2.var定义的全局变量会自动添加全局window对象的属性，let不会
3.let变量不会提前预装

#使用const定义常量
使用const定义的常量只能在定义时指定初始化值（且必须指定初始值）。使用const声明常量以后不允许改变常量值
eg:
const MAX_AGE = 120;

#基本数据类型
数值类型 int float
var a = 5e3; //代表5乘以10的3次方
var b = .45; //代表数值是0.45
当表示的数超出范围，会出现两个特殊值：Infinity(正无穷大)，-Inifinity(负无穷大),eg：var x = 1e300;
当Infinity与-Inifinity 运算时，会得到另一个特殊值 NaN,只有通过isNaN()函数来判断是否是NaN
布尔类型 true/false
字符串类型
只有字符串类型，没有字符类型变量
函数 String() 构造器
chartAt()
length
toUpperCase()
toLowerCase()
fromCharCode() 静态方法，直接通过String类调用，将一系列Unicode值转换成字符串
indexOf()
lastIndexOf()
subString() 返回字符串中某各个字符串 ,从start(包括)开始，到end(不包括)结束
slice() 返回字符串中某各个字符串可以接收负数，当为负数时，从右边开始查找
match() 使用正则搜索目标字符串匹配到了返回字符串
search() 使用正则搜索某字符串匹配到了返回字符串索引
concat() 将多个字符串拼接一个字符串
split()
replace()

undefined类型用于确定一个已经创建但没有初始值的变量没有变量设置或属性不存在
null类型用与表明某个变量的值为空有值，只是其值为null

数值：
Number.MAX_VALUE 数值类型变量允许的最大值
Number.MIN_VALU ...最小值
Number.MAX_SAFE_INTEGER Infinity(正无穷大)
Number.MIN_SAFE_INTEGER -Infinity
Number.NaN NaN（非数）

字符串：
var a = "hellojavascript";
a.indexOf("llo");
a.indexIf("llo",3); //跳过前三个，从第四个字符开始查找
a.subString(0,4);
a.slice(0,4);
a.slice(-3,-1);

##正则表达式
x 字符x
\0mmm 八进制数
\xhh 十六进制值
\uhhhh 十六进制值表示Unicode字符
\t 制表符
\n 换行符
\r 回车符
\f 换页符
\a 报警符
\c Escape符
\cx x对应的控制符
. 任意字符
\d 0-9数字
\D 非数字
\s 空白字符，包括空格，制表，回车，换行等
\S 非空白字符
\w 单词字符 0-9 字母下划线
\W 非单词字符
[] eg:[0-9a-Z]
$ 结尾
^ 开头

? 指定前面子表达式可以出现零次或一次
* ...零次或多次
+ ...一次或多次
{m,n} 最少m，最多n
| ((abc|egf)) 可匹配abc或egf

test()方法判断正则是否匹配某个字符串
replace()方法

eg:
var s = "hello this is javascript";
s.replace(/(^\s*)|(\s*$)/g,"000");

#复合类型
Object 对象
Array 数组
Function 函数

Error 错误类
Math 数学类
Number数值类
String字符串类

#Array

##定义赋值
var arr = [3,4,5];
var arr = []; //创建一个空字符串
var arr = new Array(); //创建一个空字符串
arr[0] = "hello";
arr[1] = true;
arr[3] = 23;

##用做栈使用
push(ele) 元素入栈
pop() 出栈
unshift(ele) 元素进队列时，返回数组长度
shift() 出队列时，返回数组长度
eg:
var stack = [];
stack.push("1");
stack.push("2");
stack.push("3");
stack.pop();
var queue = [];
queue.unshift("1");
queue.unshift("2");
queue.shift();

#其他方法
concat(value,...) 为数组添加一个或多个元素
join() 将数组的多个元素拼接成一个字符串，并返回
reverse() 反转字符串
slice(start,[end]) 截取数组在start和end之间子数组，如果数值为负值，则从右边开始
sort([functiom]) 排序
splice(start,deleteCount,value,...) 截取数组从start开始，deleteCount个元素，在将多个value追加到数组中，并截取要删除的字符串

eg：
var a = [1111,2222,3333];
var b = [4444,5555,6666];
a.concat(4,5);
a.concat(b);
a.splice(2);
a.splice(1,2);
a.spice(0,2,777,8889,9999);

##位运算符
& 按位与 1 & 0 = 0
| 按位或 1 | 0 = 1
~ 按位非先加一，然后正负转换
^ 按位异或 0 ^ 1 = 1
<< 左位移运算符
>> 右移位运算符
>>> 无符号右移运算符

eg
5 & 4 需要先转换为二进制，每位进行按位与运算

##加强的赋值运算符
&= x = x & y;
<<= x = x<<y;
...

##比较运算符
== 等于前后两个值相等，则返回true
!=
=== 严格等于，前后两个值相等，且类型相同，返回true
!== 严格不等于，两个变量的值不相等，或数据类型不同，返回true
...
...

##逻辑运算符
&&
|| 短路或
!
| 不短路或

##三目运算符
?:

##逗号运算符
多个表达式并排在一起，整个表达式返回最右边的值
var a,b,c,d;
a = (b=5, c=7, d=20); //a的值为20

##void运算符 (不常用)
用于强调指定表达式不返回值
a = void(b=5, c=7, d=20); //a的值为undefined

##typeof和instanceof运算符
typeof返回的是变量的数据类型：
undefined，null,boolean,number,string,object,function
eg:
var a= 5;
typeof(a);

instanceof 用于判断某个变量是否为指定类型实例
eg:
var a = [4,5];
alert(a instanceof Array);

##异常语句抛出
js所有的异常对象都是Error对象
throw new Error(errorString);

##异常捕捉语句
不能有多多个cache
eg:
try{
var a = 40;
if(a > 5)
throw new Error("this is error!");
}cach(e){
alert(e.message); //通过e.message获取错误信息
}finally{
...
}

##with 语句 (左右不大)
用于避免重复书写同一个对象
document.writeln("1");
document.writeln("2");
document.writeln("3");
可改为
with(document){
writeln("1");
writeln("2");
writeln("3");
}

#switch, while, do while, for, for in
do{
...
}while(expression);

for(;;){...}

for(x in object){...}

##continue,break
continue 只是终止本次循环

#js具有"函数提升"特性
##函数定义

1.定义命名函数
function hello(name){...};

2.定义匿名函数
var f = function(name){...};
f("tis is test");

3.使用Function类匿名函数
var f = new Function("name",
"alert('this is one!');"
+"alert('this is two');";
);

##局部函数
function outer(){
function inner(){...}
inner();
}

##函数、方法、对象、变量、类
在js中，函数也可以当做类使用

1.
var hello = function(name){
return name + "你好";
}
alert(hello("tom")); //打印的是一个字符串
alert(window.hello("tom")); //其实声明式方法附加在window对象上

2.自定义对象的想写
var hello = function(name){
this.name = name;
this.info = function(){
document.writeln(this.name);
}
}
var h = new hello("tom");
alert(h); //打印的是一个对象
alert(h.info()) //调用的是hello的info方法。

##函数的实例属性和类属性 (这个不错，看看)
局部变量：在函数中以var声明的变量
实例变量：在函数中以this前缀修饰的变量实例属性属于单个对象，必须通过对象来访问
类变量：在函数中以函数名前缀修饰的变量类属性属于整个类本身的，必须通过类来访问

eg:
function Person(name,age){
this.age = age;
Person.name = name;
var from = "zh";
}
var p = new Person("zhangsan",18);
document.writeln(p.age);
document.writeln(p.name); //undefined，因为此属性是类来访问
document.writeln(Person.name);
document.writeln(p.from); //undefined，因为form是方法中的局部变量

##函数调用的三种方法
1.直接调用函数
p.walk();

2.以call()
call()调用函数的语法格式：函数引用.call(调用者，参数1，参数2,...)
eg：
var each = function(array, fn){
for(var index in array){
fn.call(null,index,array[index]);
}
}
each([1,2,3,4],function(index,ele){
document.write(index+":"+ele);
});

3.以apply()方法调用函数
apply()函数的语法格式：函数引用.apply(调用者,[参数1，参数2,...])
与call()区别：
1.通过call()调用函数时，必须在括号中详细列出每个参数
2.通过apply()动态调用函数时，需要以数组形似一次传入所以调用参数
eg:
var Person(name,age){
alert(name+":"+age);
}
Person.call(null,"Tom",13);
Person.apply(null,"Tom",14);

##函数提升
console.log(add(2,3));
function add(a,b){...} //不会报错，因为函数提升

console.log(add(2,3));
var add = function(a,b){...} //此时会报错，因为定义的是匿名函数，只会将var add ;进行提升，后面函数没有提升

console.log(add(2,3));
add = function(a,b){...} //不会报错，因为add没用var修饰，是全局函数，所以不会报错

##箭头函数 (p$422 关于this)
与其他兰姆达写法一致，主要是简化函数写法
格式: (param1,param2,...) =>{....,...}

当只有一条执行语句，可简化为：
(param1,param2,...) =>expression 等价于 function(param1,param2,...){return expression;}

如果函数通过new调用函数创建对象，那么该对象函数中的this代表所创建的对象
如果直接调用普通函数，那么函数中的this代表全局对象(window)

如果箭头函数在一个方法内，在箭头函数中使用this，始终代表箭头函数的上下文(不管类是否是new出来的)
如果在全局范围内定义箭头函数，那么箭头函数的上下文就是window本身
eg:
function Person(){
this.age = 0;
() => {
console.log(this === window);
this.age ++;
}
}
var p = new Person();
console.log(p.age); //此时age为0，因为在箭头函数中的this代表的是箭头函数的上下文

var f = () => {return this;};
console.log(f() === window); //输出为true，因为是在全局中定义的箭头函数

##函数其他
1.当通过实参调用函数时，传入函数里面的并不是参数本事，而是参数的副本，
因此在函数中修改参数值并不会对参数有任何影响

2. 如果定义两个函数，他们的形参列表并不相同，这会导致后面的函数覆盖前面的函数
eg:
function test(){...}
function test(name){....} //js中，函数名是函数的唯一表示，后面的函数会覆盖前面的函数

3.“鸭子类型”:
如果弱类型语言的函数需要接受参数时，则应该先判断参数类型，并判断参数是否包含了需要访问的属性方法，
只有都满足了条件，程序才开始处理调用的属性方法。
eg:
function changeAge(person){
if(typeof person = 'object' &&typeof person.age == 'number'){
...
}
}

4.JS中访问对象的属性时，不仅可以通过obj.propName的形式，也可以采用obj[propName]的形似
eg:
alert(p[name]);

5.JS允许自由地为对象增加属性和方法，
当程序为对象的某个不存在的属性赋值时，即可认为是为该对象增加属性
eg:
var p = {};
p.age = 30; //添加属性
p.info = function(){ //添加方法
alert("this is the tst!");
}

6.不要在类中直接定义函数，可以使用prototype属性，伪继承机制（p432）
eg:
function Person(name,age){
this.name = name;
this.age = age;
this.sayHello = function(){
console.log(this.name+",this is the test!");
}
}
Person.prototype.walk = function(){
document.writeln("name:"+this.name+":age:"+this.age);
}
var p = new Person("TTR",23);
p.walk();

7.构造器实现伪继承
eg:
function Person(name,age){
this.name = name;
this.age = age;
this.sayHello = function(){
console.log(this.name+",this is the test!");
}
}
function Student(name,age,grade){
this.temp = Person; //定义一个实例引用Person类
this.temp(name,age); //调用Person类的构造器
this.grade = grade;
}
Student.prototype.intro = function(){console.log(this.name+":"+this.greade);}
var stu = new Student("张三",29,"三年级");
stu.sayHello();
stu.intro();
consle.log(stu instanceof Person); //false，因为是伪继承

8.使用apply或call实现伪继承
function Person(name,age){
this.name = name;
this.age = age;
this.sayHello = function(){
console.log(this.name+",this is the test!");
}
}
function Student(name,age,grade){
//Person.call(this,name,age); //通过call实现伪继承
Person.apply(this,[name,age]); //通过apply实现伪继承
this.grade = grade;
}
var stu = new Student("张三",29,"三年级");
stu.sayHello();
stu.intro();
consle.log(stu instanceof Person); //false，因为是伪继承

##创建对象
使用new关键字调用构造器创建对象
使用Object类创建对象
使用JSON类穿建对象

1.使用new创建..

2.使用Object创建对象
var obj = new Object();
obj.name = "战术"; //为obj实例动态添加属性
obj.sayHello(){...} //为obj实例动态添加方法

3.使用json创创建对象
var p = {
name : 'tom',
gender : ‘male’,
info : function{
console.log("this is the info function!");
}
};
alert(p);

var a = new Array('1','2'); 相等于 var a = ['1','2'];

###DOM编程

#访问HTML元素
1.根据ID访问HTML元素
2.根据CSS选择器访问HTML元素
3.根据节点关系访问HTML元素

#1.根据ID访问HTML元素
方法:
eg：
var a = document.getElementById("a");
var html = a.innerHTML;
var value = a.value;

#2根据CSS选择器访问HTML元素
Element querySelector(selectors): 返回HTML文档中第一个符合选择器参数的HTML元素
NodeList querySelectorAll(selectors):返回所有符合CSS选择器的HTML元素
eg:
document.querySelector("#a").innerHTML;

var divs = document.querySelectorAll("#b");
for(var i in divs){
divs[i].innerHTML = "this is the test";
}

#利用节点关系访问HTML元素
parentNode
previousSibing 当前节点的前一个兄弟节点
nextSibing 当前节点的下一个兄弟节点
childNodes
getElementByTagName(tagNames) 返会当前节点的具有指定标签的所有子节点
firstChild
lastChild

eg:
cur.parentNode.firstChild.nextSibling;

#访问表单控件
action
elements 返回所有控件的数组
可以通过下面方法进行获取单个元素
fromObj.elements[index]
fromObj.elements['elementName']
fromObj.elementName
length 表单控件的个数
method GET/POST
target _self/_paremt...
reset() 重置表单
submit() 提交表单
eg:
<from id="f" action="" medthod="get">
<input name="pass" type="text"/>
...
</form>
document.getElementById('f').elements[0].value;
document.getElementById('f').elements['pass'].value;
document.getElementById('f').pass.value;

#访问列表框、下拉菜单的选项
form 返回他们表单对象
length
options 数组
selectedIndex 返回被选中的索引
type 是否允许多选.select-multiple/select-one
select.options[index] 返回第index+1个选项
defaultSelected 是否默认被选中
index
form
text
value
eg:
document.getElementById('#list').options[0];

#访问表格子元素
caption
rows 返回表格里的所有表行
tBodies <tBody>数组
tFoot
tHead
table.rows[index] 返回该表格第index+1行的表格行
cells 表格行内所有的单元格组成的数组
rowIndex 表格行在表格内的索引
sectionRowIndex 表格行在其所在元素(<tbody>、等元素)的索引
cellindex
eg：
document.getElementById('#table').caption.innerHTML;
document.getElementById('#list').row[0].cells[1].innerHTML;

##修改HTML元素
innerHTML
value
style 修改css样式
options[index] 指定列表项赋值，可改变列表框、下拉菜单的执行列表项

##增加HTNL元素
1.创建或复制节点

document.createElement("div") //创建Tag标签对应的节点

#复制节点
Node cloneNode(boolean deep): 复制当前节点
true:表示复制当前节点的同时，复制改节点的全部后带节点
false:仅复制当前节点
eg:
var formObj = document.getElementById('#table').cloneNode(false);

2.添加节点
appendChild(Node newNode)
insertBefore(Node newNode,Node refNode)
replaceChild(Node newChild,Node oldChild) :将oldChild替换成newChild节点

##为列表框、下拉菜单添加选项
add(HTMLOptionElement option,HTMLOpionElement before)
如果想在option选项添加到最后，则将before指定为null即可
eg:
var a = document.createElement("select");
var op = document.createElement("option");
a.dd(op,null);
a.size = 5;

或：new Option(text,value,defaultSelected(默认是否选中),selected(该选项当前是否被选中));

##动态添加表格内容
insertRow(index) 在index处插入一行
createCaption()
createTFoot()
createTHead()
insertCell(long index) 在index处创建一个单元格，返回新创建的单元格

##删除HTML元素
1.删除节点
removeChild(oldNode)
eg：
<div id="test"></div>
var body = document.getElementById('#body');
var div = document.getElementById('#test');
body.remoChild(div);

2.删除列表框、下拉菜单的选项
remove(long index)
eg:
<list id="show">...</list>
var show = document.getElementById('#show');
show.remove(3);

##删除表格的行和单元格
deleteRow(long index) : 删除表格中index索引出的行
deleteCell(long index)

##使用window对象
方法：
alert()
confirm("this is test")
prompt("your name","")
close() 关闭窗口
focus() blur() 让窗口获得焦点、失去焦点
moveBy() moveTo() 移动窗口
open(url,"_self",....) 打开一个新的顶级窗口
print() 打印当前窗口或Frame
resizeBy() resizeTo() 重设窗口大小
scrollBy() scrollTo() 滚动当前窗口中的HTML文档
setInterval("code",interval) clearInterval(timer) 设置，删除定时器
执行多次。第一个参数指定方法，第一个指定重复间隔
eg:
var getName = function(){...}
var timer = setInterval("getName();",1000); //设置定时器
clearInterval(timer); //清楚定时器
setTimeout("code",interval) clearTimeout() 设置，删除定时器
执行一次第一个指定方法，第二个指定延迟时间
属性：
closed 是否关闭
defaultStatus status 返回浏览器状态栏的文本
document 该窗口内装的HTML文档
close() 结束一个通过open方法打开的document对象
open() 打开一个document对象
write()
writeln()
属性：
images
all 所以子元素
forms 所以form的集合
title
cookies max-age:最长有效时间，expires过期时间，path：Cookie路径，domain:Cookie属于哪个域，secure:Cookie的安全域
eg:document.cookie = "name=xichuan;max-age="+(60*60*24*365);
...
...
history 历史记录
back() 后退上一个浏览页面
forward()
go(intValue)
pushState(data,title,url) //添加状态
replaceState(data,title,url) //替换状态
location 返回该窗口装载的HTML文档的URL
##访问页面URL
location对象下的属性
hostname
href
host
port
pathname
protocol

eg：
var loc = window.location;
for(var propname in loc){...}

name 窗口名字
navigator
appName 返回浏览器的内核名称
appVersion 浏览器当前的版本
platform 返回浏览器所在的操作系统
screen 返回当前浏览的屏幕对象
width
height
colorDepth 屏幕色深
eg:window.screen.width
self 自身
top

##navigator H5新增的geolocation属性(p480) 获取浏览者地理位置（先不了解）

##navigator 获取电池信息（p484）
eg：
navigator.getBattery().then(function(battery){
battery.charging;
...
});

##桌面通知 Notification（p476）
步骤：
1.判断或请求用户允许桌面通知的权限
2.创建Notification对象

dir 方向
auto(默认) ltr rtl
lang
badge 徽章
body
tag 通知的唯一标示
icon
image
data
vibrate 是否激活震动
renotify 是否取代旧通知
reauireInteraction
error
click
close
show

eg：
if(!"Notification" in window){ //判断是否支持通知
...
}
else if(Notification.permission == "granted"){ //已授权
let fkNotify = new Notification("new toice",{icon:"1.gif"});
}
...
...

##H5新增的浏览器分析 window.perfomance （p493）

###事件处理机制

#绑定JS对象属性
eg:
<form id="f" name="register" action="#"></form>
document.forms[0].onsubmit = check;

#addEventListener 与attachEvent
1.
objectTarget.addEventListener("eventType",handle,captureFlag);
参数一:事件类型字符串(click...等)
参数二:事件处理函数
参数三:用于指定监听事件传播的哪个阶段(true监听捕获阶段，false监听冒泡阶段)
objectTarget.removeEnevtListener("eventType",handle,captureFlag);

eg:
document.getElementById("test").addEventListener("click",showName,false);
function showName(){...}

事件Event提供一个eventPhase属性
1.Event.CAPTURING_PHASE : 该事件正处在捕获阶段，该事件正在沿着父元素逐层向事件目标传播
2.Event.AT_TARGET : 事件已经达到目标
3.Event.BUBBLING_PHASE : 该事件正处在冒泡阶段，该事件正在沿着事件目标逐层向父元素传播

2.
objectTarget.attachEvent("enevtTypeWithOn",handler);
参数一：on事件类型(onClick...等)
参数二：事件处理函数
objectTarget.detachEvent("enevtTypeWithOn",handler);
eg:
document.getElementById("test")attachEvent("onClick",showName);
function showName(){...}

var clickHandler = function(event){
event = event || window.event;
if(event.target){ //返回触发事件的事件目标
alert()event.tartget.innerHTML;
}
}
document.getElementById("a").onclick = clickHandler;

##使用返回值取消默认行为:click,dragdrop(拖动事件)，keydown
<a href="baidu.com" οnclick="return false;"/>
或
<a href="baidu.com" οnclick="return confirm('are you sure?');"/>

##html元素触发事件方法
click()
blur()
focus()
select()
submit()
reset()

var form = document.form[0];
form.submit(); //form提交表单

##阻止事件传播
event.preventDefault(); //取消默认事件的默认行为
event.stopPropagation(); //取消事件传播

##转发事件（p519）
target.dispatchEvent(Event event);

github上有我更多的笔记:Raray-chuan (兮川) · GitHub,欢迎stars与following，如果有问题可以在issue中向我咨询