[问题探讨]js数组(Array)方法汇总1/3

需求：

js数组(Array)方法汇总

索引：

对数组方法的学习和汇总，分为三大类：

一，改变原数组的方法(10种)---1/3本文阐述：

1，arr[key]='tom';

2，arr.splice();

3，arr.reverse();

4，arr.sort();

5，arr.push();

6，arr.pop();

7，arr.unshift();

8，arr.shift();

9，arr.fill();

10，arr.copyWithin();

二，不动原数组，只产生新数据的方法(14种)---2/3点此跳转到对应链接：

1，arr.concat();

2，arr.slice();

3，arr.join();

4，arr.toString();

5，arr.map();

6，arr.filter();

7，arr.reduce()和arr.reduceRight();

8，arr.find();

9，Array.from();

10，Array.of();

11，Object.keys(arr);

12，arr.values();

13，arr.keys();

14，arr.entries();

三，不动原数组，只依据原数组进行判断/处理的方法(10种)---3/3点此跳转到对应链接：

1，arr.forEach()---遍历;

2，for()---遍历;

3，for...of....---遍历;

4，for...in...---遍历;

5，...(spread);

6，arr.indexOf()||arr.lastIndexOf();

7，arr.every()||arr.some();

8，Array.isArray();

9，arr.includes();

10，arr.findIndex();

正文：

一，改变原数组的方法

1，arr[key]='tom';依据下标直接赋值

代码如下，说明一点：索引和关联数组不是互斥的，这里为了方便说明定义了两个空数组，实际上，可以同时用数字和字符串作为下标为同一个数组赋值；

//定义一个空数组
let indexArr=[];
//以索引数组赋值方式
indexArr[0]='tom';
console.log(indexArr);//['tom']
//定义一个空数组
let associativeArr=[];
//以关联数组方式赋值
associativeArr['age']=30;
console.log(associativeArr);//[age:30]

2，arr.splice()

(1)作用：允许从指定的数组中，删除一部分元素，同时还可以添加另外一部分元素;

(2)语法：var res=数组名.splice(start,count,e1,e2,e3)；

(3)语法解释：start:开始删除和(或)添加元素的位置；count：删除的数量，0表示不删除任何元素，省略表示从开始位置全部删除；e1,e2,e3:新添加的元素；

(4)返回值：返回的是删除的元素组成的数组，原数组会被删除对应的元素；

(5)示例代码：

// 定义一个数组
let arr=[1,2,3,4,5,6];
// 用splice方法处理
let res=arr.splice(1,2,'new1','new2','new3');
// 查看返回值
console.log('res',res);// [2,3]
// 查看修改后的数组
console.log('arr',arr);// [1, "new1", "new2", "new3", 4, 5, 6]
// 验证为count为0的情况
let newRes=arr.splice(1,0);
console.log(newRes);// []
console.log(arr);// [1, "new1", "new2", "new3", 4, 5, 6]
// 验证count空着的情况
let myNewRes=arr.splice(1);
console.log(myNewRes);// ["new1", "new2", "new3", 4, 5, 6]
console.log(arr);// [1]

3,arr.reverse()

(1)作用：将一个数组反转(次序反转);

(2)语法：var res=数组名.reverse()；

(3)语法解释：#；

(4)返回值：该函数会改变原有数组，返回的时反转后的新数组；

(5)示例代码：

let arr=[1,2,3,4,5,6];
let res=arr.reverse();
console.log(res);// [6, 5, 4, 3, 2, 1]
console.log(arr);// [6, 5, 4, 3, 2, 1]

4,arr.sort()

(1)作用：将数组中的元素排序;

(2)语法：arr.sort()；

(3)语法解释：小括号内可以带参数，如果不带参数，默认依照字母表顺序排列，如果数组中有unefined值，将会被排到数组尾部；小括号内也可以带一个函数作为参数:

function(a,b){
  // value是a和b比较的结果
  return value;
}

函数解释：a，b分别代表数组的两个元素，数组元素采用冒泡方法比较，每个元素至少会比较一次；value值如果小于0,从小到大排序，value如果大于0,从大到小排序，value如果等于0，不动顺序(如果是a===b的情况value需要等于0,其实可以忽略这个判断)；

函数个人理解如下,仅供参考，完整用例见(5)示例代码:

// 从小到大排序
function(a,b){
  // 个人来理解：如果a小于b,a-b强制等于-1=>a小于b,a排前面(升序)
  // 基于a-b的判断，结果可以强制定义，依据定义的结果，小值永远在前
  if(a<b)return -1;
  return 1;
}

// 从大到小排序
function(a,b){
  // 个人来理解：如果a小于b,a-b强制等于1=>a大于b,b排前面(降序)
  // 基于a-b的判断，结果可以强制定义，依据定义的结果，小值永远在前
  if(a<b)return 1;
  return -1;
}

(4)返回值：返回排序后的数组，注意undefined值总会被默认排在最后，无论升序还是降序；

(5)示例代码：

let arr=['b','c','a',undefined,'e','d'];
// 不带参数排序
let res=arr.sort();
// 验证返回值
console.log(res);// ["a", "b", "c", "d", "e",undefined]
// 验证原数组
console.log(arr);// ["a", "b", "c", "d", "e",undefined]
// 验证返回值是否指向原数组
console.log(res===arr); // true
// 验证排序规则-从小到大
let arr1=['b','c','a',undefined,'e','d'];
arr1.sort((a,b)=>{
  if(a<b)return -1;
  return 1;
})
console.log(arr1);// ["a", "b", "c", "d", "e", undefined]
// 验证排序规则-从大到小
let arr1=['b','c','a',undefined,'e','d'];
arr1.sort((a,b)=>{
  if(a<b)return 1;
  return -1;
})
console.log(arr1);// ["e", "d", "c", "b", "a", undefined]
// 让某个值排在第一位比如'd'
// 注意一个现象:如果要求'd'在第一位，而其他元素排序不变，在元素偏多时(比如10个以上)
// 'd'在第一位不会出问题，但是其他元素的排序可能不稳定
let arr=['c','b','a','d','e'];
arr.sort((a,b)=>{
  // 个人来理解：如果a是‘d’,a-b强制等于-1=>a小于b,a排前面
  if(a==='d')return -1;
  // 个人理解：如果b是‘d’，a-b强制等于1=>b小于a,b排前面
  if(b==='d')return 1;
  return 0;
})
console.log(arr); // ["d", "c", "b", "a", "e"]

5,arr.push()

(1)作用：在数组尾部(栈顶)添加新元素;

(2)语法：var res=数组名.push(n)；

(3)语法解释：n是需要插入数组的元素；

(4)返回值：更新后的原数组的长度；

(5)示例代码：

let arr=[10,20,30];
let res=arr.push(40);
console.log(arr);// [10, 20, 30, 40]
console.log(res);// 4

6,arr.pop()

(1)作用：删除数组尾部(栈顶)的元素;

(2)语法：var res=数组名.push()；

(3)语法解释：#；

(4)返回值：被删除的元素；

(5)示例代码：

let arr=[10,20,30];
let res=arr.pop();
console.log(arr);// [10, 20]
console.log(res);// 30

7,arr.unshift()

(1)作用：在数组头部(栈底)添加新元素;

(2)语法：var res=数组名.unshift(n)；

(3)语法解释：n是需要插入数组的元素；

(4)返回值：更新后的原数组的长度；

(5)示例代码：

let arr=[10,20,30];
let res=arr.unshift(40);
console.log(arr);// [40, 10, 20, 30]
console.log(res);// 4

8,arr.shift()

(1)作用：删除数组头部(栈底)的元素;

(2)语法：var res=数组名.shift()；

(3)语法解释：#；

(4)返回值：被删除的元素；

(5)示例代码：

let arr=[10,20,30];
let res=arr.shift();
console.log(arr);// [20, 30]
console.log(res);// 10

9,arr.fill()

(1)作用：用一个固定值填充一个数组中从起始索引到终止索引内的全部元素；

(2)语法：arr.fill(value,start,end);

(3)语法解释：value某个值，start起始下标，end结束下标；

(4)返回值：修改后的原数组；

(5)示例代码：

let arr=[1,2,3,4,5,6,7,8,9];
const res=arr.fill('tom',2,14);
console.log(res);// [1, 2, "tom", "tom", "tom", "tom", "tom", "tom", "tom"]
console.log(arr);// [1, 2, "tom", "tom", "tom", "tom", "tom", "tom", "tom"]
console.log(res===arr);// true

10,arr.copyWithin()

(1)作用：浅拷贝数组的部分元素到同一数组的不同位置，且不改变数组的长度；

(2)语法：arr.copyWithin(target,start,end);

(3)语法解释：target---复制序列即将覆盖元素的目标位置，如果是负数，target 将从末尾开始计算，如果 target 大于等于 arr.length，将会不发生拷贝，如果 target 在 start 之后，复制的序列将被修改以符合 arr.length；start 被复制元素的起始位置，如果是负数，start 将从末尾开始计算，如果 start 被忽略，copyWithin 将会从0开始复制；end 被复制元素的结束位置，如果是负数，end 将从末尾开始计算，如果 end 被忽略，copyWithin 将会复制到 arr.length；以上位置遵循数组索引规则(即位于元素的左下角)；

(4)返回值：修改后的原数组；

(5)示例代码：

const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.copyWithin(0,1,3)
console.log(res);// [2, 3, 3, 4, 5, 6, 7, 8, 9]
console.log(res===arr);// true

博文通览提示：

点击此超链接跳转到Tom哥的博文分类和索引页面 Tom哥的博客博文分类和索引页面地址：https://blog.csdn.net/tom_wong666/article/details/84137820