arr的push,pop,slice.....各种使用方法详细介绍

arr的push,pop,slice…各种使用方法

• arr.push(); 向数组的末尾追加元素

  • 会修改原数组

  • 返回值：修改后的length值

  • 可以追加多个

    arr[1,2,3];
    arr1[4,5,6];
    arr2[...arr,...arr1];       //  ...扩展运算符，将数组展开
    

• arr.unshift(); 向数组的开头添加元素

  • 会修改原数组
  • 返回值：修改后的length值
  • 可以追加多个

• arr.pop(); 删除末尾的元素

  • 会修改原数组
  • 返回值：被删除的数据
  • 只能删除一个

• arr.shift(); 开头删除一个元素

  • 会修改原数组
  • 返回值：被删除的数据
  • 只能删除一个

• arr.splice(位置，删除元素的个数，要追加的元素); 任意位置添加删除

  • 添加或者删除包含对应下标
  • 添加数据时：删除元素的个数写0；
  • 可以同时删除和添加（先删除，后添加）
  • 修改原数组

• arr.join(“分隔符”) 使用分隔符将数组数据隔开变为字符串

  • 不修改原数组
  • 返回值是分隔好的字符串

• arr.slice(截取的起始下标,结束下标) 数组的截取

  • 截取时，包含起始下标，不包含结束下标
  • 不修改原数组
  • 返回值是截取到的数组
  • 参数可以是负数，负数表示倒数，只传一个参数表示从起始下标截取到最后

• arr.concat 多个数组的连接

  • 不修改原数组

  • 返回值是连接之后的新数组

    var arr1=[1,2,3];
    var arr2=[4,5,6];
    console.log(arr1.concat(arr2,[7,8,9]));
    
    // 控制台输出
    // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
    

• arr.indexOf(值); 查找某个值在数组中第一次出现的下标

  • 返回值是数据的下标，没有找到则返回-1

    var arr=[1,5,6,99,52,663,22,66,552,123,6,622];
    console.log(arr.indexOf(22));    //查找22在arr数组中的位置
    
    // 控制台输出
    // 6
    

• arr.lastIndexOf(值); 倒叙查找某个值在数组中第一次出现的位置

• arr.sort() 数组的排序

  • 如果没有参数，则从字符的编码开始按顺序排

  • 如果有参数，这个参数必须是一个函数（回调函数）这个回调函数有两个参数，分别是a，b

  • 修改原数组

  • 返回值是排序之后的数组

    var arr3=[1,5,6,99,52,663,22,66,552,6,622];
    arr3.sort(function(a,b){
    //a-b 正序，
    //b-a 倒序，  
    return a-b;
    })
    console.log(arr3);
    // 控制台输出
    // (11) [1, 5, 6, 6, 22, 52, 66, 99, 552, 622, 663]
    //箭头函数
    arr.sort((a,b)=>a-b)     //正序，
    arr.sort((a,b)=>b-a)     //倒序，
    
    
    //箭头函数
    arr3.sort((a,b)=>{return a-b});
    arr3.sort((a,b)=>a-b);
    

• arr.forEach() 遍历数组

  • 接收一个回调函数，回调函数第一个参数是 数组值，第二个参数是 下标

    var arr3=[1,5,6,99,52,663,22,66,552,6,622];
    arr3.forEach(function(value,index){
      console.log(index,value)
    })
    // 箭头函数
    arr3.forEach((value,index)=>{console.log(index,value)});
    

• arr.filter() 过滤（根据条件筛选数组元素）

  • 根据回调函数的返回值进行元素筛选

    • 返回值是true，该元素会保留
    • 返回值是false，该元素跳过

  • 不修改原数组

  • 返回值是筛选之后的数组

    var arr=[1,5,6,99,52,663,22,66,552,123,6,622];
    var newArr =arr.filter(function(value,index){
    return value>100;       //筛选arr数组中值大于100的元素；
    })
    console.log(newArr);
    // 控制台输出
    // (4) [663, 552, 123, 622]
    
    //箭头函数
    var mewArr=arr.filter(v=>v>100);
    

    var person = [
    {name: "张三",age:20,sex: "男"},
    {name: "李四",age:19,sex: "女"},
    {name: "王五",age:22,sex: "男"},
    {name: "赵六",age:21,sex: "女"}
    ];
    var x =person.filter(function(value,index){
    return value.age>20;           // 筛选出年龄大于20岁的学生
    // return value.sex=="男";     //筛选出男同学
    })
    console.log(x);
    // 箭头函数
    arr.filter((value,index)=>{return 判断条件})
    

• arr.map() 映射 将数组中的所有数据按照条件改变，形成新数组ying

  • 将回调函数每次的返回值，组成一个新的数组

  • 返回值是映射改变之后的数组

  • 不修改原数组

    var arr=[1,5,6,99,52,663,22,66,552,123,6,622];
    // var end=arr3.map(function(value,index){
    //     return value*2;        //将数组中的所有元素都乘以2返回
    // });
    // 箭头函数
    var end = arr.map((value,index)=>value*2);
    console.log(end);
    

• arr.some() 判断 根据回调函数的判断条件来选择真假

  • 只要有一个回调函数返回值是true，最终some结果是true；

    var arr3=[1,5,6,99,52,663,22,66,552,123,6,622];
    var end=arr3.some(function(value,index){
    return value<500;
    });
    console.log(end);     //true
    
    //箭头函数
    var end=arr3.some(v=>{v<500});
    

• arr.every() 判断 根据回调函数的判断条件来选择真假(与some比较记忆)

  • 只要有一个回调函数返回值是false，最终every结果是false；

    var arr3=[1,5,6,99,52,663,22,66,552,123,6,622];
    var end=arr3.every(function(value,index){
    return value<500;
    });
    console.log(end);     //false
    
    //箭头函数
    var end=arr3.some(v=>{v<500});
    

• arr.reverse() 数组倒序

  • 返回修改后的数组

  • 改变原数组

    var arr=[1,5,8,6,9,4,2,3];
    console.log(arr.reverse());     // (8) [3, 2, 4, 9, 6, 8, 5, 1]
    console.log(arr);               // (8) [3, 2, 4, 9, 6, 8, 5, 1]
    

• Array.from

  • Array.from方法用于将两类对象转为真正的数组：类似数组的对象和可遍历的对象（包括 ES6 新增的数据结构 Set 和 Map）

    var a={length:2,0:'aaa',1:'bbb'};  
    Array.from(a);        //['aaa','bbb']
    // 原理：Array.prototype.slice.call(a);
    var b={length:2};  
    Array.from(b);       //[undefined.undefined]
    

• Array.of

  • Array.of方法用于将一组值，转换为数组。

  • Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

    Array.of() // []
    Array.of(undefined) // [undefined]
    Array.of(1) // [1]
    Array.of(1, 2) // [1, 2]
    

• arr.includes()

  • 用于检查数组是否包含某元素，包含返回true，否则返回false

  • 无法检测对象是否存在

  • 假如只想知道某个值是否在数组中而并不关心它的索引位置，建议使用

    includes()。如果想获取一个值在数组中的位置，那么你只能使用indexOf方法。并且includes()可以识别NaN

    var arr = [1,2,{name:"张三"}]
    arr.includes(2)     // true
    arr.includes(4)     // false
    arr.includes({name:"张三"})     // false
    

  • 可接收俩个参数：要搜索的值,搜索的开始索引

    ['a', 'b', 'c', 'd'].includes('b')         // true
    ['a', 'b', 'c', 'd'].includes('b', 1)      // true
    ['a', 'b', 'c', 'd'].includes('b', 2)      // false
    

  • 此方法为 ES7新增，兼容性##