(js)数组相关方法

数组及数组中常用的方法

• 方法的作用和含义

• 方法的实参(类型和含义)

• 方法的返回值

• 原来的数组是否会发生改变

声明

var arr1 = []; //数组字面量
var arr2 = new Array(); //不推荐
var arr3 = Array();//不使用 通过系统内置的Array构造函数声明 

稀松数组

var arr = [,1,,,2,3,];
console.log(arr.length);//6 最后一个不算

toString

数组转字符串 “脱掉括号” 无论多少层都可以

var str1 = [1,2,3,4]
var str2 = [[1,2],[3,4]]
console.log(Array.prototype.toString.call(str1)) //1,2,3,4  脱一层
console.log(Array.prototype.toString.call(str2)) //1,2,3,4  脱二层 二位数组 ...

在原数组上做修改的数组方法

pop
删除数组最后一项
@params 无
@return 删除的那一项

var arr = [2,3,4];
arr.pop();
console.log(arr);//2,3 删除末尾 返回删除的那一项

---

push

向数组末尾增加内容

@params 多个任意类型

@return 新增后数组的长度

var arr = [2,3,4];
arr.push(5);
console.log(arr);//2,3,4,5 在末尾添加 返回新的数组长度

末尾添加还可以使用length

var arr = ['rose','jack','mary'];
arr[arr.length] = 'king';
console.log(arr); //["rose", "jack", "mary", "king"]

push的底层实现

var arr = [4,5,6];
Array.prototype.myPush = function() {
  for(var i = 0; i < arguments.length; i++) {
    this[this.length] = arguments[i]; //arguments包含实参列表
  }
  return this.length;
}
arr.myPush(1,2,3);
console.log(arr); //4, 5, 6, 1, 2, 3

---

shift

删除数组第一项

@params 无

@return 删除的那一项

var arr = [2,3,4];
arr.shift();
console.log(arr);//3,4 删除开头 返回删除的那一项

---

unshift

向数组开始位置增加内容

@params 多个任意类型

@return 新增后数组的长度

var arr = [2,3,4];
arr.unshift(1);
console.log(arr);//1,2,3,4 开头添加 返回新的数组长度

---

reverse

翻转数组

---

splice

实现数组的增加，删除，修改。

删除：

@params n，m都是数字 从索引n开始删除m个元素(m不写的话，是默认删除到末尾)

@return 把删除的部分用新数组存储起来返回

删除并添加

@params n，m，q开始项下标包含自己 剪切长度 添加的数据

let ary = [10,20,30,40,50,60,70];
let res = ary.splice(2,4)
console.log(res,ary);//[30,40,50,60]  [10,20,70]

清空数组

ary.splice(0);

删除最后一项和第一项，可以代替pop和shift

//删除最后一项和第一项，可以代替pop和shift
ary.splice(ary.length-1)
ary.splice(0,1)

所以删除数组最后一项一共三种方法：pop，length–，ary.splice(ary.length-1)

//删除并添加
//arr.splice(开始项的下标 包含自己，剪切长度，剪切以后最后一位开始添加数据)
var arr = ['a','b','c'];
arr.splice(1,1,3,4,5); //'a' 3,4,5,'c'

//中间添加
//eg:想要在c后添加d
//方法一:
var arr = ["a", "b", "c","e"];
arr.splice(3,0,'d');//因为开始项包含本身 所以到下一项

//方法二:
var arr = ["a", "b", "c","e"];
arr.splice(-1,0,'d');

增加、修改

@params n,m,x 从索引n开始删除m个元素，用x占用删除的部分(修改)

​ n,0,x 从索引n开始，一个都不删，把x放到索引n的前面(增加)

@return 把删除的部分用新数组存储起来返回

//修改
let ary = [10,20,30,40,50];
let res = ary.splice(2,2,90,'zz');
console.log(res,ary);//[30,40]  [10,20,90,"zz",50]

//增加
let ary = [10,20,30,40,50];
let res = ary.splice(2,0,90,'zz');
console.log(res,ary);//[10,20,90,'zz',30,40,50]

//向数组末尾追加
let ary = [10,20,30,40,50];
let res = ary.splice(ary.length,0,'z','h');
console.log(res,ary);

//向数组开头追加
ary.splice(0,0,'z')

下标是如何寻找的?

var arr = ["a", "b", "c","e"];

function splice(arr,index) {
  return index += index >= 0 ? 0 : arr.length ;
}
console.log(arr[splice(arr,-1)]); //e
//如果是正值index就不改变 负值就加长度-1+4=3

---

sort

按照ascII码来排列

var arr = [27,49,5,7];
arr.sort(function(a,b) {
  return a - b; //升序
  return b - a;//降序
})

随机排序

var arr = [1,2,3,4,5,6];

//Math.random() -> 0~1 开区间 大于0.5 小于等于0.5
arr.sort(function(a,b) {
  var rand = Math.random();
  if(rand -0.5 > 0) {
    return 1; //正数
  }else {
    return -1;
  }
  return Math.random() - 0.5;
})
console.log(arr);

eg:根据对象里的年龄按照升序排序

var person = [
  {
    name:'rose',
    age:13
  },
  {
    name:'jack',
    age:23
  },
  {
    name:'mary',
    age:20
  },
  {
    name:'john',
    age:8
  },
]
person.sort(function(a,b) {
  if(a.age > b.age) {
    return 1;
  }else {
    return -1;
  }
})
console.log(person);

eg:按照字符串的长度排序

var str = ['123','1','1234','12'];
str.sort((a,b) => {
  if(a.length > b.length) {
    return 1;
  }else {
    return -1;
  }
})
console.log(str);//["1", "12", "123", "1234"]

---

concat

合并数组

---

slice

参数：[start]包含本身被截取、[end]结束的下标

也就是 [start,end)

无参数：克隆

var arr = ['rose','jack','mary'];
var arr1 = arr.slice();
console.log(arr1); //["rose", "jack", "mary"]

一个参数：slice()方法返回从该参数指定位置(包含本身)开始到当前数组末尾的所有项。

var arr = ['rose','jack','mary'];
console.log(arr.slice(1)); //["jack", "mary"]

var arr1 = [1,2,3,4];
var arr2 = arr1.slice(-3);
console.log(arr2); // [2, 3, 4]

两个参数：该方法返回起始和结束位置之间的项(但不包括结束位置的项)。

var arr1 = [1,2,3,4];
var arr2 = arr1.slice(0,2);
console.log(arr2); // 1,2

var arr1 = [1,2,3,4];
var arr2 = arr1.slice(-3,-1);
console.log(arr2); // [2, 3]

---

join、split

join把数组转为字符串且可以指定分隔符

var arr1 = ['a','b','c'];
var str = arr1.join('*'); 
console.log(str); // a*b*c

split把字符串分隔为字符串数组且指定分隔方式 第二个参数为截取长度，1开始

var arr1 = ['a','b','c'];
var str = arr1.join('-'); 
console.log(str); // a-b-c
var arr2 = str.split('-');
console.log(arr2); //["a", "b", "c"]

var arr1 = ['a','b','c'];
var str = arr1.join('-'); 
console.log(str); // a-b-c
var arr2 = str.split('-',2);
console.log(arr2); //["a", "b"]

数组扩展方法

reduce(归纳函数)

从第一项开始遍历到最后一项

@params: prev elem index arr 含回调函数 prev的初始值由第二个参数决定

返回新的数组 可用变量接收

[].reduce(function(prev,elem,index,arr){},第二个参数必填为initialValue)

const arr1 = [
  { subject: "数学", marks: 78 },
  { subject: "物理", marks: 80 },
  { subject: "化学", marks: 93 },
];
var initialValue = [];
arr1.reduce(function(prev,elem,index,arr){
  console.log(prev,elem,index,initialValue);
  //[] {subject: "数学", marks: 78} 0 []
  //undefined {subject: "物理", marks: 80} 1 []
  //undefined {subject: "化学", marks: 93} 2 []
  console.log(prev === initialValue);//true false false也就是第一次prev和initialValue相等 后面prev因为是undefined 所以false
},initialValue); 

const arr1 = [
  { subject: "数学", marks: 78 },
  { subject: "物理", marks: 80 },
  { subject: "化学", marks: 93 },
];
var initialValue = [];
var newArr = arr1.reduce(function(prev,elem,index,arr){
  // return prev;//最开始prev没有值为空数组 所以一开始newArr为空数组 prev初始值就是initialValue
  prev.push(elem.marks)
  console.log(prev);
  return prev;//此时newArr就有数组 [78, 80, 93] 
},initialValue)

每次遍历都会执行回调函数，都可以对prev数组进行操作 eg：筛选符合条件的数组 类似filter 但是用归纳的方式。filter是过滤的方式 使用true/false。

const arr1 = [
  { subject: "数学", marks: 78 },
  { subject: "物理", marks: 80 },
  { subject: "化学", marks: 93 },
];
var initialValue = [];
var newArr = arr1.reduce(function(prev,elem,index,arr){
  if(elem.marks === 78) {
    prev.push(elem);
  }
  return prev;//必须return 
},initialValue);
console.log(newArr); //0: {subject: "数学", marks: 78}

reduce用法

拆分cookies

let data = 'aaaaa=232orenfhrg;bbb=238qrufjekfn;cccccc=4jtfoi4';//变成对象
data = data.split(';');
let cookiesData = data.reduce((prev,elem) => {
  let item = elem.split('=');
  //键值对的形式拆
  prev[item[0]] = item[1];
  return prev;
},{})
console.log(cookiesData); //{aaaaa: "232orenfhrg", bbb: "238qrufjekfn", cccccc: "4jtfoi4"}

//obj = {
// a: 1,
// b: 2
//}
//console.log(obj['a'])''

累加数组中的所有数值：

var arr = [1,2,3];
var total = arr.reduce((prev,cur) => prev + cur);
console.log(total);  //6

对象数组中的数值之和：

const studentResult = [
  { subject: "数学", marks: 78 },
  { subject: "物理", marks: 80 },
  { subject: "化学", marks: 93 },
];
const total = studentResult.reduce((prev,cur) => prev + cur.marks,0);
console.log(total); //251

---

every

如果有一个不满足条件就停止遍历并return false 条件就是return后面表达式

即一假即假 并不再向后遍历

@return 布尔值

const studentResult = [
  { subject: "数学", marks: 78 },
  { subject: "物理", marks: 80 },
  { subject: "化学", marks: 93 },
];

var s = studentResult.every((elem,index,ary) => {
  // console.log(elem); //只会打印第一条 
  return elem.marks > 78  //true or false
},可改变this指向同forEach/map) 
console.log(s); //false 有一个是等于78 停止并返回false

---

some

一真即真

@return 布尔值

const studentResult = [
  { subject: "数学", marks: 78 },
  { subject: "物理", marks: 80 },
  { subject: "化学", marks: 93 },
];

var s = studentResult.some((elem,index,ary) => {
  // console.log(elem); //只会打印第一条 
  return elem.marks > 78  //true or false
}) 
console.log(s); //true

---

filter

@params elem,index,array

@return 一个新数组 return true会将elem存入返回的新数组里 反之false不会

不改变原数组

const studentResult = [
  { subject: "数学", marks: 78 },
  { subject: "物理", marks: 80 },
  { subject: "化学", marks: 93 },
];
var newArr = studentResult.filter((elem,index,array) => {
  // if(elem.marks === 78) {
  //   return true
  // }
  return elem.marks === 78;
},改变this指向)
console.log(newArr);//{subject: "数学", marks: 78}

重写：

---

map

@params elem,index,array

@return 返回一个处理后的新数组

不会改变原数组

不会对空数组进行检测

const studentResult = [
  { subject: "数学", marks: 78 },
  { subject: "物理", marks: 80 },
  { subject: "化学", marks: 93 },
];
var newArr = studentResult.map((elem,index,array) => {
  return elem;
})
console.log(newArr);//所有

eg：如果想在每项中某个属性前加一段文字

//不能用箭头函数 ?? this指向问题
const studentResult = [
  { subject: "数学", marks: 78 },
  { subject: "物理", marks: 80 },
  { subject: "化学", marks: 93 },
];
var newArr1 = studentResult.map(function(elem,index,array) {
  elem.subject = this.xx1 + elem.subject;
  return elem; //return什么都可以 但如果不修改数组并且return null的话会返回原数组
},{xx1: '我是'})
console.log(newArr1);
//输出
//(3) [{…}, {…}, {…}]
//0: {subject: "我是数学", marks: 78}
//1: {subject: "我是物理", marks: 80}
//2: {subject: "我是化学", marks: 93}