优秀的编程知识分享平台

网站首页 > 技术文章 正文

JS基础-数组详解(js数组的实现原理)

nanyue 2024-09-08 06:00:26 技术文章 4 ℃

创建一个新数组

如何创建一个新的数组
- 构造器 Array 
let newArray = new Array( Array.length: number ) 
let newArray = Array( Array.length: number ) new可省略
newArray = [Array*ele]
- 对数值赋值 let newArray = [1,2,3]
以下为ES6新增方法
- Array.of
let newArray = Array.of(x,y,z); 
newArray = [eleX,eleY,eleZ]
- Array.form(String & Set & Map)
// ["a", "r", "r","a","y"]
let newArray = Array.from('array'); 
// ['array1', 'array2']
let newArray = Array.from(new Set(['array1', 'array2'])); 
// [[1, 'array1']
let newArray = Array.from(new Map([[1, 'array1']])); 

isArray

let newArray = [1,2,3,4,5];
- instanceof
newArray instanceof Array ===> true
- constructor
newArray.constructor === Array ===>true
- isArray
Array.isArray(newArray) ===> true
- Object.prototype.toString.call()
Object.prototype.toString.call(newArray) == '[object Array]' ==>true

数组去重

- new set(ES6)
let newArray = [...new set([1,1,2,3,4].)]
newArray = [1,2,3,4]
- reduce
let oldArray = [1,1,2,3,4]
let newArray = []
oldArray.sort().reduce((current,next)=>{
 if(current.length === 0 || oldArray[current.length - 1] !== next){
 newArray.push(current);
 }
 return init},[]
) 
 
- filter
let newArray = [1,1,2,3,4].filter((e,i,arr)=>{
 return arr.indexOf(e) == i;
}) 
 

常见方法 - 遍历

let newArray = [1,2,3,4,5];
- for
for(let i = 0;i<newArray.length;I++){
 // 逐行打印
 console.log(newArray[i])
}
- forEach
newArray.forEach(item=>{
 // 逐行打印
 console.log(item)
})
- for-of(ES6)
for(item of newArray){
 // 逐行打印
 console.log(item)
}
- for-in
for(item in newArray){
 // 逐行打印
 console.log(item)
}

常见方法 - 循环

let newArray = [1,2,3,4,5];
- map
let mapArray = newArray.map(item=>{
 // 数组中的每个数组都会执行这段
 //并返回新数据push到mapArray
 item + 1;
})
mapArray = [2,3,4,5,6]
- reduce (计算求和)
let reduceArray = newArray.reduce((current,next)=>{
 // current数组的求和total,末尾0为chu'shi'z
 return current + next
},0)
reduceArray = 14
- reduceRight
同reduce相同,只是顺序变换了。从右向左
- filter
let filterArray = newArray.filter(item=>{
 // 数组中的每个数组都会执行这段,并返回符合条件的字段
 return item === 1
})
filterArray = [1]
- some
只执行符合条件的操作
newArray.some(item=>{
 return item === 1
})
- every
当遇到第一个符合条件的值则执行操作,后续退出循环不在执行以下操作
newArray.every(item=>{
 return item === 1
})
- entries(ES6)
返回一个数组迭代器对象,该对象包含数组中每个索引的键值对
let iteratorArray = newArray.entries()
iteratorArray.next().value = 1 (每个索引)
- find && findIndex (ES6)
返回符合条件的索引,如果没有符合值则返回 undefind(find) /-1(findIndex)
- keys(ES6)
同entries相似,返回一个数组索引的迭代器
let keysArray = newArray.keys()
keysArray.next().value = 1 (每个索引)
- values(ES6)
返回一个数组迭代器对象,该对象包含数组中每个索引的值
let valuesArray = mewArray.values()
valuesArray.next().value = 1 (每个value)
- Symbol.iterator(ES6)
同 values 方法功能相同。调用返回也一致

常见方法 - 改变数组方法

- pop 
删除一个数组中的最后的一个元素,并且返回这个元素
- push
添加元素到数组末尾,并且返回数组新的长度
- reverse
颠倒数组中元素的位置
- shift
删除数组中第一个元素
- sort(comparefn)
对数组进行排序
若 comparefn(a, b) < 0,那么a 将排到 b 前面;
若 comparefn(a, b) = 0,那么a 和 b 相对位置不变;
若 comparefn(a, b) > 0,那么a , b 将调换位置;
- splice
用新元素替换旧元素的方式来修改数组
- unshift
在数组开始处插入一些元素,并返回新的数组长度
-copyWithin(target, start[, end = this.length])--ES6
数组内元素之间的替换,即替换元素和被替换元素均是数组内的元素
taget 指定被替换元素的索引,start 指定替换元素起始的索引,end 可选,指的是替换元素结束位置的索引
注:目前只有Firefox(版本32及其以上版本)实现了该方法,兼容性较差
- fill(value, start[, end = this.length]) --ES6
value 指定被替换的值,start 指定替换元素起始的索引,end 可选,指的是替换元素结束位置的索引

常见方法 - 不会改变数组的方法

- concat
将传入的数组或者元素与原数组合并,组成一个新的数组并返回
Array.concat(value)
- join
数组中的所有元素连接成一个字符串
Array.join(指定连接字符,默认值为逗号)
- slice
将数组中一部分元素浅复制存入新的数组对象,并且返回这个数组对象
Array.slice(startIndex,endIndex)
- toString
返回数组的字符串形式,由逗号连接
- toLocaleString
字符串由数组中的每个元素的 toLocaleString() 返回值经调用 join() 方法连接(由逗号隔开)组成
- indexOf(ele,startIndex)
用于查找元素在数组中第一次出现时的索引,如果没有,则返回-1
- lastIndexOf(ele,startIndex)
查找元素在数组中最后一次出现时的索引,如果没有,则返回-1
该方法逆向查询
- includes(ele.indexStart)
用来判断当前数组是否包含某个指定的值,如果是,则返回 true,否则返回 false

扩展

https://www.lodashjs.com/

lodash,是一个一致性、模块化、高性能的 JavaScript 实用工具库。

谁用谁知道,后续会写一篇专门介绍这个库的笔记。

最近发表
标签列表