JavaScript学习笔记（二）：数组数据处理

JavaScript中的数组数据处理

前言：数组在JS使用非常频繁，同样也非常重要，下面是我分享给大家常用的一些数组方法，希望对你有帮助

1、split() 字符串分割成数组

split()是针对string的方法，按照指定的分割符号将分割后的部分作为元素返回一个新的数组

const example = 'mio和neeko和abby';
const a = example.split('和');          // 以 和 作为分隔符
console.log(a);

控制台打印结果：
在这里插入图片描述

2、indexOf() 查找元素位置

indexOf(某元素 , startIndex) 从 startIndex开始查找某元素（如没有startIndex则默认查找全部数组），如果存在则返回位置，不存在返回-1。也可用于字符串查找是否包含某字符。

const example = ['mio', 'neeko','abby'];
const a = example.indexOf('neeko');
const b = example.indexOf('ada');
console.log('neeko在数组中的位置:'+a);         // 打印结果 neeko在数组中的位置:1
console.log('ada在数组中的位置:'+b);           // 打印结果 ada在数组中的位置:-1
const stringExample = '我是一头猪';     
console.log(stringExample.indexOf('一头猪')); // 打印结果 2
console.log(stringExample.indexOf('一条狗')); // 打印结果 -1

3、includes() 查找是否包含某元素

includes(某元素) 检查数组是否包含某元素，包含返回true否则返回false

const example = ['mio', 'neeko','abby'];
const a = example.includes('neeko');
const b = example.includes('ada');
console.log('neeko在数组中的位置:'+a);         // 打印结果 neeko在数组中的位置:true
console.log('ada在数组中的位置:'+b);           // 打印结果 ada在数组中的位置:false
const stringExample = '我是一头猪';     
console.log(stringExample.includes('一头猪')); // 打印结果 true
console.log(stringExample.includes('一条狗')); // 打印结果 false

4、push() 后增元素

push(元素) 在数组最后增加一个元素，并返回新数组的长度

const example = ['mio', 'neeko','abby'];
const a = example.push('ada');
console.log(example); // 控制台输出结果 ["mio", "neeko", "abby", "ada"]
console.log(a);       // 控制台输出结果 4

5、unshift() 前增元素

unshift(元素一, 元素二 … )，在数组前增加一个或多个元素并返回新数组的长度。

const example = ['mio', 'neeko','abby'];
const a = example.unshift('ada','lily','may');   // 可填写一个或多个元素
console.log(example);                            // 控制台输出结果 ["ada", "lily", "may", "mio", "neeko", "abby"]
console.log(a);                                  // 控制台输出结果 6

6、pop() 后删元素

pop()用于删除并且返回最后一个元素

const example = ['mio', 'neeko','abby'];
const a = example.pop();
console.log(example);        // 控制台输出结果 ["mio", "neeko"]
console.log(a);              // 控制台输出结果 abby

7、shift() 前删元素

shift()用于删除并且返回首个元素

const example = ['mio', 'neeko','abby'];
const a = example.shift();
console.log(example);        // 控制台输出结果 ["neeko", "abby"]
console.log(a);              // 控制台输出结果 mio

8、splice() 修改数组

splice(index, length, 增加元素一，增加元素二，… 增加元素n)，从index处开始删除length个元素，并从index处开始新增元素，返被删除元素组成的数组

const example1 = ['mio', 'neeko','abby'];
const example2 = ['mio', 'neeko','abby'];
const example3 = ['mio', 'neeko','abby'];
const a = example1.splice(1);       // 如果没有写length，表示删除index以后的所有元素
console.log(a);                     // 控制台输出结果 ["neeko", "abby"]
console.log(example1);              // 控制台输出结果 ["mio"]
const b = example2.splice(1,1);
console.log(b);                     // 控制台输出结果 ["neeko"]
console.log(example2);              // 控制台输出结果 ["mio", "abby"]
const c = example3.splice(1,1,'lily','may');
console.log(c);                     // 控制台输出结果 ["neeko"]
console.log(example3);              // 控制台输出结果 ["mio", "lily", "may", "abby"]

9、concat() 合并数组

数组一.concat(数组二) 合并数组，返回新数组但不会改变原数组

const example1 = ['mio', 'neeko','abby'];
const example2 = ['lily', 'may'];
const a = example1.concat(example2);
console.log(a);                     // 控制台输出结果 ["mio", "neeko", "abby", "lily", "may"]
console.log(example1);              // 控制台输出结果 ['mio', 'neeko','abby']
console.log(example2);              // 控制台输出结果 ['mio', 'neeko','abby']

10、slice() 剪切数组

slice(startIndex, endIndex) ，返回从startIndex开始（包含 startIndex）到endIndex（不包含 endIndex）之间元素组成的数组。返回新数组不改变原数组。

const example1 = ['mio', 'neeko','abby','lily', 'may'];
const a = example1.slice(1,4);
console.log(a);                     // 控制台输出结果 ["neeko", "abby", "lily"]
console.log(example1);              // 控制台输出结果 ["mio", "neeko", "abby", "lily", "may"]

11、join() 将数组转化为字符串

不改变原数组，返回转换后的字符串

const example1 = ['mio', 'neeko','abby','lily', 'may'];
const a = example1.join();
console.log(a);                     // 控制台输出结果 mio,neeko,abby,lily,may
console.log(example1);              // 控制台输出结果 ["mio", "neeko", "abby", "lily", "may"]

12、sort() 数组排序

sort() 改变原数组，返回排序后的数组

① 按ASCII码排序

const example1 = ['mio', 'neeko','abby','lily', 'may'];
const a = example1.sort();
console.log(a);                     // 控制台输出结果 ["abby", "lily", "may", "mio", "neeko"]
console.log(example1);              // 控制台输出结果 ["abby", "lily", "may", "mio", "neeko"]

② 按照升序排序

const example1 = [
  {
    
    name:'mio', count:3}, 
  {
    
    name:'neeko', count:4},
  {
    
    name:'abby', count:2},
  {
    
    name:'lily', count:1},
  {
    
    name:'may', count:8}
];
const a = example1.sort(function(a,b){
    
    
  return a.count - b.count              // 按照count属性升序排序，降序改为b.count - a.count
});
console.log(a);
console.log(example1);

控制台输出结果：
在这里插入图片描述

13、filter() 数组过滤

filter(a=> 条件)，返回满足条件的元素组成的数组，不改变原数组

① 普通用法

const example1 = [
  {
    
    name:'mio', count:3}, 
  {
    
    name:'neeko', count:4},
  {
    
    name:'abby', count:2},
  {
    
    name:'lily', count:1},
  {
    
    name:'may', count:8}
];
const a = example1.filter(a => a.count > 3)
console.log(a);
console.log(example1);
}

控制台输出结果：
在这里插入图片描述

② 与Map()组合去重

const example1 = [
  {
    
    name:'mio', count:3}, 
  {
    
    name:'neeko', count:4},
  {
    
    name:'abby', count:2},
  {
    
    name:'mio', count:1},
  {
    
    name:'neeko', count:8}
];
const res = new Map();
const a = example1.filter( a=> !res.has(a.name) && res.set(a.name, 1));
console.log(a);
console.log(example1);

在这里插入图片描述