前端充电站：重温JS数组方法

林子酱
114 阅读6分钟

方法一：push

  • 往数组的末尾添加一个或多个元素
  • 返回当前被修改后的数组的最新长度
  • 该方法会改变原数组
var arr = [1,2,3];
console.log(arr.length);  //3
var len = arr.push(4,5,6,7);
console.log(len);  //7
console.log(arr);  //[1,2,3,4,5,6,7]

方法二：pop

  • pop 用于删除数组中最后的一位元素
  • 返回被删除的这个元素
  • 用在一个空数组上返回值会是undefined
var arr = [1, 2, 3,'a','b','c'];
var a = arr.pop();
console.log(arr); //[1, 2, 3,'a','b','c']
console.log(a); //'c'

var arr2 = [];
console.log(arr2.pop());  //undefined

方法三：unshift

  • 将一个或多个元素添加到数组的开头
  • 返回值是被修改后的数组的个数
var arr = [1, 2, 3];
var len = arr.unshift(4,5,6,7);
console.log(arr);  //[4,5,6,7,1,2,3]
console.log(len);  //7

方法四：shift

  • 用于删除数组中的第一位
  • 如果是一个空数组返回undefined
  • 如果不是则返回被删除的元素
var arr = ['a',1, 2, 3];
var len = arr.shift();
console.log(len);  //'a'
console.log(arr);  //[1, 2, 3]

var arr2 = [];
console.log(arr2.shift()); //undefined

方法五：sort

  • 如果说不提供任何的参数，默认转为字符串去比较
  • 根据默认规则来进行排序(根据unicode来进行排序)
🤔情景一：不提供规则
var arr = ['b',"z",'l','a'];
arr.sort();
console.log(arr);  //["a", "b", "l", "z"]

var num = [6,50,12,40];
num.sort();
console.log(num); //[12, 40, 50, 6]

🤔情景一：提供规则
var num = [6,50,12,40];

num.sort(function(a,b){
   console.log(a,b);  //如下图
   return b - a;
 //return a - b;
})
console.log(num);   //[50,40,12,6]


规则解析：
如果a-b的结果
大于0则b排在a前面
小于0则a排在b前面
等于0则a和b的位置不变


🤔记忆点：
a-b 大于0把小的调前面
b-a 大于0把大的调前面



实际场景一：
利用sort方法对数组进行随机排序
 var arr = ["a","b","c","d"];

arr.sort(function(a,b){
    // return 根据返回的值判断谁在前面谁在后面
   return Math.random() - 0.5; //随机值-0.5 ~ 0.5
})
console.log(arr);  //随机数组

方法六：concat

  • concat用于拼接两个或两个以上的数组
  • 并返回一个新数组，并不会改变原有数组的值
var arr1 = ["l"];
var arr2 = ["t"];
var arr3 = ["h"];

console.log(arr1.concat(arr3,arr2));  ['l','t','h']

方法七：join

  • 把数组拼接起来，以字符串的方式进行返回
  • 如果不给参数，默认以逗号进行间隔
  • 如果数组是一个空数组的话返回一个空字符串
var arr1 = ["lin","tong","hui"];
console.log(arr1.join()) //lin,tong,hui
console.log(arr1.join(""))//lintonghui

方法八：reverse

var arr = ['a','b','c'];
console.log(arr.reverse());  //['c','b','a']
console.log(arr);  //['c','b','a']

方法总结：
reverse会把数组中的所有内容颠倒过来
并且返回一个新的数组
会改变原有的数组

😇方法九：splice

  • splice(start[，num，item1，item2...])
  • start为删除的起始位置，如果start大于length，就是不删除。
  • num为可选默认删除到数组的末尾。表示删除的个数。如果小于0或者是NaN则当做0进行处理,不删除任何元素
  • item1，item2...为 从删除的位置，添加第二个参数以后的内容
  • 返回值是所有删除的元素组成的数组，如果没有删除任何元素，将会得到一个空数组
var arr = [1,2,3,4,5,6];

第一种情况
arr.splice(1) ;
console.log(arr);  //[1]

第二种情况
arr.splice(50) ;
console.log(arr); // [1,2,3,4,5,6]

第三种情况
arr.splice(1,2);
console.log(arr);  //[1,4,5,6]

第四种情况
arr.splice(-2);
console.log(arr);  //[1,2,3,4]

第五种情况
arr.splice(-500);
console.log(arr);  //[1,2,3,4,5,6]

第六种情况
arr.splice(1,-10);  //如果小于0或NaN当0处理
arr.splice(1,NaN);
consol.log(arr) //[1,2,3,4,5,6]

第七种情况
arr.splice(1,0,'a','b');
console.log(arr);  //[1, "a", "b", 2, 3, 4, 5, 6]

方法十：indexof

  • indexOf(searchValue[,fromIndex])查找目标字符串中是否包含searchValue
  • 如果包含返回第一次出现的索引，如果不包含,返回-1
  • fromIndex查找的起始位置不填默认为0。如果说是一个负数，如果这个负数的绝对值超过length，则fromIndex为0，不超过则根据倒数来确认查找的位置
var arr = ["a","b","c","a"];
console.log(arr.indexOf("a",arr.length)); //-1
console.log(arr.indexOf("a", -2));  //3
console.log(arr.indexOf("a", -50));  //0

方法十一：lastIndexOf

  • lastIndexOf(searchValue[,fromIndex])，返回数组中指定的值最后一次出现的位置，如果不存在则返回-1
  • fromIndex搜索的起始位置，默认为length，如果大于或者等于length，则为length，如果是一个负数，则倒数找到对应的起始位置
var arr = ["a", "b", "c", "a"];
console.log(arr.lastIndexOf("a", arr.length - 2)); //0
console.log(arr.lastIndexOf("a", 50)); //3
console.log(arr.lastIndexOf("vv")); //-1

😇方法十二：slice

  • slice(begin,end)begin如果不给，默认为0截取的起始位置，如果值超过了length，就会返回一个空数组给你，如果是一个负数(负数的绝对值超过了length就会默认从0开始截取)，否则从倒数第begin开始截取
  • end如果不给，默认到数组结尾，控制截取的结束位置如果小于（从位置上来说）bengin，会得到一个空字符串，如果是负数，如果负数的绝对值超过了length得到一个空字符串，否则从从倒数第end个结束，如果超过了length，默认也只到数组的结尾位置
var arr = ["a","b","c","d","e"];


console.log(arr.slice(2));
//["c", "d", "e"]

console.log(arr);
//["a", "b", "c", "d", "e"]


console.log(arr.slice(50));  //[]

console.log(arr.slice(-2)); //["d", "e"]

console.log(arr.slice(-50));
//["a", "b", "c", "d", "e"]

console.log(arr.slice(2,-1));
// ["c", "d"]

console.log(arr.slice(0, -50)); //[]

console.log(arr.slice(0, 50));
//["a", "b", "c", "d", "e"]

方法十三：forEach

//for循环获得数组的下标和值
var arr = ['a','c','vv','l'];
for(var i=0;i<arr.length;i++){
   	console.log(arr[i],i);
}

//forEach获取数组的下标和值
var a = arr.forEach(function(ele,index,arr){
       console.log(this); //['a','c','vv','l']
       //console.log(ele,index,arr);
},arr);
console.log(a); //undefined


🤔方法总结：

arr.forEach(callback[,thisArg])

对数组中的每一个元素，执行一次提供的函数

- callback(ele,index,arr)函数
- ele :循环过程中的每一位元素
- index: 当前循环的元素对应的下标值
- arr ：调用forEach的当前数组

- thisArg：控制当前callback中的this指向
默认this指向window

该方法返回值是undefined

方法十四：filter

//for+if实现过滤条件

var arr = [10,20,4,50,60,75];
var num = [];
for(var i=0;i<arr.length;i++){
  if(arr[i]>=50){
    	num.push(arr[i]);
  	}
}
console.log(num); //[50,60,75]

//filter实现过滤条件

var newArr = arr.filter(function(ele,index,arr){
  //console.log(this); // [10,20,4,50,60,75]

  //console.log(ele,index,arr);
  //return false;
  return arr[index]>=50;
},arr);

console.log(arr); //[50,60,75]

🤔方法总结：
筛选出符合函数中条件的元素，并作为一个新数组返回

方法十五：map

🤔情景：想要返回arr中每一位数乘以2的新数组
var arr = [10, 20, 30,40];
var num  = [];

实现方法一：
for(var i=0;i<arr.length;i++){
    num.push(arr[i] * 2);
}

实现方法二：
arr.forEach(function(ele){
   num.push(ele * 2);
})

实现方法三：
var newArr = arr.map(function(ele,index,arr){
  // console.log(this);  //document

  // console.log(ele, index,arr);

     return ele * 2;

  //不给return默认会返回[undefined,undefined,...]
},document);

方法总结：
由数组中的每一位元素执行函数后的结果作为新数组的值

方法十六：reduce

情景：想要得到arr中number累加的值

var arr = [10, 20, 4, 50, 60, 75, 3];

实现方法一：
var num = 0;
for(var i=0;i<arr.length;i++){
   num += arr[i];
}


实现方法二： 累计器reduce
var num2 = arr.reduce(function(result,ele,index){
    console.log(result,ele,index);
    return result + ele;//把结果在传回让result接收
},0);

方法总结：
arr.reduce(callback[,initValue])
对数组中的每一个元素执行callback函数
将结果根据callback函数中的条件返回单个值。
- callback ：执行的函数
    - result 结果
    - ele ：当前正在循环的元素
    - index ：当前正在循环的元素对应的索引值
- initValue 可选。对于result进行初始化；

方法十七：some

情景：配合单选功能实现只要有商品被选中，结算按钮就能被点
击

<ul>
    <li><input type="checkbox">商品一</li>
    <li><input type="checkbox">商品二</li>
    <li><input type="checkbox">商品三</li>
</ul>
<button disabled>结算</button>


🤔实现方法一：依靠计数器和单选框的数量比较得出是否全选
var btn = document.querySelector('button');
//获取按钮

var checkboxs = document.querySelectorAll('ul input');
//获取所有的输入框
(用querySelectorALL获得的是类数组
可以用Array.isArray()来检测
或者用instanceof来检测是不是真数组)


//querySelectorAll获取到的元素并不是一个数组
是一个类数组，没有some方法
//querySelector只获取 一个


//我们要得到一个真数组
var checkBox = [];
for(var i=0;i<checkboxs.length;i++){
    checkBox.push(checkboxs[i]);
}


//遍历所有的输入框并给每一个输入框添加点击事件
for(var i=0;i<checkboxs.length;i++){
 checkboxs[i].onclick = function(){
     var num = 0;  //计数器是关键
     for(var j=0;j< checkboxs.length;j++){
         //console.log(checkboxs[j].checked);
         if(checkboxs[j].checked){
             num++;//只要判断出一个被选中就加一
       }
         if(num){
             console.log('至少有一个被选中了');
             btn.disabled = false;//取消禁用
         }else{
             console.log('全部没有被选中');
             btn.disabled = true;//恢复禁用
         }

         if(num == checkboxs.length){
             console.log('全部勾选');
        }
     }
 }
}


🤔实现方法二：

var btn = document.querySelector('button');
var checkboxs = document.querySelectorAll('ul input');


var checkBoxs=[]
for(var i=0;i<checkboxs.length;i++){
    checkBoxs.push(checkboxs[i])
}

//通过forEach给每一个单选框添加点击事件
checkBoxs.forEach(function(item){
  item.onclick=function(){
  // console.log('dian')
  **var isOneLink=checkBoxs.some(function(v){
      return v.checked**
})

isOneLink==true? btn.disabled=false : btn.disabled=true
}
})

方法总结：
some(callback[,thisAry])
测试数组中是否至少有一个元素通过了指定函数的测试
结果返回布尔值

- callback 用于测试的函数
    - ele：数组循环中的元素
    - index：元素对应下标
    - array：当前正在操作的数组
- thisAry：决定callback中的this指向

方法十八：every

情景：配合全选功能实现只要商品被全选中，全选按钮就‘自动’被选中

<ul>
  <li><input type="checkbox">商品一</li>
  <li><input type="checkbox">商品二</li>
  <li><input type="checkbox">商品三</li>
</ul>
<input id="all" type="checkbox">全选

var checkboxs = document.querySelectorAll('ul input');
var allCheck = document.querySelector('#all');

var checkBoxs=[]
for(var i=0;i<checkboxs.length;i++){
  checkBoxs.push(checkboxs[i])
}

//
checkBoxs.forEach(function(item){
item.onclick=function(){

  **var isAllChecked=checkBoxs.every((v)=>{
      return v.checked
  })**

isAllChecked==true? allCheck.checked=true :allCheck.checked=false

}
})


方法总结：
every(callback[,thisAry])
测试数组中所有元素都通过了指定函数的测试，结果返回布尔值
avatar
文章
阅读
粉丝