5.2 Array 类型

在通过对象字面量定义对象时，实际上不会调用Object 构造函数。

在通过数组字面量表示法时，实际上不会调用Array 构造函数。

数组的长度不是只读的，可以通过arr.length进行更改。

5.2.1 检测数组

var arr = [1,2,3];
console.log(arr instanceof Array);  
//true,多框架下不可用，来自不同框架的数组构造函数不同
console.log(Array.isArray(arr)); 
//true,ES5新增，并非所有浏览器版本都支持
console.log(Array.prototype.isPrototypeOf(arr)); 
//true,自己写，是否正确未知
console.log(Object.prototype.toString.apply(arr)); 
//'[object Array]',慕课教程

5.2.2 转换方法

var arr = [1,2,3];
console.log(arr.valueOf()); 
//[ 1, 2, 3 ] 返回数组本身
console.log(arr.toString()); 
//1,2,3 返回数组每一项值的字符串表示且拼接
console.log(arr.toLocaleString()); 
//1,2,3 返回调用对应toLocaleString方法之后的字符串表示且拼接
console.log(arr.join('||')); 
//1||2||3 使用参数||拼接

5.2.3 栈方法

后进先出
push、pop 改变数组

var arr = [1,2,3];
console.log(arr.push(4,5,'zz')); 
//6 为数组尾添加项，返回数组长度
console.log(arr); 
//[ 1, 2, 3, 4, 5, 'zz' ] push方法改变数组
console.log(arr.pop()); 
//zz 弹出最后一项，返回弹出的元素
console.log(arr); 
//[ 1, 2, 3, 4, 5 ] pop方法改变数组

5.2.4 队列方法

shift、unshift 改变数组

var arr = [1,2,3];
console.log(arr.unshift(4,5,'zz')); 
//6 为数组头添加项，返回数组长度
console.log(arr); 
//这里相当于直接添加，而不是依次添加
//[ 4, 5, 'zz', 1, 2, 3 ] unshift方法改变数组
console.log(arr.shift()); 
//4 弹出第一项，返回弹出的元素
console.log(arr); 
//[ 5, 'zz', 1, 2, 3 ] shift方法改变数组

5.2.5 重排序方法

reverse、sort 改变数组

var arr = [1,2,3];
console.log(arr.reverse()); 
//[ 3, 2, 1 ] 直接返回倒序后的数组
console.log(arr); 
//[ 3, 2, 1 ] reverse方法改变数组
var values = [0,1,5,10,15];
console.log(values.sort()); 
//[ 0, 1, 10, 15, 5 ] 比较的是调用toString方法得到的字符串
//直接返回排序后的数组
console.log(values); 
//[ 0, 1, 10, 15, 5 ] sort方法改变数组
console.log(values.sort((a,b)=>{
    return a-b;
})); 
//[ 0, 1, 5, 10, 15 ] 可以接受比较函数

5.2.6 操作方法

concat 不改变数组

var arr = [1,true,'blue',null,undefined,{name:'zz',age:18}];
var arr2 = arr.concat(); 
//数组的拼接，不传参直接返回副本
console.log(arr); 
//[ 1, true, 'blue', null, undefined, { name: 'zz', age: 18 } ]
//concat方法不改变数组
console.log(arr2); 
//[ 1, true, 'blue', null, undefined, { name: 'zz', age: 18 } ]
var arr3 = arr.concat('green',['red','yellow'],2,false,{sex:'girl'}); 
//参数类型可多样
console.log(arr); 
//[ 1, true, 'blue', null, undefined, { name: 'zz', age: 18 } ] 
//concat方法不改变数组
console.log(arr3);
// [
//     1,
//     true,
//     'blue',
//     null,
//     undefined,
//     { name: 'zz', age: 18 },
//     'green',
//     'red',
//     'yellow',
//     2,
//     false,
//     { sex: 'girl' }
//   ]

slice 不改变数组

let arr = ['blue','green','white','black','red'];
let arr2 = arr.slice(2); 
//从下标为2的项开始，到结束
console.log(arr); 
//[ 'blue', 'green', 'white', 'black', 'red' ] 
//slice方法不会改变数组
console.log(arr2); 
//[ 'white', 'black', 'red' ]
let arr3 = arr.slice(1,4); 
//从下标为1的项开始，到下标为3的项；包含起始项，不包含终止项
console.log(arr); 
//[ 'blue', 'green', 'white', 'black', 'red' ]
console.log(arr3); 
//[ 'green', 'white', 'black' ]
let arr4 = arr.slice(-3,-1); 
//遇到负数,等于arr.slice(2,4)即[+5]
console.log(arr); 
//[ 'blue', 'green', 'white', 'black', 'red' ]
console.log(arr4); 
//[ 'white', 'black' ]

splice 改变原数组

let arr = ['blue','green','white','black','red'];
let arr2 = arr.splice(1,3); 
//从下标为1的项开始，删除3项，包含起始项
console.log(arr); 
//[ 'blue', 'red' ] 改变原数组
console.log(arr2); 
//[ 'green', 'white', 'black' ] 返回删除的项
let arr3 = arr.splice(0,0,'yellow','purple'); 
//从下标为0的项开始，删除0项，添加2项
console.log(arr); 
//[ 'yellow', 'purple', 'blue', 'red' ]
console.log(arr3); 
//[] 没有删除的项，返回空数组
let arr4 = arr.splice(1,1,'brown'); 
//从下标为1的项开始，删除1项，添加1项
console.log(arr); 
//[ 'yellow', 'brown', 'blue', 'red' ]
console.log(arr4); //[ 'purple' ]

let arr3 = arr.splice(0,0,‘yellow’,‘purple’);
//从下标为0的项开始，删除0项，添加2项
console.log(arr);
//[ ‘yellow’, ‘purple’, ‘blue’, ‘red’ ]
删除或添加都需包含起始项

5.2.7 位置方法

let arr = [1,3,8,9,2,3,1,6];
console.log(arr.indexOf(3)); 
//1 从起始位置向后查找第一个为3的项，返回其下标值
console.log(arr.lastIndexOf(3)); 
//5 从截止位置向前查找第一个为3的项，返回其下标值
console.log(arr.indexOf(3,2)); 
//5 从下标为2的位置向后查找第一个为3的项，返回其下标值
console.log(arr.lastIndexOf(3,4)); 
//1 从下标为4的位置向前查找第一个为3的项，返回其下标值

5.2.8 迭代方法

let arr = [3,4,5,6,7];
let res1 = arr.every((item,index,arr)=>{
    return (item > 5);
}); //每一项都满足，返回true；否则为false
let res2 = arr.some((item,index,arr)=>{
    return (item > 5);
}); //有一项满足，返回true；都不满足为false
let res3 = arr.filter((item,index,arr)=>{
    return (item > 5);
}); //返回满足条件的项
let res4 = arr.map((item,index,arr)=>{
    return (item - 5);
}); //对数组进行遍历求值，返回新数组
let res5 = arr.forEach((item,index,arr)=>{
    
}); //进行遍历，不返回值
console.log(arr); //[ 3, 4, 5, 6, 7 ] 
//上述五种方法均不会改变原数组
console.log(res1); //false
console.log(res2); //true
console.log(res3); //[ 6, 7 ]
console.log(res4); //[ -2, -1, 0, 1, 2 ]

函数中的参数item,index,arr在未进行调用的情况下可以省略

扫描二维码关注公众号，回复： 8615232 查看本文章

let res4 = arr.map((item)=>{
    return (item - 5);
});

方法除接受function外，还接受一个可选参数，以表示函数作用域
此情况尚未遇见

5.2.9 归并方法

let arr = [3,4,5,6,7];
let res1 = arr.reduce((prev,cur,index,arr)=>{
    return prev + cur;
}); //函数参数前一项，当前项，index,arr
let res2 = arr.reduceRight((prev,cur,index,arr)=>{
    return prev + cur;
}); //倒序
console.log(arr); //[ 3, 4, 5, 6, 7 ] 不会改变原数组
console.log(res1); //25 求和
console.log(res2); //25 倒序求和

方法除接受function外，还接受一个可选参数，作为基础传值

let res1 = arr.reduce((prev,cur,index,arr)=>{
    return prev + cur;
},10);
let res2 = arr.reduceRight((prev,cur,index,arr)=>{
    return prev + cur;
},10);
console.log(res1); //35 
console.log(res2); //35