JS相关

最新推荐文章于 2023-02-02 13:45:06 发布

啊姆架构狮

最新推荐文章于 2023-02-02 13:45:06 发布

阅读量246

点赞数

分类专栏：前端相关文章标签： javascript

本文链接：https://blog.csdn.net/drakelovejoker/article/details/102850556

版权

前端相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS语法：

可以给函数定义属性，当函数需要一个"静态变量"，可以给函数一个属性为该变量，这样就避免了杂乱无章的全局变量

给sort()传一个函数参数：

引用类型与基本包装类型的主要区别就是对象的生存期。使用 new 操作符创建的引用类型的实例，
在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象，则只存在于一
行代码的执行瞬间，然后立即被销毁。这意味着我们不能在运行时为基本类型值添加属性和方法。如下面的例子：

var s1 = "some text"; 
s1.color = "red"; 
alert(s1.color);   //undefined

问题的原因就是第一行创建的 String 对象在执行第二行代码时已经被销毁了。
第三行代码又创建自己的 String 对象，而该对象没有 color 属性。

全局变量不能通过 delete 操作符删除，而直接在 window 对象上的定义的属性可以。如例子DeleteOperatorExample01
fn()：方法可以输入任意参数，通过arguments（类数组对象，树组的用法，但没有树组的方法）
函数内预编译：创建AO对象，先创建形参和局部变量声明，再给形参变量赋值，然后再解析函数声明（赋值过程同名变量会被覆盖）
子函数在外部被调用，就产生了闭包。
sessionStorge , localStorage：关闭窗口后失效、永久或代码删除或者浏览器删除
xhtml和html什么区别：

主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页；xhtml语法更加严格。

严格模式的js运行和排版是按照浏览器支持的最高标准的。
set是一个集合允许存储任何类型的唯一值，无论是原始值还是对象引用

JS操作表单可以：选择文本，以及选择文本事件；
通过设置keypress 事件屏蔽输入（过滤输入，也可以用pattern 属性(HTML5)用正则表达式过滤需要的内容）；输入是否符合规则可以用checkValidity()方法检测；validity 属性返回为什么字段有效或无效对象。
复制、剪切、粘粘事件；
必填字段（输入框必须填写内容）；输入类型（如确保输入内容是邮箱格式）

事件绑定（.addEventListener）和普通事件（.onclick ）有什么区别。IE和DOM事件流的区别

本地对象，内置对象（global和Math）和宿主（操作系统浏览器）对象（BOM、DOM）

0 == ‘’;：为true（也 == false和[]），所以应该用===（另外2 == true; 为false）

iframe的优缺点？
解决加载缓慢的第三方内容如图标和广告等的加载问题
缺点：1.iframe会阻塞主页面的Onload事件
2. 即时内容为空，加载也需要时间
3. 没有语意，无法被搜索

脚本加载：普通：阻塞直至脚本加载执行完毕（下载过程也会被阻塞）
asyncsrc=“xxx.js”：并行加载执行（下载完成立即加载，注意依赖关系的脚本）
defer src=“xxx.js” ：加载后续文档元素的过程并行加载，所有元素解析完成之后执行（DOMContentLoaded事件触发之前完成，没什么必要，放在body后面就行）

不同浏览器对音视频文件解码支持不同，可以用canPlayType()检测处理

try { return 2; }querySelector
catch (error){ return 1; }
finally { return 0; } //无论有无错误都return 0；

减少页面加载时间的方法：
优化图片，gif颜色稍，尺寸小
优化CSS，可以共用就共用，不要那么多单独样式
标明高度和宽度（撑开的话要先加载计算盒子内容，有图片的话会慢很多）

"attribute"和"property"的区别

虽然函数本质是对象，但： fn(x){ typeof x; }
fn( 函数 ) //打印function
fn( new 函数() ) //打印object

for in和for of：遍历数组（前者得索引号，后者得成员）；
遍历对象：前者遍历对象所有可枚举属性（包括继承的，得属性名）；后者遍历对象需要给对象增加一个遍历器Iterator属性

callee和caller： callee是arguments的属性，指向拥有这个arguments 对象的函数，caller是调用当前函数的函数的引用

cookie优缺点待整理

属性与方法

菜鸟网站

array方法：

shift()：取出第一位元素； unshift()：插入元素到首位，返回插入后数组长度
sort()：（高程P93）
reverse() ： 倒排
concat()：，先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾
slice()：接受一或两个参数，返回数组的起始位置到结束位置的成员（一个参数返回起始位置至最后一位）（没有参数返回整个数组）
splice()：作用是删除、插入、替换成员。（高程P113）
indexOf()和lastIndexOf()：用===方式查找数组成员位置（高程P113）
every()和some()：传入一个返回值是bool类型的方法，every每个成员传参进方法都返回true则返回true，some有一个返回true则返回true
filter()：和上诉一样传方法，返回一个传进方法能返回true成员的数组
map()：传入一个对成员进行操作的函数，返回每个成员操作后的数组（不会改变原数组）
forEach()：和map相似。但不返回一个数组，直接修改数组
reduce()和 reduceRight()：归并数组，分别是从一个个遍历到最后和最后遍历到第一个（P115）
.join()：根据参数将数组变成字串。
from()： 将对象转成数组;
Array.of()： 根据参数转成数组，如Array.of(1, 2, '123', false)
fill()： 根据参数填充数组，二三参数是起始结束位置
includes()： 判断一个数组是否包含一个指定的值。
keys()、values()、entries()： 遍历数组，根据键名、键值、键名键值遍历（返回一个数组，成员分别是这三种）.
find()： 根据参数(回调函数) 按顺序遍历数组 当函数返回true时 就返回当前遍历到的值，失败返回undefined，  findIndex()，则返回下标，失败返回-1

data方法:

data()传人UTC毫秒数表时间
parse方法接受一个表示时间的字符串，返回毫秒数，无法表示则返回NaN
data()传入字符串默认调用parse方法
getFullYear()： 获取四位数年份（number类型）

不同日期对象可以比较日期早晚

RegExp类型:

3个标志复制：
g：表示全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止；
i：表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写；
m：表示多行（multiline）模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。

用法、规则：

在这里插入图片描述
/s表示匹配非空格的特殊字符
[ xxx ] 匹配[ ]中的任一字符
语法：菜鸟正则表达式语法

示例

/^([1-9]\d*)/ ：匹配所有数字开头的字串

/^1[3-5789]\d{9}$/		//匹配手机号， {9}$限制长度必须有^开头

^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$		//匹配邮箱

/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,24}$/	//匹配包含大小写、数字8-24位字符
//?= 预查找， 不加.*会从匹配到的字符后面继续匹配，如删掉第一个.*，那么大写和数字字符必须在小写的后面找，[^]是必须的。

RegExp对象属性方法（正则表达式相关）:

global：布尔值，表示是否设置了 g 标志。 （例子：RegExpExecExample02）
ignoreCase：布尔值，表示是否设置了 i 标志。 
lastIndex：整数，表示开始搜索下一个匹配项的字符位置，从 0 算起。 
multiline：布尔值，表示是否设置了 m 标志。 
source：正则表达式的字符串表示，按照字面量形式而非传入构造函数中的字符串模式返回。
input  			$_  最近一次要匹配的字符串。Opera未实现此属性 
lastMatch  		$&  最近一次的匹配项。Opera未实现此属性 
lastParen  		$+  最近一次匹配的捕获组。Opera未实现此属性 
leftContext  	$`  input字符串中lastMatch之前的文本 
multiline  		$*  布尔值，表示是否所有表达式都使用多行模式。IE和Opera未实现此属性 
rightContext  	$'  Input字符串中lastMatch之后的文本

公式：长属性名短属性名

.test()：表示是否匹配成功
exec()：接受一个参数用来匹配：

var text = "mom and dad and baby"; 
var pattern = /mom( and dad( and baby)?)?/gi; 
var matches = pattern.exec(text); 
alert(matches.index);     // 0 
alert(matches.input);     // "mom and dad and baby" 
alert(matches[0]);        // "mom and dad and baby" 
alert(matches[1]);        // " and dad and baby" 
alert(matches[2]);        // " and baby"

var text = "this has been a short summer"; 
var pattern = /(.)hort/g;    
	if (pattern.test(text)){ 
	    alert(RegExp.input);            // this has been a short summer 
	    alert(RegExp.leftContext);      // this has been a             
	    alert(RegExp.rightContext);     // summer 
	    alert(RegExp.lastMatch);        // short 
	    alert(RegExp.lastParen);        // s 
	    alert(RegExp.multiline);        // false 
	}

Number类型方法：

toString()：还可以为 toString()方法传递一个表示基数的参数，告诉它返回几进制数值的字符串形式，
toFixed(): 按指定小数位返回数值的字符串
toPrecision() : 按固定格式返回数值字符串

String方法 :

charAt() : 返回指定位置的一个字符
charCodeAt() : 返回指定位置的一个字符编码
concat() : 拼接字符串
	var stringValue = "hello world"; 
alert(stringValue.slice(3));          //"lo world" 
alert(stringValue.substring(3));      //"lo world" ，返回副本
alert(stringValue.substr(3));         //"lo world" 
alert(stringValue.slice(3, 7));       //"lo w" 
alert(stringValue.substring(3,7));     //"lo w" 
alert(stringValue.substr(3, 7));      //"lo worl" ，返回副本
//传入负数参数
alert(stringValue.slice(-3));           //"rld" 
alert(stringValue.substring(-3));      //"hello world" 
alert(stringValue.substr(-3));         //"rld" 
alert(stringValue.slice(3, -4));        //"lo w" 
alert(stringValue.substring(3, -4));    //"hel" 
alert(stringValue.substr(3, -4));       //""（空字符串） 

.match()：返回匹配字串。
indexOf()和 lastIndexOf()： 从开头 / 结尾开始在一个字符串中搜索给定的子字符串，然后返子字符串的位置
 trim()： 创建一个字符串的副本，删除前置及后缀的所有空格，然后返回结果。
 toLowerCase()和 toUpperCase() ： 转小写和大写。
 substr() ：可在字符串中抽取从 指定下标开始的指定数目的字符。
 .replace()：替换正则表达式匹配出的字符，返回副本
 .split()：根据参数将字符串换成数组

其他API:

apply()和call() : 在特定的作用域运行函数。它们的区别仅在于接收参数的方式不同 ----P134

window.color = "red"; 
var o = { color: "blue" }; 
function sayColor(){ 
    alert(this.color); 
} 
sayColor.call();       //red 
sayColor.call(window);     //red 
sayColor.call(o);          //blue

bind()：绑定作用域

window.color = "red"; 
var o = { color: "blue" }; 
function sayColor(){ 
    alert(this.color); 
}  
var objectSayColor = sayColor.bind(o); 
objectSayColor();    //blue

getComputedStyle()： 获取元素最终样式，返回一个对象。（还有个是currentStyle，chrome不支持）
getComputedStyle(box,null)['height'] == getComputedStyle(box,null).height
getComputedStyle(box,'::after')['background-color'];	//获取伪元素

函数私有变量和私有方法由特权方法调用 ---- P205
静态私有变量 ---- P207 例1
实例对象 instanceof xxx：判断实例对象原形链上有没有xxx属性
typeof
Object.seal()：传入对象不能增减其属性和方法（相关Object.isSealed()、Object.isExtensible()Object.preventExtensions()）
Object.freeze()：冻结对象（Object.isFrozen）

模块模式：

var xx1 = fn() { …; return { 对象 }; }
例子ModulePatternExample01说明了增强的快模式原型是…

对象

new的两个对象x,y即使属性值、方法完全相等，x != y；

对象数据属性（对象每一个变量都有下面四个属性）

Configurable：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true。
Enumerable：表示能否通过 for-in 循环返回属性。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true。
Writable：表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true。
Value：包含这个属性的数据值。读取属性值的时候，从这个位置读；写入属性值的时候，把新值保存在这个位置。这个特性的默认值为 undefined。
.defineProperty()方法可以改变属性 ---- P157

访问器属性

只能通过defineProperty()方法定义（set、get）P159

.definePropertise()方法：通过描述符一次定义多个属性。---- P160
读取属性特效 ---- P161

创建对象：

工厂模式缺点：无法识别对象（JS是弱类型语言），且包含构造函数缺点
构造函数缺点：方法重复定义（方法也是对象），需额外代码解决。
原型模式（prototype）缺点不能传参初始化新对象，修改原型引用类型成员（如数组）后，会影响所有对象

原型模式+构造函数组合创建对象可以互补缺点

function Person(name, age, job){ 
    this.name = name; 
    this.age = age; 
    this.job = job; 
    this.friends = ["Shelby", "Court"]; 
} 
Person.prototype = { 
    constructor : Person, 
    sayName : function(){ 
        alert(this.name); 
    } 
} //可以把下面这段代码放进构造函数里(Person)动态决定是否添加方法
if (typeof this.sayName != "function"){
Person.prototype.sayName = function(){
alert(this.name);};
}

继承冲突：

SubType.prototype = new SuperType(); 	//继承了 SuperType对象的prototype
SubType.prototype = { 			//使用字面量添加新方法，会导致上一行代码无效 
   。。。		},

组合继承（缺点：调用两次超类的构造函数） ---- 章节6.3.3
章节6.3.6 寄生组合式继承！

BOM: 浏览器对象模型

document对象, screen对象（屏幕信息）,

Windows对象：

视口大小: outerWidth(innerWridth)、outerHeight(innerHeighrt)
多个框架时，top指向最外层框架（即浏览器窗口）

.frames：iframe元素集合
pageYOffset和.pageXOffset : 页面往左和往上滚出去距离
setTimeout()：定时(单次)，第一个参数建议传函数，第二个参数单位是ms，返回一个ID
setInterval()：与setTimeout()方法类似，不同处是setInterval是重复定时直到被清除
clearTimeout()：清除定时，传入ID
confirm()是否框，返回布尔值
prompt()输入框，返回字符串

location对象：

属性----P225
（URL相关）----P225

navigator对象（用户端信息，常常用于检测浏览器类型）：

userAgent ：浏览器的用户代理字符串

history对象：

go()：前进、后退、跳转(浏览过的网页)

客户端：

能力(以及怪癖)检测，检查当前浏览器支不支持某项功能
识别5大引擎----247
识别浏览器----250
识别平台(Windows或其他)----253
识别操作系统(Win7,10)----254
识别移动设备(安卓版本，iOS版本)----256

DOM(文档对象模型)：

Document类型：

Document类型的对象表示HTML页面(文件)或其他基于XML文档。
检测浏览器支持哪些DOM功能----P277

属性：

documentElement、firstChild 和 childNodes[0]的值相同，都指向元素。
childNodes
.doctype → 取得对<!DOCTYPE>的引用，也就是DocumentType节点（不同浏览器有差异）
.URL和.domain → URL（即地址栏中显示的URL） URL 与 domain 属性是相互关联的。例如，如果 document.URL 等于http://www.wrox.com/WileyCDA/，那么 document.domain 就等于 www.wrox.com。
.referer → 来源页面
readyState：表文档是否已加载完
.charset：表示文档中实际使用的字符集
.defaultCharset：文档默认的字符集（假如浏览器及操作系统没设置）
.defaultView：保存着一个指针，指向拥有给定文档的窗口（或框架）。（defaultView的方法：getComputedStyle()。两个参数：要取得计算样式的元素对象和一个伪元素字符串）
.stylesheet：通过link元素包含的样式表和在style元素中定义
的样式表。
- disabled：启用 / 停用样式表。
- cssRules：样式表的每一项样式 ----P337
- .insertRule(①，②)：①样式信息，②插入位置（对应有.deleteRule()方法删除样式）
.anchors：包含文档中所有带 name 特性的a元素；
.links：包含文档中所有带 href 特性的元素。
document.form1.radioGroup：直接找表单名为form1里名为radioGroup的控件

方法

write() → 输出文本、writeIn：输出后自动换行
copy() → 方法 open()和 close()分别用于打开和关闭网页的输出流。
createDocumentFragment()：创建一个DOM片段。
createTextNode()：创建一个文本节点
close()：关闭当前网页

Element类型（XML或HTML元素）

属性：

.tagName → 元素的标签名（最好再.toLowerCase()转小写）
.title，有关元素的附加说明信息，一般通过工具提示条显示出来。
.lang，元素内容的语言代码，很少使用。
.dir，语言的方向，值为"ltr"（left-to-right，从左至右）或"rtl"（right-to-left，从右至左）
.children和.childNodes：子元素集合，不包含文本节点和包含。
childElementCount：返回子元素（不包括文本节点和注释）的个数。
firstElementChild：指向第一个子元素（不包括空白符和注释的文本节点）；firstChild （则包括，下同）
lastElementChild：指向最后一个子元素；lastChild 的元素版。
previousElementSibling：指向前一个同辈元素；previousSibling 前一个节点。
nextElementSibling：指向后一个同辈元素；nextSibling 后一个节点。
自定义属性：如div元素定义了一个data-KD属性，则div增加了一个.dataset.KD属性
.innerHTML：（不能直接插script标签----P313）.outerHTML：和innerHTML区别是，读写操作都带上调用的元素
.onmouseover：鼠标事件属性
4个偏量：.offsetHeight、.offsetWidth、.offsetLeft、.offsetTop（与最外层盒子盒子距离----P339）
.clientWidth和.clientHeight：内边距可视区的宽和高
.scrollHeigh和.scrollWidtht：在没有滚动条的情况下，元素内容的总高度和总宽度。
.scrollLeft和.scrollTop：被隐藏在内容区域左侧和上方的像素数。通过设置这个属性可以改变元素的滚动位置。（这四个属性P342图解）
.nodeType：表元素类型(12个常量----P266)
.childNode：子节点列表。可以通过[ ]和.item()访问节点
.offsetWidth：元素总的宽； .offsetHeight：元素总的高
.offsetLeft;：元素最左边到父元素边框内距离， .offsetTop则是上边

方法

removeAttribute() ：去除元素的某个特性(根据参数)，返回被去除的节点（removeNamedItem则不会返回）
setNamedItem() ：传入节点参数向列表中添加节点
getAttribute() 和 setAttribute() ：获取 / 设置特性----P282（与直接操作属性区别）
querySelector()：HTML5找元素或元素集合新方法，于旧方法不同处是，找出来的元素对象是静态的，旧方法是动态的。如找到一个元素A.length属性为1，A.appendChild(…)添加一个元素后，动态的A.length为2，而静态的A.length为1。----P305
querySelectorAll()：与上面类似，区别是返回的是所有匹配的元素。这是一个 NodeList 的实例（不是搜索----P305）
getElementsByClassName()：方法接收一个参数，包含一或多个类名的字符串，返回带有指定类的所有元素的 NodeList。
matchesSelector()：接收一个参数，即 CSS 选择符，如果调用元素与该选择符匹配，返回 true；否则，返回 false。
insertAdjacentHTML()：传两个参数，第二个参数HTML字符串，第一个参数必须是下列值之一：“beforebegin”，在当前元素之前插入一个紧邻的同辈元素；“afterbegin”，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
"beforeend"，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；“afterend”，在当前元素之后插入一个紧邻的同辈元素。
contains()：传入元素检查关系是否是后代节点。
compareDocumentPosition()：返回传入元素关系掩码。P318
scrollIntoVIew()：当元素因滚动不可见时，滚动网页使元素可见。
scrollIntoViewIfNeeded(alignCenter)：只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，这个方法什么也不做。如果将可选的 alignCenter 参数设置为 true，则表示尽量将元素显示在视口中部（垂直方向）。Safari 和 Chrome 实现了这个方法。
scrollByLines(lineCount)：将元素的内容滚动指定的行高，lineCount 值可以是正值，也可以是负值。Safari 和 Chrome 实现了这个方法。
scrollByPages(pageCount)：将元素的内容滚动指定的页面高度，具体高度由元素的高度决定。Safari 和 Chrome 实现了这个方法。
getBoundingClientRect()：返回矩形对象，若干个属性和方法(很少用)----GetBoundingClientRect例子.htm
addEventListener()和 removeEventListener()：增减事件----P369
appendChild(): 节点列表末添加一个节点； insertBefore(): 插入到指定位置； replaceChild(): 替换； cloneNode(): 复制节点或深度复制

表单元素（form）

属性方法：

.elements：表单中所有控件的集合（.elements[0]表示第一个元素，[“a”]表示所有name为a的元素集合）
属于form的元素的各种属性方法，如.focus()：讲元素设为焦点----P434

Text类型(文本节点)

两个同胞文本结点显示时会串起来

属性:

length : 字符长度

方法:

appendData(text)：将 text 添加到节点的末尾。 
deleteData(offset, count)：从 offset 指定的位置开始删除 count 个字符。 
insertData(offset, text)：在 offset 指定的位置插入 text。 
replaceData(offset, count, text)：用 text 替换从 offset 指定的位置开始到 offset+ count 为止处的文本。 
splitText(offset)：从 offset 指定的位置将当前文本节点分成两个文本节点。 
substringData(offset, count)：提取从 offset 指定的位置开始到 offset+count 为止处的字符串。
creatTextNode() : 创建文本节点
normalize() : 整合多个同胞文本节点成一个

DOMtokenList类型：

方法

add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

元素、特性可加入命名空间(12.1.1章节)

style类型（元素的样式节点）

元素.style

属性

cssText：通过它能够访问到 style 特性中的 CSS 代码。
length：应用给元素的 CSS 属性的数量。
parentRule：表示 CSS 信息的 CSSRule 对象。

方法

getPropertyCSSValue(propertyName)：返回包含给定属性值的 CSSValue 对象。
getPropertyPriority(propertyName)：检查给定属性是否使用!important 设置
getPropertyValue(propertyName)：返回给定属性的字符串值。
item(index)：返回给定位置的 CSS 属性的名称。
removeProperty(propertyName)：从样式中删除给定属性。
setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先权标志（"important"或者一个空字符串）。

DocumentFragment

由于直接增减节点(元素)会导致浏览器多次渲染，所以可以把节点(元素)缓存或备份到这个类型下。

NodeIterator类型（元素节点）

createNodeIterator()方法创建，带过滤器遍历----NIE2,htm

TreeWalker类型：

比NodeIterator类型更高级，更容易遍历（在知道布局的情况下）

Range对象（与节点对象类似）

对象指着一片DOM区域
元素.createRange()：创建一个Range对象
例子DOMRExample.htm

属性方法：

.setStart()和setEnd()：确定范围 ----DOMRE2.htm
.selectNode()、 selectNodeContents()：传入元素，选取整个节点、子节点（子节点范围与子节点元素有关）
3个父节点属性
.satrtOffset：在父节点的索引号
.endOffset：范围子节点数量
extractContents()和cloneContents() 区别是一个是截取、一个是copy
.insertNode(): 在范围起始处插入结点（元素）
.selectNode() + surroundContends()：结点外包一层
collapse()：折叠范围； .coolapsed：范围是否折叠
.cloneRange()：复制范围
compareBoundaryPoints()：确定这些范围是否有公共的边界（起点或终点）----P357
detach()：Range = Null;这句用来解除范围引用，再调用这句前调用detach()更安全。

事件

event对象

.screenX和.screenY：相对屏幕坐标
.clientX和.clientY：相对浏览器可视区域坐标
.preventDefault：阻止标签点击的默认行为，和false效果一样。

其他

contextmenu：右键菜单事件 beforeunload：关闭网页前提示
pageshow、pagehide：页面提示(onload后)、页面卸载(unload前)
hashchange：点击URL时
document.onload和document.ready两个事件的区别：ready表示文档结构（DOM树）已经加载完成，ready表示包含图片等文件在内的所有元素都加载完成
window.onunload：当页面关闭时会调用这个事件
mouseover与mouseenter区别: mouseover鼠标移动到选取的元素及其子元素上会出发,而mouseenter只在选取的元素上才会触发(mouseout和mouseleave同理)
dblclick：双击时触发

数据交互相关

同源：域名、协议、端口均相等。跨域反之

Ajax(与服务器传输数据)和JSON(数据格式)

创建XMLHttpRequest对象（Ajax的对象，浏览器不一定支持）
使用XMLHttpRequest对象的open（设置请求方式和请求地址）
编写事件函数 onload回调函数或 onreadystatechange事件（在事件里通过对象的readyState属性和status属性判断内容是否解析完成），然后获取数据（通过对象的response 或 responseText属性获取），将数据用JSON.parse方法转成对象。
send方法；（向服务器请求数据）
get方法传输数据：在请问的网站后?隔开添加参数如：www.as?xxx参数=xxx
post方法传输数据： send方法传参数如：send(“xxx参数=xxx”)（还要设置片头如：xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);）

XML相关（方法属性也是用XMLHttpRequest对象）

创建DOMParser对象；（XMLSerializer对象提供相反功能）
使用parseFromString方法解析XML字符串成DOM树
请求方式同Ajax，对象的.response方法返回XML字符串，对象的.responseXML返回解析后DOM树。

XPATH（DOMParser对象方法）

找XML生成DOM树的元素

XSLT（老IE和主流浏览器对象不同）

XSLTProcessor对象。
解析XML和XSLT文件成DOM树。

XMLHttpRequest对象方法

.onload：回调函数（数据成功交互后会调用回调函数）
.response：响应的数据

动态插入脚本、样式、表格 (用函数调用形式操作)----P295

ES6

export将方法和对象导出给其他模块调用 import将声明可以调用某个模块的方法、对象
子类Constructor构造函数必须调用super方法（父类构造函数）传函数参数时，用箭头语法使函数更简洁，this对象更明确
arr.sort( (a,b) => {return a-b;} );

// 解构：从对象中取出数据保存:（{}解构对象，[]数组）
 let people2 = {
	name: 'ming',
	age: 20,
	color: ['red', 'blue', { name: "axib", time: "3s"}	]
}
let { name = “aa”, age,{name:nane1} } = people2;	//属性名匹配，没匹配到的话不会报错，默认赋值成undefined，name只有匹配不到值时才会等于aa
//变量名不能相同，:后区分。（name1是axib）
let [first, second] = people2.color;	//这4个都是普通变量，相当于let name, age ...；
console.log(`${name}----${age}----${first}`);	//ming----20----red
const { color:[,c2]}; //c2取得'blue'（color取不到数组）
let [ , co] = people2.color; //只取后面项时，前面,填充空成员即可
[a,b] = [b,a] //交换两个变量的值
const str = "hello web";	//[length] = str; length == str.length
let [a, b, ...ot];	//a==h，b==e，ot==[l, l, o,空格, w, e, b]

形参可以给默认参数：function foo(num = 200) { … }
可变参数管理：function foo(x, y,…rest777)： foo(1, 2, ‘hello’, true, 7)
- rest777[0]代表x,y后的第一个参数（‘hello’），rest777.length代表x,y后的参数数量（3个）
- 这里…叫扩展运算符：（对象也能…扩展，会奖对象剩余的属性转成数组）
- let color = [‘red’, ‘yellow’]; let colorful = […color, ‘green’, ‘blue’]; //coloful为[‘red’, ‘yellow’,‘green’, ‘blue’]
- let num = [1, 3, 5, 7]; let [first, …rest] = num; //rest为[3，5，7]

const obj1 = {a:"a7", b:"b7", c:"c7"}
const { a, ...oth } = obj1;	//oth为["b7", "c7"]
const obj2 = {at:"at7", ...obj1};	//obj2为 {at:"at7", a:"a7", b:"b7", c:"c7"}, ...扩展是浅复制

//模板字符串：
`23 ${a}+${b} = c`;	//注意是左上角的`，${ }放的是变量或表达式
//Promise
let p = new Promise(function (resolve, reject) {
	...	//会马上执行
    resolve(...);	//如果运行到这里，则调用then方法
    ...
    reject(...);	//如果运行到这里，则调用catch方法
	...	
	}).then(function (...) {	...	}
	).catch(function (...) {	...	});
//如果上诉没有给then和catch方法
...	//这里的函数会在resolve函数执行前执行
p.then( fn(){ ... } )	//再new Promise( ... ){ ... }执行resolve或reject函数时，
p.catch( fn(){ ... } )	//会调用下面定义的then或catch方法
//Promise.all([...]), []内所有的promise都成功(执行resolved)或参数中不包含 promise(空[]) 时
//回调resolve（all的.then方法），否则回调reject
let p = Promise.all([p, p2,...]);	//p2同p是个Promise对象
p.then((result) => {
  console.log(result)               
}).catch((error) => {		//必须这么.catch
  console.log(error)
})
Promise.race()	//同理Promise.all，不同初是[]里的对象第一个执行成功或失败则执行resolved或reject

函数相关

//函数一些简写：初始化成员简写
function people(name, age) {
return {name: name,	age: age};		}
// ES6	同名时可以省略
function people(name, age) {
return {name, age};		}
//函数成员定义简写
var people1 = {
getName: function () {console.log(this.name);}		}; 
// ES6，省去:和function
let people2 = {getName() {console.log(this.name);}		};

{ ‘ab&&cs’ = xxx, }
//ES6：
word = ‘ab&&cs’;	{ [word] : xxx, }
传对象并给默认值：
fn ( {a1 , b1 = 7} = { a : 666} ) { }		//两边都能给默认值

箭头函数void 表示无返回值：  (a) => void a++;	
没有普通函数的arguments类数组对象；	 
箭头函数里的this为创建箭头函数的函数的this，如果不是由函数创建的，则指向window

生成器函数,关键字： *和yield
除了igm外，增加了u(按UTF16匹配)，y（粘粘修饰符）

新方法

Object.assign()这个方法来实现浅复制: Object.assign({}, objA, objB); //浅复制多给对象给空对象{}
Object.is()：传两个参数判断两参数是否相等，和===略有不同
Object.keys()：返回对象可枚举属性名（是一个数组，传数组则返回下标）Object.values则返回属性值。
console.log(Object.entries(obj)); // [ [‘foo’, ‘bar’], [‘baz’, 42] ] // const obj = { foo: ‘bar’, baz: 42 };
new Set()，用来去重数组。

string

padStart()和padEnd()：补全字符串
repeat()：重复复制字符串
startsWith()和endsWith()；判断字符串是不是以传的参数开头、结尾
includes()：判断参数字符是否在字符串中

啊姆架构狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS相关

JS语法：浮点数是二进制算法，能精确表示分数1/2，1/16等，所以(0.3-0.2) != (0.2-0.1)。（解决方法：*10再/10）标签语句：给break和continue增加标签，可以实现类似goto的效果。可以给函数定义属性，当函数需要一个"静态变量"，可以给函数一个属性为该变量，这样就避免了杂乱无章的全局变量给sort()传一个函数参数：function create...
复制链接

扫一扫