以下内容均为自己平时总结,如有错误欢迎指正!
目录
一、普通元素通用方法
parseInt(值、变量):转换为整数,有向下取整,将字符串转换为数值的功能。返回新生成的数值。原来的值(类型)不会改变。
parseFloat(值、变量):转换为浮点数,有将字符串转换为数值的功能。返回新生成的数值。原来的值(类型)不会改变。
toString():将其他类型转换为字符串类型。返回新生成的字符串。原来的值类型不会改变。
Number(值、变量):将其他类型转换为数值类型。返回新生成的数值。原来的值(类型)不会改变。
Boolean(值、变量):将其他类型转换为布尔类型。返回true或false。原来的值(类型)不会改变。
toFixed(数值):将Number类型的小数取小数点后x位。注意:会进行四舍五入。返回值是改变后的数值。原来的值不会改变。
二、String
indexOf("字符"):用来查询一个字符串中是否存在某个或某串字符。存在则返回该字符的索引,不存在则返回-1。
charAt(index):用来查询某个index对应的字符。存在则返回对应字符,不存在则返回空字符串""。
substr(开始位置,截取n个字符):用来截取从开始位置往后数n个的字符串。返回新生成的字符串。原来的字符串不改变。
substring(开始位置,结束位置):用来截取从开始位置到结束位置(不包含)的字符串。返回新生成的字符串。原来的字符串不会改变。
split("字符"):字符串转数组。用来分割字符串变成数组。返回新生成的数组。如果传入的字符在数组中不存在,则返回的数组中只有一个元素,就是那一整个字符串。原来的字符串不会改变。
replace("旧字符串","新字符串"):用来替换某个字符(串),只会替换符合条件的第一个字符(串)。返回的是新生成的字符串。原来的字符串不会改变。
concat("字符串"、变量、函数、对象、数组):合并方法(从左向右进行合并)。返回值是新生成的字符串(因为这里是字符串调用了该方法)。原来的字符串不会改变。
toUpperCase():所有字母变大写。返回新生成的字符串。原来的字符串不改变。
toLowerCase():所有字母变小写。返回新生成的字符串。原来的字符串不改变。
trim():删除字符串前后空格。常用于表单提交的非空判断。返回值是处理后的字符串。原来的字符串不改变。
三、Array
1.会改变原来数组的方法
pop():删除数组的最后一个值。返回的是被删除的元素。原来的数组会改变。
push(数据):给数组最后一个位置添加值。返回的是新生成数组的长度。原来的数组会改变。
shift():删除数组的第一个值。返回的是被删除的元素。原来的数组会改变。
unshift(数据):给数组第一个位置添加值。返回的是新生成数组的长度。原来的数组会改变。
splice(开始删除的位置,删除n个,替换元素1,替换元素2,...):对数组进行删除、替换、插入元素。返回的是被删除的元素形成的数组(没有删除则返回空数组)。原来的数组会改变。
reverse():翻转数组。返回翻转后的数组。原来的数组会改变。
sort((a,b)=>{}):数组排序,常配合一个函数使用,这个函数如果返回a-b则数组由小到大排序(因为a的ASCII码比b小),返回b-a则数组由大到小排序(因为b的ASCII码比a大)。返回排序后的数组。原来的数组会改变。这是Array构造函数的原型成员。
fill(值):用括号内的值填满数组(该数组必须有长度),返回的是填满值后的数组。原来的数组会改变。这是Array构造函数的原型成员。
2.不会改变原来数组的方法
slice(开始位置,结束位置):用来截取从开始位置到结束位置(不包含)的元素。返回新生成的数组。原来的数组不会改变。
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():将一个类数组对象或者可遍历对象转换成一个真正的数组,如可以将字符串、Set类型数组转换成真正的数组。返回值是新生成的数组。这是Array的静态成员。详细用法《JS高级总结27》
Array.of():将传递进去的任何参数都放到一个数组中去。返回值是新生成的数组。这是Array的静态成员。详细用法《JS高级总结41》
四、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.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的指向更改为借用该方法的对象。
某个对象.方法.apply(借用该方法的对象,[参数1,参数2...]):某个对象借用另一个对象中的方法时使用。括号中的借用对象如没有则写null,传入的参数必须是数组,参数如没有则不写。借用的方法会立即调用,借用方法中this的指向更改为借用该方法的对象。举例: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.all([p1,p2...]):一次性执行括号内所有的promise对象。若结果都为resolve,则返回所有的值组成的数组;若有多个reject,则返回最先生成的那个reject,其他promise对象的拒绝也会静默处理,并不会让错误跑掉,其他resolve就不会执行了。注意传入的是每个promise变量组成的数组。这是一个静态成员。
Promise.race([p1,p2...]):一次性执行括号内所有的promise对象。返回最先得到结果的那个值(不论是resolve还是reject),其余的期约就会被忽略,但是这并不影响其他期约的拒绝操作,其他的拒绝也会被静默处理,不会有错误跑掉。这是一个静态成员。
七、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 "数据类型错误"}。
