资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/js数组操作方法小结

js数组操作方法小结

April / 1042人阅读

摘要：操作方法创建数组类数组将类数组转换真正的数组修改数组合并数组，返回新数组，原数组不变数组转化为字符串以默认为逗号拼接为字符串。

Array操作方法 创建数组 
var arr=[]
var arr = new Array()
var arr1 = ["1", "2", "3"]
var arr2 = ["a", "b", "c"]
var arrLike = [{
    name: "123",
    age: "18"
}, {
    name: "abc",
    age: "12"
}]  //类数组
将类数组转换真正的数组Array.from(array)

eg:

obj = {"1": "value is 1", length: 2}
a = Array.from(obj)  //[undefined, "value is 1"]
修改数组

合并数组，返回新数组，原数组不变

Array.prototype.concat(arr1, arr2)  //["1", "2", "3", "a", "b", "c"]
arr1.concat(arr2) //["1", "2", "3", "a", "b", "c"]

数组转化为字符串

Array.prototype.join(separator)  //以separator（默认为逗号）拼接为字符串。
Array.prototype.toString()   //把数组转换为字符串, 数组中的元素之间用逗号分隔。

eg:

arr1.join() //"1,2,3"
arr1.join("") //"123"
arr1.join("/") //"1/2/3"
arr1.toString() //"1,2,3"
填充 
Array.prototype.fill(value,start,end)
//value 为填充值
//start 为填充数组元素起点坐标
//end 为填充数组元素终点坐标

eg:

arr1.fill(0,1,2) // ["1", 0, "3"]
判断 
Array.isArray()
Array.isArray(arr1) //true
筛选 
Array.prototype.filter()
Array.prototype.map()

eg:

var words = [
    {
        id: "1",
        name: "123"
    },
    {
        id: "2",
        name: "abc"
    }
]

words.filter(d => d.id === "1") //[{id: "1" , name: "123"}] 返回结果为true的值
arr1.map(x => x * 2)  // [2,4,6] 返回所有项
排序 
Array.prototype.reverse()   //位置颠倒
Array.prototype.sort()

eg:

arr1.reverse() //["3", 2, "1"]
arr1.sort()  //["1", "2", "3"]
递归 
Array.prototype.reduce()

eg:

const reducer = (accumulation,currentValue)=>{
    accumulation + currentValue
}
arr1.reduce(reducer)       // 1+2+3=6
arr1.reduce(reducer,4)     //4+1+2+3=10
查找 
Array.prototype.some(callback)    //执行callback函数，直到callback返回true

var even =  function(element){
    return element % 2 === 0
}

arr1.some(even)  //true
Array.prototype.every(callback) //数组的所有元素是否都通过callback函数

function even(currentValue){
    return currentValue < 5
}

arr1.every(even)
Array.prototype.find(callback) //在数组中返回符合callback第一个元素的值

function even(value){
    return even % 2 === 0
}

arr1.find(even) // 2
Array.prototype.findIndex(callback)  //返回数组中满足callback的第一个元素的索引。否则返回-1

function even(value){
    return value % 2 === 0
}

arr1.findIndex(even)   // 1
Array.prototype.includes(searchElement) //是否包含seachElement

arr1.includes(2)  //true

arr1.includes(0)  //false
增删

pop()

Array.prototype.pop()  //删除数组的最后一个元素，并返回改元素的值

arr1.pop() //  3  arr1=[1,2]

push()

Array.prototype.push()  //增加元素到数组末尾，返回增加的元素

arr1.push(4) // 4   arr1=[1, 2, 3, 4]

shift()

Array.prototype.shift()  //删除数组第一个元素，返回这个元素值

arr1.shift()  // 1   arr1=[2,3]

unshift()

Array.prototype.unshift()   //增加元素到数组开头 ，返回数组长度  

arr1.unshift(0) //4  arr1=[0,1,2,3]

slice()

Array.prototype.slice(start,end) //返回[start,end]浅拷贝到一个新数组，原数组不会被修改

arr1.slice(0,2)  //[1,2]  arr1=[1,2,3]

splice()

Array.prototype.splice()  //通过删除现有元素或添加新元素来更改一个数组的内容，原数组会被修改

Array.prototype.slice(replace-index,replace-num,replace-value)

//replace-num = 0 => inserts
arr1.splice(1,0,0)  //arr1=[1,0,2,3]

//replace-num !== 0 => replace
arr1.splice(1,1,4)  //返回被替换的元素 =>2  arr1=[1,4,3]
循环遍历

map()

Array.prototype.map(callback)

arr1.map(val=>val*2)  // [2, 4, 6]

forEach()

Array.prototype.forEach(callback)

arr1.forEach(elem =>{
    console.log(elem)
})

// 1
// 2
// 3

entries()

Array.prototype.entries()   //返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对

arr1 = ["a", "b", "c"]

for( let [index,elem] of (arr1).entries()){
    console.log(index,elem)
}

// 0 "a"
// 1 "b"
// 2 "c"

keys()

Array.prototype.keys()  //返回一个新的Array迭代器，它包含数组中每个索引的键

for(let index of(arr1).keys()){
    console.log(index)
}

// 0
// 1
// 2

values()

Array.prototype.values()  //返回一个新的Array迭代对象，包含数组每个索引值

for(let elem of(arr1).values()){
    console.log(elem)
}

// a
// b
// c
GPU服务器 云服务器 js数组操作方法 数组操作方法 java数组知识小结 js数组方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100613.html

相关文章

  • JS数组去重方法小结

    摘要：数组去重看了网上很多数组去重方法，用的比较常见的大概就几种，今天想自己来做一个总结。还有就是方法返回的数组也是排序后的数组，某些情况下可能不符合要求。 JS数组去重 看了网上很多数组去重方法，用的比较常见的大概就几种，今天想自己来做一个总结。部分内容参考该博客 1 . 在原数组上操作（基本方法） 思路：利用循环嵌套，判断数组中每个元素与其后面的元素是否相等，如果相等，就使用spli...

    PascalXie 评论0 收藏0

  • 【读书笔记】《高性能JavaScript》

    摘要：性能访问字面量和局部变量的速度是最快的，访问数组和对象成员相对较慢变量标识符解析过程搜索执行环境的作用域链，查找同名标识符。建议将全局变量存储到局部变量，加快读写速度。优化建议将常用的跨作用域变量存储到局部变量，然后直接访问局部变量。 缺陷 这本书是2010年出版的，这本书谈性能是有时效性的，现在马上就2018年了，这几年前端发展的速度是飞快的，书里面还有一些内容考虑IE6、7、8的东...

    chengjianhua 评论0 收藏0

  • 高性能JavaScript（文档）

    摘要：最近在全力整理高性能的文档，并重新学习一遍，放在这里方便大家查看并找到自己需要的知识点。 最近在全力整理《高性能JavaScript》的文档，并重新学习一遍，放在这里方便大家查看并找到自己需要的知识点。 前端开发文档 高性能JavaScript 第1章：加载和执行 脚本位置 阻止脚本 无阻塞的脚本 延迟的脚本 动态脚本元素 XMLHTTPRequest脚本注入 推荐的无阻塞模式...

    RayKr 评论0 收藏0

  • 关于promise的小结

    摘要：则是把类似的异步处理对象和处理规则进行规范化，并按照采用统一的接口来编写，而采取规定方法之外的写法都会出错。这个对象有一个方法，指定回调函数，用于在异步操作执行完后执行回调函数处理。到目前为止，已经学习了创建对象和用，方法来注册回调函数。 Promise 本文从js的异步处理出发，引入Promise的概念，并且介绍Promise对象以及其API方法。 js里的异步处理 可以参考这篇文章...

    Tony_Zby 评论0 收藏0

  • 面试小结（二）

    摘要：的用法，申明构造函数，返回。构造函数可以调用来获取下一个值，可以构造类似于随机数生成器。在构造器函数中，可以暂停然后返回当前表达式的值。总结是为了更好的消灭这些不知道，希望对大家也有所帮助。 1、function*的用法； function*，申明构造函数，返回{value:v,done:true_or_false}。构造函数可以调用next来获取下一个值，可以构造类似于随机数生成器。...

    lanffy 评论0 收藏0

发表评论

登陆后可评论

0条评论

April

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<