网站首页 > 技术文章 正文
创建一个新数组
如何创建一个新的数组 - 构造器 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 实用工具库。
谁用谁知道,后续会写一篇专门介绍这个库的笔记。
- 上一篇: 「JavaScript 教程」数据类型-数组
- 下一篇: 前端面试题 | 你真的搞明白如何创建数组吗?
猜你喜欢
- 2024-09-30 JavaScript数组_数组方法「二」(二十七)
- 2024-09-30 table组件,前端如何使用table组件打印数组数据
- 2024-09-30 前端数组改字符串方法 前端数组改字符串方法是什么
- 2024-09-30 javascript复制数组的三种方式 javascript复制粘贴
- 2024-09-30 第21节 检测数组、类数组及多维数组-Web前端开发之Javascript
- 2024-09-30 前端系列——ES6中循环数组的方法
- 2024-09-30 前端已死?请用TS写出20个数组方法的声明
- 2024-09-30 springboot项目中,前端如何传递一个自定义对象数组给后端
- 2024-09-30 带你走进javascript数组的世界 javascript数组操作方法
- 2024-09-30 每天学点 ES6 —— 数组(二) es6数组处理方法
你 发表评论:
欢迎- 05-10如何优化数据库和前端之间的交互?
- 05-10前端代码优化小秘籍(前端优化24条建议)
- 05-10VS Code当中的15个神仙插件,值得收藏
- 05-10如何自己开发一个Google浏览器插件?
- 05-10前端流行框架Vue3教程:14. 组件传递Props效验
- 05-10吃了一年的SU,最好用的插件都在这了
- 05-10前端必看!这款神器让网站界面告别千篇一律
- 05-10程序员请收好:10个非常有用的 Visual Studio Code 插件
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端md5加密 (49)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- 前端懒加载 (45)
- 前端接口 (46)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle查询数据库 (45)
- oracle约束 (46)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- mac oracle (47)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)