JavaScript数组办法
一、操作数组的办法
-
把数组转换为字符串 Array.join(str)
join()办法行为相似toString(),将数组转换为字符串，然而join办法能够应用参数str自定义宰割符
['wfewfe', '123123'].toString() // "wfewfe,123123" ['wang', 'shao', 'jie'].join('-') // "wang-shao-jie" -
删除数组中最初一个元素pop(), 返回值为被删除的值
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.pop(); // x 的值是 "Mango" - 向数组中增加数据，push()办法向数组开端处增加一个元素；unshift()办法向数组头部处增加一个元素，返回新数组的长度
- 从数组中删除数据，shift()办法删除数组第一个元素，返回被删除元素值；<u>留神：</u>应用delete删除数组中元素会把删除地位的元素置为undefined，
-
splice()办法既能删除元素也能增加元素，Array.splice(index, howmany, item1,…., itemX),该办法返回值为被删除元素组成的数组。在不传递item1…i,temX参数的时候意为删除数组index地位开始howmany个元素。
参数 形容 index 必须。整数，规定增加/删除我的项目的地位，应用正数可从数组结尾处规定地位。 howmany 必须。要删除的我的项目数量。如果设置为 0，则不会删除我的项目。 item1, …, itemX 可选。向数组增加的新我的项目。 -
concat()办法通过合并（连贯）现有数组来创立一个新数组，Array.concat(arr1,…,arrX),该办法参数能够为任意个数组也能够是具体的值
[1,2,3,4,5,6].concat([1,2,3,4,5]) // 返回 [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5] [1,2,3,4].concat(11,22) // 返回 [1, 2, 3, 4, 11, 22] -
reverse()数组反转，用于将数组的元素程序反转
const arr = [111, 222, 333, 444] console.log(arr.reverse()); // [444, 333, 222, 111] -
sort()办法用于对数组元素进行排序， 应用模式为Array.sort(sortby)，参数sortby可选，它规定排序程序，必须为函数。须要留神的是：当对数值数组进行排序时，sortby参数必须为一个排序函数：
const arr = [111, 222, 333, 444, 123, 435, 42] // console.log(arr.sort()); // [111, 123, 222, 333, 42, 435, 444] // console.log(arr.sort((a, b) => a - b)); // [42, 111, 123, 222, 333, 435, 444] console.log(arr.sort((a, b) => b - a)); // [444, 435, 333, 222, 123, 111, 42] - includes()办法用于检测数组中是否存在某值，用法Array.includes(value)，如果value存在与数组中返回true，否则返回false
-
from()办法用于将类数组对象转化为真正的数组，最根本的要求是具备length属性的对象
const arrayLike = { 0: 'tom', 1: '65', 2: '男', 3: ['jane','john','Mary'], 'length': 4 } let arr = Array.from(arrayLike) console.log(arr) // ['tom','65','男',['jane','john','Mary']] -------------------------------------------------------------------------------- // 属性名不是数值时转化失败 let arrayLike = { 'name': 'tom', 'age': '65', 'sex': '男', 'friends': ['jane','john','Mary'], length: 4 } let arr = Array.from(arrayLike) console.log(arr) // [ undefined, undefined, undefined, undefined ]
from能够将Set构造的数据转化为真正的数组
二、遍历数组的办法
（1）for
const array = [1,2,3,4]
for(i = 0; i < array.length; i++) {
console.log(array[i]) // 顺次打印array中元素
}（2）forEach
// 遍历数组中的每一项，没有返回值，对原数组没有影响，不反对IE
[1,2,3,4,5].forEach(item, index, array) => {
// item为遍历数组的以后项， index为以后索引值， array为原始数组
}（3）map
// 遍历数组，有返回值，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项扭转了）；
const arr = ['wang', 'shao']
const arr2 = arr.map(item => {
return item += '1'
})
console.log(arr); // ['wang', 'shao']
console.log(arr2); // ['wang1', 'shao1']（4）for of
const arr = [1,2,3,4,5,6]
for (const value of arr) {
console.log(value); // 顺次打印数组中每个元素
}（5）filter
//不会扭转原始数组，返回新数组， filter 译为过滤，应用指定条件挑选出符合条件的元素组成数组
const arr = [
{ id: 1, text: 'aa', done: true },
{ id: 2, text: 'bb', done: false },
{ id: 2, text: 'bb', done: true },
{ id: 2, text: 'bb', done: true },
]
console.log(arr.filter(item => item.done))
// 0: {id: 1, text: "aa", done: true}
// 1: {id: 2, text: "bb", done: true}
// 2: {id: 2, text: "bb", done: true}
（6）every
// 遍历数组，对每一个元素运行指定函数，如果该函数对每一项都返回true则返回true
const arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.every( function( item, index, array ){
return item > 3;
}));
// false（7）some
// some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。
const arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.every( function( item, index, array ){
return item > 3;
}));
// true（8）reduce
// reduce() 办法接管一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
}); // 返回10
const arr = [
{ id: 1, text: 'aa', done: true, num: 11 },
{ id: 2, text: 'bb', done: false, num: 22 },
{ id: 3, text: 'bb', done: true, num: 33 },
{ id: 4, text: 'bb', done: true, num: 44 }
]
const temp = arr.reduce((previousValue, currentValue) => {
return previousValue + currentValue.num
}, 0) // 返回110reduce高级用法
1.累加累乘
function Accumulation(...vals) {
return vals.reduce((t, v) => t + v, 0);
}
function Multiplication(...vals) {
return vals.reduce((t, v) => t * v, 1);
}
Accumulation(1, 2, 3, 4, 5); // 15
Multiplication(1, 2, 3, 4, 5); // 120 2.权重求和
const scores = [
{ score: 90, subject: "chinese", weight: 0.5 },
{ score: 95, subject: "math", weight: 0.3 },
{ score: 85, subject: "english", weight: 0.2 }
];
const result = scores.reduce((t, v) => t + v.score * v.weight, 0); // 90.5 3.代替reverse
function Reverse(arr = []) {
return arr.reduceRight((t, v) => (t.push(v), t), []);
}
Reverse([1, 2, 3, 4, 5]); // [5, 4, 3, 2, 1] 4.代替map和filter
const arr = [0, 1, 2, 3];
// 代替map：[0, 2, 4, 6]
const a = arr.map(v => v * 2);
const b = arr.reduce((t, v) => [...t, v * 2], []);
// 代替filter：[2, 3]
const c = arr.filter(v => v > 1);
const d = arr.reduce((t, v) => v > 1 ? [...t, v] : t, []);
// 代替map和filter：[4, 6]
const e = arr.map(v => v * 2).filter(v => v > 2);
const f = arr.reduce((t, v) => v * 2 > 2 ? [...t, v * 2] : t, []); 5.代替some和every
const scores = [
{ score: 45, subject: "chinese" },
{ score: 90, subject: "math" },
{ score: 60, subject: "english" }
];
// 代替some：至多一门合格
const isAtLeastOneQualified = scores.reduce((t, v) => v.score >= 60, false); // true
// 代替every：全副合格
const isAllQualified = scores.reduce((t, v) => t && v.score >= 60, true); // false 6.数组过滤
function Difference(arr = [], oarr = []) {
return arr.reduce((t, v) => (!oarr.includes(v) && t.push(v), t), []);
}
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [2, 3, 6]
Difference(arr1, arr2); // [1, 4, 5] 7.数组成员个性分组
function Group(arr = [], key) {
return key ? arr.reduce((t, v) => (!t[v[key]] && (t[v[key]] = []), t[v[key]].push(v), t), {}) : {};
}
const arr = [
{ area: "GZ", name: "YZW", age: 27 },
{ area: "GZ", name: "TYJ", age: 25 },
{ area: "SZ", name: "AAA", age: 23 },
{ area: "FS", name: "BBB", age: 21 },
{ area: "SZ", name: "CCC", age: 19 }
]; // 以地区area作为分组根据
Group(arr, "area"); // { GZ: Array(2), SZ: Array(2), FS: Array(1) } 8.url参数序列化
function StringifyUrlSearch(search = {}) {
return Object.entries(search).reduce(
(t, v) => `${t}${v[0]}=${encodeURIComponent(v[1])}&`,
Object.keys(search).length ? "?" : ""
).replace(/&$/, "");
}
StringifyUrlSearch({ age: 27, name: "YZW" }); // "?age=27&name=YZW" （9）reduceRight
//reduceRight性能与reduce基本相同，不同的是reduceRight是从开端开始操作数组（10）find
//find()办法返回数组中合乎测试函数条件的第一个元素。否则返回undefined
const arr = [1, 2, 3, 4, 5, 6, 7]
const result = arr.find(item => item>4)
console.log(result); // 5
（11）findIndex
//find()办法返回数组中合乎测试函数条件的第一个元素的索引值。否则返回-1
const arr = [1, 2, 3, 4, 5, 6, 7]
const result = arr.findIndex(item => item>10)
console.log(result); // -1（12）keys, values, entries
//Array.keys() 顺次取出数组的索引值
//Array.values() 顺次取出数组的元素值
//Array.entried() 顺次取出数组的索引值和元素值
const arr = [111, 222, 333, 444]
for (let i of arr.keys()) {
console.log(i);
}
// 0 1 2 3
for (let i of arr.values()) {
console.log(i);
}
// 111 222 333 444
for (let [i, v] of arr.entries()) {
console.log(i, v);
}
// 0 111 1 222 2 333 3 444三、数组去重
1.ES6 Set去重
function unique (arr) {
return Array.from(new Set(arr))
}2.双循环数组切割去重
function unique(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(arr[i]==arr[j]){ //第一个等同于第二个，splice办法删除第二个
arr.splice(j,1);
j--;
}
}
}
return arr;
}3.利用indexOf去重
新建一个空的后果数组，for 循环原数组，判断后果数组是否存在以后元素，如果有雷同的值则跳过，不雷同则push进数组。
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array .indexOf(arr[i]) === -1) {
array .push(arr[i])
}
}
return array;
}4.利用sort()
利用sort()排序办法，而后依据排序后的后果进行遍历及相邻元素比对。
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return;
}
arr = arr.sort()
var arrry= [arr[0]];
for (var i = 1; i < arr.length; i++) {
if (arr[i] !== arr[i-1]) {
arrry.push(arr[i]);
}
}
return arrry;
}5.利用includes()
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
var array =[];
for(var i = 0; i < arr.length; i++) {
if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
array.push(arr[i]);
}
}
return array
}6.利用reduce+includes
includes判断reduce中的前一个数组是否存在下一个元素
function unique(arr){
return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
发表回复