【JS基础系列】和数组相关

论坛 › 期权论坛 › 期权     
前端FE   2019-7-28 01:42   3546   0
在开发中，数组的使用场景非常多，希望对这块内容有一个比较系统性的总结，如果喜欢的话可以点波赞/关注，希望大家看完本文可以有所收获。

[h3]1.检测数组[/h3]
  1. arr instanceof Array
复制代码
  1. Array.isArray(arr)
复制代码
修改器方法

对于这些能够改变原数组的方法，要注意避免在循环遍历中改变原数组的选项，比如: 改变数组的长度，导致遍历的长度出现问题。


1.Array.prototype.copyWithin()将当前数组内部制定位置的成员复制到其他位置，返回当前新数组，原数组改变
接收三个参数[从该位置开始替换 | 从该位置开始读取数据 | 到该位置停止读取数据]
  1. //将4,5移动到前两位
复制代码
  1. let res = [1,2,3,4,5].copyWithin(0,3)
复制代码
  1. console.log(res)//[4,5,3,4,5]
复制代码
2.Array.prototype.fill()用给定的值填充一个数组
  1. ['a','b','c'].fill(7) //[7,7,7]
复制代码
  1. ['a','b','c'].fill(7,1,2) //['a',7,'c']
复制代码
3.pop()、push()、shift()、unshift(）arr.push(item)接受任意数量的参数，添加到数组末尾，返回新数组的长度
  1. var colors = ['red']
复制代码
  1. colors.push('blue','green'); //3
复制代码
arr.pop()删除数组最后一项，返回删除的项
  1. var colors = ['blue','green']
复制代码
  1. colors.pop() //green
复制代码
arr.unshift()接受任意数量的参数，添加到数组头部，返回新数组的长度
  1. var colors = ['red']
复制代码
  1. colors.unshift('green') //2
复制代码
arr.shift()删除数组第一项，返回删除的项
  1. var colors = ['blue','green']
复制代码
  1. colors.shift() //blue
复制代码
4.reverse()、sort()、splice()
arr.reverse()反转数组的顺序，并返回重新排序之后的数组， 原数组会被改变
  1. var arr1 = [1,2,3,'red','blue']
复制代码
  1. arr1.reverse() //["blue", "red", 3, 2, 1]
复制代码
arr.sort()如果不传参数，默认情况下数组内的元素会被转换为字符串进行比较，因此一般不推荐直接使用默认的arr.sort()进行排序。
返回值为排序后的新数组。原数组会被改变
注意：sort里接收一个比较参数
  1. var b = [1,2,3]
复制代码
  1. //升序
复制代码
  1. b.sort((a,b)=>a-b) //[1, 2, 3]
复制代码
  1. //降序
复制代码
  1. b.sort((a,b)=>b-a) //[3, 2, 1]
复制代码
splice()方法向/从数组中添加/删除项目，然后返回被删除的项目语法：
  1. array.splice(index,howmany,item1,.....,itemX)
复制代码
参数:
  • index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
  • howmany：可选。要删除的项目数量。如果设置为 0，则不会删除项目。
  • item1, ..., itemX：可选。向数组添加的新项目。
返回值: 如果有元素被删除,返回包含被删除项目的新数组。
例子1:删除元素
  1. let a = [1, 2, 3, 4, 5, 6, 7];
复制代码
  1. let item = a.splice(0, 3); // [1,2,3]
复制代码
  1. console.log(a); // [4,5,6,7]
复制代码
  1. // 从数组下标0开始，删除3个元素
复制代码
  1. let item = a.splice(-1, 3); // [7]
复制代码
  1. // 从最后一个元素开始删除3个元素，因为最后一个元素，所以只删除了7
复制代码
例子2:删除并添加
  1. let a = [1, 2, 3, 4, 5, 6, 7];
复制代码
  1. let item = a.splice(0,3,'添加'); // [1,2,3]
复制代码
  1. console.log(a); // ['添加',4,5,6,7]
复制代码
  1. // 从数组下标0开始，删除3个元素，并添加元素'添加'
复制代码
  1. let b = [1, 2, 3, 4, 5, 6, 7];
复制代码
  1. let item = b.splice(-2,3,'添加1','添加2'); // [6,7]
复制代码
  1. console.log(b); // [1,2,3,4,5,'添加1','添加2']
复制代码
  1. // 从数组最后第二个元素开始，删除3个元素，并添加两个元素'添加1'、'添加2'
复制代码
例子3: 不删除只添加
  1. let a = [1, 2, 3, 4, 5, 6, 7];
复制代码
  1. let item = a.splice(0,0,'添加1','添加2'); // [] 没有删除元素，返回空数组
复制代码
  1. console.log(a); // ['添加1','添加2',1,2,3,4,5,6,7]
复制代码
  1. let b = [1, 2, 3, 4, 5, 6, 7];
复制代码
  1. let item = b.splice(-1,0,'添加1','添加2'); // [] 没有删除元素，返回空数组
复制代码
  1. console.log(b); // [1,2,3,4,5,6,'添加1','添加2',7] 在最后一个元素的前面添加两个元素
复制代码
从上述三个例子可以得出:
  • 数组如果元素不够，会删除到最后一个元素为止
  • 操作的元素，包括开始的那个元素
  • 可以添加很多个元素
  • 添加是在开始的元素前面添加的


[h3]访问方法[/h3]
下面的这些方法绝对不会改变调用它们的对象的值，只会返回一个新的数组或者返回一个其它的期望值。


1.contact()、join()arr.concat()
没有传递参数，那么只是复制当前数组并返回副本，原数组不变；
传递一个元素（数组）或多个元素（数组）,会将其合并到arr中，返回新数组，原数组不变
  1. var colors = ['red','blue','green']
复制代码
  1. colors.concat('gray',['a','green'])  //["red", "blue", "green", "gray", "a", "green"]
复制代码
  1. console.log(colors) // ["red", "blue", "green"]
复制代码
tips: js数组复制
  1. arr.concat()    //原生
复制代码
  1. [...arr]   //ES6
复制代码
  1. Array.from(arr) //ES6
复制代码
  1. $.extend(arr) //JQ
复制代码
arr.join()连接数组中的元素使用特定的字符
  1. arr.join('-')
复制代码
2.includes()数组是否包含某个值，返回true 或 false
  1. [1,2,3].includes(2) //true
复制代码
3.indexOf()、lastIndexOf()、slice()
indexOf()验证数组中是否含有某个元素，返回第一个匹配到的元素在数组中所在的位置，如果没有，则返回 -1
  1. var colors =  ["red", "gray", "yellow"]
复制代码
  1. colors.indexOf('gray') // 1
复制代码
  1. colors.indexOf('mm') //-1
复制代码
arr.lastIndexOf()验证数组中是否含有某个元素，不过是从数组尾部开始查找，返回第一个匹配到的元素所在的位置，如果没有，则返回-1
  1. var colors =  ["red", "gray", "yellow","gray"]
复制代码
  1. colors.indexOf('gray') // 3
复制代码
  1. colors.lastIndexOf('mm') //-1
复制代码
arr.slice()剪切数组，返回剪切之后的数组，元素不会改变1、传入一个参数，表示起始位置，结束位置为最末尾
  1. var colors = ['red','blue','green']
复制代码
  1. colors.slice(2) //['green']
复制代码
2、传入2个参数，表示起始位置与结束位置，但不包括结束位置所在的元素
  1. var colors = ['red','blue','green']
复制代码
  1. colors.slice(1,2) //['blue']
复制代码
toString()、toLocalString()
toString( )返回对象的字符串表示
toLocaleString( )返回对象的字符串表示，该字符串与执行环境的地区对应；
  1. var dt = new Date();
复制代码
  1. console.log(dt.toLocaleString());
复制代码
  1. //2010/7/18 下午10:32:18
复制代码
  1. console.log(dt.toString());
复制代码
  1. //Thu Seven 18 2018 22:32:18 GMT+0800 (中国标准时间)
复制代码
结论：
1、LocaleString()会根据你机器的本地环境来返回字符串，它和toString()返回的值在不同的本地环境下使用的符号可能变化；
2、使用toString()是保险的方法，它不会因为本地环境（例如国家）改变而改变；
3、为了返回时间类型的值的话，使用toLocaleString()；

迭代方法

ES5定义了5个迭代方法，每个方法接收2个参数----》[要在每一项上运行的函数 | 运行该函数的作用域对象（可选）]运行的函数包括3个参数 ---》 [数组项的值 | 该项在数组中的位置 | 数组对象本身]

1.forEach()、filter()、map()tips：map、forEach里不可以使用continue、break ,每一项都会执行，如果遍历中要用到continue或break提升效率，则可以使用for()循环 或 for...of..循环
forEach()//对数组中的每一项运行给定函数，这个方法没有返回值
  1. //返回arr的age中每一项乘以2的数组
复制代码
  1. let arr = [{name:'james',age:12},{name:'lily',age:20}]
复制代码
  1. let res = arr.forEach((item, index, arr)=> item.age * 2 )
复制代码
  1. console.log(res)// undefined
复制代码
map()//对数组中的每一项运行给定函数，返回每次函数调用的结果组成的新数组
  1. //返回arr的age中每一项乘以2的数组
复制代码
  1. let arr = [{name:'james',age:12},{name:'lily',age:20}]
复制代码
  1. let res = arr.map((item, index, arr)=> item.age * 2 )
复制代码
  1. console.log(res)// [24,20]
复制代码
filter()//对数组中的每一项运行给定函数，返回该函数会返回true的项组成的新数组
  1. //返回arr的age中所有值大于15的元素
复制代码
  1. let arr = [{name:'james',age:12},{name:'lily',age:20}]
复制代码
  1. let res = arr.forEach((item, index, arr)=> item.age > 15 )
复制代码
  1. console.log(res)// [{age: 20,name: "lily"}]
复制代码
2.entries() arr.entries() 遍历数组的键名和键值entries() 方法返回迭代数组。
迭代数组中每个值 前一个是索引值作为 key， 数组后一个值作为 value。
  1. let arr = [1,2,3,4]
复制代码
  1. let arr1 = arr.entries()
复制代码
  1. for (let e of arr1) {
复制代码
  1.     console.log(e);   // [0,1] [1,2] [2,3] [3,4]
复制代码
  1. }
复制代码
3.every()、some()arr.every(callback)依据判断条件，数组的元素是否全满足，若满足则返回ture
  1. let arr = [1,2,3,4,5]
复制代码
  1. let arr1 = arr.every( (i, v) => i < 3)
复制代码
  1. console.log(arr1)    // false
复制代码
  1. let arr2 = arr.every( (i, v) => i < 10)
复制代码
  1. console.log(arr2)    // true
复制代码
arr.some() 依据判断条件，数组的元素是否有一个满足，若有一个满足则返回ture
  1. let arr = [1,2,3,4,5]
复制代码
  1. let arr1 = arr.some( (i, v) => i < 3)
复制代码
  1. console.log(arr1)    // true
复制代码
  1. let arr2 = arr.some( (i, v) => i > 10)
复制代码
  1. console.log(arr2)    // false
复制代码
4.find()、findIndex()找出第一个符合条件的数组成员，它参数是一个函数，每一个成员执行这个函数，找到返回true,没找到返回undefined
函数的参数[当前值 | 当前的位置 | 原数组]
find()返回某个值
  1. let res = [1,4,9,10,15].find((item, index, arr)=>{
复制代码
  1.     return item > 9;
复制代码
  1. })
复制代码
  1. console.log(res)//10
复制代码
findIndex()返回某个值的索引
  1. let res = [1,4,9,10,15].findIndex((item, index, arr)=>{
复制代码
  1.     return item > 10;
复制代码
  1. })
复制代码
  1. console.log(res)//4
复制代码
5.key()、values()arr.keys() 遍历数组的键名
  1. let arr = [1,2,3,4]
复制代码
  1. let arr2 = arr.keys()
复制代码
  1. for (let key of arr2) {
复制代码
  1.     console.log(key);   // 0,1,2,3
复制代码
  1. }
复制代码
arr.values() 遍历数组键值
  1. let arr = [1,2,3,4]
复制代码
  1. let arr1 = arr.values()
复制代码
  1. for (let val of arr1) {
复制代码
  1.      console.log(val);   // 1,2,3,4
复制代码
  1. }
复制代码
6、reduce()、reduceRight()归并操作：每个方法接收两个参数[在每一项上调用的函数 | 作为归并基础的初始值（可选）],都会迭代数组每一项，返回一个最终的值
函数接收4个参数[前一个值 | 当前值 | 项的索引 | 数组对象本身]
reduce()//从左开始
  1. //求数组所有元素之和
复制代码
  1. let arr = [1,2,3,4,5]
复制代码
  1. let sum = arr.reduce((prev,cur,index,arr)=>prev+cur);
复制代码
  1. console.log(sum)//15
复制代码
reduceRight()//从右开始
  1. //求数组所有元素之和
复制代码
  1. let arr = [1,2,3,4,5]
复制代码
  1. let sum = arr.reduceRight((prev,cur,index,arr)=>prev+cur);
复制代码
  1. console.log(sum)//15
复制代码
恭喜你，又掌握了一个新技能~

喜欢就点个关注吧～
有任何问题都可以给我留言哦~



「 往期精彩文章 」


vue项目-开启优化之旅
带你解析vue2.0的diff算法
【leetcode系列】001-两数之和





扫描二维码
获取更多精彩
前端FE


回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

2级吧友
前端FE

积分:20
帖子:4
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP