js中数组方法使用总结

408 阅读4分钟

数组

javaScript中数组的每一项可以保存任何类型的数据,数组的大小可以动态调整,数组的长度保存在其length数字那个中。

验证一个变量是否是数组

使用 typeof 验证数组一般会返回 object。可以使用以下方法验证数组。

  1. instanceof操作符
  2. Array.isArray()方法
        var arr = [1,2,"3","4",5]
        var obj = {name:"xu", age:20}

        console.log(arr.length)

        console.log(arr instanceof Array)
        console.log(obj instanceof Array)

        console.log(Array.isArray(arr))
        console.log(Array.isArray(obj))

数组方法

将数组转化为字符串join()

栈方法 (改变数组)

  1. push(), 接收任意数量的参数,把他们逐个添加到数组末尾,返回修改后数组的长度。
  2. pop(), 从数组末尾移除最后一项,减少数组的length, 然后返回移除的项。

队列方法 (改变数组)

  1. shift(), 移除数组中的第一项并返回该项,同事将数组长度减一。
  2. unshift(), 在数组前端添加任意个数并返回新数组的长度。

重排序方法(改变数组)

  1. reverse(), 翻转数组项的顺序。
  2. sort(), 按升序排列数组项。

操作方法

  1. concat(), 这个方法会先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。如果传递给concat()方法的是一个或多个数组,则会将这些数组中的每一项都添加到结果数组中。原数组不变
  2. slice(arg1, arg2), 基于当前数组中的一项或多项创建一个新数组。接收一个或两个参数, 分别表示返回项的起始位置和结束位置。返回的数组不包括结束位置的项。原数组不变
  3. splice(), 向数组的中部插入项。改变数组
  • 删除,2个参数,要删除的位置和删除的个数。
  • 插入,3个参数,起始位置,要删除的位置(0),要插入的项
  • 替换,3个参数,同插入

位置方法

  1. indexOf(), 要查找的项、表示查找起点位置的索引(可选)。
  2. lastIndexOf(), 要查找的项、表示查找起点位置的索引(可选)。

归并方法

以下两个参数都会迭代数组的所有项,然后构建一个最终返回值。都接收两个参数:一个在每一项上调用的函数、作为归并基础的初始值。传入的参数函数接收4个参数:前一个值,当前值,项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。

  1. reduce(),
  2. reduceRight(),

遍历数组

以下每个方法都接收两个参数, 要在每一项上运行的函数、运行在该函数的作用域对象。传入这些方法的函数都会接收三个参数:数组项的值、该项在数组中的位置、数组对象本身。 以下这些方法都不会修改数组中的值

  1. every(), 对每一项运行给定函数,如果该函数对每一项都返回true,则返回true。
  2. filter(), 对每一项运行给定函数,返回该函数会返回true的项组成的数组。
  3. forEach(), 对每一项运行给定函数,没有返回值。
  4. map(), 对每一项运行给定函数,返回每次函数调用的结果组成的数组。
  5. some(),对每一项运行给定函数,如果该函数对任一项返回true, 则返回true。
        var arr = [1,2,"3","4",5]
        var obj = {name:"xu", age:20}

        var everyResult = arr.every(function(item, index, array){
            return item > 2
        })

        var someRsult = arr.some(function(item, index, array){
            return item > 2
        })
        var filterResult = arr.filter(function(item, index, array){
            return item > 2
        })
        var mapResult = arr.map(function(item, index, array){
            return item > 2
        })
        console.log(everyResult)
        console.log(someRsult)
        console.log(filterResult)
        console.log(mapResult)

        // forEach不返回值本质上和for循环迭代数组相同
        arr.forEach(function(item, index){
            console.log(item + '------' + index)
        })

补充对象的遍历

for in 语句

for in 语句遍历对象的属性名时,顺序是不可预测的。 遍历数组和对象

var arr = [1,2,"3","4",5]
var obj = {name:"xu", age:20}

// var不是必须的
//遍历数组时,参数(index)是数组下标
for (var index in arr) {
    console.log(index +'------'+ arr[index])
}
//遍历对象时,参数(pro)为对象的属性名
for (var pro in obj) {
    console.log(pro+'--------'+ obj[pro])
}
// 以下这个写法时错误的,index是undefined
for(var item,index in obj1) 
// 此外以下这种遍历对象的写法也是错的,结果见以下第二张图
for (var pro in obj) {
    console.log(pro+'--------'+ obj.pro)
}

for...of 循环

for...of循环是ES6借鉴C++、java、C#等语言作为遍历所有数据结构的统一的方法。for...of循环可以使用的范围包括数组、set和Map结构、某些类似数组的对象(比如arguments对象,DOM NodeList对象)、后文的Generator对象,字符串

for...of遍历对象会报错。

let arr = ['red', 'green', 'blue'];
// for...of返回键值,for...in返回键名
for(let v of arr) {
    console.log(v)
}

for...of循环调用遍历器接口,数组的遍历器接口只返回具有数字索引的属性。

let arr = [3, 5, 7];
arr.foo = 'hello';
for(let i in arr) {
    console.log(i)
}
console.log("----------")
for(let i of arr) {
    console.log(i)
}