js数组方法使用

别再找借口c
457 阅读5分钟

需求

写此文章仅为记录js数组方法使用，加深理解
当我不确定某个方法含义的时候，可以快速定位该方法，并读懂

ES5系列

  • toString
// toString() 将数组转化为数组值以逗号分隔的字符串
const stu = ['liMing', 'Bob', 'Jenny'];
console.log(stu.toString()) // liMing,Bob,Jenny
  • join
// join() 将数组元素结合成字符串，可以自定义分隔符(默认逗号)
const stu = ['liMing', 'Bob', 'Jenny'];
console.log(stu.join()) // liMing,Bob,Jenny
console.log(stu.join('-')) // liMing-Bob-enny
  • push 和 pop
// push() 和 pop() 方法分别是对数组最后一个元素进行添加和删除
const stu = ['liMing', 'Bob', 'Jenny'];
console.log(stu.pop()); // Jenny 返回被删除的元素
console.log(stu.push('zhangSan')); // 3 返回新数组的长度
  • shift
  • unshift
// unshift() 和 shift() 方法分别是对数组第1个元素进行添加和删除
const stu = ['liMing', 'Bob', 'Jenny'];
console.log(stu.shift()); // liMing 返回被删除的元素
console.log(stu.unshift('zhangSan')); // 3 返回新数组的长度
  • splice
// splice() 方法可用于向数组添加新元素，也可删除元素
// 3个参数 第一个定义操作数字位置，第二个定义删除元素个数，其余参数为添加项
let stu = ['liMing', 'Bob', 'Jenny'];
console.log(stu.splice(0, 1)); // ["liMing"] 返回被删除项的数组
console.log(stu.splice(0, 2,'numberOne','numberTwo')); // ["Bob", "Jenny"] 返回被删除项的数组
console.log(stu); // ["numberOne", "numberTwo"]
  • slice
// slice() 方法用于裁剪数组，不改变原数组
let stu = ['liMing', 'Bob', 'Jenny'];
console.log(stu.slice(0, 1)); // ["liMing"] 返回被截取元素所组成的新数组
console.log(stu.slice(0, 2)); // ["liMing", "Bob"] 返回被截取元素所组成的新数组
console.log(stu); // ["liMing", "Bob", "Jenny"] 不改变原数组
  • concat
// concat() 方法用于合并数组，返回一个新数组，不修改原数组
let stu = ['liMing'];
console.log(stu.concat('12323')); // ["liMing", "12323"] 参数为字符串，直接放入
console.log(stu.concat([{name:'zhangSan'}])); // ["liMing", {…}] 参数为数组，拆解数组每项放入
console.log(stu); // ["liMing"] 原数组未改变

// concat 和 push 的区别
参数若为数组，push()会将整个数组放入，而concat()会拆解数组每项放入
  • sort
// sort() 方法用于排序
let stu = ['aaa','bbb','ccc','1111','222'];
console.log(stu.sort()); // 默认情况下，不传参数的话，默认按字母升序，若为非字符串,则先调用toString()将元素转化为字符串的 Unicode ,再进行字符串比较
console.log(stu.sort((a,b)=> b-a)); // 数组的升序与降序排序
  • reverse
// reverse() 方法用于反转数组中的元素，原数组改变
let stu = ['aaa','bbb','ccc'];
console.log(stu.reverse()); // ["ccc", "bbb", "aaa"] 
console.log(stu); // ["ccc", "bbb", "aaa"]
  • forEach
// forEach() 方法用于遍历数组中元素
let stu = ['aaa', 'bbb', 'ccc'];
// 参数分别为 数组值 索引值  数组本身
stu.forEach((value, index, arr) => {
    // value = '123' // 不能直接修改某项
    arr[index] = '123' // 可以修改某项
    console.log(value, index, arr); // aaa 0 (3) ["aaa", "bbb", "ccc"]
});
console.log(stu) // ["123", "123", "123"]
  • map
// map() 方法用于对数组中的每项进行处理，返回新数组
let stu = ['aaa', 'bbb', 'ccc'];
let tea = [{name:'L',value:1},{name:'P',value:2}]
const endstuArr = stu.map((item) => {
    return { name: item, value: item };
});
const endteaArr = tea.map((item) => {
    return item.value
});
console.log(endstuArr); // [{…}, {…}, {…}]
console.log(endteaArr); // [1, 2]
  • filter
// filter() 方法用于过滤原数组，返回新数组
let stu = [
    { name: 'L', value: 1 },
    { name: 'P', value: 2 }
];
const endstuArr = stu.filter((item) => {
    return item.name === 'L';
});
console.log(endstuArr); // [{name: "L", value: 1}]

// map() 和 filter() 方法经常组合使用来得到自己想要的数据
  • every
// every() 用来判断数组中每项元素是否符合需求
let stu = [
    { name: 'L', age: 15 },
    { name: 'P', age: 21 }
];
const result = stu.every((item) => {
    return item.age > 18;
});
console.log(result); // false
  • some
// some() 方法用于判断数组中是否存在符合需求的元素
let stu = [
    { name: 'L', age: 15 },
    { name: 'P', age: 21 }
];
const result = stu.some((item) => {
    return item.age > 18;
});
console.log(result); // true
  • reduce
// reduce() 累加器
/**
    * @param {*} total 初始值，之后为上次回调的返回值
    * @param {*} value 数组元素的值
    * @param index 索引值
    * @param arr 数组对象
    * @param init 自定义初始值
*/
// 如果没有设置初始值，total为数组第一项，value为第二项
// 若设置了初始值,则total为初始值，value为第一项 

// 需求1：找到数组中重复元素并返回个数
const result = stu.reduce((total, value, index, array) => {
    // TODO 1、统计数组重复元素次数
    if (value in total) {
      total[value]++;
    } else {
      total[value] = 1;
    }
    return total;
}, {});
// TODO 2、根据结果得出结论
console.log(result); // {1: 3, 2: 3, 3: 1}

// 需求2： 获取 tea 中 age>18 的元素，并统计个数
let tea = [
    { name: 'L', age: 15 },
    { name: 'P', age: 21 },
    { name: 'Q', age: 19 },
    { name: 'Z', age: 18 }
];
const teaResult = tea.reduce((total, value, index, array) => {
    // TODO 1、收集数组符合条件的元素
    if (value.age > 18) {
      total.push(value);
    }
    return total;
}, []);
// TODO 2、根据结果得出结论 teaResult.length
console.log(teaResult); // [{…}, {…}]
  • indexOf
// indexOf() 判断数组中是否存在某元素，返回该元素的索引值，不改变原数组
let stu = [1, 2, 3, 4];
// 参数1：需要查找的元素，参数2：查找的起始位
console.log(stu.indexOf(1,2)) //  -1 若不存在，则返回-1
  • Array.isArray
// Array.isArray() 判断传入的值是否为数组
let stu = [1, 2, 3, 4];
let stuObj = {
    name: 'LiMing'
}
console.log(Array.isArray(stu)) //  true
console.log(Array.isArray(stuObj)) // false

ES6系列

  • includes
// includes() 判断数组中是否存在某元素，返回布尔值，不改变原数组
let stu = [1, 2, 3, 4];
// 参数1：需要查找的元素，参数2：查找的起始位
console.log(stu.includes(1,2)) // false
console.log(stu.includes(4)) // true
  • find
// find() 判断数组中是否存在满足条件的元素，若有则返回该项，否则返回undefined
 let stu = [
    { name: 'Liming', age: 18 },
    { name: 'Jenny', age: 20 }
];
console.log(
    stu.find((item) => {
         return item.age > 15;
    })
); // {name: "Liming", age: 18}
  • findIndex
// findIndex() 判断数组中是否存在满足条件的元素，若有则返回该项索引，否则返回-1
 let stu = [
    { name: 'Liming', age: 18 },
    { name: 'Jenny', age: 20 }
];
console.log(
    stu.findIndex((item) => {
         return item.age > 15;
    })
); // 0
  • flat
// flat() 深度遍历展开数组，flat()方法会移除数组中的空白项，不改变原数组
参数: depth(可选): 提取嵌套数组的结构深度，默认为1。 Infinity 正无穷大的数值
let arr = [1, 2, [3, [4, [5]]], 6];
console.log(arr.flat()); // [1, 2, 3, Array(2), 6]
console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5, 6] 不清楚嵌套层数，可用 Infinity 进行全部展开
  • fill
// fill() 可用于对数组进行填充，改变原数组
let arr = new Array(3);
arr.fill('1');
console.log(arr); // ["1", "1", "1"]
arr.fill('2', 0, 1);
console.log(arr); // ["2", "1", "1"]
  • Array.from
// Array.from() 将一个类数组对象或者可遍历对象转换成一个真正的数组
let stu = [
    { name: 'Liming', age: 18 },
    { name: 'Jenny', age: 20 }
];
let stuSet = new Set(stu)
console.log(stuSet) // Set(2) {{…}, {…}}
console.log(Array.from(stuSet)) // [{…}, {…}]
  • Array.of
// Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
Array.of(7); // [7]

参考

最后

  • 文章是自己手敲，是对工作日常的总结，如有错误之处，敬请指正
  • 如果遇到什么问题就留言吧，能解决大家帮忙一起解决一下
avatar
文章
阅读
粉丝