JS数组类型,数组的各种方法和操作(后盾人笔记)

进厂打螺丝。

已于 2023-02-05 15:26:38 修改

阅读量565

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-09-19 21:22:34 首次发布

本文链接：https://blog.csdn.net/z123xxxxx/article/details/126936207

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

数组是多个变量值的集合，数组是Array 对象的实例，所以可以像对象一样调用方法。
数组是引用类型，因此使用 = 直接赋值数组，修改新数组时会把原数组修改掉，这样只是将数组的地址赋值给了它，如果对该变量进行操作，也会改变原数组的值

 	let arr0=[111,222,333,'2222']
    let arr1=arr0
    console.log(arr0);// (4)[111, 222, 333, '2222']
    console.log(arr1);// (4)[111, 222, 333, '2222']
    arr1.push('3333',222)
    //对arr1进行操作，arr0的值也随之改变，数组
    console.log(arr0);//(6)[111, 222, 333, '2222', '3333', 222]
    console.log(arr1);//(6)[111, 222, 333, '2222', '3333', 222]

数组的深拷贝:对新数组操作不会影响就数组的值

 let oldArr = [
            { group: 1, id: 2, name: "aa" },
            { group: 2, id: 1, name: "bb" }];


        let newArr2 = JSON.parse(JSON.stringify(oldArr)); //对象深拷贝，修改不影响之前的
        newArr2.push({group:3,id:3,name:'xxxx'})
        for (let i = 0; i < newArr2.length; i++) {
            if (newArr2[i].id == 1) {
                newArr2[i].name = "new";
                break;
            }
        }

        console.log(oldArr);//
        console.log(newArr2);//

在这里插入图片描述

1.声明数组

1.1创建数组

1.使用对象的方式创建数组

console.log(new Array(1, 'xxx', 'ddd')); //[1, 'xxx', 'ddd']

2.使用字面量创建

const array=['xxx',111]

3.多维数组的定义

const array0 = [["hdcms"], ["houdunren"],[1,2,3]];
        console.log(array2[1][0]);//houdunren
        console.log(array2[1][2]);//underfined
        console.log(array2[2][2]);//3
 // 二维数组
 //[1,2,3]代表第一行，[4,5,6]代表第二行
 		const array=[[1,2,3],[4,5,6], [7,8,9]]
 		//可以看成
        const array=[[1,2,3],
                    [4,5,6],
                    [7,8,9]]
        console.log(array[0][0]);//1
        console.log(array[2][0]);//7

4.声明多个空元素的数组
map()函数的用法：arr.map()

//创建指定长度的数组
		const array=new Array(8)//[empty × 8]
//如果是new Array(81)，里面的数是empty，map()遍历不到
 // 这样创建数组是因为每个值都被赋值为Undefined，就可以用map()遍历，
        let list = Array.apply(null, { length: 8 } ).map((_, index) => {
            return {
                id: index,
                number: (index) % 3 + 1
            }
})
//(8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 
// 0: {id: 0, number: 1}
// 1: {id: 1, number: 2}

5.下面直接设置 3 号数组，会将 1/2 索引的数组定义为空值

let hd = ["xxx"];
hd[3] = "hdcms";
console.log(hd[1]);//undefined
console.log(hd.length); //4

6.Array.of

//使用Array.of设置一个参数时不会创建空元素数组
let hd = Array.of(3);
console.log(hd); //[3]

hd = Array.of(1, 2, 3);
console.log(hd); //[1, 2, 3]

2.类型转换

可以将数组转换为字符串也可以将其他类型转换为数组。

2.1数组转字符串

大部分数据类型都可以使用.toString() 函数转换为字符串。

console.log(([1, 2, 3]).toString()); // 1,2,3
console.log(String([1, 2, 3])); // 1,2,3
console.log([1, 2, 3].join("-"));//1-2-3

2.2Array.from(ES6新增)

使用Array.from可将类数组转换为数组，类数组指包含 length 属性或可迭代的对象。
Array.from()第一个参数为要转换的数据，第二个参数为类似于map 函数的回调方法

let arr = [12,12,13,45,97,9797,564,134,45642]
let set = new Set(arr)//set(),用于在数组中去重
console.log(Array.from(set, item => item + 1)) // [ 13, 14 , 46, 98, 9798, 565, 135, 45643 ]

2.3数组的展开语法

使用展开语法来合并数组相比 concat 要更简单，使用… 可将数组展开为多个值。

//展开语法合并
let a = [1, 2, 3];
let b = ['a', '后盾人', ...a];//这里的...a==[1,2,3]就是将a展开了
console.log(b); //["a", "后盾人", 1, 2, 3]

//concat合并
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
console.log(children)//Cecilie,Lone,Emil,Tobias,Linus,Robin

使用展示语法可以替代 arguments 来接收任意数量的参数

function hd(a,...args) {//...args这样就是将要传进来的形参合并为一个数组
        console.log(a);//1
    console.log(args);//[2, 3, "后盾人"]
    console.log(args[1]);//3
    console.log(args.length);//3
    }
    hd(1, 2, 3, "后盾人"); //1,[2, 3, "后盾人"]

arguments：js把传入到这个函数的全部参数存储在一个叫做arguments的东西里面

function showargs() {
	console.log( arguments );
    console.log(arguments[2]);//3
	for (item in arguments){
        // console.log(item);//0,1,2,3,4

        console.log(arguments[item]);//1,2,3,4,5
        arguments[item]++
    console.log(arguments[item]);//2,3,4,5,6
	}
}
showargs(1,2,3,4,5);
showargs(1,2,3,4,5);

arguments

3.数组操作（数组的方法）

3.1 管理元素（添加、删除）

push()—从后面添加元素

let arr = ["后盾人", "hdcms"];
console.log(arr.push('向军大叔', 'houdunren')); //4
console.log(arr); //["后盾人", "hdcms", "向军大叔", "houdunren"]

unshift—从前面添加元素

let arr = ["后盾人", "hdcms"];
console.log(arr.unshift('向军大叔', 'houdunren')); //4
console.log(arr); //["向军大叔", "houdunren", "后盾人", "hdcms"]

pop()从末尾弹出元素

let arr = ["后盾人", "hdcms"];
console.log(arr.pop()); //hdcms，弹出来的值
console.log(arr); //["后盾人"]

shift—从前面取出一个元素

let arr = ["后盾人", "hdcms"];
console.log(arr.shift()); //后盾人，取出来的值
console.log(arr); //["hdcms"]，取出之后的数组

fill()—填充数组元素

使用fill 填充数组元素
语法：array.fill(value, start, end)
在这里插入图片描述

let arr=Array(5).fill('xx',2,4)
console.log(arr);//

fill()

let arr=Array(5).fill('xx','xxxxxxx')//只能填充第一个参数
console.log(arr);//(5) ['xx', 'xx', 'xx', 'xx', 'xx']

slice() --从数组中截取部分元素组合成新数组

使用 slice 方法从数组中截取部分元素组合成新数组（并不会改变原数组），不传第二个参数时截取到数组的最后元素。

let arr=[1,2,3,4,5,6]
    let hd=arr.slice()//hd=[1,2,3,4,5,6] 相当于把arr赋值给hd
    hd.push('111','2222')
    hd.pop()
    hd[4]='zzz'
    console.log(arr);//(6) [1, 2, 3, 4, 5, 6]
    //操作hd没有改变原数组arr
    console.log(hd);//(7) [1, 2, 3, 4, 'zzz', 6, '111']

let arr = [0, 1, 2, 3, 4, 5, 6];
console.log(arr.slice(1, 3)); // [1,2] 截取arr[1]到arr[3],不包含arr[3]

splice —删除数组中的元素

语法：array.splice(index,howmany,item1,…,itemX)

返回值是被删除的元素组成的数组

let arr = [0, 1, 2, 3, 4, 5, 6];
console.log(arr.splice(1, 3)); //返回删除的元素 [1, 2, 3]
console.log(arr); //删除数据后的原数组 [0, 4, 5, 6]

通过指定第三个参数来设置在删除位置添加的元素

let arr = [0, 1, 2, 3, 4, 5, 6];
console.log(arr.splice(1, 3, 'hdcms', '后盾人')); //[1, 2, 3] 返回值是 被删除的元素组成的数组
console.log(arr); //[0, "hdcms", "后盾人", 4, 5, 6]

向数组中的指定位置添加元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");//在第二个位置删除0个元素并添加两个元素

3.2合并拆分

join()—把数组转成字符串

语法 array.join(separator),
separator可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();//Banana,Orange,Apple,Mango 字符串
//指定转换连接方式
let arr = [1, "后盾人", "hdcms"];
console.log(arr.join('-')); //1-后盾人-hdcms 使用join可以指定转换的连接方式

split()—把字符串分割成数组

split() 方法用于把一个字符串分割成字符串数组。
语法：string.split(separator,limit),
split()
如果把空字符串 (“”) 用作 separator，那么 stringObject 中的每个字符之间都会被分割

let string='xzlsy123'
console.log(string.split("")); //(8) ['x', 'z', 'l', 's', 'y', '1', '2', '3']
console.log(string.split()); //['xzlsy123']

指定分割符号

let string='xzlsy,123,dddd,55555'
console.log(string.split(',')); //['xzlsy', '123', 'dddd', '55555']

concat 连接两个或多个数组

let array = ["hdcms", "houdunren"];
let hd = [1, 2];
let cms = [3, 4];
console.log(array.concat(hd, cms)); //["hdcms", "houdunren", 1, 2, 3, 4]

copyWithin—复制数组中的元素到同一数组中

使用 copyWithin 从数组中复制一部分到同数组中的另外位置。

语法说明:array.copyWithin(target, start, end)
参数说明
target 必需。复制到指定目标索引位置。
start 可选。元素复制的起始位置。
end 可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

const arr = [1, 2, 3, 4];
console.log(arr.copyWithin(2, 0, 2)); //[1, 2, 1, 2]  复制0到2的元素，粘贴在2那里

3.3查找元素

indexOf()/lastIndexof

array.indexOf(item,start) //
使用 indexOf 从前向后查找元素出现的位置(返回的是该元素的下标)，如果找不到返回 -1。
使用 lastIndexOf 从后向前查找元素出现的位置，如果找不到返回 -1。
indexof()

let arr = [7, 3, 2, 8, 2, 6，'9'];
console.log(arr.indexOf(2)); // 2 从前面查找2出现的位置
console.log(arr.indexOf(9)); // -1 indexOf 类似于===是严格类型约束
console.log(arr.indexOf('9'));//6
onsole.log(arr.indexOf(2, 3)); //4  从8开始往后找
console.log(arr.indexOf(2,-4));//4 从8开始  -1代表最后一位数
console.log(arr.indexOf(2,-5));//2 从2开始

严格类型约束

console.log(444=='444');//true
console.log(444==='444');//false

includes —返回布尔值，判断数组里是否有这个元素

使用includes等不能查找引用类型，因为它们的内存地址是不相等的

const user = [{ name: "李四" }, { name: "张三" }, { name: "后盾人" }];
const find = user.includes({ name: "后盾人" });
console.log(find);//false

let a={a:1}
let b={a:1}
console.log(a==b);//false,地址不同

let arr = [7, 3, 2, 6];
console.log(arr.includes(6)); //true

find—返回要查找的值

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
find 方法找到后会把值返回出来，如果找不到返回值为undefined，返回第一次找到的值，不继续查找

var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
console.log( ages.find(checkAdult));//18
function checkAdult(age) {
    return age >= 22;
}
 console.log( ages.find(checkAdult));//undefinded

every()/some() 用来检查是否存在关键字

every 用于递归的检测元素，要所有元素操作都要返回真结果才为真。
使用 some 函数可以递归的检测元素**，如果有一个返回 true，表达式结果就是真**。
需要将检查的结果 return出来

const user = [
  { name: "李四", js: 89 },
  { name: "马六", js: 55 },
  { name: "张三", js: 78 }
];
let every=user.every((val)=>{
  return val.js>60
})
let some=user.some((val)=>{
   return val.js>60
})
console.log('every',every);//false
console.log('some',some);//true

3.4对数组里的元素进行操作

3.4.1 Array.map()—遍历数组里的元素并进行处理返回处理后的数组

语法：array.map(function(currentValue,index,arr), thisValue)
map()

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。map() 不会对空数组进行检测。
如果Array里面的值是值类型的而不是对象类型的，map() 就不会改变原始数组，
如果如果Array里面的值是对象类型的，原数组也会被改变

let arr=[
    {a:"aaa",b:'bbb',"c":'cccc'},
    {a:"bbb",b:'ccc',"c":'aaa'},
    {a:"ccc",b:'ddd',"c":'eee'}
]//arr里面的值是对象，是引用类型

let brr=arr.map(function(value){
    value.d='dddddddddd'
    return value
})
console.log(brr);
console.log(arr);//arr被改变


let arr2=['xxx','zzz']
let brr2=arr2.map(function(value){
    value=`lsy${value}`
    return value
})
console.log(arr2);//arr2没有被改变，因为它里面的值是值类型
console.log(brr2);

map()

3.4.2 Array.reduce–可以用作累加器，取最大最小值等

使用 reduce 与 reduceRight 函数可以迭代数组的所有元素，reduce 从前开始 reduceRight 从后面开始。
语法:array.reduce(function(prev, currentValue, currentIndex, arr), initialValue)
参数
prev :上次调用回调函数返回的结果
cur:当前的元素值
index:当前的索引
array:原数组
initialValue:设置prev的初始值，如果prev没有设置初始值，那么prev就是数组的一个元素，currenValue就是数组的第二个元素

array.reduce()用法示例：

1. 统计元素出现的次数

//function countArrayELem(array, elem) {
 // return array.reduce((total, cur) => (total += cur == elem ? 1 : 0), 0);//判断cur是否等于elem，如果是返回1 total=total+1,否则total=total+0
//}
//此写法是上面写法的解读版
function countArrayELem(array, elem) {
  return array.reduce((total, cur) => {
    console.log('total',total);//0
    console.log('cur',cur);//1
    if(cur==elem){
        total++
    }
    return total

  }, 0);
}
let numbers = [1, 2, 3, 1, 5,5,5,5];
console.log(countArrayELem(numbers, 5)); //4

统计元素出现的次数

2.取数组中的最大值

function arrayMax(array) {
  return array.reduce(
  //(max, elem) => (max > elem ? max : elem), array[0] ，这里就不用设置初始值为array[0],
  // 因为不设置初始值的时候，max的默认值就是array[0]
  	(max, elem) => (max > elem ? max : elem)
  );
}

console.log(arrayMax([1, 3, 2, 9,11,2,222,11,-99,0]));//222

3.获取价格超过1万的商品名称

let goods = [
  { name: "iphone", price: 12000 },
  { name: "imac", price: 25000 },
  { name: "ipad", price: 3600 }
];

function getNameByPrice(array, price) {
  return array.reduce((goods, elem) => {
    if (elem.price > price) {
      goods.push(elem);
    }
    return goods;
  }, []).map(elem => elem.name);
}
console.table(getNameByPrice(goods, 10000));

4.实现数组去重

let arr = [1, 2, 6, 2, 1];
let filterArr = arr.reduce((pre, cur, index, array) => {
  if (pre.includes(cur) === false) {
      pre = [...pre, cur];
  }
  return pre;
}, [])
console.log(filterArr); // [1,2,6]

使用set() 也可以实现数组去重

let arr = [12,12,12,13,13,13,45,'xx','xx','xx','zzz']
let set = new Set(arr)//set(),用于在数组中去重
console.log(set);//Set(5) {12, 13, 45, 'xx', 'zzz'}

3.4.3 Array.filter()—过滤数组中的元素

filter()不会改变原数组，过滤后的数组需要赋值给新数组
使用 filter 可以过滤数据中元素，下面是获取所有在 CSS 栏目的课程。

let lessons = [
  {title: '媒体查询响应式布局',category: 'css'},
  {title: 'FLEX 弹性盒模型',category: 'css'},
  {title: 'MYSQL多表查询随意操作',category: 'mysql'}
];

let cssLessons = lessons.filter(function (item, index, array) {
  if (item.category.toLowerCase() == 'css') {
    return true;
  }
});

console.log(cssLessons);

let arr=[1,2,3,45,5,5]
let newArr=arr.filter((val)=>{
    return val>3
})
console.log(arr);//[1,2,3,45,5,5]
console.log(newArr);//[45,5,5]