JS详解对象篇-Array

数组的定义

构造函数模式

 var colors = new Array("red", "blue", "green"); //创建一个包含 3 项，即字符串red", "blue", "green"的数组
      var colors = new Array(3); // 创建一个包含 3 项的数组，实际项目中，很少有人这么写；
      var colors = Array("red", "blue", "green"); //构造函数的new是可以省略的；

字面量表示

 var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
        var names = []; // 创建一个空数组
        var values = [1,2,]; // 不要这样！这样会创建一个包含 2 或 3 项的数组
        var options = [,,,,,]; // 不要这样！这样会创建一个包含 5 或 6 项的数组

 var colors = ["red", "blue", "green"]; // 定义一个字符串数组
        console.log(colors[0]); // 显示第一项,可以思考下，如果访问的索引超过数组长度呢？会返回什么
        colors[2] = "black"; // 修改第三项
        colors[3] = "brown"; // 新增第四项,如果设置某个值的索引超过了数组现有项数,数组就会自动增加到该索引值加 1 的长度（就这个例子而言，索引是 3，因此数组长度就是 4）

数组的length属性

数组的项数保存在其 length 属性中，这个属性始终会返回 0 或更大的值

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
        var names = []; // 创建一个空数组
        console.log(colors.length); //3
        console.log(names.length); //0

数组的 length 属性很有特点——它不是只读的。因此，通过设置这个属性，可以从数组的末尾移除项或向数组中添加新项。

 var colors = ["red", "blue", "green"];  // 创建一个包含 3 个字符串的数组
     colors.length = 2;
     console.log(colors[2]);                 //undefined，此时的colors数组已经被改变了；数组 colors 一开始有 3 个值。将其 length 属性设置为 2 会移除最后一项（位置为2 的那一项），结果再访问 colors[2] 就会显示 undefined 了。
     colors.length = 10;
     console.log(colors[9]);                 //undefined,虽然 colors 数组包含 2 个项，但把它的 length 属性设置成了 10。这个数组不存在位置 9，所以访问这个位置的值就得到了特殊值 undefined 。

利用 length 属性也可以方便地在数组末尾添加新项

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
      colors[colors.length] = "black"; // （在位置 3 ）添加一种颜色
      colors[colors.length] = "brown"; // （在位置 4 )再添加一种颜色

获取或者修改数组的长度，例如：ary.length=ary.length-1就是删除数组的最后一项；数组中的splice相对来说实现删除的时候，每删除一项后面的索引都需要重新的计算，比较耗费性能，如果要删除数组中所谓为n这一项，我们可以这样去写；

ary[n]=ary[ary.length-1];//首先把数组的最后一项替换当前的项
ary.length=ary.length-1;//然后在删除数组的最后一项

　　var a=[0,1,2,3];a[2]=a[a.length-1];a.length=a.length-1;console.log(a);
　　// [0, 1, 3]

数组的方法

push 向数组末尾增加新元素，返回新增后数组的长度，原有的数组改变；
```
  var ary=[];
  ary.push(12);
```
pop 删除数组末尾的元素，返回删除的内容，原有的数组改变；
```
  var ary=[1，2，3，4];
  ary.pop();
```
shift 删除数组第一位元素，返回删除后的内容，原有的数组改变；
```
  var ary=[1，2，3，4];
  ary.shift();
```
unshift 向数组开头增加新元素，返回新增后数组的长度，原有的数组改变；
```
  var ary=[];
  ary.unshift(12);
```
splice
- splice(n,m) 从索引n开始删除m个元素，把删除的部分当作新数组返回，原有的数组改变
- splice(n,m,x) 从索引n开始删除m个元素，把删除的部分当作新数组返回，并且用x替换原来位置的内容，原有的数组改变
- splice(n,0,x) 把x添加到指定索引n之前；
- ```
var a = [0,1,2,3,4];
b = a.splice(1,4);
console.log(a,b);  //原有数组改变，返回新的数组（删掉的元素）
//  [0]   [1, 2, 3, 4]
```
  var a = [0,1,2,3,4];
  
  b = a.splice(1,4,'原有的','a','b'); // 在指定位置插入值
  
  console.log(a,b);
  // (4) [0, "原有的", "a", "b"] (4) [1, 2, 3, 4]
  
  var a = [0,1,2,3,4];
  
  b = a.splice(1,0,'原有的','a','b'); // 不删除在指定位置插入值
  
  console.log(a,b);
  // (8) [0, "原有的", "a", "b", 1, 2, 3, 4] []
slice
- slice(n,m) 从索引n开找到索引m处(不包含m)，将找到的内容放到新数组返回，原有的数组不变
- slice(n) 从索引n处一直找到数组末尾；
- slice(0) 数组克隆
- ```
var a = [0,1,2,3,4];
b = a.slice(1,3);     
console.log(a,b);
// (5) [0, 1, 2, 3, 4] (2) [1, 2]
```
  var a = [0,1,2,3,4];
  
  b = a.slice(1);
  
  console.log(a,b);
  // (5) [0, 1, 2, 3, 4] (4) [1, 2, 3, 4]
  var a = [0,1,2,3,4];
  
  b = a.slice(0);
  
  console.log(a,b);
  //(5) [0, 1, 2, 3, 4] (5) [0, 1, 2, 3, 4]
```
 
```
concat 将两个数组进行拼接，原有数组不变，例如ary1.concat(ary2)
- ary1.concat() 相当于clice(0)也是克隆数组
- ```
var a = [0,1,2,3,4];
b = a.concat(['a','b','c']);
console.log(a,b);
// (5) [0, 1, 2, 3, 4] (8) [0, 1, 2, 3, 4, "a", "b", "c"]
```
  var a = [0,1,2,3,4];
  
  b = a.concat();
  
  console.log(a,b);
  //(5) [0, 1, 2, 3, 4] (5) [0, 1, 2, 3, 4]
```
 
```
join 将数组按照指定的分隔符拆分字符串，原有的数组不变
filter 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,不会改变原始数组。

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
输出结果为:
32,33,40

toString 将数组转化为字符串，原有的数组不变
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。不会改变原始数组。

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
输出结果为:
true

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。every() 不会改变原始数组。

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}
输出结果为:
false

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

sort 数组排序的方法，原有数组改变，我们通常这样写，ary.sort(function(a,b){return a-b;});来实现数组的升序排列
reverse 将数组倒过来排序，原来数组改变
indexOf / lastIndexOf 获取数组中某一项的索引，通常用来检测数组中是否包含某一项内容，不包含返回的是-1；这个方法在IE678下不兼容；
forEach 循环数组中每一项，然后进行相关的操作，这个方法在IE678不兼容，
- ary.forEach(function(item,index,input){},cantext);第二个参数是指定函数中的this，不写默认是window
map 循环数组中的每一项，然后进行相关的操作，相对于forEach来说，map有返回值，可以修改数组中某一项，IE678不兼容，
- ary.map(function(item,index,input){},cantext);第二个参数是指定函数中的this，不写默认是window

posted on 2019-01-27 15:38 Alpha_qiu 阅读(88) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

导航

JS详解对象篇-Array

数组的定义

数组的length属性

数组的方法