除数取整:
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")); //7
7. 删除头尾的空格: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)); // 返回的是新数组的长度 8
4.删除数组的最后一个元素,返回被删除的值(减少数组的长度):pop()
var arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.pop()); // e
console.log(arr.length); // 4
5.向数组的开头添加一个或多个的元素,并返回新的长度:unshift()
var arr = [1,2,3,4,5];
console.log(arr.unshift(2,4,5,{name:'liqi'})); //返回的是新数组的长度 9
6.删除数组的第一个参数,数组的长度减1:shift()
var arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.shift()); // 返回的是删除的数组的值 a
7.按指定的参数对数组进行排序,返回的值是经过排序后的数组: 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 9
11.从数组的开头向后查找,(接受两个参数,要查找的项和查找起点的位置索引):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)); // 1
12.从数组末尾开始获取: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,5
18.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) // true
19.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=79
20.判断一个对象是否为数组:isArray()
var arr = [3,4,5]
console.log(Array.isArray(arr)); // true
Math
Math本身就是一个对象, 不需要在通过构造函数去创建, 该对象中集合了很多关于数学运算的方法
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)
你好