10 JS常用内置对象之数组

共计 6005 个字符，预计需要花费 16 分钟才能阅读完成。

一. 常用内置对象

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 中列表方法比较

• 获取数组元素 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]