JavaScript-Array 学习

bodyHealthy

已于 2024-03-20 21:52:19 修改

阅读量164

点赞数

分类专栏： JavaScript 文章标签：前端 javascript 学习

于 2023-01-27 23:11:48 首次发布

本文链接：https://blog.csdn.net/hao_13/article/details/128773716

版权

JavaScript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1、两个ES6新增的构造数组的静态方法：

1-1、Array.from()，用于将类数组结构转换为数组实例，第一个参数接收一个类数组对象

1-2、Array.of()，用于将一组参数转换为数组实例

2、.length属性

获取数组的长度，可读可改

3、检测是否是数组：instanceof

如 value instanceof Array

Object.prototype.toString.call(a) 如果 a 是数组，则结果为：[object Array]

4、迭代器方法：

keys()是返回数组索引的迭代器，values()是返回数组元素的迭代器，entries()是返回索引/值的迭代器

这三个方法都返回迭代器，所以可以将他们的内容通过Array.from()直接换回数组实例

如：

const a = [4,5,3,2];

const akey = Array.from(a.keys());

// akey : [0 , 1 , 2 , 3]

const akv = Array.from(a.entries());

// akv : [ [0, 4], [1, 5], [2, 3], [3, 2] ]

5、复制方法CopyWithin()

CopyWithin(insertIndex) 复制所有内容插入到索引值往后（会覆盖）

CopyWithin(insertIndex, startIndex)

CopyWithin(insertIndex, startIndex, endIndex)

6、填充方法fill()

fill(value)

fill(value, startIndex)

fill(value, startIndex, endIndex)

7、转换方法：

valueOf() 返回数组本身

toString()返回数组中每个值的等效字符串拼接而成的一个由逗号分隔的字符串，如1,2,3,4,5

toLocalString()

8、栈方法栈是一种后进先出的结构

pop() 删除数组的最后一项

push() 接收任意数量的参数，将他们添加到数组的末尾

9、队列方法先进先出

shift() 删除数组的第一项

unshift() 接收任意多个参数，在数组开头添加任意多个值

10、排序方法

sort() 默认情况下按照升序重新排序数组元素，小前大后

可以接收一个比较函数，用于判断那个值应该排在前面。

比较函数接收两个参数，如果第一个参数应该排在第二个参数前面，就返回负值；

如果两个参数相等，就返回0

11、反转数组

reverser()

12、连接数组

concat() 接收任意多个参数，可以是数组、字符串等，

不管接收到的参数是一个数组还是一个其他类型的数据，最终都会返回一个一维数组

let arr = ['a','b','c'];

let newarr = arr.concat('d',['e','f']);

// newarr为：['a','b','c','d','e','f'];

13、slice方法

创建一个包含原有数组中一个或多个元素的新数组，不影响原数组

接收一个或两个参数，返回元素的开始和结束索引

14、splice方法，删除、插入、替换

14-1、删除：

接收两个参数，要删除的第一个元素的位置，删除元素的总数量。返回值为删除的元素

14-2、插入：

接收n+2参数（n为要添加的元素的个数），插入的开始位置、0（要删除的元素的数量）、要插入的元素（）

第三个元素往后还可以添加任意多个参数，都会插入到数组中

14-3、替换：

接收n+2参数（n为要删除的元素的个数），插入的开始位置、要替换元素的数量、新元素

15、三个查找方法 indexOf、lastIndexOf、includes

都接收两个参数: 要查找的元素、开始的索引值（没有则默认从头开始）；

接收一个参数时为要查找的元素

indexOf、lastIndexOf 返回元素的索引值

includes 返回 boolean 值

16、使用断言函数查找 find、findIndex

都接收三个参数：元素、索引、数组本身

其中元素是数组中当前搜索的元素，索引是当前元素的索引，数组即原数组

find() 返回查找到的元素，findIndex() 返回查找到的元素在源数组中的索引位置

两个方法找到匹配项后就不会再往后查找了

const people = [{name:'zhangsan',age:17},{name:'lisi',age:25}];

let result = people.find((elem, index, arr) => elem.age <= 20 );

// result为{name:'zhangsan',age:17}

17、迭代方法：

以下方法对数组每一项都运行传入的函数，都不会改变源数组

传入的函数都包含三个参数：当前的元素，当前元素的索引，原数组

every() 如果每次函数执行都返回true，则该方法返回true

some() 如果有一次函数执行返回true，则该方法返回true

filter() 函数执行完成后返回true的项会组成数组之后作为该方法的返回值

map() 返回由每次函数调用的结果构成的数组，可以用来生成一个与原数组元素一一对应的新数组

forEach() 没有返回值，可以用来对数组遍历

18、归并方法reduce()、reduceRight()

这两个方法都会迭代数组的所有项，并在此基础上构建一个最终返回值。

reduce 从前往后，reduceRight 从后往前

这两个方法都接收两个参数：一个归并函数、一个事归并的起点

归并函数接收4个参数：上一个归并值、当前项、当前项的索引、数组本身

这个函数返回的任何值都将会被作为下一次调用这个归并函数的第一个参数。

可以利用该方法实现累加等操作

let arr = [1,5,3,6,8,7];

let result = arr.reduce((preval, val, index, arr)=>{

    return preval+val;

});

console.log(result);       //30

19、数组去重的几种方法

let arr = [1,2,2,3,5,4,6,5,8,1,2,4]


// 1、使用Set
let new_arr = [...new Set(arr)]
console.log(new_arr)

// 2、使用filter
let new_arr1 = arr.filter((e,index, arr)=>{
    // 如果一个元素在前面已经出现过，则indexOf的结果一定小于当前的index
    return index <= arr.indexOf(e)
})
console.log(new_arr1)


// 3、使用reduce
let new_arr2 = arr.reduce((total, current)=>{
    if(!total.includes(current)){
        total.push(current)
    }
    return total
},[])
console.log(new_arr2)



// 4、使用 Map （Map是键值对集合，一个键只能出现一次）
let map_ = new Map();
arr.forEach((e)=>{
    map_.set(e, '')
})
let new_arr3 = Array.from(map_.keys())
console.log(new_arr3)

20、数组的深拷贝和浅拷贝

浅拷贝：

会创建一个新的数组，只会拷贝原始数组中元素的引用，而不是元素本身。如果元素是一个对象或者是数组等的引用类型，那么新的数组和元素数组中的这个元素是共享相同的地址的，修改一处会影响到另一处也发生改变。

JavaScript 中的引用类型主要包括对象、数组、函数、日期、正则表达式、Map、Set、Symbol 等。

let arr = [
    'a',
    1,
    function(){
        console.log('1234')
    },
    {name:'zhangsan',age:15}
]

/*
*    使用扩展运算符进行浅拷贝
*/
let new_arr = [...arr]
console.log(arr, new_arr)
// [ 'a', 1, [Function (anonymous)], { name: 'zhangsan', age: 15 } ] 
// [ 'a', 1, [Function (anonymous)], { name: 'zhangsan', age: 15 } ]

new_arr[0] = 'b'                     // arr[0]不变
new_arr[2]()                         // 会输出 1234，因为浅拷贝是复制了函数的引用
new_arr[3].name = 'lisi'             // arr[3]也会跟着改变
console.log(arr, new_arr)            // new_arr 修改过的引用变量，如对象，arr都会发生改变
// [ 'a', 1, [Function (anonymous)], { name: 'lisi', age: 15 } ] 
// [ 'b', 1, [Function (anonymous)], { name: 'lisi', age: 15 } ]

/*
*    使用 slice 进行浅拷贝
*/

let new_arr1 = arr.slice()
console.log(arr, new_arr1)
// [ 'a', 1, [Function (anonymous)], { name: 'zhangsan', age: 15 } ] 
// [ 'a', 1, [Function (anonymous)], { name: 'zhangsan', age: 15 } ]

new_arr1[0] = 'b'                     // arr[0]不变
new_arr1[2]()                         // 会输出 1234，因为浅拷贝是复制了函数的引用
new_arr1[3].name = 'lisi'             // arr[3]也会跟着改变
console.log(arr, new_arr1)            // new_arr 修改过的引用变量，如对象，arr都会发生改变
// [ 'a', 1, [Function (anonymous)], { name: 'lisi', age: 15 } ]
// [ 'b', 1, [Function (anonymous)], { name: 'lisi', age: 15 } ]

使用递归赋值的方式将原始数组中的元素赋值给新数组中对应的位置，也是浅拷贝。

深拷贝：

深拷贝会创建一个新的数组，并且会递归复制原始数组中的元素及其所有子元素，始新的数组与原始的数组完全独立，修改其中一个数组中的元素不会导致另一个数组中的元素发生改变。

/*
*    使用JSON.parse、JSON.stringify 进行深拷贝
*    使用该方式，不能处理函数、循环引用等类型
*/

let new_arr3 = JSON.parse(JSON.stringify(arr))
console.log(arr, new_arr3)
// [ 'a', 1, [Function (anonymous)], { name: 'zhangsan', age: 15 } ]
// [ 'a', 1, null, { name: 'zhangsan', age: 15 } ]


new_arr3[0] = 'b'
new_arr3[3].name = 'alin'
console.log(arr, new_arr3)
// [ 'a', 1, [Function (anonymous)], { name: 'zhangsan', age: 15 } ]
// [ 'b', 1, null, { name: 'alin', age: 15 } ]