前端常用属性、方法，可以用作工具书（持续更新中...）

forEach(function (item, index) {}, 第二个参数)：用来遍历数组。没有返回值（undefined），它不能return。可以传入第二个参数，则此时在回调函数里面打印this指向这个第二个参数，打印的次数就是这个数组的长度（前提是用function声明的回调函数，不能用箭头函数）。

for-of：可以遍历迭代器（数组，字符串），拿到的是数组的每一个值。它可以return，返回值是数组的每一个值。如果尝试遍历的变量不支持迭代，则for-of语句会抛出错误。推荐使用const声明item以保证这个局部变量不被修改。

map(function (item, index) {})：用来操作数组内的item和index值。返回新生成的数组。如果数组内数据为基本数据类型，那么原来的数组不会改变，否则会被改变。和forEach()一样，也可以传入第二个参数。

filter(function (item, index) {})：用来筛选数组内符合条件的item或index值。返回新生成的数组。原来的数组不会改变。和forEach()一样，也可以传入第二个参数。

some(function (item, index) {})：判断数组内的item或index是否符合条件。有任意一个item或index符合条件则返回true，否则返回false。原来数组不会改变。

every(function (item, index) {})：判断数组内的item或index是否符合条件。有任意一个item或index不符合条件则返回false，全部符合条件则true。原来数组不会改变。

join("字符串")：数组转字符串。用传入的字符（串）将数组拼接成一个字符串。返回新生成的字符串。原来的数组不会改变。

concat("字符串"、变量、函数、对象、数组)：合并方法（从左向右进行合并）。返回值是新生成的数组（因为这里是数组调用了该方法）。原来的数组不会改变。

find()：方法返回数组中第一个通过测试的元素的值（作为函数提供）。返回值是符合要求的第一个元素的值。原来的数组不会改变。例子：

let num = 10;
let ages = [4, 12, 16, 20];
function getAge(age) {
    return age >= 10;
}
console.log(ages.find(getAge));

reduce((prev, current, index)=>{},"第二个参数")：1.用于计算某个数组中的值的总和：将第二个参数设置为0。2.用于将原数组内中所有对象的某个同样的属性值放入一个新的数组：将第二个参数设置为[]。3.用于将原数组中的某些内容放入一个对象中，第二个参数设置为{}。注意点：如果不设置第二个参数，那么prev的值默认为原数组的第0个值。prev的值为每次遍历的回调函数的返回值，如果不设置return，则最后输出的prev是undefined。原来的数组不会改变。这是ES6新增的方法。

// 计算一个数组的值的总和
let arr = [10, 20, 30, 40, 50];
let result = arr.reduce((prev, current) => {
    prev += current;
    return prev;
}, 0); // 将第二个参数设置为0
console.log(result);

valueOf()：拿到数组本身的值，返回值是这个数组本身。用法arr.valueOf()

3.其他方法

Array.isArray(变量)：判断括号内的值或变量是否是数组类型。返回值是布尔值true或false。这是Array的静态成员。

Array.from()：将一个类数组对象或者可遍历对象（Map，Set）转换成一个真正的数组。返回值是新生成的数组。这是Array的静态成员。详细用法《JS高级总结27》。这是ES6新增的方法。

Array.of()：将传递进去的任何参数都放到一个数组中去（也是转数组的方法）。返回值是新生成的数组。这是Array的静态成员。详细用法《JS高级总结41》。这是ES6新增的方法。

四、Object

1.静态成员

Object.assign(obj1,obj2...)：合并对象。将传入的第二个及以后的对象合并到第一个对象中，第一个对象的值会因此改变。返回值是第一个对象合并后的值。这是一个静态成员。

Object.getPrototypeOf(某个实例对象)：获取某个实例对象的原型对象。返回值是一个对象。这是一个静态成员。

Object.create(对象)：创建一个空对象，并对其原型对象进行赋值。括号内的值是给这个空对象的原型对象设置的。返回值是创建的空对象。

Object.is(参数1，参数2)：用法类似于===。仅有两个值不同：1.比较0和-0时或+0和-0时 2.比较NaN和NaN时。结果与===的相反。注意：比较0和+0的结果与===相同。

Object.values(对象)：将对象中的value值一个个取出来按顺序放入一个数组中。返回值是新生成的数组。这是ES6新增的方法。

Object.keys(对象)：返回这个对象中的每一个键名。返回值是新生成的数组。这是ES6新增的方法。

Object.entries(对象)：将这个对象中的每一个键值对转换成一个数组，然后再将每一个数组的集合放到一个新的数组中，如：[['name', 'coderxian'],['age', 21]]

Object.freeze(对象)：使得对象中的键无法再被增删改操作。

Object.defineProperty(对象, "属性名", {})：给一个已经声明的对象定义（添加）属性。第三个参数传入的是一个对象，对象内有以下属性：value：该属性的属性值；writable：该属性是否可以被修改；configurable：该属性是否可被删除；enumerable：该属性是否可枚举。后面三个属性默认值均为false。这个对象内还可以写set()和get()方法，详见《VueJS总结 P10》。

2.原型成员

Object.prototype.toString()：用于判断括号内数据的真实类型（String,Number,Boolean,Array,Date等）。注意区别于如Number.prototype.toString()、Boolean.prototype.toString()等方法。返回值是真实类型。常用用法：Object.prototype.toString.call("123")，返回[object String]。

Object.prototype.valueOf()：用法和Object的原型对象中的toString()方法用法相同。返回值是该对象、数组内的值。

3.其他属性、方法

for-in：遍历对象的方法，k是obj里的key值，通过obj[k]可以得到对应的value值。该方法也能用于数组，得到的k就是数组的index，arr[k]是对应索引的值。推荐使用const声明k以保证这个局部变量不被修改。

某个对象.方法.call(借用该方法的对象,参数1,参数2...)：某个对象借用另一个对象中的方法时使用。括号中的借用对象如没有则写null，传入的参数用逗号间隔开，参数如没有则不写。借用的方法会立即调用，借用方法中this的指向更改为借用该方法的对象。如果借用对象为null，那么call()的作用就是用来调用某个函数，并传参。call()相对于apply()来说性能更高

某个对象.方法.apply(借用该方法的对象,[参数1,参数2...])：某个对象借用另一个对象中的方法时使用。括号中的借用对象如没有则写null，传入的参数必须是数组，参数如没有则不写。借用的方法会立即调用，借用方法中this的指向更改为借用该方法的对象。如果借用对象为null，那么call()的作用就是用来调用某个函数，并传参。举例：Math.max.apply(null, [10, 20, 30])或Math.max.apply(null, arr)

某个对象.方法.bind(借用该方法的对象,参数1,参数2...)：某个对象借用另一个对象中的方法时使用。括号中的借用对象如没有则写null，传入的参数用逗号间隔开，参数如没有则不写。借用的方法不会立即调用，而是生成一个等调用的函数。借用方法中this的指向更改为借用该方法的对象。

五、Date

getTime()：获取日期的毫秒显示。返回值是日期的毫秒。括号内可以填入标准日期格式字符串。

getFullYear()：获取日期的4位数年。

getMonth()：获取日期的月。返回值是0~11，对应1~12月。

getDate()：获取日期的日。返回值是1~31。

getDay()：获取日期的星期。返回值是0~6，对应周日~周六。

getHours()：获取日期的时。返回值是0~23。

getMinutes()：获取日期的分。返回值是0~59。

getSeconds()：获取日期的秒。返回值是0~59。

getMilliseconds()：获取日期的毫秒。

六、Promise

当同时有多个Promise的实例对象需要执行时，可以用到以下的静态方法

Promise.all([p1,p2...])：一次性执行括号内所有的promise对象。若结果都为resolve，则返回所有的值组成的数组；若有多个reject，则返回最先生成的那个reject，其他promise对象的拒绝也会静默处理，并不会让错误跑掉，其他resolve就不会执行了。注意传入的是每个promise变量组成的数组。这是一个静态成员。

Promise.race([p1,p2...])：一次性执行括号内所有的promise对象。返回最先得到结果的那个值（不论是resolve还是reject），其余的期约就会被忽略，但是这并不影响其他期约的拒绝操作，其他的拒绝也会被静默处理，不会有错误跑掉。这是一个静态成员。

Promise.allSettled([p1,p2])：等待数组内所有的实例对象都执行完毕之后，返回每一个实例对象的状态以及其成功的返回结果（如果成功）或失败的原因（如果失败）

Promise.any([p1,p2])：如果有多个满足fulfilled状态的实例对象，则返回最先满足fulfilled的那个实例对象，而先变成rejected状态的则不会被返回；如果所有的实例成员的状态都是rejected，那么会返回提示信息："所有的promise实例对象都是rejected状态"

七、XMLHttpRequest

xhr：我们经常把XMLHttpRequest内置构造函数的实例对象命名为xhr。

xhr.open(type, url)：通过get或post类型来对某个url发送请求。发送get请求时是在url后用?拼接参数，多个从参数用&拼接。

xhr.setRequestHeader(key,value)：发送post请求时需要设置的属性。常用的是application/x-www-form-urlencoded。

xhr.onreadystatechange：绑定监听状态改变的处理函数，在处理函数可获取响应数据。当xhr.readyState == 4 && xhr.status == 200，执行内容。

xhr.readyState：状态值，共有5个，分别为0~4。详情见《JS高级总结No.31》

xhr.status：HTTP状态码。详情见《jQuery总结》

xhr.responseText：获得字符串形式的响应数据。

xhr.send()：手动发送请求。括号内可以携带参数（用于post请求）。如ajax.send(username=${user.value}&password=${pwd.value});

八、JSON

JSON.stringify()：用于将JS对象转换为JSON字符串。括号内填入JS对象。返回值是JSON字符串。

JSON.parse()：用于将JSON字符串转换为JS对象。括号内填入JSON字符串。返回值是JS对象。这两个方法一起使用可以实现JS对象的深拷贝。

九、RegExp

let reg = new RegExp()：通过RegExp()内置构造函数创建一个正则表达式。括号内写入表达式规则。

reg.test(字符串)：将括号内的字符串通过先前设置的规则进行验证。返回值是布尔值true或false。

十、节点（元素）对象

1.属性

nodeName：获取节点的名称。得到的所有标签都是大写。文本节点（空格、换行）是#text。注释节点是#comment

nodeType：获取节点的类型。得到的是数值。

nodeValue：获取节点的值。元素节点的值是null。

parentNode：获取直接父节点。

parentElement：获取直接父元素。

childNodes：获取子节点。返回的是伪数组，有index，item。

children：获取子元素。返回的是伪数组，有index，item。

previousSibling：获取上一个兄弟节点。一般获得到的是#text文本节点：换行。返回值是获取的节点对象。

nextSibling：获取下一个兄弟节点。一般获得到的是#text文本节点：换行。返回值是获取的节点对象。

innerHTML：获取该节点下的所有DOM元素，获取到的格式和在编辑器中的一样，可以用来修改标签下的标签或文本，可以设置新的标签。原来的子标签会被全部替换。

innerText：获取该节点下所有的文本内容（没有获取到标签名），可以修改标签下的文本，不可以设置新的标签。原来的子标签会被全部替换。

className：获取该节点所有的类名，可以修改类名。返回的是类名组成的字符串。

classList：获取该标签所有的类名。返回值是伪数组。可以添加classList.add("类名")删除classList.remove("类名")，这两个方法没有返回值（undefined）。

style：该属性下有着所有的css样式，可以直接通过js代码来修改元素的样式。注意：设置和获取的都是HTML标签内的style属性，如果该标签的style属性为空，则返回值是空值。

style.cssText：获取元素的style属性中的CSS代码，也可以直接通过赋值的方式修改样式。赋值后原来的样式会被替换掉。

style.setProperty(css名,css值)：设置元素的CSS属性和值。

style.removeProperty(css名)：删除元素指定的CSS属性。

offsetHeight：获取自身元素的高度（border + padding + content）。返回值是数值。

offsetWidth：获取自身元素的宽度（border + padding + content）。返回值是数值。

offsetTop：获取自身元素离直接父元素的高度。返回值是数值。

offsetLeft：获取自身元素离直接父元素的左边距。返回值是数值。

offsetParent：获取直接父元素。返回值是父元素。

scrollHeight：自身元素可滚动的高度。返回值是数值。

scrollWidth：自身元素可滚动的宽度。返回值是数值。

scrollTop：自身元素滚动了的高度。返回值是数值。

scrollLeft：自身元素滚动了的宽度。返回值是数值。

2.方法

getAttributeNode("属性名")：获取标签自定义属性节点。返回的是属性节点，有nodeName、nodeType、nodeValue等属性。

getAttribute("属性名")：获取标签自定义属性节点的属性值。返回的是属性值。相当于getAttributeNode().nodeValue

setAttribute("属性名","属性值")：给标签设置自定义属性。没有返回值（undefined）。

removeAttribute("属性名")：删除标签的自定义属性。没有返回值（undefined）。

appendChild(添加的元素)：在父元素最后面添加元素。返回值是加入的元素。

insertBefore(添加的元素,某个子元素)：在父元素的某个子元素前面添加元素。如果参照节点是null，则该方法与appendChild()相同。返回值是加入的元素。

replaceChild(新元素,旧元素)：替换父元素的某个子元素。返回值是被替换掉的元素（以HTML格式显示）。

removeChild(删除的元素)：删除父元素的某个子元素。返回值是被删除的元素（以HTML格式显示）。

addEventListener("事件类型",function () {},Boolean)：为元素添加事件。第三个值默认为false，若为true，则先执行。没有返回值（undefined）。

removeEventListener("事件类型",函数名)：为元素解绑事件。第二个值必须为函数名。没有返回值（undefined）。

remove()：删除元素自身。没有返回值（undefined）。

childNodes.item(index)：获得该父元素的第index个子元素，相当于childNodes[index]。返回值是获得的子元素。

hasChildNodes()：查询该节点是否有子节点。返回值是布尔值true或false。

十一、window对象（BOM核心）

1.document对象（BOM）

getElementById("id名")：通过id获取元素。返回值是得到的元素。

getElementsByTagName("标签名")：通过标签名获取元素。返回值是得到元素所组成的伪数组。

getElementsByClassName("类名")：通过类名获取元素。返回值是得到元素所组成的伪数组。

getElementsByName("属性名")：通过标签的name属性获取元素。返回值是得到元素所组成的伪数组。

querySelector(".box/#box/div")：通过类名/id名/标签名获取元素。返回值是符合条件的第一个元素。

querySelectorAll(".box/#box/div")：通过类名/id名/标签名获取元素。返回值是符合条件的所有元素组成的伪数组。

createElement("标签名")：创建元素。返回的是新生成的元素。

document.write()：在页面写入内容。括号内可以放入变量、标签、文本内容等；如document.write("<p>123</p>")

document.documentElement：获取到整个HTML文档（<html>元素）。其中document.documentElement.scrollTop可以获取页面滚动的高度。

document.body：获取到<body>元素。

document.title：读写修改文档的title。

2.location对象（BOM）

href：可以获取当前页面的url，修改location.href可以跳转到其他页面。

reload()：重新加载页面，整个页面都会刷新。

3.history对象（BOM）

当history.length大于1时，可以调用以下方法：

go(数值)：跳转到对应页面，1是跳转到下一页面，-1是跳转到上一页面，-2是跳转到上上页面。

forward()：跳转到下一页面。

back()：跳转到上一页面。

4.navigator对象（BOM）

5.screen对象（BOM）

6.localStorage对象

只能用于浏览器环境，不能用于node环境

setItem("key",""value")：将值存储在一个变量中，这个变量可以在所有同源地址下访问。永久存储。没有返回值（undefined）。第二个值必须是字符串，即先对数组、对象进行字符串转换JSON.stringify()

getItem("key")：获取已存储的变量。返回值是存储变量的值。取值如果是对象、数组，需要进行转换JSON.parse()。

removeItem("key")：删除已存储的变量。没有返回值（undefined）。

clear()：清空localStorage里面所有的内容。

7.sessionStorage对象

只能用于浏览器环境，不能用于node环境

setItem("key",""value")：将值存储在一个变量中，这个变量可以在所有同源地址下访问。临时存储，页面关闭后销毁。第二个值必须是字符串，即先对数组、对象进行字符串转换JSON.stringify()

getItem("key")：获取已存储的变量。返回值是存储变量的值。取值如果是对象、数组，需要进行转换JSON.parse()。

removeItem("key")：删除已存储的变量。没有返回值（undefined）。

clear()：清空sessionStorage里面所有的内容。

8.onload

window.onload = function () {}：入口函数，让浏览器在页面完全加载完毕后再执行JS代码。让JS代码可以在页面任意位置书写。

9.onscroll

window.onscroll = function () {}：页面滚动事件。当页面滚动时就会触发该事件。

十二、事件对象event

window.event：获取事件对象。适用于IE8及以下浏览器。

e.target：可以获取到点击的那个元素。通常放在一个事件函数内，可以通过事件捕获的思想来操作每个子元素。返回点击到的那个DOM元素。常用于事件委托。

e.stopPropagation()：阻止事件冒泡。适用于IE9及以上的现代浏览器。

e.cancelBubble = true：阻止事件冒泡。适用于IE8及以下浏览器。

e.preventDefault()：阻止事件默认行为。适用于IE9及以上的现代浏览器。

e.returnValue = false：阻止事件默认行为。适用于IE8及以下浏览器。

十三、单例内置对象

1.Math

floor(数值)：将一个数字向下取整，往小了取，在数轴中是向左取整。返回的是新生成的数值。原来的数字不会改变。

ceil(数值)：将一个数字向上取整，往大了取，在数轴中是向右取整。返回的是新生成的数值。原来的数字不会改变。

round(数值)：将一个数字四舍五入，更靠近谁就取谁。-3.5—>-3；-3.51—>-4；返回的是新生成的数值。原来的数字不会改变。

abs(数值)：将一个数字取绝对值。回的是新生成的数值。原来的数字不会改变。

min(一组数值)：取得一组数值中的最小值。不能传入数组，会得到NaN。如：console.log(Math.min(10, 20, 30))或console.log(Math.min(‘10’, ‘20’, ‘30’))均可。返回的是新生成的数值。

max(一组数值)：取得一组数值中的最大值。不能传入数组，会得到NaN。如：console.log(Math.max(10, 20, 30))或console.log(Math.max(‘10’, ‘20’, ‘30’))均可。返回的是新生成的数值。

2.Global

decodeURI()：用于将中文乱码后的字符进行解码。常用于在href中传入了文本信息提取时的乱码问题。

eval()：ESMAScript中强大的解释器。但是非常危险，恶意用户可以插入导致我们网站或应用崩溃的代码。见《高程4 P130》

十四、原型链

1.属性

constructor：获取构造函数（构造器、类）。是原型对象中的一个自带属性（原型成员）。实例对象和原型对象都可以通过它来获取构造函数（构造器、类）。

实例对象.__proto__：获取该实例对象的原型对象。

构造函数.prototype：获取该构造函数的原型对象

2.方法

对象.hasOwnProperty(属性名、方法名)：常用来判断某个实例对象是否存在某个实例成员，即该属性或方法仅存在于实例对象中，而不是存在于原型对象中。返回值是布尔值true或false。

原型对象.isPrototypeOf(实例对象)：常用来判断某原型对象是否为该实例对象的原型对象。返回值是布尔值true或false。

对象.propertyIsEnumerable(属性名、方法名)：用于判断该实例成员是否可枚举（被循环遍历）。注意点：我们需要把对象看成是实例对象（可能本身是原型对象），括号内的成员必须是实例成员（即必须是它本身的成员）。如果成员不是该对象的实例成员，则永远返回false。如果是该对象的实例成员，则：1.JS本身的属性和方法一般都不可枚举false；2.开发者自己定义的一般都可以枚举true。返回值是布尔值true或false。

十五、关键字

delete：用法 delete arr[0]删除数组arr的第0个元素。删除后，数组的[0]位置的值是undefined。delete obj.name，删除一整个键值对。在工作中不建议使用，我们使用obj.name = null删除就好了。

async：用来修饰函数，表示这是一个异步函数。

await：必须在异步函数中使用，表示同步代码（异步程序变成同步程序）。await后面的代码执行完毕了，才会执行后面的同步代码。注意：在箭头函数或者同步函数中使用都会报错。

A instanceof B：用来查看A是否是B的实例对象，或者说B（构造函数）的原型对象是否在A（实例对象）的原型链上。返回值是布尔值true或false。

in：用法"name" in p意思是实例对象p是否可以用该属性或方法。in关键字仅能判断该成员是否是实例成员或原型成员。返回值是布尔值true或false。

class：ES6新增的关键字，用于ES6语法中新增一个类。注意类名后面不用跟小括号。

extends：用于ES6中子类继承父类的原型成员，类似原型链继承。用法：class A extends B{}。

try：将可能错误的代码放到try内部，浏览器就会跳过这段错误内容，而执行别的内容。

catch(e)：将try内部的错误信息保存在e(error)中，然后抛出错误信息。

finally：与try,catch关键字一起使用，无论什么情况都会执行finally里面的代码块。

throw：抛出异常信息。如：if(a !== "number"){throw "数据类型错误"}。

二、jQuery内置方法、属性总结

一、入口函数

用于依赖DOM加载的jQuery代码

$(document).ready(function () {})

jQuery(document).ready(function () {})

$(function () {})：！！！重点掌握

二、普通元素方法

show([time],[回调函数])：让消失的元素出现。实际上是在标签添加行内样式display = block。回调函数在show()方法执行完才会执行。

hide([time],[回调函数])：让元素隐藏。实际上是在标签添加行内样式display = none。回调函数在hide()方法执行完才会执行。

toggle([time],[回调函数])：切换元素显示方式，若此时为隐藏，调用该方法后显示，反之亦然。

stop()：停止所有在指定元素上正在运行的动画。

html(变量、字符串)：获取元素的标签和文本内容。往括号内传入参数可以修改元素的标签和文本内容。

text(变量、字符串)：获取元素的文本内容。往括号内传入参数可以修改元素的文本内容。

css()：传入一个值，获取该样式的值。传入两个值，修改或者添加样式。传入对象，修改或添加多个样式。

attr()：传入一个值，获取该属性的值。传入两个值，修改或添加（自定义）属性。传入对象，修改多个（自定义）属性和值。一般不用attr()来修改表单的属性，因为获取的是表单的属性值，不好操作。

prop()：传入一个值，获取该原生属性的值。传入两个值，修改该原生属性的值。用于修改表单属性，因为获取的是布尔值，比较好操作。注意：无法通过prop()获取或修改自定义属性的值。

parent()：获取元素的直接父级元素。返回的是伪数组（jQuery对象）。

parents(标签/类名/id)：获取元素的所有父级元素。返回的是伪数组（jQuery对象），按index顺序由最近父元素到最远祖先元素。如果传入标签，则返回所有该标签的祖先元素。

children()：获取该元素的所有直接子元素。返回的是伪数组（jQuery对象）。如果传入标签，则返回所有该标签的直接子元素。

contents()：获取所有直接子级节点，包括换行文本节点text、注释节点comment等。返回的是伪数组（jQuery对象）。相当于原生JS的childNodes属性（获取的是DOM对象）。

siblings()：获取该元素的所有兄弟元素，包括<script>标签。传入标签名可以获得所有指定标签的兄弟元素。返回的是伪数组（jQuery对象）。

next()：获取该元素的下一个兄弟元素。可以传入参数获得指定的下一个兄弟元素。

nextAll()：获取该元素后面所有的兄弟元素。可以传入参数获得指定的元素。返回的是伪数组（jQuery对象）。

prev()：获取该元素的上一个兄弟元素。可以传入参数获得指定的上一个兄弟元素。

prevAll()：获取该元素后面所有的兄弟元素。可以传入参数获得指定的元素。返回的是伪数组（jQuery对象）。

hover([移入时执行的参数],移出时执行的参数)：鼠标移入/移出元素时执行该方法。如果只传入一个函数，那么移入移出都只执行这个函数。

eq(index)：获取伪数组中的第index个元素。

:eq(index)：获取伪数组中的第index个元素。与上面不同的是这里是冒号上面是点

index([筛选器])：获取当前元素在该兄弟元素集合中的索引值index。括号内可以传入值来筛选出某一类标签，此时的index就是在这类元素中去排序的。返回值是当前元素的索引。

addClass("类名")：为当前元素添加类。括号内填入要添加的类名。原来就存在的类名不会被覆盖。

removeClass("类名")：为当前元素删除类。括号内填入要删除的类名。

toggleClass("类名")：为当前元素添加或删除类。存在则删除，不存在则添加。

val([""])：获取当前元素（常用于表单元素）的value值。往括号内添加值可以做修改，传入空字符串可以做清空。

trim()：删除字符串前后的空格（常用于表单元素验证非空）。返回值是处理后的字符串。原来字符串不会改变。

:checked：获取所有被选中元素(复选框、单选框等，select中的option)。返回值是符合要求的元素形成的数组。

append("标签、类名、id名、变量")：在父元素的最后面添加子元素。对应原生JS的appendChild()。括号内可以直接写入标签、类名、id等。

prepend("标签、类名、id名、变量")：在父元素的最前面添加子元素。类似原生JS的insertBefore()。括号内可以直接写入标签、类名、id等。

after("标签、类名、id名、变量")：在该元素的后面添加兄弟元素。括号内可以直接写入标签、类名、id等。

before("标签、类名、id名、变量")：在该元素的前面添加兄弟元素。括号内可以直接写入标签、类名、id等。

"旧元素".replaceWith("新元素")：将某个元素（操作自身）替换成另一个元素。返回值是被替换元素组成的伪数组。

remove()：删除元素自身。返回值是删除元素组成的伪数组。

empty()：清空该元素下的所有子元素。返回值是该元素组成的伪数组（不包含子元素）。

on("事件类型","事件执行程序")：jQuery中事件绑定的另一种语法。其中事件类型可以同时写多个，用空格分开。这种方式也可以用于绑定一些没有封装方法的事件，比如手指事件。

父元素.on("事件类型","目标子元素","事件执行程序")：jQuery中事件委托的语法。与原生JS不同，执行程序中的this指向目标子元素（DOM对象）。这里的事件类型只对目标子元素生效了，点击别的元素是不生效的。

.off(["事件类型"],["目标子元素"])：jQuery中解绑事件语法。括号内只传事件类型，则解绑该元素的所有该事件。括号内只传目标子元素，则解绑该子元素的所有事件。两个都传，则解绑该目标子元素的所有该类事件。

父元素.off("事件类型","目标子元素")：jQuery中解绑委托事件的语法。

hasClass("类名")：判断该元素是否有某个类名。返回值是布尔值true或false

三、get、post方式请求数据

$.get()：括号内常用的有三个数据，字符串url，对象data，回调函数function。

$.post()：括号内常用的有三个数据，字符串url，对象data，回调函数function。

$.ajax()：括号内传入一个对象，对象内常有字符串url，请求类型type，对象data，请求头headers，成功回调函数success，失败回调函数error。

四、load()方法加载部分页面

$(selector).load("xxx.html")：常用于后台管理页面点击tab栏切换至对应页面时使用。与<iframe>标签的区别是load()方法只会加载代码段，在编辑器中需要写入HTML基本模板，对浏览器更友好，效率更高。

三、NVM版本管理工具常用命令

nvm install 版本号：用来下载某个版本的node。

nvm version：查看当前nvm工具的版本。

nvm use 版本号：使用该版本的node。

nvm ls：查看当前nvm正在管理的node版本，带*的为正在使用的node版本。nvm list功能与其相同。

node -v：查看当前正在使用的node的版本。

四、NodeJS中内置模块方法、属性总结

一、fs

const fs = require("fs")：引入fs模块保存到常量fs中。

fs.readFile(url, 编码格式, callback(err, data))：读取某个文件，url是该文件所在路径，常用编码格式是字符串"utf-8"，回调函数有两个参数err和data，err必须放在第一个，而且如果要返回data，则必须要先写err再写data。

二、path

const path = require("path")：引入path模块保存到常量path中。

path.join(...[path])：用于拼接路径。例：path.join(__dirname, "./views/index.html")将当前文件的绝对路径和"./views/index.html"拼接在一起，也可以这样写path.join(__dirname, "views", "index.html")，结果相同。

path.resolve(path1, path2)：将括号内的相对路径转换为绝对路径后返回。

三、http

const http = require("http")：引入http模块保存到常量http中。

const server = http.createServe()：创建一个服务器对象保存到常量server中。

server.listen(端口号(number类型), IP地址(string类型))：设置server服务器对象的端口（number类型）和IP地址（string类型）。

server.on("request", (request, response)=>{})：为服务器对象绑定浏览器请求监听事件。

request.url：属性，获取端口号后面的url。

response.end()：将括号内的数据响应回浏览器。

四、其他只能在`node`环境下运行的代码

__dirname：返回当前文件所在的路径。

五、express框架

const app = express()：利用框架创建服务器对象app。

app.listen(端口号, ip地址)：给服务器对象设置端口号和ip地址，类似原生nodeJS中的listen()方法。

app.use("url", express.static("文件夹位置"))：读取静态文件。第一个url是端口号后面的地址，类似原生nodeJS中的req.url。第二个参数是文件夹的位置，写入的文件夹路径，会自动寻找该文件夹下命名为index的文件。

app.get("url",(req, res)=>{})：监听浏览器的get请求。url是端口号后的地址。回调函数中有两个参数分别是req和res。

app.post("url",(req, res)=>{})：监听浏览器的post请求。url是端口号后的地址。回调函数中有两个参数分别是req和res。

req.query：属性，用来获取get请求传递来的参数。返回的是一个对象，通常我们需要通过解构赋值来获取里面的值。

req.body：属性，用来获取post请求传递来的参数（放在请求体里的）。返回的是一个对象，通常我们需要通过解构赋值来获取里面的值。注意：我们必须设置中间件来解析传递过来的值，才能获取到req.body里的值，否则会报错。

六、Vue

一、常见指令

v-bind：控制元素标签属性。比如我们需要动态修改某个标签内属性的值，就要用到v-bind指令。语法糖是:

v-on：用于给元素绑定事件。语法糖是@

v-show：控制标签的内容是否显示。原理是display: none。当经常要进行切换操作的时候，建议使用v-show以提高页面性能。

v-if：控制标签是否显示。原理是删除或者添加DOM元素，当某个标签只需要显示一次就可以删除时，就可以使用v-if。

v-else：搭配v-if使用，逻辑类似原生JS的if else。如果v-if = false，则执行v-else里的代码。

v-for：数组和对象的循环遍历渲染。用于数组时v-for=(item, index) in arr，用于对象时v-for=(value, key) in obj。

v-model：用于表单的双向数据绑定。所有的表单元素需要动态获取如value值时，就要用到v-model。

v-html="data中的属性"：插入内容，可以读取如<h1></h1>等标签属性，插入的标签可以写class，style等属性

v-text="data中的属性"：插入内容，只能插入普通的文本内容，写标签也不会当做是标签进行渲染。

v-pre：写在标签内，用于不解析该标签内的插值语法。

v-cloak：配合css属性使用，用于用户网络较差时，先不加载标签内的内容。css代码：

[v-cloak] {
    display: none;
}

Vue.filter("方法名",(参数)=>{return ...})：全局定义过滤器，可以在本页面任意地方调用。

v-slot:名="{解构值}"：用于<template>标签上，用于绑定具名插槽和作用域插槽。“名”就是子组件中<slot>上的name属性值，解构值就是子组件<slot>标签上的自定义属性名。作用域插槽会将所有的自定义属性收集过来保存在一个对象中。

二、常见属性、方法

1.一般属性

data()：用来存放数据的地方。在组件中，data必须是一个函数，然后这个函数返回一个对象。

components：对象，注册组件的地方。

props：对象，父传子时用于接收的变量就在这里定义，每一个变量也是一个对象，内部有type，default，required属性

methods：对象，用于定义方法。

computed：对象，用于定义计算属性。

filters：对象，内部定义一些方法用于对插值语法内的数据进行一些简单的处理，如toFixed(2)。注意点：filters内部定义的方法都需要接收至少一个形参，并使用return对函数的结果进行返回。

directives：对象，用于定义自定义指令。内部的每一个对象的对象名就是自定义指令的名字，对象内部有bind(el, bingding)，inserted(el, binding)，update(el, binding)方法。bind和inserted大致相同，用于初始化该自定义指令，update用于状态改变时做的变化。形参el就是该自定义指令所在的标签，binding相当于一个事件对象，里面有很多的属性和方法。

watch：对象，用于监听数据的变化（简单数据或复杂数据）。具体用法见《VueJS总结P26》

mixins：数组，用于存放从src->mixins->index.js里面导出的模块；存放的值是一个个的变量，变量名就是组件里面导出的变量名。

2.八大生命周期方法

beforeCreate()：创建前，实例刚刚在内存中被创建出来，此时还没有初始化 data 和 methods 属性。

created()：创建后，实例已经在内存中创建好，此时 data和methods 已经创建好，此时还没有开始编译模板。此时可以访问data和methods属性。

beforeMount()：挂载前，此时已经完成了模板编译，但是还没有挂载到页面中。此时可以访问data和methods属性，但是访问不到页面中的节点。

mounted()：挂载后，这个时候已经把编译好的模板挂载到页面指定的容器里，组件挂载到页面就会触发这个生命周期。此时可以访问data和methods属性，也能访问节点。

beforeUpdate()：更新前，状态更新之前执行此函数，此时的 data 中的数据是最新，但是界面上显示的还是旧的，因为此时还没有开始重新渲染DOM节点。这个过程非常的快，我们是无法分辨出来的，只能在控制台打印看出结果。

updated()：更新后，实例更新完毕之后调用此函数，此时data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。

beforeDestroy()：销毁前，实例销毁之前调用，在这一步，实例仍然完全可用。但是节点无法使用了。注意：Vue不会主动删除如定时器等window对象，需要手动删除。

destroyed()：销毁后，实例销毁后调用，调用后，Vue实例指向的所以东西会被解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。（实测发现data和methods还是能够使用）

三、内置方法

this.$emit("事件名称", 参数1, 参数2..)：用于子传父通信。

bus.$emit("事件名称", 参数1, 参数2..)：用于兄弟组件通信。该组件向另一个兄弟组件传递数据。

bus.$on("事件名称", 回调函数(参数1, 参数2))：用于接收另一个兄弟组件传递过来的参数等。回调函数的参数名可以自行命名（形参），接收的参数就是另一个兄弟组件用bus.$emit()传递过来的参数。这里建议使用箭头函数，否则this指向是在bus这个实例对象上。

Vue.filter("过滤器名称", (参数1, 参数2, ...)=>{})：写在main.js内，定义全局过滤器。回调函数需要至少传递一个参数。定义之后的过滤器可以在该项目的任意位置使用。

Vue.mixin({})：写在main.js内，定义全局混入，花括号内的语法规则和Vue的语法规则一模一样，定义后的全局混入无需引入和在mixins内注册就可以直接使用。

Vue.component("组件名", 引入的变量名)：写在main.js内，注册全局组件。在main.js内引入一个组件后，通过全局注册的方式注册组件，然后该组件可以在本项目的任意位置直接使用且不需要再进行注册。

ref = "名称"：用于绑定组件标签或普通标签，以用于获取该组件或标签（DOM）的属性、方法、数据。

this.$refs.名称/this.$refs[名称变量]：用于获取该组件内所有绑定了的子组件的方法、数据、属性。

四、常用修饰符

1.事件修饰符

用于事件后面，修饰用。例：

<div id="app">
  <div @click="fClick">
    <div @click.stop="dClick">
      <a href="#" @click.prevent="aClick">a标签</a>
      <br />
      <a href="#" @click.once="onceClick">另一个a标签</a>
    </div>
  </div>
</div>

.stop：阻止事件冒泡(*)

.prevent：阻止默认事件(*)

.prevent.stop：阻止默认事件的同时阻止冒泡

.once：阻止事件重复触发（once与stop不能一起使用，否则再次触发事件，依然会冒泡）

2.按键修饰符

用于监听键盘事件时修饰用，例：

<input v-on:keyup.enter="submit">
<input v-on:keyup.13="submit">

.enter ：也可以用13来代替

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

3.表单修饰符

.trim：用法：<input v-model.trim="val" type="text">，用于删除前后空格。

.number：自动将用户的输入值转为数值类型

.lazy：希望在input的change之后再更新输入框的值，可以用这个

4.系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl ：（实测结果：由于mac系统 ctrl+鼠标左键 = 右键 这个功能，所以mac上无法实现）

.alt

.shift

.meta ：（meta在win上代表win键，在mac上代表⌘command键）

七、React

一、常用API

useState：使用方法：const [num, setNum] = useState(1)，返回值是一个数组，useState()中的值就是num的初始值，这是React中将数据同步渲染到页面上的API

useEffect：React没有生命周期钩子，所以用useEffect代替。可以代替挂载后、更新后、销毁前。

createContext：用于多层级父子组件间通信时创建上下文时使用。

useContext：多层级父子组件通信时，子组件接收数据时需要用到。

useRef：使用useRef可以获取某个组件或元素。

useMemo：缓存子组件，防止父组件更新时子组件进行不必要的更新。

useCallback：可以用来代替useMemo

createStore：用来创建状态管理的仓库

Provider：用于包住顶级组件的外层，类似上下文中父组件的Context.Provider，翻译为：提供者。

connect：在需要调用状态管理工具中的数据的组件中使用connect连接器

BrowserRouter、Route、Routes：React中创建路由的必备API

Outlet：类似Vue中的router-view，用来渲染路由页面的。

Link：类似Vue中<li>标签中的to属性。Link中有to属性，也是用于路由跳转。

useLocation：用于获取地址栏的路径、用useNavigate传递过来的参数等。

useNavigate：用于页面跳转，可以携带数据。

useParams：用于获取url子路由形式的传参。

useSearchParams：返回值是一个数组，我们需要用到其中的第一项，并配合getAll("id")方法使用。用于获取用?id=123456形式传递的参数。

二、原生方法

memo()

coderxian

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端常用属性、方法，可以用作工具书（持续更新中...）

以下内容均为自己平时总结，如有错误欢迎指正！目录一、普通元素通用方法二、String三、Array四、Object五、Date六、Promise七、XMLHttpRequest八、JSON九、RegExp十、节点（元素）对象十一、window对象（BOM核心）十二、事件对象event十三、单例内置对象十四、原型链十五、关键字一、普通元素通用方法parseInt(值、变量)：转换为整数，有向下取整，将字符串转换为数值的功能。返回新
复制链接

扫一扫