js数组方法总结

改变原数组的方法：push、unshift、pop、shift、sort、splice、reverse、

push：向数组尾部添加一个数值，返回值是数组的长度

let arr = [1, 3, 5, 6, 7]console.log(arr.push(2)) // 6console.log(arr)  // [1, 3, 5, 6, 7, 2]// 向尾部添加多个数值
arr.push(1, 2, 3) // [1, 3, 5, 6, 7, 1, 2, 3]
// 若是写成数组的形式，会把整个数组当成一个元素添加进数组的尾部；
arr.push([4,5,6,7]) // [1, 3, 5, 6, 7, [4,5,6,7]]

unshift：向头部添加一个或多个数值，返回数组的长度

let arr = [1, 3, 5, 6, 7]console.log(arr.unshift(2)) // 6console.log(arr)  // [2, 1, 3, 5, 6, 7]//若是写成数组的形式，会把整个数组当成一个元素添加进数组的头部；arr.unshift([2,2,2]) // [[2, 2, 2],1, 3, 5, 6, 7]//向数组头部添加多个值arr.unshift(3,4,5) // [3, 4, 5, 1, 3, 5, 6, 7]

pop：删除数组尾部元素，并且将删除的元素返回，不接受指定参数

let arr = [1, 3, 5, 6, 7]
console.log(arr.pop()) //  7
console.log(arr)  // [1, 3, 5, 6]
// 不接受指定参数，仍旧删除数组尾部的一个元素
arr.pop(3) // 6
console.log(arr)  //  [1, 3, 5]

shift：删除数组的第一个元素并将其返回，然后把所有随后的元素下移一个位置来填补数组头部的空缺

let a = [1, 2, 3]
console.log(a.shift())   // 1 (被删除的数组元素)
console.log(a)         //  [2, 3]

sort：将数组中的元素排序并返回排序后的数组，当不带参数调用sort()时，数组元素以字母表顺序排列

let a = new Array("banana","cherry","apple");
a.sort(); // a: ['apple', 'banana', 'cherry']

(一)为了按照其他方式而非字母顺序进行数组排序，必须给sort方法传递一个比较函数，该函数决定了它的两个参数在排好序的数组中的先后顺序。假设第一个参数应该在前，比较函数应该返回一个小于0的数值。反之，假设第一个参数应该在后，函数应该返回一个大于0的数值。并且，假设两个值相等(也就是说，它们的顺序无关紧要)，函数应该返回0

let a = [33,4,1111,222];
a.sort();             //字母表顺序:1111,222,33,4
a.sort(function(a,b){  //数值顺序：4，33，222，1111return a-b;        //根据顺序，返回负数、0、正数
})
a.sort(function(a,b){return b-a});  //数值大小相反的顺序
结合一下：
function sortArr(isOrder = true) { // 默认为升序return function(a, b) {if (isOrder) {return a - b} else{return b - a}}
}
a.sort(sortArr()) // a：[4, 33, 222, 1111]
a.sort(sortArr(false))  // a：[1111, 222, 33, 4]

(二)数组对象排序

let a = [{ id: 33, name: '夜雨声烦' },{ id: 4, name: '石不转' },{ id: 1111, name: '冰雨' },{ id: 222, name: '沐雨橙风' },
];
function dateSort(property, isOrder = true) { //默认代表升序，false为降序return function(a, b) {let value1 = a[property]let value2 = b[property]if (isOrder) {return value1 - value2} else {return value2 - value1}}
}
a.sort(dateSort('id')) // a如下：
0: {id: 4, name: '石不转'}
1: {id: 33, name: '夜雨声烦'}
2: {id: 222, name: '沐雨橙风'}
3: {id: 1111, name: '冰雨'}a.sort(dateSort('id', false)) // a如下：
0: {id: 1111, name: '冰雨'}
1: {id: 222, name: '沐雨橙风'}
2: {id: 33, name: '夜雨声烦'}
3: {id: 4, name: '石不转'}

(三)对一个字符串数组执行不区分大小写的字母表排序，比较函数首先将参数都转化为小写字符串(使用toLowerCase()方法)，再开始比较

let a = ['ant','Bug','cat','Dog'];
a.sort();   //  区分大小写的排序：['Bug','Dog','ant','cat']
a.sort(function(s,t){  //不区分大小写的排序var a = s.toLowerCase();var b = s.toLowerCase();if(a < b) return -1;if(a > b) return 1;return 0;
})   //  => ['ant','Bug','cat','Dog']

splice：在数组中插和或删除元素。返回一个由删除元素数组组成的数组，或者如果没有删除元素就返回一个空数组

第一个参数指定了插入和(或)删除的起始位置。
第二个参数指定了应该从数组中删除的元素的个数。
如果省略第二个参数，从起始点开始到数组结尾的所有元素都将被删除。
紧随其后的任意个数的参数指定了需要插入到数组中的元素，从第一个参数指定的位置开始插入

let a = [1,2,3,4,5,6,7,8];
a.splice(4);      //返回[5,6,7,8]; a是[1,2,3,4]
a.splice(1,2);     //返回[2,3]; a是[1,4]
a.splice(1,1);     //返回[4]; a是[1]// ----删除并插入数组元素
let a = [1,2,3,4,5];
a.splice(2,0,'a','b');     //返回[]; a是[1,2,'a','b',3,4,5]
a.splice(2,2,[1,2],3);     //返回['a','b']; a是[1,2,[1,2],3,3,4,5]

reverse：将数组中的元素颠倒顺序，返回逆序的数组。它不通过重新排列的元素创建新的数组，而是在原先的数组中重新排列他们

let a = [1,2,3];
a.reverse().join()  // => "3,2,1"，并且现在的a是[3,2,1]

不改变原数组的方法：concat、join、slice、reduce、map、forEach、filter、findIndex

concat 创建并返回一个新数组

元素包括调用concat()的原始数组的元素和concat()的每个参数。如果这些参数中的任何一个自身是数组，则连接的是数组的元素，而非数组本身。

let a = [1,2,3];
a.concat(4,5) ;     // 返回[1,2,3,4,5]
a.concat([4,5]);    //返回[1,2,3,4,5]
a.concat([4,5],[6,7])  //返回[1,2,3,4,5,6,7]
a.concat(4,[5,[6,7]])   //返回[1,2,3,4,5,[6,7]]

join 将数组中所有元素都转化为字符串并连接在一起，返回最后生成的字符串

可以指定一个可选的字符串在生成的字符串中来分隔数组的各个元素。如果不指定分隔符，默认使用逗号

let a = [1,2,3];
a.join();     // => "1,2,3"
a.join(" ");  // => "1 2 3"
a.join("")    // => "123";
var b = new Array(10);  //长度为10的空数组
b.join('-')    // => '---------':9个连字号组成的字符串

slice 返回指定数组的一个片段或子数组

两个参数分别指定了片段的开始和结束的位置。返回的数组包含第一个参数指定的位置和所有到但不含第二个参数指定的位置之间的所有数组元素。如果只指定一个参数，返回的数组将包含从开始位置到数组结束的所有元素。如果参数中出现负数，它表示相对于数组中最后一个元素的位置

let a = [1,2,3,4,5];
a.slice(0,3);        //返回[1,2,3]
a.slice(3);          //返回[4,5]
a.slice(1,-1);       //返回[2,3,4]
a.slice(-3,-2);      //返回[3]

(一)纯js 分页

<div id="div"></div>
<button onclick="jump(1)">第一页</button>
<button onclick="jump(2)">第二页</button>
<button onclick="jump(3)">第二页</button>
<script>let div = document.getElementById('div')let currentList = [1, 2, 3, 4, 5, 6, 7, 8, 9, '夜雨声烦', '石不转', '辉月', '沐雨橙风']let pageNum = 1let pageSize = 5jump()function jump(num=1) {pageNum = numlet array = currentList.slice((pageNum - 1) * pageSize, pageNum * pageSize)const HTMLString = `${array.map(element => {return `<p>${element}</p>`}).join('')}`div.innerHTML = HTMLString}
</script>