🍖JS常用内置对象之数组Array

一.常用内置对象

JavaScript 中所有的事物都是对像 : 字符串、数值、数组、函数...

对象就是带有属性和方法的特殊数据类型

• 示例一

var food = '牛羊的肉';
function 老虎(){
	alert('吃' + food);
}
function 企鹅(){
	alert('也吃'+ food);
}
老虎();  // 老虎吃牛羊的肉
企鹅();  // 企鹅也吃牛羊的肉

• 示例二

//对象(属性和方法), 创建一个对象 : 姓名、年龄、性别、爱好(动作)
var person = {
	name:'派大星',
	age:21,
	sex:'男',
	fav:function(a){  // 方法
		alert('爱好菇凉');
		return '菇凉'+age+'岁了';
	}
}
console.log(person);
//取到里面的元素
console.log(person.name);     // "派大星"
console.log(person.fav(21));  // "爱好菇凉", "菇凉21岁了"

此外, JS 还提供很多个内建对象 : Array、Date、Math 等等

二.数组 (Array) 介绍

数组对象的作用 : 使用单独的变量名来存储一系列的值, 类似于 Python 中的列表

• 创建数组

// 创建一个数组
var shopping = ['香蕉','苹果','手机','电脑'];
alert(shopping);        // ['香蕉','苹果','手机','电脑']
alert(typeof shopping); // object

• 数组简单操作

// 创建数组
var rand = ['str','123',[4,5,6],shopping];
console.log(rand);  // ['str','123',[4,5,6],shopping]

//访问数组内元素
var item1 = rand[2];
console.log(item1);  // [4,5,6]

//修改元素值
rand[0] = '好吃';
console.log(rand);  // ['好吃','123',[4,5,6],shopping]
rand[2][2] = 15;
var a = rand[2][2]; 
console.log(a);     // 15

//访问数组长度
console.log('数组的长度是：' + rand[3].length);  // 4

三.数组常用方法介绍

• JavaScript 中数组方法与 Python 中列表方法比较

说明	js	python
数组的大小	.length	len()
获取数组中的元素	array[index]	list[index]
尾部追加元素	.push(ele)	.append(ele)
弹出尾部的元素	.pop()	.pop()
头部插入元素	.unshift(ele)	.insert(0, ele), list[0]=ele
头部移除元素	.shift()	.remove(头ele), pop(0), del list[0]
切片	.selice(start, end)	list[start, end]
反转	.reverse()	.reverse()
将数组元素连接成字符串	.join(seq)	"seq".join()
连接数组	.concat(val, …)	.extend, +
排序	.sort()	.sort()
将数组的每个元素传递给回调函数	forEach(function(currentValue, index, arr), thisValue)
删除元素，并向数组添加新元素。	splice(index,howmany,item1,.....,itemX)
返回一个数组元素调用函数处理后的值的新数组	map(function(currentValue,index,arr), thisValue)

• 获取数组元素 arrary[index](js) 与 list[index](py) 的区别

python中支持负数, js中不支持负数索引

• 将数组元素拼接成字符串 .join(seq)(js) 与 "seq".join()(py) 的区别

python中 join 前引号("")放的是用来连接元素的符号, 括号中放的是列表(或元组), 注意里面的元素都得是字符串

在 js 中点前面是数组, 后面的是用来连接数组元素的字符

四.数组常用方法示例

1.将数组转换成字符串

var arr = [1,2,3];
var a = arr.toString();
var b = arr.toLocaleString();
console.log(a);         // "1,2,3"
console.log(typeof a);  // string
console.log(b);         // "1,2,3"
console.log(typeof b);  // string

2.创建对象并保存到数组中

• 对象中有方法, 将对象保存到数组中, 然后直接取出对象调用方法

// 对象1
var person1 = {
	toLocaleString:function(){  //方法1
		return '派大星';
	},
	toString:function(){  // 方法2
		return '海绵宝宝';
	}
}
// 对象2
var person2 = {
	toLocaleString:function(){  // 方法1
		return '章鱼哥';
	},
	toString:function(){  // 方法2
		return '蟹老板';
	}
}
var	people = [person1,person2];        // 创建数组,存两个对象
console.log(people.toString());        // 海绵宝宝,蟹老板
console.log(people.toLocaleString());  // 派大星,章鱼哥

3.数组元素拼接 : .join( )

var colors = ['red','blue','yellow'];
var a = colors.join('|');
console.log(a);  // "red|blue|yellow"

4.栈 (lifo:last-in-first-out : 后进先出) 方法

• .push( ) : 往数组的最后一项添加内容
• .pop( ) : 从数组末尾删除最后一项并弹出这个值

var lists = ["aa","bb","cc"];
var newItem = lists.push('dd');
console.log(newItem);  // 4
console.log(lists);    // ["aa", "bb", "cc", "dd"]
var	lastItem = lists.pop();
console.log(lastItem); // dd
console.log(lists);    // ["aa", "bb", "cc"]

5.队列 (fifo:first-in-first-on : 先进先出) 方法

• unshift( ) : 从数组的最前一项添加内容
• shift( ) : 删除数组最前面一项并弹出值

var list2 = ["aa","bb","cc"];
var newItem = list2.unshift('dd');
console.log(newItem);  // 4
console.log(list2);    // ["dd", "aa", "bb", "cc"]
var	lastItem = list2.shift();
console.log(lastItem); // dd
console.log(list2);    // ["aa", "bb", "cc"]

5.数组排序

• reverse( ) : 数组倒序 : 单纯的颠倒位置

var values = [0,18,2,10,4,7,5,6];
values.reverse();
console.log(values);  // [6, 5, 7, 4, 10, 2, 18, 0]

• sort( ) : 数组排序 : 按照每个元素对应的ASCII码来排序的(并且是从左到右一个一个字符比对)

values.sort();
console.log(values);  // [0, 10, 18, 2, 4, 5, 6, 7] 先排个位大小，再排十位大小(ascii码)

• 升序排序

// 先要定义一个函数再传入
function compare2(a,b){
    return a-b;
}
values.sort(compare1);
console.log(values);  // [0, 2, 4, 5, 6, 7, 10, 18]

• 降序排序

function compare2(a,b){
    return b-a;
}
values.sort(compare2);
console.log(values);  // [18, 10, 7, 6, 5, 4, 2, 0]

6.数组元素的操作方法

• concat( ) : 数组合并

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

var newColors = colors.concat('green');
newColors = newColors.concat({name:'shawn'});
newColors = newColors.concat(['yellow','purple']);
console.log(newColors);  
// ["red", "blue", "green",{name:"shawn"}, "yellow", "purple"]

• slice( ) : 切片

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

// 将当前数组中的一个或多个项拿出来创建一个新数组(用索引的方式)

var newColors1 = colors.concat({name:'shawn'},['yellow','green']);
console.log(newColors1);
// ["red", "blue", {name:'shawn'}, "yellow", "green"]

// 从索引 1 开始切出后边的元素
newColors2 = newColors1.slice(1);
console.log(newColors2);
// ["blue", {name:'shawn'}, "yellow", "green"]

// 从索引 1 开始切到索引为 2 的元素(顾头不顾尾)
newColors3 = newColors1.slice(1,3);
console.log(newColors3);
// ["blue", {name:'shawn'}]

// 反向切片 : slice(3,4)
newColors4 = newColors1.slice(-2,-1);
console.log(newColors4);
// ["yellow"]

• splice( ) : 删除、插入、替换

var names = ['派大星','海绵宝宝','章鱼哥','蟹老板','痞老板'];

// 删除
names.splice(0,2);  // 从索引0开始删除2个
console.log(names);

// 插入
names.splice(2,0,'熊大','熊二');  // 从索引2位置的前面加入新元素，0表示删除0个
console.log(names);

// 替换
names.splice(0,2,'熊大','熊二');  // 从索引0开始删掉两个元素，再在索引0前面加入新元素
console.log(names);

7.数组的位置方法

• indexOf( ) : 从左往右查找元素返回索引, 没找到返回 -1
• lastIndexOf( ) : 从右往左查找元素返回索引

var names = ['派大星','海绵宝宝','章鱼哥','蟹老板','海绵宝宝','痞老板'];

//自动默认查询第一个海绵宝宝
alert(names.indexOf('海绵宝宝'));  // 1
alert(names.indexOf('海绵宝宝',2));  // 4, 从索引二开始查找, 会找到后面的一个元素
alert(names.indexOf('sadasd'));  // 找一个不存在的元素，返回-1

alert(names.lastIndexOf('海绵宝宝'));  // 4
alert(names.lastIndexOf('海绵宝宝',5));  // 4, 从索引5开始反向查找，找到左边的第一个海绵索引为4，索引是以痞老板（0）开始的。

8.数组的迭代方法

• filter( ) : 将数组的元素进行过滤

var numbers = [1,2,5,6,7,12,9,52];

var filterNumber = numbers.filter(function(item,index,array/*数值，索引，原数组*/){
	console.log('item'+item);
	console.log('index'+index);
	console.log('array'+array);
	return item>10;  // 返回大于 10 的item
})
console.log(filterNumber);  // [12, 52]

• map( ) : 对每个元素进行相应的操作

var mapNumber = numbers.map(function(item,index,array){
	return item*2;  // 进行相应的操作
})
console.log(mapNumber);  // [2, 4, 10, 12, 14, 24, 18, 104]

• forEach( ) ：循环取出每一个元素

// 使用 for 循环来取
for(var i = 0;i < mapNumber.length;i++){
    console.log(mapNumber[i]);
}

// 使用 forEach( )
mapNumber.forEach(function(item,index,array){
    console.log(item);
})

9.map( ) 的应用

需求 : 定义一个数组, 里面存放多个 object(类似于Python中的字典类型) 类型的元素, 每个 object 元素里都有 name 和 age 属性, 将所有 object 内的 name 都放入一个数组中, 将所有的 age 放入另一个数组中

var oldArray = [
	{
		name:'派大星',
		age:18
	},
	{
		name:'海绵宝宝',
		age:20
	},
	{
		name:'章鱼哥',
		age:22
	},
];
var oldName = [];
var oldAge = [];

• 使用 for 循环可以实现

for(var i = 0;i < oldArray.length;i++){
	var myName = oldArray[i].name;
	var myAge = oldArray[i].age;
	oldName.push(myName);
	oldAge.push(myAge);
}
console.log(oldName);  // ["派大星", "海绵宝宝", "章鱼哥"]
console.log(oldAge);   // [18, 20, 22]

• 使用 map( ) 实现

var oldName = oldArray.map(function(item,index){
	return item.name;
})
var oldAge = oldArray.map(function(item,index){
	return item.age;
})
console.log(oldName);  // ["派大星", "海绵宝宝", "章鱼哥"]
console.log(oldAge);   // [18, 20, 22]