数组

238 阅读5分钟

数组

是计算机内存中连续的、有顺序的多个小空间组成的

数组中的数据,类型是任意类型

数组定义在内存中表现。大空间中多个小空间按照序号进行排列

数组删除

delete 数组[空间编号]  ==> 这种删除方式只能删除数据,空间还在
delete arr[2]

数组练习

创建一个长度为10数组,分别放入1~10之间的数字
var arr = []
for (var a = 0; a < 10; a++) {
    arr[a] = a + 1
}
console.log(arr);

求数组的最大值
for (var a = 1; a < arr.length; a++) {
    if (max < arr[a]) {
        max = arr[a]
    }
}
console.log(max);

数组方法

push

给数组末尾添加一个或多个元素。数组.push(一个或多个元素) - 返回新数组的长度

var arr = ['a', 'b', 'c']
var length = arr.push('f', 'g')
var length = arr.push('f')
console.log(arr);
console.log(length);

// 封装 末尾添加多个元素
    function push() {
        // 不用定义形参 - 只需要使用arguments接收所有实参
        // console.log(arguments);
        // 遍历argumments
        for (var a = 0; a < arguments.length; a++) {
            arr[arr.length] = arguments[a]
        }
        return arr.length
    }

    var len = push('d', 'e')
    // var len = push('d')
    console.log(arr);
    // console.log(len);

pop()

将数组的最后一个元素删掉。数组.pop() - 返回被删掉的元素

var arr = ['a', 'b', 'c', 'd']
var ele = arr.pop()
console.log(arr);
console.log(ele);

// 自己封装
function pop() {
    // 将最后一个元素用变量存起来
    var ele = arr[arr.length - 1]
    // 使用长度操作将长度 - 1;就会将最后一个元素删掉
    arr.length = arr.length - 1
    // 将删掉的元素返回
    return ele
}
var ele = pop()
console.log(arr);
console.log(ele);

unshift()

给数组开头添加一个元素。数组.unshift(1个或多个元素) - 返回新数组的长度

var arr = ['a', 'b', 'c']
var length = arr.unshift('d')
var length = arr.unshift('d', 'e')
console.log(arr);
console.log(length);

自己封装
function unshift() {
    // 查看要添加的元素个数
    var length = arguments.length
    // 倒着遍历数组,将所有元素向后移动length位
    for (var a = arr.length - 1; a >= 0; a--) {
        arr[a + length] = arr[a]
    }
    // console.log(arr);
    // 遍历arguments,给前面空出来的空间中放上元素
    for (var a = 0; a < arguments.length; a++) {
        arr[a] = arguments[a]
    }
    // console.log(arr);
    // 返回新数组的长度
    return arr.length
}

// var len = unshift('d', 'e')
var len = unshift('d')
console.log(arr);
console.log(len);

shitf()

将数组第一个元素删掉。数组.shift() - 返回被删掉的元素

var arr = ['a', 'b', 'c']
var ele = arr.shift()
console.log(ele);
console.log(arr);

// 自己封装
function shift() {
    var ele = arr[0]
    for (var a = 0; a < arr.length - 1; a++) {
        arr[a] = arr[a + 1]
    }
    arr.length = arr.length - 1
    return ele
}
var ele = shift()
console.log(ele);
console.log(arr);

splice()

给数组在任意位置添加、删除、修改 1个或多个元素。数组.splice(开始下标, 删除的元素个数, 1个或多个新元素) - 返回被删掉的所有元素组成的数组

var arr = ['a', 'b', 'c', 'd', 'e', 'f']
// 删除
var brr = arr.splice(2, 3)
console.log(arr);
console.log(brr);



// 新增
var brr = arr.splice(3, 0, 1, 2, 3)
console.log(arr);
console.log(brr);

// 修改
var brr = arr.splice(2, 2, 1, 2)
console.log(arr);
console.log(brr);

concat()

将1个或多个元素或数组合并成更大的数组。数组.concat(1个或多个元素或数组) - 返回更大的数组

var arr = ['a', 'b', 'c']
var brr = arr.concat('d')
var brr = arr.concat('d', 'e')
var brr = arr.concat(['d', 'e', 'f'])
var brr = arr.concat(['d', 'e'], ['f', 'g'])
var brr = arr.concat('e', ['f', 'g'])
console.log(arr);
console.log(brr);

join()

将数组中元素以指定的连接符连接成一个字符串。数组.join(连接符) - 返回字符串

var arr = ['a', 'b', 'c']
var str = arr.join('-')
var str = arr.join('')
var str = arr.join() // 如果省略连接符,默认使用逗号进行连接
var str = arr.join('哈哈')
console.log(str);

slice()

截取数组的一部分。数组.slice(开始下标, 结束下标) - 开始下标到结束下标之间的元素组成的新数组

var arr = [1,2,3,4,5,6,7,8,9]
var brr = arr.slice(3, 6) // 结果默认包含开始下标对应的元素,不包含结束下标对应的元素
var brr = arr.slice(3) // 省略掉结束下标,默认截取到末尾
var brr = arr.slice() // 省略两个参数,默认从头截取到末尾
console.log(brr);

reverse()

翻转数组。数组.reverse() - 返回翻转后的数组

var arr = ['a', 'b', 'c']
var brr = arr.reverse()
console.log(arr);
console.log(brr);

sort()

排序数组中的元素。数组.sort()

var arr = [21, 5, 13]
arr.sort() // 默认是按照字符串大小进行升序
console.log(arr);

// 按照数字大小排序
数组.sort(function(a, b) {
    return a - b
})

arr.sort(function(a, b) {
    // return a - b // 数字大小升序
    return b - a // 数字大小降序
})
console.log(arr);

indexOf

查找某个元素在数组中第一次出现的下标。

数组.indexOf(元素) 返回找到的下标,找不到就返回 -1

数组.indexOf(元素,开始下标) 从指定的开始下标开始找元素在数组中第一次出现的下标

var arr = ['a', 'b', 'a', 'c', 'c', 'd']
var index = arr.indexOf('c')
console.log(index);
会利用这个方法,判断某个元素是否在数组中
if (arr.indexOf('e') >= 0) {
    console.log('在');
} else {
    console.log('不在');
}

var arr = ['a', 'b', 'a', 'c', 'c', 'd']
var index = arr.indexOf('a', 1)
console.log(index);

lastIndexOf

查找元素在数组中最后一次出现的下标

数组.lastIndexOf(元素)

数组.lastIndexOf(元素,下标) 将指定下标的元素作为最后一个元素,找元素最后一次出现的下标

var arr = ['a', 'b', 'a', 'c', 'c', 'd']
var index = arr.lastIndexOf('a')
console.log(index);

var index = arr.lastIndexOf('a', 1)
console.log(index);

forEach

遍历数组

数组.forEach(function(value, index, array)
{
    value:代表数组中的每个元素,类似于for循环遍历的 arr[a]
    index:代表每个元素对应的下标,for循环遍历a
    array:代表正在遍历的数组
})
通常,我们只会用到具体的元素,可以只有value这一个参数,可以省略后面的两个参数.
var arr = ['a', 'b', 'c']
arr.forEach(function(value) {
    console.log(value);
})

map

将数组中每个元素都通过相同的处理方式得到新的元素,所有新元素组成一个新的数组 并返回

 新的数组 = 数组.map(function(value, index, array) {
        return 新的元素
    })
    
var arr = [10, 20, 30]
var brr = arr.map(function(v) {
    var newV = v + v * 0.3
    return newV
})
console.log(brr); // [13, 26, 39]

var arr = [
    {
        id: 1,
        name: '张三',
        age: 12,
        gender: '男'
    },
    {
        id: 2,
        name: '张小三',
        age: 13,
        gender: '女'
    },
    {
        id: 3,
        name: '张大三',
        age: 15,
        gender: '男'
    }
]

var brr = arr.map(function(item) {
    return item.id
})
console.log(brr);

filter

将数组中满足指定条件的所有元素组成新的数组并返回

 新数组 = 数组.filter(function(value, index, array) {
        return 条件
    })
    
var arr = [
    {
        id: 1,
        name: '张三',
        age: 12,
        gender: '男'
    },
    {
        id: 2,
        name: '张小三',
        age: 13,
        gender: '女'
    },
    {
        id: 3,
        name: '张大三',
        age: 15,
        gender: '男'
    }
]
var brr = arr.filter(function(item) {
    return item.gender === '女'
})
console.log(brr);

every

判断数组中是否所有元素都满足指定条件

布尔值 = 数组.every(function(value, index, array) {
    return 条件
})

var arr = [78, 90, 560, 88]

var bool = arr.every(function(item) {
    return item > 60
})
console.log(bool);

some

判断数组中是否 有 满足条件的元素

布尔值 = 数组.some(function(value, index, array) {
    return 条件
})

var arr = [78, 90, 56, 88]
var bool = arr.some(function(item) {
    return item < 60
})
console.log(bool);

find

找数组中第一个满足指定条件的元素

 元素 = 数组.find(function(value, index, array) {
        return 条件
    })
找到了就返回元素,找不到就返回undefined

var arr = [
    {
        id: 1,
        name: '张三',
        age: 12,
        gender: '男'
    },
    {
        id: 2,
        name: '张小三',
        age: 13,
        gender: '女'
    },
    {
        id: 3,
        name: '张大三',
        age: 15,
        gender: '男'
    }
]
var ele = arr.find(function(item) {
    return item.age >= 18
})
console.log(ele);

findIndex

查找数组中第一个满足指定条件的元素的下标

下标 = 数组.findIndex(function(value, index, array) {
        return 条件
    })
找到了就返回下标,找不到就返回-1

var arr = [
    {
        id: 1,
        name: '张三',
        age: 12,
        gender: '男'
    },
    {
        id: 2,
        name: '张小三',
        age: 13,
        gender: '女'
    },
    {
        id: 3,
        name: '张大三',
        age: 15,
        gender: '男'
    }
]
var index = arr.findIndex(function(item) {
    return item.age >= 180
})
console.log(index);

reduce

数组求和

 数组.reduce(function(a, b) {
 
    })
var arr = ['a', 'b', 'c', 'd']
arr.reduce(function(a, b) {
    console.log(a, b); // 3个元素执行2次,4个元素执行3次
    // 第一次,a代表第一个元素,b代表第二个元素
    // 第二次,a代表上次返回的值;b代表第三个元素
    // 第三次,a代表上次返回的值;b代表第四个元素
    return 666
})

var arr = [1, 2, 3, 4, 5]
var sum = arr.reduce(function(a, b) {
    return a + b
})
console.log(sum);

冒泡排序

给数组中所有数字进行排序 ==> 每相邻的两个元素进行大小比较排列顺序

var arr = [1, 2, 3, 4]
for (var b = 0; b < arr.length - 1; b++) {
    for (var a = 0; a < arr.length - 1 - b; a++) {
        if (arr[a] < arr[a + 1]) {
            var tmp = arr[a]
            arr[a] = arr[a + 1]
            arr[a + 1] = tmp
        }
    }
}
console.log(arr);

选择排序

从大到小; 从数组中找到最大值,排在第一位; 从剩下的元素中找到最大值,排在第二位; 从剩下的元素中找到最大值,排在第三位。

for (var b = 0; b < arr.length - 1; b++) {
    for (var a = b + 1; a < arr.length; a++) {
        if (arr[b] < arr[a]) {
            var tmp = arr[b]
            arr[b] = arr[a]
            arr[a] = tmp
        }
    }
}
console.log(arr);

基础类型 - 简单类型

number/string/boolean/undefined

更具体一点:number/string/boolean/undefined/null

引用类型 - 复杂类型

object/function 更具体一点:{} / [] / function

区别

1、在内存中存储方式不同:

基础类型将数据存储在 栈内存 空间中
引用类型将数据存储在 堆内存 空间中,将堆内存中
内存地址存储在栈内存中

var a = 1
var b = 'asdf'
var c = true

var d = {
    name: '张三',
    age: 12
}
var e = ['a', 'b']

2、在赋值的时候不同:

基础类型赋值的时候,是将栈中存储的数据,复制一份放在另一个变量空间中
引用类型赋值的时候,是将栈中存储的内存地址,复制一份放在另一个变量空间中 - 两个变量共用同一个堆内存的地址
var a = 1
var b = a
a = 2
console.log(b);

var zs = {
    name: '张三',
    money: 1000000
}
var ch = zs
ch.money = 10000
console.log(zs);

3.在比较的时候不同:

基础类型,相等比较,忽略类型,比较数据是否相等;全等比较,先比较类型是否相等,相等后再比较数据是否相同
引用类型,无论相等比较还是全等比较,都是在比较栈中存储的内存地址是否相同

var a = 1
var b = 1
console.log(a == b); // true
console.log(a === b); // true

var arr = ['a', 'b', 'c']
var brr = ['a', 'b', 'c']
console.log(arr == brr); // false - 在堆中开辟了两个数据空间,这两个空间的地址是不同的
console.log(arr === brr); // false - 因为内存地址不同

var a = 1
function fn()  {
    var a = 1
    return a
}
var b = fn()
console.log(a === b); // true

var arr = ['a', 'b', 'c']
function fn(brr) {
    brr[0] = 'e'
}
fn(arr)
console.log(arr); // ['e', 'b', 'c']

var arr = [1,2,3]
function fn(brr) {
    brr[0] = 6
    return brr
}
var crr = fn(arr)
console.log(arr === crr); // true