数组的操作方法--简单总结(一)

2017-11-10 本文已影响0人尹林阳

检测数组利用instanceof(实例) 关键字
- 语法: arr instanceof Array 返回值: boolean值
排序
- 颠倒 : arr.reverse(); 返回值: 这个数组的引用
- 按大小排序:
  - arr.asort();根据字符串Unicode码点
  - arr.asort(compareFunction); 返回值: 该数组的引用
    案例:
```
 var arr = [20,1,42,12,18];
 arr.asort(function(a,b){
     return a-b;//a-b, 按升序; b-a, 降序.
 })
 console.log(arr);//[1,12,18,20,42]
```
查找
- 索引: 查找数组其中一个元素的index:
  - index : 常用来判断数组是否含有某一个数据
    - indexOf: 用来查找第一次出现的位置,
      arr.indexOf(searchElement: mixed,fromIndex?:number);
      返回值: 对应的索引
      注意: 第二个参数可选, 是从哪个索引开始查询
    - lastIndexOf: 用来查找某一最后出现的位置, 语法和indexOf 一样
  - 值: arr[ i ], 返回值: 对应下标的值
截取数组 (不改变原数组,这是从原数组截取一部分)
- slice() 方法: slice(start?number, end?number); 返回值: 截取好的新数组
  - 不传参: 截取全部
  - slice(1,5): 从第一项开始截取,包括第一项, 但不包括第5项
  - slice(1,-2): 从第一项开始截取截取到倒数第二项, 但不包括倒数第二项
    案例 :
```
    var obj = {
      0:1,
      1:2,
      lenght:2
    }
    //思路: obj 借用 数组的slice方法,slice返回一个新的数组
    var obj = [].slice.call(obj);
    //var obj = [].slice.apply(obj);
    //注意: 截取的长度为length属性的值
```
操作数组(改变原数组)
- 插入
  - 从最前 arr.unshift(element1,elementN) , 返回值: length属性值
  - 从最后 arr.push(element1,......elementN) , 返回值: length属性值
    伪数组借用push 方法(从lenght的值开始插入, 如果length的值为0,或者没有, 则从索引(属性)0 开始插入)
    案例:
```
       0:0,
         1:1,
     lenght: 2
   }
   //用apply方法借用
   [].push.apply(obj,[2,3,4]);//obj{0:0,1:1,2:2,3:3,4:4,length:5};
   //用call方法借用
   [].push.call(obj,5,6);//obj{0:0,1:1,2:2,3:3,4:4,5:5,6:6,length:7};
```
  - 任意: arr.splice(start: number, 0 ,element1,......elementN), 利用splice方法, 参数1: 要从什么位置开始插入, 参数2: 要删除的个数, 设为0, 参数3.....N：　要插入的项
- 删除
  - 从最前 arr.shift() : 删除最前面的一项; 返回值: 删除项.
  - 从最后 arr.pop() ; 删除最后一项(传参无效); 返回值: 删除项.
  - 任意 arr.splice(start: number, deleteCount?: number) ;返回值: 删除的项组成的数组,deleteCount=0,则返回的数组为空
- 替换 arr.splice(start: number, deleteCount? : number , item1,item2......);
  返回值: 删除的项组成的数组, deleteCount=0, 则返回空数组
- 合并 concat()
  方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
  splice()方法总结
- 作用: 用来删除添加替换一个数组的内容
  语法:
  - array.splice(start:number) ; 注意 :从起始值开始删除后面全部.
  - array.splice(start:number, deleteCount?: number); 注意: deleteCount >=0.
  - array.splice(start:number,deleteCount?: number, mixed?:item1,mixed?:item2,......)
    返回值: 删除后每一项组成的数组
    案例:
```
  var obj = {
      0:1,
        1:2,
        length:2
  }
  var obj = [].splice.call(obj,0);//[1,2];
  //var obj = [].splice.apply(obj,[0]);
  //注意: 截取的长度为length属性的值
```
array转换成string的方法 join()
- 作用: 将数组或者一个类数组转换成一个字符串, 原数组不改变
  语法:
  str = arr.join(); // 返回的字符串默认为","隔开字符串的每一项
  str = arr.join("")// 分隔符为""空字符串
  str = arr.join(separator) // 以separator
  参数: separator, 可选
  返回值: 所有的数组元素组成的字符串
- forEach()方法 : 对数组的每一个元素,执行一次提供的函数(参数)
语法:

arr.forEach(callback(currentValue,index,array){

//要执行的代码
},this)

arr.forEach(callback[,this]);
参数的含义

callback: 数组中每个元素都要执行的函数

该函数有三个参数
- currentValue(callback函数调用时的数组的当前值,相当于for循环时的arr[i])
- index(索引) | 可选 :相当于for循环时的i
- array | 可选 :调用forEach()方法的数组
this | 可选
返回值

undefined.

对this的理解
```
var obj = {
            name: "张山",
            age: 18,
            add: function (arr){
                arr.forEach(function(v){
                    console.log("过%d年后"+this.name+                        (this.age + v) + "岁",v);
                },this)
            }
        }
       obj.add([1,2,3,4]);//过1年后张山19岁....
```
案例:
```
//将一个字符串转换成对象
var str = "name=linyang&password=123";
var obj = {};
str.split("&").forEach(function(v){
    obj[v.split("=")[0]] = v.split("=")[1]
})
console.log(obj);//{name:"linyang",password:"123"};
```
注意 : 没有值得项会被跳过, 像undefined 和 ""(空字符串) 不会被跳过

map()方法: 用来创建一个新的数组,返回的新数组是数组中每个元素调用 callback 函数返回的结果组成

语法:

var newArr = arr.map(callback (currentVallue,index,array){

//return 表达式;

},[this])

var newArr = arr.map(callbakc[,this])
参数的含义:

callback: 数组中每个元素要执行的函数

该函数有三个参数:
- currentValue: callback的第一个参数, 数组正在处理的当前元素
- index | 可选: 数组正在处理的当前元素的索引
- array | 可选: map方法调用的数组
this |　可选: 执行callback函数时, 使用的数组
返回值:

一个新的数组, 每个元素都是回调函数执行的结果

注意 : 包括undefined和""空字符串

调用map方法的数组发生改变

案例:
```
//利用map来拼字符串生成一个表格
<div></div>
<script>
        //利用map来拼字符串生成一个表格
    var data = [
       { name: "linyang", age: 18, gender: "man" },
      { name: "jay", age: 38, gender: "man" },
      { name: "lanxiaoyun", age: 17, gender: "girl" }
        ];
     var html =
            '<table border="1"><tbody>'
            + data.map(function (v) {
                return "<tr>" +
                    "<td>" + v.name + "</td>" +
                    "<td>" + v.age + "</td>" +
                    "<td>" + v.gender + "</td>" +
                    "</tr>"
            }).join("") + 
        '</tbody></table>'
     document.querySelector("div").innerHTML = html;
</script>
```
结果.png

注意: html结构省略了

reduce()方法: 累计器和数组中的每一个元素应用一个函数, 最终累计成一个值. 累计器有一个初始值, 数组中的每一个元素和上一次执行结果的累计器进行应用一个函数; 初始值可以是一个数字, 比如初始值sum = 0, 和数组[1,2,3,4]进行应用, 则最终累计结果是: 10
```
var total = [1,2,3,4].reduce(function(sum,value){
    return sum + value;
},0)
```
语法:

arr.reduce(callback[, initialValue])

参数:

callback: 数组和累计器要应用的函数

该函数有四个参数:

accumulator: 上一次调用的的返回值,初始值为initialValue

没有initialValue时,为数组的第0项,reduce会从

索引1开始执行;

currentValue:数组中正在处理的元素;

currentIndex: 数组中正在处理的元素的索引;

array: 调用reduce的数组

initialValue | 可选 : 调用callback时的初始值, 可以是简单number ,

数组或者对象等等.

返回值: 函数累计处理的结果

案例:
```
//将一个字符串转换成一个对象
var str = "name=linyang&password=123";
var obj = str.split("&").reduce(function(acc,v){
    acc[v.split("=")[0]] = v.split("=")[1];
      retur acc;
},{})
console.log(obj);
```

数组的操作方法--简单总结(一)

猜你喜欢

热点阅读