数组的API总结

• 连接两个或多个数组，并返回连接数组的副本。

// concat合并 数组 var array1 = ["S60", "S70"]; var array2 = ["XC40", "XC50", "XC60"]; var array3 = ["t140", "t250", "Xt360"]; // 把数组 3个数组 合并在一起 // (方法不会改变现有数组，而是返回新数组) let newArray =  array1.concat(array2,array3) console.log('@newArray===',newArray); 

• 将数组元素复制到数组的另一个位置，覆盖现有值
• params1 => 索引需要改变的值
• params2 => 目标值
• 会改变原数组

// copyWithin() 该方法将数组元素复制到数组的另一个位置，覆盖现有值 const fruits = ["Banana", "Orange", "Apple", "Mango"]; // 第一个参数是 索引需要改变的值 // 第二个参数 是目标值 let newArray =  fruits.copyWithin(0,3) // 以第四值为目标 把 数组中的 第一个值改为目标 console.log('@newArray===',newArray); 

• 带键值的返回 Array 迭代对象
• 通过 Object.entries() 调用

// entries() 方法返回带键/值对的方法 Array Iterator 对象 const fruits = ["Banana", "Orange", "Apple", "Mango"]; const arr2 = [{ 
         a: 1 }, { 
          b: 2 }, { 
          c: 3 }]; let newArray = Object.entries(fruits) console.log('@arr2',Object.entries(arr2)) // [['0', { a: 1 }], ['1', { b: 2 }], ['2', { c: 3 }]] console.log('@newArray===',newArray); // [['0', 'Banana'], ['1', 'Orange'], ['2', 'Apple'],['3', 'Mango']] 

• 如果数组中的所有元素都通过测试 返回 true

const ages = [32, 33, 16, 40];
// 数组 中的 所有item > 15 就返回 true 有一个不符合 就是 false
let flag = ages.every(item => item > 15)
console.log('@flag===',flag);

• 替换数组中的元素

const fruits = ["Banana", "Orange", "Apple", "Mango"];
// 从 0 开始 到 1 结束
fruits.fill("Kiw",0,1); // 把数组中的第一个 用 Kiw 代替
console.log('@fruits',fruits);

• 过滤出 符合某个条件( age > 18 ) 的 值

var ages = [32, 33, 16, 40];
let newArr = ages.filter(item =>{ 
        
    return item >= 18 // 过滤的条件
})
console.log('@',newArr);

• 返回数组中第一个通过测试的元素的值

// 方法返回数组中第一个通过测试的元素的值
// 如果找到函数返回 true 值的数组元素，则 find() 返回该数组元素的值（并且不检查剩余值）
// 没有找到 就 返回 undefined
var ages = [3, 10, 18, 20];
let val = ages.find(item =>{ 
        
    return item > 3
})
console.log(val);

• 返回 第一个 通过 测试元素的 索引值

    var ages = [3, 10, 18, 20];
    let val = ages.findIndex(item =>{ 
        
      return item > 3
    })
    console.log('@索引值',val);

• 没有返回值
• forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库
• forEach()允许callback更改原始数组的元素。map()返回新的数组。

let arr =[1,2,3,4,5,6]
arr.forEach((value, key) => { 
        
 // 回调函数中直接修改arr的值
 return arr[key] = value * value;
});
console.log('@arr',arr)
 // [1,4,9,16,25,36]

• ,Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。可以将两种对象转换成数组

   // 1.从 String 生成数组
    let arr1 = Array.from('foo');
    console.log('@arr1',arr1); // [ "f", "o", "o" ]
    // 2.从 Set 生成数组
    let arr2 = Array.from(['foo', 'bar', 'baz', 'foo'])
    console.log('@arr2',arr2); // ['foo', 'bar', 'baz', 'foo']
    // 3.从 Map 生成数组
    let arr3 = Array.from([[1, 2], [2, 4], [4, 8]])
    console.log('@arr3',arr3); // [[1, 2], [2, 4], [4, 8]]
    // 4.从map 生成数组

    let arr4 = new Map([['1', 'a'], ['2', 'b']])
    console.log(Array.from(arr4.values())); // 获取 数组中的 value值(数组item 中 的 第二项的值) ['a', 'b']
    console.log(Array.from(arr4.keys())); // 获取 数组中的 key值(数组item 中 的 第一项的值) ['1', '2']

    // 5.从类数组对象（arguments）生成数组
    function f() { 
        
      return Array.from(arguments);
    }
    console.log('@类数组对象',f(1, 2, 3)); // [1, 2, 3]

    // 6.在 Array.from 中使用箭头函数
   let arr6 = Array.from([1,2,3],x => x + x) // 每一项 加本身
   console.log('@arr6',arr6); // [2, 4, 6]

   let arr7 = Array.from({ 
        length:5},(v,i) => i) // i 是 长度为5的索引值
   console.log('@arr7',arr7); // [0, 1, 2, 3, 4]

   // 7.序列生成器 (指定范围)
   const range = (start, stop, step) => Array.from(
     { 
         length: (stop - start) / step + 1},
     (_,i) => start + (i * step)
    );
    range(0, 4, 1); // 生成 0-4 的序列 每一步 加一
    console.log('@range',range(0, 4, 1));  // [0, 1, 2, 3, 4]

   let zimu = range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x));
   console.log('@zimu',zimu); // 生成 26 个字母

  // 8.数组去重合并
  function combine(){ 
        
    let arr = [].concat.apply([],arguments) // 没有去重的新数组
    return Array.from(new Set(arr)) // 返回去重后的数组 （Array.from() 是合并）
  }
  var m = [1,2,3,2], n = [2,3,3,4]
  console.log('@去重后的数组并且合并',combine(m,n));

  // 9.用set 实现数组去重
  let array = [1,1,1,4,5,6,3]
  console.log('@set去重',[...new Set(array)]); // [1, 4, 5, 6, 3]

  // 10. 用 map 来实现数组分组
  let arr10 = [
    { 
        id:1,groupCode:1,name:'test01'},
    { 
        id:2,groupCode:1,name:'test02'},
    { 
        id:3,groupCode:2,name:'test03'},
    { 
        id:4,groupCode:3,name:'test04'},
    { 
        id:5,groupCode:3,name:'test05'},
    { 
        id:6,groupCode:5,name:'test06'},
  ]

  function groupFn(arr){ 
        
    let map = { 
        }
    arr.map((item) =>{ 
        
      if(!map[item.groupCode]){ 
         // key值 不一样 重新创建一个 array
        map[item.groupCode] = [item]
      }else { 
        
        map[item.groupCode].push(item) // key 值一样 就 push 进当前 item.groupCode
      }
    })
    console.log('@map',map); // 对象中包着的那几个数组
    let resData = [];
    Object.keys(map).forEach((key) => { 
        
      console.log('@key',key);
        resData.push({ 
        
            groupCode: key,
            data: map[key],
        });
    });
    console.log('@resData',resData);
    // 0: {groupCode: '1', data: Array(2)}
    // 1: {groupCode: '2', data: Array(1)}
    // 2: {groupCode: '3', data: Array(2)}
    // 3: {groupCode: '5', data: Array(1)}
  }
  groupFn(arr10)

• 方法确定数组是否包含指定的元素。

• arr 是 区域 （’ a '）a 是目标值

• 在 arr 中寻找 目标 是 ‘a’ 的 选项，如果找到了 返回 true

• 参数1： 目标值 , 参数2: 从 数组中 的 哪个索引值 开始寻找

const arr = ['小明', 'a', 'b', 'c']
arr.includes('a')//true
arr.includes('小明')//true
arr.includes('a', 1)//true
arr.includes('a', 2)//false 此时a的下标是1，从2开始查找往后就没有a这个值所以返回false
arr.includes('小明', 1)//false
arr.includes('a', -1)//true index传入负数则会查找整个数组
arr.includes('a', 100)//true index传入大于数组长度的数值直接返回false

• 方法在数组中搜索指定项目，并返回其位置。
• 参数1：value 目标值 找到了 返回 值所在的索引值 ,没有找到 返回 -1
• 参数2： index:可选参数，开始查找的下标,默认从0开始查找,如果匹配到就返回值所在的位置，没有匹配到返回-1。

const arr = ['小明', 'a', 'b', 'c']
arr.indexOf('b')//2
arr.indexOf('小美')//-1
arr.indexOf('小明')//0
arr.indexOf('a', 1)//1
arr.indexOf('小明', 2)//-1 此时小明的下标是0，从2开始查找往后就没有小明这个值所以返回-1
arr.indexOf('小明', 0)//0
arr.indexOf('c', -1)//3 index传入负数则会查找整个数组
arr.indexOf('a', 100)//true index传入大于数组长度的数值直接返回false
//也可以匹配字符串
const value="青少年都是祖国的花朵！"
value.indexOf('花朵')//8 记录第一个字符出现的位置
value.indexOf('鸟')//-1
value.indexOf('都是')//3

• isArray() 方法确定对象是否为数组。

// Array.isArray用于检测一个对象是否为数组
let arr1 = Array.isArray([]) // true
let arr2 = Array.isArray([1]) // true
let arr3 = Array.isArray(new Array()) // true
let arr4 = Array.isArray() // false
let arr5 = Array.isArray({ 
        }) // false
let arr6 = Array.isArray(null) // false
let arr7 = Array.isArray(undefined) // false
let arr8 = Array.isArray(17) // false
let arr9 = Array.isArray('Array') // false
console.log(arr1);

• 方法将数组作为字符串返回

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.join()); // Banana,Orange,Apple,Mango

• 创建一个 Array Iterator 对象，只包含对象的键，然后遍历每个键：
• 获取 对象中 每个的 key值
• 返回值 是 一个数组

    const object1 = { 
        
        a: 'somestring',
        b: 42,
        c: false
    };
    console.log('@@@',Object.keys(object1));    // ['a', 'b', 'c']

• // 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索

  var str = 'xxaxxaxxax';

  var endA2 = str.lastIndexOf('a',7) //查找的是字符串前7位之内的最后一个a

  console.log(endA2);

• map()方法会得到一个新的数组并返回。

let arr =[1,2,3,4,5,6]
let list = arr.map(value => { 
        
 return value * value;
});
console.log('@list',list)

• 移除数组中最后一个元素（尾部删除）

    // 方法移除数组的最后一个元素，并返回该元素。

    const fruits = ["Banana", "Orange", "Apple", "Mango"];
    let arr = fruits.pop()
    console.log('@arr',arr); // 返回当前删除的元素 Mango 
    console.log('@fruits11111',fruits); // 删除后的数组 ['Banana', 'Orange', 'Apple']

• 方法向数组末尾添加新项目，并返回新长度。

    const fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.push('张三')
    console.log('@fruits',fruits); // ['Banana', 'Orange', 'Apple', 'Mango', '张三']

• reduce函数可以接受接受两个参数，一个为函数，一个为初始值，

    //如下0就是传入的一个初始值
	// prevalue 是 初始值
	// item 是 数组中的 每一项 
    //在回调函数中,可以接受四个参数，第一个参数第一次的值为传入的初始值即0，
    //之后每次循环的值为每次return的值
    var test = [1, 2, 3, 4, 5];
    var total = 0;
    total = test.reduce((prevalue, item) => { 
        
        return item + prevalue;
    }, 0);
    console.log(total); //输出结果为15

• 从数组右边往左边做累加

var arr = [0,1,2,3,4];
arr.reduceRight(function (preValue,curValue,index,array) { 
        
    return preValue + curValue;
}); // 10

• 方法删除数组的第一项

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
console.log('@fruits',fruits); // ['Orange', 'Apple', 'Mango']

• 方法以新的数组对象，返回数组中被选中的元素。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3); // 截取 数组 索引 从 1 到 3 的数据
console.log('@citrus',citrus);  // ['Orange', 'Lemon']

• 方法检查数组中的任何元素是否通过测试
• 只要有一个 元素 符合就 返回true

var ages = [3, 10, 18, 20];
let flag = ages.some(item =>{ 
        
    return item > 18
})
console.log('@flag',flag); // 只有有一个 符合条件就返回 true

• a-b 从小到大
• b-a 从大到 小

    // 1.不传参数，将不会按照数值大小排序，按照字符编码的顺序进行排序；
    var arr = ['General','Tom','Bob','John','Army'];
    var resArr = arr.sort();
    console.log(resArr);//输出 ["Army", "Bob", "General", "John", "Tom"]

    var arr2 = [30,10,111,35,1899,50,45];
    var resArr2 = arr2.sort(); // 按数组的第一位排序
    console.log(resArr2);//输出 [10, 111, 1899, 30, 35, 45, 50]

    // 2.传入参数，实现升序，降序；
    var arr3 = [30,10,111,35,1899,50,45];
    arr3.sort(function(a,b){ 
        
         return a - b; // 升序
    })
    console.log(arr3);//输出 [10, 30, 35, 45, 50, 111, 1899]

    var arr4 = [30,10,111,35,1899,50,45];
    arr4.sort(function(a,b){ 
        
        return b - a; // 降序
    })
    console.log(arr4);//输出 [1899, 111, 50, 45, 35, 30, 10]

    // 3.根据数组中的对象的某个属性值排序；
    var arr5 = [{ 
        id:10},{ 
        id:5},{ 
        id:6},{ 
        id:9},{ 
        id:2},{ 
        id:3}];
    arr5.sort(function(a,b){ 
        
        return a.id - b.id
    })
    console.log(arr5); // 按照 对象的 id 安排返回一个 数组对象


    // 4.根据数组中的对象的多个属性值排序，多条件排序；
    var arr6 = [{ 
        id:10,age:2},{ 
        id:5,age:4},{ 
        id:6,age:10},{ 
        id:9,age:6},{ 
        id:2,age:8},{ 
        id:10,age:9}];
    arr6.sort(function(a,b){ 
        
        if(a.id === b.id){ 
        //如果id相同，按照age的降序
            return b.age - a.age // 年龄大的在前面（b-a 从大到小）
        }else{ 
        
            return a.id - b.id
        }
    })

• 改变原数组

    // 1.删除功能
	var arr = ["aa","bb","cc","dd"];     //首先我们var一个数组
    var arr1 = arr.splice(0,3);        //然后我们去用splice的删除功能选取下标从0到3的内容，也就是前三个内容
    console.log(arr1);     //["aa","bb","cc"] 打印出我们选中的内容
    console.log(arr);      //["dd"] 打印出了截取完之后剩下的内容

	// 2. 插入功能
    var arr = ["aa","bb","cc","dd"];     //先给个数组
    var arr1 = arr.splice(1,0,"ff","pp");     //然后我们在下标为1,1之后的有0个删除的，然后去插入"ff"和"pp"
    console.log(arr1);    // [] //然后打印我们要插入的内容，它里边什么都没，然后我们去打印arr数组看看是不是已经插入进去了
    console.log(arr);     //["aa","ff","pp","bb","cc","dd"] 已经实现了

	// 3.替换功能
    var arr = ["aa","bb","cc","dd"];    //给一个数组
    var arr1 = arr.splice(1,2,"ff","pp");     //我们把下标为1，1后面的两个内容(包括1)截取删除然后替换成"ff","pp"
    console.log(arr1);      //["bb","cc"] //打印出我们截取出来的内容
    console.log(arr);      //["aa", "ff", "pp", "dd"] //然后打印出我们替换后的数组

• 转化为字符串、

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var x = fruits.toString();
    console.log('@',x); // 数组转化为字符串

• 数组首位添加
• 不改变原数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift('99');
console.log('@',fruits);
// ['99', 'Banana', 'Orange', 'Apple', 'Mango']

• valueof()方法：它就默认将对象转换为表示它的原始值。

 // 数组类型
    var arr = [1,2,3]
    console.log(arr.valueOf());  // [1, 2, 3]
    console.log(typeof arr.valueOf()); // object
    console.log(arr.valueOf() instanceof Array); // true
    console.log(arr.toString()); // 1,2,3
    console.log(typeof arr.toString()); // string

    // 原始对象
    var obj ={ 
        
        a:1
    }
    console.log('===========');
    console.log(obj.valueOf()); // {a: 1}
    console.log(typeof obj.valueOf()); // object
    console.log(obj.valueOf() instanceof Object); // true
    console.log(obj.toString()); // [object Object]
    console.log(typeof obj.toString()); // string

    // 日期类型
    var date = new Date()
    console.log('============'); // 1647750741630
    console.log(date.valueOf()); // number
    console.log(typeof date.valueOf()); // Sun Mar 20 2022 12:32:21 GMT+0800 (GMT+08:00)
    console.log(date.toString()); // string


    // 正则
    var reg = new RegExp(/\d/)
    console.log('=============');
    console.log(reg.valueOf()); // /\d/
    console.log(typeof reg.valueOf()); // object
    console.log(reg.toString()); // /\d/
    console.log(typeof reg.toString()); // string