数组

一系列数据的集合，每一项可以保存任何类型的数据，称为数组的元素，每个元素之间用逗号隔开

数组格式：[1,2,3]

数组的声明（创建）

//1)字面量(推荐)
var arr = [1,2,3];

//2)使用构造函数创建
var arr = new Array();//创建一个空数组
var arr = new Array(7);//创建一个长度为7的数组（数组项都为undefined）
var arr = new Array('王大锤',18 ,'普通青年','广州');//创建数组并同时写入数据

数组操作

(1)数组的读取与写入

* 数组的索引 arr[index]

index代表索引值，从0开始计数。

var arr = ['html5','css3','javascript'];

//读取
arr[0]; //=> 'html5'
arr[2]; //=> 'javascript'

//写入
arr[3] = 'web前端';

(2)数组的遍历

* 数组的长度 arr.length

var arr = ['html5','css3','javascript'];
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}

*案例：创建一个数组，存放50个三位数的随机数。

var arr = [];
for(var i=0;i<50;i++){
    //三种写法：
    // arr[i] = randomNumber(100,999);
    // arr[arr.length] = randomNumber(100,999);
    // arr.push(randomNumber(100,999));
}

数组方法

（1）增删改

push：往数组尾部添加一个或多个元素，返回数组新的长度 all.push(all[i]);
pop：删除数组最后一个元素，返回删除的元素
unshift：往数组开头添加一个或多个元素，返回数组新的长度
shift：删除数组第一个元素，返回删除的元素
splice(startIdx,deleteNum,…items)：在数组中插入、删除、替换的通用方法

*总结：

方法	返回值
增，例如push（）,unshift()	新数组的长度
删，改，例如pop(),shift(),splice()	被删除的元素

*案例1：找出小于10的元素并组成一个新的数组

var arr = [10,15,2,32,5,4,20,8,48,54,6];
// 创建空数组，用于存放所有小于10的数
var res = [];
for(var i=0;i<arr.length;i++){
    if(arr[i] < 10){
        //res[i] = arr[i];//稀疏数组：索引值不连续的数组
        res.push(arr[i]);
    }
}

*案例2：随机点名

//1.获取文本框及按钮
//2.生成数组，存放名字
var arr = ["莫赛", "何贵宇", "陈裕", "林宇鹏", "卢进球", "蔡景超", "周育盛", "莫钟达", "邓伟良", "黄巧玲", "刘泳仪", "吕运学", "苏玉婷", "黄世军", "袁家建", "许诚誉", "苏媛", "冯梓兴", "彭永冬", "王国健", "吕志威", "杨凯彬", "曾晓添", "陆世鸿", "陈瑞敏", "陈永杏", "陈培林", "杨富荣", "郑幸新", "肖蔚飞杨家林", "陆鹏", "李明钢", "陈育婷", "吴玮珏", "李芸芸", "周旗勇", "周华成", "赵福杰", "翁旭东", "甘玉婷", "林莉", "梁秋鸿", "赵晨熙"];
//3.声明函数，生成随机索引，获取数组中索引对应的值。
function getName(){
    // 获取随机索引值
    var idx = randomNumber(0,namelist.length-1);
    username.value = namelist[idx];
}
//4.执行函数
getName();
btn.onclick = function(){
    getName();
}

（2）截取数组（原数组不变）

slice(start[,end])：返回数组的片段或子数组，从start开始到end(不包括end所对应的元素)

如果省略end参数，则截取到数组的最后一项
支持负数

* 可应用于复制一个数组为新数组,通过slice(0)

（3）数组排序

sort：将数组中的元素排序，并返回排序后的数组

默认以字符串的排列方式（转换成ASCII码进行对比）

（4）数组倒序

reverse：将数组中的元素颠倒顺序，返回逆序后的数组

（5）将数组拼接成字符串

join(separator) 返回字符串值，其中包含了连接到一起的数组的所有元素

separator为分隔符，默认为逗号

（6）数组合并

concat() 返回一个新数组，这个新数组是由调用这个方法的数组和参数组成

参数可以是多个

数组排序算法

冒泡排序

遍历元素，跟其下一个元素对比
把最大的逐个往后排列

var arr = [12,3,44,343,55,1,23];
for(var i=0;i<arr.length-1;i++){
    for(var j=0;j<arr.length-i-1;j++){
        if(arr[j]>arr[j+1]){
            var current = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = current;
        }
    }
}
console.log(arr);

选择排序法

把当前元素分别跟后面所有的元素对比
把最小的逐个往前排列

var arr = [12,3,44,343,55,1,23];
for(var i=0;i<arr.length;i++){
    for(var j=i+1;j<arr.length;j++){
        if(arr[i]>arr[j]){
            var current = arr[i];
            arr[i] = arr[j];
            arr[j] = current;
        }
        console.log("666");
    }
}
console.log(arr);

快速排序法

/*
* 利用递归函数实现排序
* 每次获取数组中间元素cItem
* 把大于和小于cItem的元素分别放置在arrGt和arrLt两个数组中,
* 利用concat组合递归调用函数返回的值
* 直到数组的长度等于1时，直接返回元素调出递归
*/
var arr = [10, 8, 20, 5, 6, 30, 11, 9]；
function fastSort(arr){
    //6. 递归退出条件
    if(arr.length<=1){
        return arr;
    }
    //1. 找出数组中间位置元素
    var cIdx = parseInt(arr.length/2);

    //2.删除中间元素，避免与自己本身进行对比而造成死循环
    var cItem = arr.splice(cIdx,1);//[6],arr=[10, 8, 20, 5, 30, 11, 9]

    //3. 创建两个空数组用于保存大于或小于cItem的数字
    var arrLt = [];//[5]
    var arrGt = [];//[10,8,20,30,11,9]

    // 4.遍历数组，分别与cItem进行对比
    // 把小于cItem的数写入arrLt
    // 把大于cItem的数写入arrGt
    for(var i=0;i<arr.length;i++){
        if(arr[i]<cItem[0]){
            arrLt.push(arr[i])
        }else{
            arrGt.push(arr[i]);
        }
    }
    // 5.组合排序后的数组
    return fastSort([5]).concat(cItem,fastSort(arrGt));
}
console.log(fastSort(arr));

sort排序

arr.sort(function(a,b){
    // 在函数内通过返回值告诉sort方法如何排序
    return a-b;
});

数组复制与传输

如何复制数组

var arr = ['西施','貂蝉','张飞','关羽','刘备'];
var res = [];
for(var i=0;i<arr.length;i++){
	res.push(arr[i]);//方式1，此时res改变一，不影响arr
}
//方式2：res = arr.slice(0);

*案例：编写一个map(arr)函数，把数组中的每一个数字都增加20%，并返回新的数组

数组作为参数传递

具体详情请看基本数据类型与引用数据类型的区别

多维数组(数组里面包含数组)

1 2	var arr = [1,2,'html5',[3,4,'css3'],[5,6,'javascript']] arr[3][2]; //=>'css3'

对象Object

创建对象

字面量（推荐）：var obj = {name:'小明',age:18}
构造函数：var obj = new Object();

对象的操作

键值对

对象的组成部分 {键(属性)：值(属性值)，}

操作对象键对应的值

//方式1：点语法 obj.键
obj.sex;
//方式2：通过obj["具体的键"]
obj["sex"];
//obj[key] //key为所有键的统称变量，记住变量不加引号。

(1)添加、修改属性

1 2	obj.sex = '男'; obj['weight'] = 60；

(2)删除属性

1
2
3

var obj = {name:'laoxie',age:18,gender:'man'}
//删除age属性
delete obj.age;

(3)读取属性值

1 2	obj.name;//==>小明 //如果读取一个不存在的属性，返回undefined

(4)遍历对象for…in

var obj = {name:'laoxie'，age:18，gender:'男'}；  
for(var key in obj){
    //遍历obj对象里面所有的键key,Obj[key]操作所有键对应的值。
    document.write(obj[key]);//分别输出：'laoxie',18,'男'
}

数组与对象的组合

[{
       id:'001',
       name:'iphone7 plugs',
       nickname:'肾7',
       imgurl:'img/ip7.jpg',
       price:5899.00,
       sale:5888.00,
       color:'土豪金'
   },{
       id:'002',
       name:'Note7',
       nickname：'爆炸7',
       imgurl:'img/note7.jpg',
       price:3899.00,
       sale:998.00,
       color:'黑色'
   },{
       id:'003',
       name:'荣耀7',
       nickname：'牛x7',
       imgurl:'img/honor7.jpg',
       price:1999.00,
       sale:1899.00,
       color:'白色'
   }]

数组