JS 常用方法集合
除数取整：
1.只保留整数部分：parseInt(5/2)
2.向上取整,有小数就整数部分加1：Math.ceil(5/2)
3,四舍五入：Math.round(9/2)
4,向下取整：Math.floor(5/2)
大小写：
1.使字符串全部变为小写：toLowerCase() \ toLocaleLowerCase()
2.使全部字符变为大写：toUpperCase() \ toLocaleUpperCase()
字符串相关
1.返回指定索引的字符：charAt()
2.字符串拼接：concat()
3.取从第几位到指定长度的字符串：substr()
var stringValue = "hello world";
console.log(stringValue.substr(3)); //"lo world"
console.log(stringValue.substr(3,7)); //"lo worl"4.取介于两个指定下标之间的字符串：substring()
var stringValue = "hello world";
console.log(stringValue.substring(3)); //"lo world"
console.log(stringValue.substring(3,7)); //"lo w"5.返回一个新的数组,介于两个指定下标之间的字符串：slice()
var stringValue = "hello world";
console.log(stringValue.slice(3)); //"lo world"
console.log(stringValue.slice(3,7)); //"lo w"6.返回子字符串的位置(没有找到返回-1)：首次的位置：IndexOf、最后的位置：lastIndexOf
var stringValue = "hello world";
console.log(stringValue.indexOf("o")); //4
console.log(stringValue.lastIndexOf("o")); //77. 删除头尾的空格：trim()
8.检索指定的值：match()
var str1 = "lixiaoqi";
console.log(str1.match('iao')); //检索字符串，返回的是字符
console.log(str1.match('lll')); //没有指定的字符，返回的是null
9.返回指定的第一个匹配项的索引(未检测到返回-1)：search()
10.替换现有字符串：.replace()
11.把字符串分割成字符串数组：split(分隔符)
数组相关
1. 返回从原数组中指定开始下标到结束下标之间的项组成的新数组（原数组不变）：slice()
var arr = [1,2,3,4,5,6,7,8];
console.log(arr.slice(4)); //从4开始到结束 [5, 6, 7, 8]
console.log(arr.slice(2,6));//数组下表从0开始，从2开始，到6的前一个位置结束 [3, 4, 5, 6]2.splice()
删除（2个参数，起始位置，删除的项数）
插入（3个参数，起始位置，删除的项数，插入的项）
替换（任意参数，起始位置，删除的项数，插入任意数量的项数）
var arr = [1,2,3,4,5];
console.log(arr.slice(2,3)); // 实际得到的新数组的项数是end-strat [3]
console.log(arr.slice(1,5)); // [2, 3, 4, 5]3.将参数添加到数组的最后，返回新数组的长度：push()
var arr = [1,2,3,4,5];
console.log(arr.push(6,7,8)); // 返回的是新数组的长度 84.删除数组的最后一个元素，返回被删除的值(减少数组的长度)：pop()
var arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.pop()); // e
console.log(arr.length); // 45.向数组的开头添加一个或多个的元素，并返回新的长度：unshift()
var arr = [1,2,3,4,5];
console.log(arr.unshift(2,4,5,{name:'liqi'})); //返回的是新数组的长度 96.删除数组的第一个参数，数组的长度减1：shift()
var arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.shift()); // 返回的是删除的数组的值 a7.按指定的参数对数组进行排序，返回的值是经过排序后的数组： sort()
var arr = [1,'q',3,6,2,'a',9];
console.log(arr.sort()); // 返回的是排序后的数组 [1, 2, 3, 6, 9, "a", "q"]8.将数组中的元素进行反转，倒序显示：reverse()
var arr = [1,2,3,4,5]
console.log(arr.reverse()); // [5, 4, 3, 2, 1]9.把两个字符串连接起来，返回的值是一个副本：concat(a, b)
var arr1 = [1,'q',3,6,2,'a',9];
console.log(arr1.concat('-', arr1)); //新创建一个数组，原数组不变 [1, "q", 3, 6, 2, "a", 9, "-", 1, "q", 3, 6, 2, "a", 9]
console.log(arr1); //原数组不变 [1,'q',3,6,2,'a',9]10.用分隔符将数组的元素组成一个字符串：join()
var arr1 = [1,'q',3,6,2,'a',9];
console.log(arr1.join(',')); //以逗号分隔 1,q,3,6,2,a,9
console.log(arr1.join(' ')); //以空格分隔 1 q 3 6 2 a 911.从数组的开头向后查找，（接受两个参数，要查找的项和查找起点的位置索引）：indexOf()
var arr = [1,2,3,4,5,6,78];
console.log(arr.indexOf(78, 2)); // 查找78所在的位置，返回的项的索引 6
console.log(arr.indexOf(3, 1)); // 2
console.log(arr.indexOf(2)); // 112.从数组末尾开始获取：lastIndexof()
13.遍历数组：for
var arr = [1, 4, 9, 16];
for (var i = 0; i < arr.length; i++){
console.log(arr[i]);
}14.对数组的每个元素执行一次提供的函数：foeEach()
var arr = ['a', 'b', 'c'];
arr.forEach(function(item) {
console.log(item); // a // b // c
});15.对数组的每一项运行给定的函数，返回没戏函数调用的结果组成的数组：map()
var arr = [1, 4, 9, 16];
console.log(arr.map(x => x * 2)); //对数组的每项*2 [2, 8, 18, 32]16.通过检查指定数组中符合条件的所有元素（不会改变原始数组）：filter()
var arr = [1,12,7,8,5]
function fn(i) {
return i > 5;
}
console.log(arr.filter(fn)); // [12, 7, 8]17.把数组转换成字符串，每一项用,分割：toString()
var arr = [1,2,3,4,5]
console.log(arr.toString()); // 1,2,3,4,518.every和some
every 是所有函数的每个回调都返回 true 的时候才会返回 true，当遇到 false 的时候终止执行，返回 false。
some 函数是存在有一个函数返回 true 的时候终止执行并返回 true，否则返回 false。
// every
var arr = [1,6,8,-2,-5,7,-4]
var isPositive = arr.every(function(value){
return value > 0;
})
console.log(isPositive) // false
//some
var arr = [1,6,8,-2,-5,7,-4]
var isPositive = arr.some(function(value){
return value > 0;
})
console.log(isPositive) // true19.reduce(function(v1,v2),value) 和 reduceRight(functio(v1,v2),value)
遍历数组，调用回调函数，将数组元素组合成一个值，reduce 从索引最小值开始，reduceRight 反向，方法有两个参数（回调函数，把两个值合成一个，返回结果；value,一个初始值，可选）
var arr = [1,2,3,4,5,6]
console.log(arr.reduce(function(v1,v2){
return v1 + v2;
})) // 21
//开始是1+2 = 3，之后3+3 =6，之后6+4 =10，之后
//10+5 =15，最后15+6 =21
console.log(arr.reduce(function(v1,v2){
return v1 - v2;
},100)) // 79
//开始的时候100-1=99，之后99-2=97，之后97-3=94，之后
//94-4=90，之后90-5=85，最后85-6=7920.判断一个对象是否为数组：isArray()
var arr = [3,4,5]
console.log(Array.isArray(arr)); // true
MathMath本身就是一个对象, 不需要在通过构造函数去创建, 该对象中集合了很多关于数学运算的方法
Math.abs() 获取一个对象的绝对值
Math.round() 四舍五入
Math.PI π
Math.max() 求几个数的最大数
Math.min() 求几个数的最小数
Math.ceil() 向上取整
Math.floor() 向下取整
Math.random() 随机数 (随机生成0 ~1之间的数)
JS选取DOM元素的方法
注意：原生JS选取DOM元素比使用jQuery类库选取要快很多
1、通过ID选取元素
document.getElementById('myid');2、通过CLASS选取元素
document.getElementsByClassName('myclass')[0];3、通过标签选取元素
document.getElementsByTagName('mydiv')[0];4、通过NAME属性选取元素（常用于表单）
document.getElementsByName('myname')[0];JS修改CSS样式
document.getElementById('myid').style.display = 'none';JS修改CLASS属性
document.getElementById('myid').className = 'active';如果有多个CLASS属性，即用空格隔开
document.getElementById('myid').className = 'active div-1';移除该元素上的所有CLASS
document.getElementById('myid').className = '';注意：使用classList会优于使用className
document.getElementById('myid').classList.item(0); //item为类名的索引
document.getElementById('myid').classList.length; //只读属性
document.getElementById('myid').classList.add('newClass'); //添加class
document.getElementById('myid').classList.remove('newClass'); //移除class
document.getElementById('myid').classList.toggle('newClass'); //切换，有则移除，没有则添加
document.getElementById('myid').classList.contains('newClass'); //判断是否存在该class补充：add和remove方法不允许链式操作，因为返回的都是undefined，其次，也不允许同时添加或删除多个class，可以自行扩展一下
JS修改文本
document.getElementById('myid').innerHTML = '123';JS创建元素并向其中追加文本
var newdiv = document.createElement('div');
var newtext = document.createTextNode('123');
newdiv.appendChild(newtext);
document.body.appendChild(newdiv);同理：removeChild()移除节点，并返回节点
cloneNode() 复制节点
insertBefore() 插入节点（父节点内容的最前面）
注意：insertBefore() 有两个参数，第一个是插入的节点，第二个是插入的位置
追加元素的几种方法：
1.在父级最前面追加一个子元素：prepend()
$('#page ul').prepend('<li id="prevPage">上一页</li>');2.在父级最后面追加一个子元素：append()
$('#page ul').append('<li id="nextPage">下一页</li>');3.将子元素追加到父级的最前面：prependTo()
$("<li id="prevPage">上一页</li>").prependTo($("#page ul"));4.将子元素追加到父级的最后：appendTo()
$("<li id="nextPage">下一页</li>").appendTo($("#page ul")); 5.在当前元素之前追加（是同级关系）：before()
$("#wrap").before("<p class='siblings'>我是同级元素before</p>");6.在当前元素之后追加（是同级关系）：after()
$("#wrap").after("<p class='siblings'>我是同级元素after</p>");7.将元素追加到指定对象的前面（是同级关系）：insertBefore()
$("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap")); 8.将元素追加到指定对象的后面（是同级关系）：insertAfter()
$("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap")); 9.在节点的最后追加子元素：appendChild()
// 创建script标签
var script = document.createElement('script');
// 设置src属性
script.src = 'http://localhost:3001/better?callback=fn2';
// 将script标签追加到页面中
document.body.appendChild(script);
// 或者
// 创建p节点
var para = document.createElement("p");
// 创建文本节点
var node = document.createTextNode("我是子集appendChild新段落。");
// 把文本节点添加到p节点里
para.appendChild(node);
// 查找div
var element = document.getElementById("wrap");
// 把p节点添加到div1里
element.appendChild(para); JS返回所有子节点对象 childNodes
firstChild 返回第一个子节点
lastChild 返回最后一个子节点
parentNode 返回父节点对象
nextSibling 返回下一个兄弟节点对象
previousSibling 返回前一个兄弟节点对象
nodeName 返回节点的HTML标记名称
var mylist = document.getElementById('myid');
for(var i=0,i<mylist.childNodes.length;i++){
console.log(mylist.childNodes[i]);
}常用的封装好的方法：
1、n-m之间的随机数
function numRandom(n, m) {
if (n > m) {
return parseInt(m + Math.random() * (n - m + 1));
} else {
return parseInt(n + Math.random() * (m - n + 1));
}
}2、时间过滤器 yyyy-mm-dd hh:mm:ss
filters = (data) =>{
var time = new Date(data);
var timeStr = time.getFullYear()+"-"+
(time.getMonth()+1).toString().padStart(2,"0")+"-"+
time.getDate().toString().padStart(2,"0")+ " "+
time.getHours().toString().padStart(2,"0")+":"+
time.getMinutes().toString().padStart(2,"0")+":"+
time.getSeconds().toString().padStart(2,"0");
return timeStr;
}
function formatDate(date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
// return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
return year + '-' + (String(month).length > 1 ? month : '0' + month) + '-' +
(String(day).length > 1 ? day : '0' + day) + ' ' + (String(hour).length > 1 ? hour : '0' + hour) + ':' + (String(minute).length > 1 ? minute : '0' + minute)
+ ':' + (String(second).length > 1 ? second : '0' + second)
}
//如果记得时间戳是毫秒级的就需要*1000 不然就错了记得转换成整型
var d = new Date(); //Tue Mar 26 2019 05:00:00 GMT+0800 (中国标准时间)
console.log(formatDate(d)) //2019-03-26 05:00:00 3、返回顶部通用方法
function backTop(btnId) {
var btn = document.getElementById(btnId);
var d = document.documentElement;
var b = document.body;
window.onscroll = set;
btn.style.display = "none";
btn.onclick = function () {
btn.style.display = "none";
window.onscroll = null;
this.timer = setInterval(function () {
d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
if (d.scrollTop + b.scrollTop == 0)
clearInterval(btn.timer, (window.onscroll = set));
}, 10);
};
function set() {
btn.style.display = d.scrollTop + b.scrollTop > 100 ? "block" : "none";
}
}
backTop("goTop");对象Object构造方法
Object.assign()将所有可枚举的自身属性的值从一个或多个源对象复制到目标对象。
Object.create()用指定的原型对象和属性创建一个新对象。
Object.defineProperty()将给定描述符描述的命名属性添加到对象。
Object.defineProperties()将给定描述符描述的命名属性添加到对象。
Object.entries()返回一个包含[key, value]给定对象自己的可枚举字符串属性的所有对的数组。
Object.freeze()冻结对象。其他代码无法删除或更改其属性。
Object.fromEntries()从可迭代的[key, value]对中返回一个新对象。（这是的反向 Object.entries）。
Object.getOwnPropertyDescriptor()返回对象的命名属性的属性描述符。
Object.getOwnPropertyDescriptors()返回一个包含对象自身所有属性描述符的对象。
Object.getOwnPropertyNames()返回一个数组，其中包含给定对象自己的所有可枚举和不可枚举属性的名称。
Object.getOwnPropertySymbols()返回直接在给定对象上找到的所有符号属性的数组。
Object.getPrototypeOf()返回prototype指定对象的。
Object.is()比较两个值是否相同。求所有NaN值（不同于“抽象相等比较”和“严格相等比较”）。
Object.isExtensible()确定是否允许扩展对象。
Object.isFrozen()确定对象是否冻结。
Object.isSealed()确定对象是否密封。
Object.keys()返回一个数组，其中包含给定对象自己的所有可枚举字符串属性的名称。
Object.preventExtensions()防止对象的任何扩展。
Object.seal()防止其他代码删除对象的属性。
Object.setPrototypeOf()设置对象的原型（其内部[[Prototype]]属性）。
Object.values()返回一个数组，该数组包含与给定对象自己的所有可枚举字符串属性相对应的值。
更改数组对象中属性的参数名：
let data1 = [
{ appName: "应用1", capacity: 233456 },
{ title: "应用2", key: 124535 }
];
let data2 = [];
data1.forEach(item => {
data2.push({
name: item.appName || item.title,
value: item.capacity || item.key
});
});
console.log(data2)