关于javascript:JS数组操作与方法

65次阅读

共计 7021 个字符，预计需要花费 18 分钟才能阅读完成。

JavaScript 数组办法

一、操作数组的办法

  1. 把数组转换为字符串 Array.join(str)

    join()办法行为相似 toString(), 将数组转换为字符串，然而 join 办法能够应用参数 str 自定义宰割符

    ['wfewfe', '123123'].toString() // "wfewfe,123123"
['wang', 'shao', 'jie'].join('-') // "wang-shao-jie"

  2. 删除数组中最初一个元素 pop(), 返回值为被删除的值

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x 的值是 "Mango"
  3. 向数组中增加数据，push()办法向数组开端处增加一个元素；unshift()办法向数组头部处增加一个元素，返回新数组的长度
  4. 从数组中删除数据，shift()办法删除数组第一个元素，返回被删除元素值；<u>留神：</u> 应用 delete 删除数组中元素会把删除地位的元素置为undefined，

  5. splice()办法既能删除元素也能增加元素，Array.splice(index, howmany, item1,…., itemX), 该办法返回值为被删除元素组成的数组。在不传递 item1…i,temX 参数的时候意为删除数组 index 地位开始 howmany 个元素。

    参数 形容
    index 必须。整数，规定增加 / 删除我的项目的地位，应用正数可从数组结尾处规定地位。
    howmany 必须。要删除的我的项目数量。如果设置为 0，则不会删除我的项目。
    item1, …, itemX 可选。向数组增加的新我的项目。

  6. 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]

  7. reverse()数组反转，用于将数组的元素程序反转

    const arr = [111, 222, 333, 444]
console.log(arr.reverse()); // [444, 333, 222, 111]

  8. 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]
  9. includes()办法用于检测数组中是否存在某值，用法 Array.includes(value)，如果 value 存在与数组中返回 true，否则返回 false

  10. 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) // 返回 110

reduce 高级用法

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],[]);
}

正文完
javascript
发表至： javascript
2021-05-31
 0
关于javascript:Web-安全-之-OS-command-injection
快速进阶Vue30
浏览器模型
javascript设计模式学习笔记之迭代器模式