数组的认识

数组对象

数组的作用：使用单独的变量名来存储一系列的值，数组可以村塾任意数据类的数据

数组的创建

// 字变量
var arr = [1, 'true', true, null, undefined, [], {}, function () { }]

// 使用关键字 new  
// var arr1 = new Array(1,2,3,4) // 给数组中添加元素
var arr1 = new Array(4) // 如果只有一个参数 代表的是数组的长度 也就是可以存储几个元素

// 注意：给数组添加元素或者从数组中获取元素 都要使用下标

arr1[0] = 10
arr1[100] = 101

console.log(arr1);

数组是有长度和下标的，可读可写

循环遍历数组

循环遍历就是把数组中的元素一次拿出来，所以，可以使用for循环遍历数组

var arr = [1, 2, 3, 4, 5, 6, 7, 8]
for (var i = 0; i < arr.length; i++) {
    // console.log(arr[i]);
    // console.log(typeof i);

    document.body.innerHTML += arr[i] + '<br />'
}

for-in

for-in是用来循环对象，不要用来循环数组，因为其下标值的字符串

var obj = {
    name: '张三',
    age: 20
}
for (var key in obj) {
    console.log(key);
    console.log(obj[key]);
}

为什么不适用for-in去循环数组---因为会把下标值的数据类型更新为字符串

for-in的使用

• key值返回的是字符串

• for-in循环设计的初衷是给不同以字符串的值为key的对象使用的，而不是数组

• 不仅可以循环数组的元素，还可以循环任意其他自定义添加的数据

for的使用

• 基于索引的时间，有长度有下标

• 支持遍历是进行添加和删除操作

数组的操作方法

栈方法

数组的栈方法就是针对数组末尾进行的操作

语法：

数组.push(): // 在数组的末尾添加元素，有参数，参数就是需要添加的元素，可以添加多个，返回值是新数组的长度
数组.pop(): // 在数组的末尾删除元素，没有参数的，只能删除一个元素，返回值是被删除的元素

var arr = ['貂蝉', '西施', '吕布', '王昭君']

arr.push('杨玉环','孙尚香')
console.log(arr.push('杨玉环','孙尚香')); // 新数组的长度

arr.pop()  // 没有参数 一次只能删除一个
console.log(arr.pop()); // 返回值是被删除的元素

队列方法

数组的队列方法就是针对数组首部进行的操作

语法“

数组.unshift(): // 在数组的首部添加元素，有参数，参数就是需要添加的元素，可以添加多个，返回值是新数组的长度
数组.shift(): // 在数组的首部删除元素，没有参数的，只能删除一个元素，返回值是被删除的元素

arr.unshift('杨玉环','马可波罗')
console.log(arr.unshift('杨玉环','马可波罗'));

arr.shift()
console.log(arr.shift());

splice()删除 添加 替换

语法：

数组.splice(开始位置，删除的项数，插入的元素)

开始位置：是一个数值类型的number，这个参数是下标定义的

删除的项数：删除几项，是一个数值类型的number

插入的的元素：可以是任意多个参数

删除

可以删除任意数量的项，只需要指定两个参数，要删除的第一项的位置和要删除的个数

// 删除 -- 包含开始和结束位置的
arr.splice(2,2) 
console.log(arr);

添加

可以向指定的位置添加任意项，只需要提供三个参数，起始位置，0（要删除的项数）和要插入的位置，可以插入多个参数，每个参数之间用都要隔开

// 添加 -- 可以添加多个 -- 删除的项数要为 0 
arr.splice(2, 0, '杨玉环', '王家政')
console.log(arr);

替换

arr.splice(2, 1, '杨玉环', '王家政')
console.log(arr);

数组去重

/*
步骤：
1、先找数组中的第一个元素
2、从第二个元素开始，依次找后面的所有的元素，与第一项比较
3、相等的元素删除掉  -- 数组中元素的下标要递减
*/

for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
        if (arr[i] === arr[j]) {
            arr.splice(j, 1)
            j--
        }
    }
}

console.log(arr);

var newArr = []
for (var i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
        newArr.push(arr[i])
    }
}
console.log(newArr);

数组排序

sort()排序方法

语法：

var arr = [2,4,1,6,4,3,12]
console.log(arr.sort()); // 默认升序排序

注意：默认排序是升序，但是只能排第一位上的数字

sort()这个方法有一个参数，这个参数是一个函数，这个函数有两个参数，可以让这两个参数执行减法运算

arr.sort(function (a, b) {
    // return a - b  // 升序排序
    return b - a // 降序排序
})

var arr = [
    {name:'刘备', num: 78},
    {name:'大备', num: 71},
    {name:'二备', num: 74},
    {name:'三备', num: 76},
    {name:'四备', num: 72},
    {name:'五备', num: 73},
    {name:'六备', num: 79}
]

arr.sort(function (a, b) {
    // return a.num - b.num  // 数字排序
    /* 
    zh:告诉他比较的是中文
    localeCompare：就是拿到第一个中文的汉语拼音的首字母
    */
    return a.name.localeCompare(b.name, 'zh')
})

冒泡排序

数组中相邻的两个元素进行比较，如果前一项大于后一项，就交换位置，否则就不交换位置

var arr = [5, 8, 7, 4]

/*
1、5 > 8 ?  不交换位置  5,8,7,4
2、8 > 7  交换位置  5 7 8 4 
3、8 > 4  交换位置  5 7 4 8  第一轮结束后，最大的值在最右边  

4、5 > 7 ？ 不交换位置  5 7 4 8 
5、7 > 4 交换位置  5  4  7 8   第二轮结束 


6、 5 > 4 交换位置  4  5  7  8 
*/

for (var i = 0; i < arr.length; i++) { // 控制比较的次数
    for (var j = 0; j < arr.length; j++) {
        if(arr[j] > arr[j + 1]){
            var temp = arr[j]
            arr[j] = arr[j+1] 
            arr[j + 1] = temp
        }
    }
}

选择排序

从第一项开始，每一项和后面的所有项一次比较，前一项大于后一项，就交换位置，否则不交换位置

/* 
1、5 > 8 ? 不交换位置  5, 8, 7, 4
2、5 > 7 ? 不交换位置  5, 8, 7, 4
3、5 > 4  交换位置  4, 8, 7, 5


4、8 > 7 ? 交换位置  4  7  8  5 
5、7 > 5 ? 交换位置  4  5  8  7  


6、8 > 7 ?  交换位置 4  5  7  8  
*/

for (var i = 0; i < arr.length; i++) {  // 取第一个数 
    for (var j = i + 1; j < arr.length; j++) {
        if (arr[i] > arr[j]) {
            var num = arr[i] 
            arr[i] = arr[j]
            arr[j] = num
        }
    }
}

快速排序

找到数组中的中间值，将中间值从原数组中删除，将数组和中间项进行比较，比中间值大的放到左边的数组中，小的放到右边的数组中，再将左 中 右 合并，左 右数组没有排序完成在进行调用函数排序，最终利用递归的方式完成排序进行合并

function fun(arr) {
    if (arr.length <= 1) {
        return arr
    }
    var md = Math.floor(arr.length / 2)
    var sum = arr.splice(md, 1)[0]//删除中间项

    var left = []//存放大于中间值的
    var right = []//小于中间值

    for (var i = 0; i < arr.length; i++) {
        if (arr[i] < sum) {
            right.push(arr[i])
        } else {
            left.push(arr[i])
        }
    }
    return fun(left).concat(sum, fun(right))
    // return left.concat(sum,right)
}
var arr = [15, 11, 12, 7, 9, 4, 3,10,24,30]
console.log(fun(arr));

数组的其他方法

• join()---把数组转为字符串

• concat()---合并数组

var arr1 = [1,2,3]
var arr2 = ['a','b','c'] 
var arr3 = ['haha', 'hehe', 'gaga'] 

var arr = arr1.concat(arr2,arr3)
console.log(arr);

• reverse()---反转

console.log(arr.reverse());

• indexOf()

• slice()

数组的迭代方法

forEach

没有返回值，就是一个简单的循环，对数组中给定的每一项运行给定的函数，没有返回值，可以代替for循环

语法：

数组.forEach(function(item,index,arr){ 
// 逻辑代码  
})

item：数组中的元素

index：数组中元素的下标

arr：原数组

map

map()方法返回一个新数组，数组中的元素为原始数组元素调用函数后处理后的值，不会对空数组检测，不会改变原数组

语法：

数组.map(function(item,index,arr){
 // 逻辑代码
   })

item：数组中的元素

index：数组中元素的下标

arr：原数组

var n = arr.map(function (item, index, arr) {
    return item * 2
})

filter

filter()方法创建一个新数组，新数组中的元素是通过指定数组中符合条件的所有的元素，不会空数组检测，不会改变原数组

语法：

数组.filter(function(item,index,arr){ 
// 逻辑代码 
 })

item：数组中的元素

index：数组中元素的下标

arr：原数组

var n1 = arr.filter(function (item, index, arr) {
    return item >= 5
})

every

every()方法检测数组中所有元素是否都符合指定的条件，如果数组汇总检测到有一个元素不满足，整个表直接返回false，剩余的元素不会在进行检测，如果元素都满足条件，返回true

语法：

数组.every(function(item,index,arr){ 
// 逻辑代码 
 })

item：数组中的元素

index：数组中元素的下标

arr：原数组

var n2 = arr.every(function (item, index, arr) {
    return item >= 4
})

some

some()方法用于检测数组中的元素能够满足指定的条件，如果有一个元素满足条件，表达式返回true，剩余的元素不再执行检测，如果没有满足的元素，返回false

语法：

数组.some(function(item,index,arr){ 
// 逻辑代码  
})

item：数组中的元素

index：数组中元素的下标

arr：原数组

var n3 = arr.every(function (item, index, arr) {
    return item > 2
})

总结

• forEach：就是一个循环，胎体for循环用来遍历数组的

• map：是对数组元素做操作，并返回一个新的数组

• filter：数组元素满足某一个条件，并以数组的形式，返回满足条件的元素

• every：针对数组元素做操作，只有所有的数组元素满足了某一个条件，返回值是true，只要有一个不满足条件，加u返回false

• some：如果有一个元素满足条件，表达式返回true，剩余的元素不进行检测，如果没有满足条件的元素，返回值就是false