JS 常用方法集合

2022-07-23 18:56:48

除数取整：

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)