JS 操作数组

望京十三兄

已于 2024-04-11 09:38:00 修改

阅读量644

点赞数

分类专栏： JSCool 文章标签： javascript

于 2020-04-16 22:43:24 首次发布

本文链接：https://blog.csdn.net/qq_27401917/article/details/105299269

版权

JSCool 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

数组的创建和赋值
两种方式创建：
1)字面量方式 var arr = ['you','me','their']
2)使用 new 关键字创建（构造函数） var arr = new Array();

数组赋值：
```
var arr = [];
arr[0] = 123;
arr[1] = '第三个发';
arr[2] = '命运交响曲'
```

类数组
arguments , HTMLClection , NodeList

//将foo的参数传给bar
function foo(){
    bar.apply(this, arguments)
}

function bar(a,b,c){
    console.log(a,b,c)
}

foo(1,2,3)

数组方法列举30个
1）改变原数组：shift、unshift 、pop、push、sort、reverse、splice
2）不改变原数组：slice、 concat、 join 、filter、some、map、find、toReverted 、toSorted、toSpliced、with

length属性 在末尾添加一个新项，返回有一个新的数组。
```
var arr = ["1","2","3"];
arr[arr.length]="4"; //在坐标为 length 的位置添加一个新项
console.log(arr) //返回为【“1”，“2”，“3”，“4”】
```
shift() 删除数组的第一个元素，返回删除的值。 //0
unshift(3,4) 把参数添加到数组头部，返回数组的长度。// [3,4,0,1,2].unshift[0] -> 6
pop() 删除数组的最后一个元素，返回删除的值。//2
push(3) 将参数添加到数组最后，返回数组的长度。（可以添加多个，以逗号隔开）// [0,1,2,3]
reverse() 数组反序。
sort(orderfunction) 按照参数指定的方法进行排序
splice(i,n) 删除从i(索引值)开始之后的n个元素，返回值是删除的元素。splice(start,deleteCount,val1,val2,...) 从start位置开始删除deleteCount 项，并从该位置起插入值val1,val2,...

~~str.split() 将字符串转化为数组~~
slice(start,end) 返回参数区间的值作为新数组输出(首项下标0，左闭右开)。
concat(3,4) 把两个数组拼接起来。//[0,1,2,3,4]
join() 返回字符串，包含数组中的所有元素由指定的分隔符分隔。
map() filter() some() erery()
.toSpliced() 非破坏性版本，它会返回原数组变更后的版本，因此我们拿不到被删除的元素
```
const array = [1, 2, 3, 4, 5, 6];
const result = array.tospliced(1, 2, 0);
console.log(result); //  [1, 0, 4, 5, 6]
console.log(array);  // [1, 2, 3, 4, 5, 6]
```
.toSorted() 是 .sort() 的非破坏性版本：
```
const array = ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i'];
const result = array.toSorted();
console.log(result); //  ['a', 'c', 'd', 'i', 'l', 'n', 'o', 'r']
console.log(array); // ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i']
```
.toReversed() 是 .reverse() 的非破坏性版本：
```
const array = ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i'];
const result = array.toReversed();
console.log(result); //  ['i', 'l', 'd', 'r', 'a', 'n', 'o', 'c']
console.log(array); // ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i']
```
.find(callback) 找到第一个符合条件的数组成员
.findIndex(callback) 找到第一个符合条件的数组成员的索引值
.fill(target, start, end) 使用给定的值，填充一个数组,ps:填充完后会改变原数组
.includes() 判断数中是否包含给定的值
toString() 直接转换为字符串，每个元素之间用逗号隔开。
isArray() 判断一个对象是否为数组类型，返回布尔值 true / false。

.keys() 遍历数组的键名
.values() 遍历数组键值
.entries() 遍历数组的键名和键值
.forEach(callback) 遍历数组,无return
.map(callback) 映射数组(遍历数组),有return 返回一个新数组
.every(callback) 依据判断条件，数组的元素是否全满足，若满足则返回ture
.some() 依据判断条件，数组的元素是否有一个满足，若有一个满足则返回ture

arr.filter(a => !['l','i'].includes(a)) 过滤数组，返回一个满足要求的数组
arr.reduce(callback, initialValue) 迭代数组的所有项，累加器，数组中的每个值（从左到右）合并，最终计算为一个值
arr.reduceRight(callback, initialValue) 与arr.reduce()功能一样，不同的是，reduceRight()从数组的末尾向前将数组中的数组项做累加。

.indexOf() 查找某个元素的索引值，若有重复的则返回第一个查到的索引值，若不存在则返回 -1
.lastIndexOf() 和arr.indexOf()的功能一样，不同的是从后往前查找
Array.from() 将伪数组变成数组，就是只要有length的就可以转成数组。 ---es6
Array.of() 将一组值转换成数组，类似于声明数组 ---es6
.with() 是对数组的某个元素赋值操作 array[index] = value 的非破坏性版本，如果我们只是想得到一个新数组，又不想改变原数组，可以这样用：
```
const array = ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i'];
const result = array.with(0, 'ConardLi')
console.log(result); //  ['ConardLi', 'o', 'n', 'a', 'r', 'd', 'l', 'i'];
console.log(array); // ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i']
```
.copyWithin() 在当前数组内部，将指定位置的数组复制到其他位置，会覆盖原数组项，返回当前数组

数组排序 arr.sort()
sort()方法将在原数组上进行排序，即排序时不创建新的数组副本。
sort()没有使用参数，将按照字符编码的顺序排序。首先应把数组的元素都转换成字符串(如果有必要的话)，以便进行比较。
如果想按照别的顺序进行排序，就必须提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b，
sort(function(a,b){}) 根据设定的评判标准，其返回值如下：

var a = [1, 4, 2, 3, 5];
var b = a.sort();
console.log(a, b);  //[ 1, 2, 3, 4, 5 ] [ 1, 2, 3, 4, 5 ]

如果a<b，排序后a应该出现在b之前，就返回一个小于0的值。
如果a等于b，就返回0。
如果a大于b，就返回一个大于0的值。

注意，数组中undefined的元素都排列在数组末尾。即使你提供了自定义的排序函数也是这样，因为undefined值不会被传递给你提供的orderfunc

数字数组进行由小到大的顺序

var arr = [22,12,3,43,56,47,4];
arr.sort();
console.log(arr); // [12, 22, 3, 4, 43, 47, 56]
arr.sort(function (m, n) {
 if (m < n) return -1
 else if (m > n) return 1
 else return 0
});
console.log(arr); // [3, 4, 12, 22, 43, 47, 56]

字符串数组不区分大小写排序

var arr = ['abc', 'Def', 'BoC', 'FED'];
console.log(arr.sort()); // ["BoC", "Def", "FED", "abc"]
console.log(arr.sort(function(s, t){
 var a = s.toLowerCase();
 var b = t.toLowerCase();
 if (a < b) return -1;
 if (a > b) return 1;
 return 0;
})); // ["abc", "BoC", "Def", "FED"]

对象数组的属性值排序

var arr = [{'name': '张三', age: 26},{'name': '李四', age: 12},{'name': '王五', age: 37},{'name': '赵六', age: 4}];
var objectArraySort = function (keyName) {
 return function (objectN, objectM) {
  var valueN = objectN[keyName]
  var valueM = objectM[keyName]
  if (valueN < valueM) return 1
  else if (valueN > valueM) return -1
  else return 0
 }
}
arr.sort(objectArraySort('age'))
console.log(arr) // [{'name': '王五', age: 37},{'name': '张三', age: 26},{'name': '李四', age: 12},{'name': '赵六', age: 4}]

数组遍历的几种方法： every(), filter(), forEach() , map(), some()
CSDN
数组去重哪个方法效率高：
CSDN
数组扁平化 CSDN

用 js 实现随机选取 10 -100 之间的 10 个数字，存入一个数组并排序。

function randomNum(aArray, len, min, max) {
    if (len >= (max - min)) {
        return '超过' + min + '-' + max + '之间的个数范围' + (max - min - 1) + '个的总数';
    }
    if (aArray.length >= len) {
        aArray.sort(function (a, b) {
            return a - b
        });
        return aArray;
    }
    // console.log(aArray)
    let nowNum = parseInt(Math.random() * (max - min - 1)) + (min + 1);
    for (let j = 0; j < aArray.length; j++) {
        if (nowNum === aArray[j]) {
            randomNum(aArray, len, min, max);
            return;
        }
    }
    aArray.push(nowNum);
    randomNum(aArray, len, min, max);
    return aArray;
}
let arr = [];
console.log(randomNum(arr, 10, 10, 100));

输出结果：

[ 12, 15, 18, 24, 25, 30, 31, 32, 42, 50 ]

[ 27, 34, 35, 51, 59, 60, 78, 82, 86, 89 ]

ES5 实现数组 map 方法
```
var selfMap = function(fn,context){
    var arr = Array.prototype.slice.call(this)
    var mappedArr = []
    for (let i=0;i<arr.length;i++){
        mappedArr.push(fn.call(context,arr[i],i,this))
    }
    return mappedArr
}
```
Array.prototype.slice.call() 可以理解为：改变数组的 slice 方法的作用域，在特定的作用域中去调用 slice 方法。

call() 方法是在特定的作用域中调用函数，实际上等于设置函数体内 this对象的值，call 方法的第一个参数是特定的作用域。

向JavaScript 固有类型 Array 扩展一个取最小值方法

Array.prototype.min = function () {
    let min = this[0];
    for (let i = 1; i < this.length; i++) {
        if (this[i] < min) {
            min = this[i]
        }
    }
    return min;
}

console.log([1, 56, 34, 12].min());  //1

陷阱：向Array 的原型中扩展了min方法后，使用 for .in . 循环时会拿到这个 min() 方法

let arr = [1, 56, 34, 12];
let total = 0;
for (let i in arr) {
    total += parseInt(arr[i], 10);
}
console.log(total);   // NaN

var arr = [1, 56, 34, 12];
var total = 0;
for (var i in arr) {
    console.log('=' + arr[i])
    if (Array.hasOwnProperty(i)) {
        total += arr[i]
    }
    console.log(total);
} 

//输出：
1
0
56
0
34
0
12
0
[Function]
0

删除数组中指定索引的项

const arr = [
  { photo: "photo" },
  { name: "name" },
  { phoneNumber: "phoneNumber" },
  { part: "part" },
  { role: "role" },
  { name: "fsdfvzxc94" },
  { name: "fsdfvzxc80" },
  { name: "fsdfvzxc68" },
  { name: "fsdfvzxc54" },
  { name: "fsdfvzxc92" }
]

function remove(array, index) {
  if (index <= (array.length - 1)) {
    for (var i = index; i < array.length; i++) {
      array[i] = array[i + 1];
    }
  }
  else {
    throw new Error('超出最大索引！');
  }
  array.length = array.length - 1;
  return array;
}
console.log(remove(arr , 2));

望京十三兄

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JS 操作数组

1. 用 js 实现随机选取 10 -100 之间的 10 个数字，存入一个数组并排序。functionrandomNum(aArray,len,min,max){if(len>=(max-min)){return'超过'+min+'-'+max+'之间的个数范围'+(max-min-1)+'个的总数';}...
复制链接

扫一扫