一.常用内置对象
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( ): 从左往右查找元素返回索引, 没找到返回 -1lastIndexOf( ): 从右往左查找元素返回索引
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]