1. 创建数组
1.1 构造函数方式:
var myCars=new Array();
myCars[0]="奥迪";
myCars[1]="宝马";
myCars[2]="奔驰";
1.2 简洁方式:
var myCars=new Array("沃尔沃","保时捷","奥拓");
注意:空数组的长度 var myCars=new Array(3);如果是数字是数组的长度，如果是非数字那么则是一个一个元素。
1.3 字面量定义方式:常用
var myCars=["凯迪拉克","宝骏","QQ"];
var myCars=[]；空数组
2. 访问数组
var name=myCars[0];
以下实例修改了数组 myCars 的第一个元素:
myCars[0]="雪佛兰";
3. 遍历数组
遍历数组:利用循环获取数组中每个元素的值
var arr = ['周杰伦', '蔡依林', '侯佩岑', '田馥甄','张三'];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
4. 数组方法和属性
使用数组对象预定义属性和方法：
var x=myCars.length // myCars 中元素的数量
var y=myCars.indexOf("玛莎拉蒂") // "玛莎拉蒂" 值的索引值
5. 数组的增删改查
5.1 增
- 在数组的尾部添加元素
var arr = [1,2,3];
arr[arr.length] = 4;
console.log(arr);
- 从数组的头部添加一个元素
// 0 1 2 3 4
var arr = [2,3,4,5];
// 2 2 3 4 5
arr[4] = arr[3];// 2 3 4 5 5
arr[3] = arr[2];// 2 3 4 4 5
arr[2] = arr[1];// 2 3 3 4 5
arr[1] = arr[0];// 2 2 3 4 5
// for(var i = arr.length; i > 0; i--){
// arr[i] = arr[i-1];
// }
arr[0] = 1;
console.log(arr); // [1, 2, 3, 4, 5]
- 从数组的中间(某个索引值的位置)添加一个元素
// 0 1 2 3 4 5
var arr = [1,2,3,5,6];
// arr[5] = arr[4];//1 2 3 5 6 6
// arr[4] = arr[3];//1 2 3 5 5 6
for(var i = arr.length - 1; i > 2; i--){
arr[i+1] = arr[i];
}
arr[3] = 4;
console.log(arr); // [1, 2, 3, 4, 5, 6]
5.2 删
- 从数组的尾部删除一个元素
var arr = ['鸭架','邓紫棋','关之琳','邱淑贞','张柏芝'];
// 如果数组的长度减一了 那么就会从末尾来删除一个元素
arr.length--;
// arr.length -= 1;
console.log(arr); // ['鸭架','邓紫棋','关之琳','邱淑贞']
- 从数组的头部删除一个元素
// 0 1 2 3 4 5
var arr = [9,1,2,3,4,5];
// arr[0] = arr[1];
// arr[1] = arr[2];
// arr[2] = arr[3];
// arr[3] = arr[4];
// arr[4] = arr[5];
for(var i = 0; i < arr.length-1; i++){
arr[i] = arr[i+1];
}
arr.length--;
console.log(arr);
- 从数组的中间(某个索引值)删除一个元素
// 0 1 2 3 4 5 6
var arr = [1,2,2,3,4,5,6];
// arr[2] = arr[3];
// arr[3] = arr[4];
// arr[4] = arr[5];
// arr[5] = arr[6];
for(var i = 3; i < arr.length; i++){
arr[i-1] = arr[i];
}
arr.length--;
console.log(arr);
5.3 改
var arr = [1,2,3,4,5,5];
// 下标或者叫索引是唯一的 标识了 数组中的元素
arr[5] = 6;
console.log(arr);
5.4 查
var arr = [0,1,2,3,4,5];
console.log(arr[0]);
6. 案例练习
- 输出数组中最大的值
var arr2 = [1, 2, 3, 0, 5];
// 最大值
// 默认认为数组的一个元素是当前最大值
var max = arr2[0];
for (var i = 1; i < arr2.length; i++) {
// max比后面的小
if (max < arr2[i]) {
max = arr2[i];
}
}
console.log(max);
- 将数组中所有元素和|拼接成一个新的字符串
var arr3 = ['周杰伦', '蔡依林', '侯佩岑', '田馥甄', '张三'];
var sum = '';
for (var i = 0; i < arr3.length-1; i++) {
sum += arr3[i]+'|';
}
sum+=arr3[arr3.length-1];
console.log(sum);
- 反向遍历
var arr4 = ['周杰伦', '蔡依林', '侯佩岑', '田馥甄', '张三'];
for(var i = arr4.length-1;i>=0;i--){
console.log(arr4[i]);
}
- 动态按序从尾部插入数组元素
var arr7 = [];
// arr7.length 0
arr7[arr7.length] = '哈哈';
// arr7.length 1
arr7[arr7.length] = '呵呵';
// arr7.length 2
arr7[arr7.length] = '嘿嘿';
console.log(arr7);
- 去掉数组中元素的值是0的,重新生成一个新数组
var arr5 = [5,0,4,2,0,8,0,9];
var newArr = [];
for (var i = 0; i < arr5.length; i++) {
if(arr5[i] != 0){
//插入新数组
newArr[newArr.length] =arr5[i];
}
}
console.log(newArr);
7. 数组方法
- 对原数组有影响的
(1)
push添加
功能：从数组的末尾增加一个或者多个
参数：增加的元素
返回值：返回加入元素后数组的新长度
这个方法对原数组有影响
(2)
pop删除
功能：从数组的末尾删除一个
参数：无
返回值：返回删除的那一个元素
这个方法对原数组有影响
(3)
unshift添加
功能：从数组的头部增加一个或者多个
参数：增加的元素
返回值：返回加入元素后数组的新长度
这个方法对原数组有影响
(4)
shift删除
功能：从数组的头部删除一个
参数：无
返回值：返回删除的那一个元素
这个方法对原数组有影响
(5)
splice增删改一体化 (对原数组有影响)
一个参数的时候 是保留了几个元素
arr.splice(2);
console.log(arr);
二个参数的时候
a参数代表的是从第几个开始
b参数代表的是删除几个元素
arr.splice(2,0);
console.log(arr); // [ ]
三个参数的时候
a参数代表的是从哪个位置开始
b参数代表的是删除几个 如果是0就不删除
c参数代表的是在a位置前添加的元素
arr.splice(2,0,666);
console.log(arr);
(6)
reverse数组翻转 (对原数组有影响)
var arr = [1,2,3,4,5];
arr.reverse();
console.log(arr);
- 翻转数组
- 在新数组当中翻转
var arr = [1,2,3,4,5,6];
var newArr = [];
for(var i = arr.length - 1; i >= 0; i--){
newArr[newArr.length] = arr[i];
}
console.log(newArr);
- 在原数组上进行翻转---》非常重要
// 0 1 2 3 4 5 6 7
var arr = [1,2,3,4,5,6,7,8];
// arr[i] arr[arr.length - i - 1]
// arr[0] arr[7] 8 1
// arr[1] arr[6] 8 2
// arr[2] arr[5] 8 3
// arr[3] arr[4] 8 4
for(var i = 0; i < arr.length / 2; i++){
var temp = arr[i];
arr[i] = arr[arr.length - 1 - i];
arr[arr.length - i - 1] = temp;
}
console.log(arr);
(7)
sort方法默认是按照ascii码来排序的
自定义排序规则1-升序
自定义排序规则2-降序
自定义排序规则3-字符串长度
对原数组有影响
var arr = [6,5,3,11,8,7,2,4];
arr.sort();
console.log(arr); // [11, 2, 3, 4, 5, 6, 7, 8]
var arr = [6,5,3,11,8,7,2,4];
arr.sort(function(a,b){
return a - b;
});
console.log(arr); // [2, 3, 4, 5, 6, 7, 8, 11]
var arr = [6,5,3,11,8,7,2,4];
arr.sort(function(a,b){
return b - a;
});
console.log(arr); // [11, 8, 7, 6, 5, 4, 3, 2]
var arr = ['ac','a','abc','abcd'];
arr.sort(function(a,b){
return a.length - b.length;
});
console.log(arr); // ['a', 'ac', 'abc', 'abcd']
- 对原数组没有影响的
(8)
join
功能：以指定的字符串为连接符，将数组元素连接成一个字符串
参数：如果不传，默认以逗号为连接符，将元素连接成字符串
如果传的是正常字符串，那么以这个字符串为连接符将元素连接成字符串
如果传的是空串，那么直接将字符串连接成字符串，中间没有任何连接
返回值：返回连接好的字符串
这个方法对原数组没有影响
var arr = [1,2,3,4,5];
var a = arr.join('#');
console.log(arr); // [1, 2, 3, 4, 5]
console.log(a); // 1#2#3#4#5
(9)concat
功能：在数组的末尾拼接元素
参数：可以不写，相当于复制一个数组
也可以写一个或者多个值，会把这些值拼接到数组末尾
也可以写数组，会先把数组拆开，把元素拼接到数组末尾
返回值：返回拼接好的新数组
这个方法对原数组没有影响
var arr = [1,2,3];
var a = arr.concat(4);
console.log(a); // [1, 2, 3, 4]
console.log(arr); // [1,2,3]
var a = arr.concat(); // 相当于复制一个数组
console.log(a);
var a = arr.concat(4,5,6,7,8);.//可以写一个或者多个值，会把这些值拼接到数组末尾
console.log(a);
var a = arr.concat([4,5,6]); // 可以写数组，会先把数组拆开，把元素拼接到数组末尾
console.log(a);
console.log(arr);
(10)
slice
功能：在数组当中截取部分元素形成新数组
参数：和字符串方法slice一致；起始位置和结束位置，不包含结束位置的元素
如果只传一个代表起始位置，一直到结束。两个位置都可以使用负数
返回值：返回截取的元素形成的新数组
这个方法对原数组没有影响
(11)
toString
功能：将数组对象转化为字符串
参数：无
返回值：把数组的中括号去掉，其余加引号形成字符串返回
var arr = [1,2,3];
var a = arr.toString();
console.log(a); // 1,2,3
(12)
valueOf返回该数组的对象
var arr = [1,2,3,4];
var a = arr.valueOf();
console.log(a); // [1,2,3,4]
console.log(a === arr); //true
（13）
fill判断是否重复的类似逻辑中会使用到
var arr = new Array(5);
console.log(arr); //[empty × 5]
arr.fill(true);
console.log(arr); // [true, true, true, true, true]
- ES5新增的数组方法
(14)
forEach
item代表的是数组中的元素
index代表的是数组中的下标
arr 代表的是当前正在操作的数组
- 1.只能是用来遍历
- 2.一旦开始了遍历就停不下来
- 3.返回值是undefined 这个undefined对于我们来说没有用
var arr = ['科比','库里','詹姆斯','杜兰特'];
普通方法
// var new_score_arr = [];
// for(var i = 0; i < score_arr.length; i++){
// if(score_arr[i] >= 80){
// new_score_arr.push(score_arr[i]);
// }
// }
// console.log(new_score_arr);
var result = arr.forEach(function(item,index,arr){
console.log(item,index,arr);
});
console.log(result);
(15)
map
map的使用场景是遍历数组中的每一个元素 然后对元素进行操作 通过return 放到一个新的数组中
map的返回值就是return后面的值 存到了这个数组中
var arr = [1,2,3,4,5];
var new_arr = arr.map(function(item,index,arr){
return item * item;
});
console.log(new_arr); // [1, 4, 9, 16, 25]
(16)
filter
- 1.可以循环遍历数组中的每一项
- 2.可以对循环遍历到的数据进行判断
- 3.当条件成立时,使用了return true后会将满足条件的那一项存到一个新的数组当中
var score_arr = [100,90,80,70,60,50];
var new_score_arr = score_arr.filter(function(item,index,arr){
return item >= 80;
});
console.log(new_score_arr); // [100,90,80]
(17)
some
return后面的值 如果有一个元素匹配上了 那么则返回值true 并且后续不再执行
return后面的值 如果一个都没有匹配上 则返回false
应用场景：判断注册的时候 会不会有用户名字重复
var name_arr = ['虎皮猫','下硅谷','倔强的小红军1','阿李'];
原始操作
// for(var i = 0; i < name_arr.length; i++){
// if(name_arr[i] == '倔强的小红军'){
// console.log('用户名字已经注册');
// break;
// }
// }
var flag = name_arr.some(function(item,index,arr){
return item == "倔强的小红军";
});
console.log(flag);
(18)
every
强调的是一个整体的结果 如果所有的元素都满足某个条件
则返回true 只要是有一个不满足则返回false
var arr = [59,60,70,80,90,100];
原始方法
// for(var i = 0; i < arr.length; i++){
// if(arr[i] < 60){
// console.log('不合格');
// }
// }
var result = arr.every(function(item,index,arr){
return item >= 60;
});
console.log(result);
(19) reduce
prev: 上一次的值/初始值
如果给了初始值 则prev的值就是初始值
如果没有给初始值 那么prev的值就是数组中的第一个值
item：数组中的元素
prev：第一次的值 要么是初始值 要么是数组中的第一个元素 取决于你给没给初始值
return后面的值 会赋值给prev
var arr = [1,2,3,4,5];
var result = arr.reduce(function(prev,item){
return prev + item;
},0);
console.log(result); // 15
var result = arr.reduce(function(prev,item,index,arr){
return prev * item;
});
console.log(result); // 120
8. 冒泡排序
// 0趟 7次 8 53167248
// 1趟 6次 7
// 2趟 5次 6
// 3趟 4次 5
// 4趟 3次 4
// 5趟 2次 3
// 6趟 1次 2
var arr = [6,5,3,1,8,7,2,4];
for(var i = 0; i < arr.length - 1; i++){
// 找到了一个最大值
for(var j = 0; j < arr.length-1 - i; j++){
if(arr[j] > arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
console.log(arr);
9. 函数类型
-
函数声明定义函数
function f1(){
console.log(1111);
}
f1();
-
函数表达式定义函数
var f1 = function(){
console.log(111);
}
f1();
10. IIFE
-
IIFE 匿名函数自调用
最常用的匿名函数自调用的方式
IIFE的特点:
- 匿名函数自调用是在定义的同时执行函数
- 匿名函数自调用只能执行一次
如果需要一个函数可以执行多次，这个函数必须是有名函数
如果函数没有名字要想执行必须是自调用，但是只能执行一次- 匿名函数自调用，函数整体不会发生预解析，但是函数内部执行代码是要去预解析
IIFE的作用：
（1）避免命名污染
（2）隐藏内部代码，暴露接口
（3）加载一次---因为没有名字可以调用
(function (){
console.log(111);
})();
(function(name){
console.log(111 + name);
})("马志刚"); // 参数传递
(function(){
console.log(userName); // undefined
var userName = 'zs'; // 函数内部预解析
})();
// header
(function(){
var name = 'zs';
})();
// nav
(function(){
var name = 'ls';
})();
