js-引用类型-Array

1 js数组表示方法 

   new Array() 使用array构造函数 也可以省略new

   [] 数组字面量

var colors = Array(3); // 创建一个包含三项的数组
var names = Array('Jeson');  // 创建一个包含一项，即"Jeson"的数组

var colors2 = ['red', 'blue'];  //创建包含两项的数组
var names2 = []; // 创建一个空数组
var values2 = [1, 2,]; // 不要这样，会创建一个包含2项或3项的数组
var options = [,,,]; // 不要这样，会创建一个包含3项或4项的数组
// ie8- values = [1, 2, undefined] ie8+及现代浏览器创建2项

 

2 length 属性

var colors = ['red', 'blue', 'green', 'yellow'];
colors.length = 2;
console.log(colors);  // ['red', 'blue']
colors.length = 3;
console.log(colors[3]); // undefined
console.log(colors); // ["red", "blue", undefined]

// 利用length属性在数组末尾添加新项
var names = ['jeson', 'nick', 'tom'];
names[names.length] = 'jack';
console.log(names) // ["jeson", "nick", "tom", "jack"]

3 确定某个对象是否为数组

// 假定只有一个执行环境(如果有两个框架就有两个执行环境)
if ( value instanceof Array ) {
  // do some things   
}

// es5新增 ie9+
if ( Array.isArray(value) ) {
    // do some things
}/

4 转换方法

  valueOf() 返回以‘,’号分割的字符串

  toString()  返回数组

  toLocaleString() 返回数组

  join() 返回自定义分割的字符串

var colors = ['blue', 'green', 'red'];
console.log(colors.toString()); // "blue,green,red"
console.log(colors.toLocaleString()); // "blue,green,red"
console.log(colors.valueOf()); // ["blue", "green", "red"]
console.log(colors.join('-')); // "blue-green-red"

5 栈方法push() pop() 队列方法 shift() unshift()

 push()  可以接收任意数量的参数

 pop() 移出数组最后一项，并返回移出的值

 shift() 移出数组首位项,返回移出的值

 unshift() 向数组首位添加一项，返回数组的长度

var colors = ['blue', 'red', 'green'];

// console.log( colors.push('yellow') ); // 4

// console.log( colors.push(['yellow', 'shadow']) ); // 4
// console.log(colors); // ["blue", "red", "green", ["yellow", "shadow"]]
// console.log(colors.push('yellow', 'black')); // 5
// console.log(colors); // ["blue", "red", "green", "yellow", "black"]

// console.log( colors.pop() ); // 'green'
// console.log(colors); // ['blue', 'red']

// console.log(colors.shift()); // 'blue'
// console.log(colors); // ["red", "green"]

// console.log(colors.unshift('black')); // 4
// console.log(colors); // ["black", "blue", "red", "green"]
console.log(colors.unshift('yellow', 'black')); // 5
console.log(colors); // ["yellow", "black", "blue", "red", "green"]

5 数组重排序方法

　　reverse() 反转数组项

　　sort() 升序排列数组项，可以传递比较函数作为参数

var values = [1, 3, 2, 5];

// console.log(values.reverse()); // [5, 2, 3, 1]
// console.log(values.sort()); // [1, 2, 3, 5]

// 升序方法
function arrayAcs(value1, value2){
  if (value1 < value2) {
    return -1;
  } else if (value1 > value2){
    return 1;
  } else {
    return 0;
  }
}
// values.sort(arrayAcs);
// console.log(values); // [1, 2, 3, 5]

// 降序方法
function arrayDesc(value1, value2) {
  if (value1 < value2) {
    return 1;
  } else if (value1 > value2){
    return -1;
  } else {
    return 0;
  }
}
// values.sort(arrayDesc);
// console.log(values); // [5, 3, 2, 1] 

// return 1 -- 第一个值在第二个值之后
// return -1 -- 第一个值在第二个值之前

// 简洁方法 升序
function sArrayAcs(value1, value2) {
  return value1 - value2;
}
// values.sort(sArrayAcs);
// console.log(values); // [1, 2, 3, 5]

// 简洁方法 依然升序
function sArrayDesc(value1, value2) {
  return value1 - value2;
}
values.sort(sArrayAcs);
console.log(values); // [1, 2, 3, 5]

6 数组操作方法

concat() 基于当前数组创建新数组

slice() 基于当前数组中的一个或多个项创建新数组

splice() 删 插入 替换数组 *****

var colors = ['red', 'blue', 'green'];
var colors2 = colors.concat('yellow', ['black', 'white']);
console.log(colors2); // ["red", "blue", "green", "yellow", "black", "white"]

// 一个参数的时候返回参数位置到当前数组末尾的所有项
var colors3 = colors.slice(1);
console.log(colors3); // ["blue", "green"]
// 两个参数返回起始和结束位置之间的项（不包括结束项）
var colors4 = colors.slice(1,2);
console.log(colors4); // ["blue"]
// slice如果有个参数为负数，转换：负数+数组的长度 如果结束位置小于起始位置则返回空数组

// splice() 主要用途向数组中插入项，使用方法有如下3种

// 删除: 可以删除任意数量的项 需要两个参数：删除的开始项，要删除的项数

// 插入：向指定位置插入任意数量的项,需要三个参数:起始位置、0（要删除的项数）、要插入的项，如果要插入多个项，可以传入第四个
//      第五个以至任意的项数 splice(2,0,'red', 'green')

// 替换： 可以向指定位置插入任意数量的项,且同时删除任意数量的项，需要指定3个参数：起始位置、要删除的项数、要插入的任意数量的项。插入的项数不必与删除的项数相等 例如splice(2,1, 'red', 'green') 
// 会删除当前数组位置2的项，然后再从位置2开始插入字符串'red'和 ‘green’

// splice() 始终返回一个数组，该数组中包含从原始数组中删除的项（如果没有删除任何项，则返回一个空数组）

var colors = ['blue', 'red', 'green'];
var removed = colors.splice(0,1);
// console.log(removed); // ["blue"]
// console.log(colors); // ["red", "green"]

var colors1 = ['blue', 'red', 'green'];
var removed1 = colors1.splice(1, 0, 'yellow', 'orange');
// console.log(removed1); // []
// console.log(colors1); // ["blue", "yellow", "orange", "red", "green"]

var colors2 = ['blue', 'red', 'green'];
var removed2 = colors2.splice(1, 1, 'black', 'yellow');
console.log(removed2); // ["red"]
console.log(colors2); //  ["blue", "black", "yellow", "green"]

7 位置方法 

　　都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引，都返回要查找的项在数组中的位置，没有找到返回-1 （要查找的项必须严格相等同===）

　　indexOf() 从数组首位向后查找

      lastIndexOf() 从数组末位向前查找

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
console.log(numbers.indexOf(4)); // 3
console.log(numbers.lastIndexOf(4)); // 5

console.log(numbers.indexOf(4, 4)); // 5 第二个4
console.log(numbers.lastIndexOf(4, 4)); // 3 第一个4

var numbers2 = [1, 2, '3'];
console.log(numbers2.indexOf(3)); // -1
console.log(numbers2.indexOf('3')); // 2

8 迭代方法 ：es5定义了5个迭代方法。每个方法都接收两个参数：要在每项运行的函数和（可选择的）运行该函数的作用域对象--影响this的值

　　every()  ： 对数组中的每一项运行给定函数，如果该函数对每一项都返回true,则返回true

　　filter() : 对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组

　　forEach() ： 对数组中的每一项运行给定函数，没有返回值 本质上与for循环迭代数组一样

　　map()： 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组

　　some() : 对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true

　　以上方法都不会修改数组中包含的的值

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

var everyResult = numbers.every(function(item, index, array){
  return (item > 2);
});
console.log(everyResult); // false

var someResult = numbers.some(function(item, index, array){
  return (item > 2);
});
console.log(someResult); // true

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

var filterResult = numbers.filter(function(item, index, array){
  return item > 2;
});
console.log(filterResult); // [3, 4, 5, 4, 3]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

var mapResult = numbers.map(function(item, index, array){
  return item * 2;
});
console.log(mapResult); // [2, 4, 6, 8, 10, 8, 6, 4, 2]
console.log(numbers); // [1, 2, 3, 4, 5, 4, 3, 2, 1]

9 归并方法

  es5 新增两个归并方法，都会迭代数组中的所有项，然后构建一个最终返回的值。都接收两个参数：在每项上调用的函数和（可选）作为归并基础的初始值

  reduce() 从数组的第一项开始，逐个遍历到末位

  reduceRight() 从数组末尾开始，逐个遍历到首位　　

// 函数接收4个参数：前一个值，当前值，项的索引，数组对象。函数返回的任何值都会作为第一个参数自动传递给下一项。第一次
// 迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项

// 使用reduce()方法可以执行求数组中所有值和的操作

var numbers = [1, 2, 3, 4, 5];

var sum = numbers.reduce(function(prev, cur, index, array){
  return prev + cur;
});
console.log(sum); // 15

// reduceRight()作用类似，只是方向相反
var sum2 = numbers.reduceRight(function(prev, cur, index, array) {
  return prev + cur;
});
console.log(sum2); // 15