JavaScript的数组概念

认识数组

• 字面意思上是一组数据,一组(一般情况下相同类型)的数据(不一定都是数字)

1. 字面量 创建数组

var ageArr = [12, 15, 6, 4, 152, 486]
var nameArr = ['zhangsan', 'lisi', 'wangwu']
var studentArr = [{
    name: "李斯",
    age: 18
}, {
    name: '掐点',
    age: 20
}]
console.log(studentArr);

2. Array 创建数组

var arr1 = new Array(12, 13, 14, 15, 16)
console.log(arr1);

3. 数组的长度

var arr1 = new Array(12, 13, 14, 15, 16)
console.log(arr1.length);
// 强制删除数组的内容
arr1.length = 3
console.log(arr1);

4. 清空数组

arr1.length = 0
console.log(arr1);

5. 索引 – 通过索引值来修改/添加数组

var arr2 = ['chenye', 'xiaoming', 'tiechui']
console.log(arr2[0], arr2[1], arr2[2]);
arr2[0] = 'kenvin'
console.log(arr2[0]);
arr2[3] = 'lisi'
console.log(arr2[3]);
arr2[5] = 'aaa'
console.log(arr2);

6. 遍历数组

var arr3 = [3, 4, 5, 6, 7, 8, 9]
for (var i = 0; i < arr3.length; i++) {
    console.log(arr3[i]);
}

7. 复制数组

var arr4 = []
for (var i = 0; i < arr3.length; i++) {
    arr4[i] = arr3[i]
}
console.log(arr4);
arr4[0] = 'aaa'
console.log(arr3, arr4);

8. 数组的常用方法

8-1. push – 后面追加元素, 返回值是长度

var arr5 = [4, 5, 6, 7, 8, 9]
var res = arr5.push(20)
console.log(arr5);
console.log('返回值是', res);

8-2. pop – 后面删除元素, 返回值是删除的元素

var arr6 = [7, 8, 9, 1, 10]
var res = arr6.pop()
console.log(arr6);
console.log('返回值是', res);

8-3. unshift – 前面追加元素, 返回值是长度

var arr7 = ['lisi', 51, 153, 86]
var res = arr7.unshift('aadb')
console.log(arr7);
console.log('返回值', res);

8-4. shift – 前面删除元素, 返回值是删除的这个元素

var arr8 = ['dsgsD', 1351, 3135, 13513, 1368, 464]
var res = arr8.shift()
console.log(arr8);
console.log(res);

8-5. splice – 删除 (从第几位开始,删掉多少位元素) 影响原数组

var arr8splice = arr8.splice(1, 2)
console.log(arr8);
console.log('返回值是', arr8splice);

8-6. splice – 添加 (从第几位开始,指定插入新增元素的位置,添加的数组)

var arr9 = ['第一个', '第二个']
console.log(arr9);
// 1 表示从第一个位置开始添加; 0 表示不删除当前元素
var res = arr9.splice(1, 0, '第三个', '第四个')
console.log('返回值是', res);
console.log(arr9);

8-7. reverse 倒序

var arr10 = [1, 3, 2, 4, 5]
arr10.reverse()
console.log(arr10);

8-8. sort 排序(接收一个回调函数)

var arr11 = [11, 2, 51, 61, 315, 48, 21, 15]
arr11.sort(function (a, b) {
    return a - b
})
console.log(arr11);

9. 以下 5 种方法不影响原数组

9-1. concat 拼接

var arr12 = [1, 2, 3, 4]
var arr13 = [5, 6, 7, 8]
var arr14 = arr12.concat(arr13, 959, [59, 61])
console.log(arr14);

9-2. join 数组 => 字符串

var arr15 = [135, 35, 1351, 145165, 165316, 51, 5]
document.write(arr15.join('-'))

9-2-1. 在页面渲染 li 标签

var arr16 = []
for (var i = 0; i < 5; i++) {
    arr16.push('<li>' + i + '</li>')
}
document.write(arr16.join(''))

9-3. slice 截取[开始索引,结束索引)–包前不包后 不影响原数组

var arr17 = ["aaa", "bbb", "ccc", "ddd", "eee"]
var arr18 = arr17.slice(0, 3)
console.log(arr17, arr18);

9-4. indexOf 返回查找内容的索引值

var arr19 = ['34', 'df', 'qwrq', 'aa']
var res1 = arr19.indexOf('aa')
console.log(res1);

9-5. laseIndexOf -1找不到

var res2 = arr19.lastIndexOf('df')
console.log(res2);

10. 数组的遍历方法

10-1. forEach 遍历

var arr20 = ['aaa', 'bbb', 'ccc', 'ddd']
// 回调函数
arr20.forEach(function (item, index, arr20) {
    console.log(item, index, arr20)
})

10-2. map 映射

var arr21 = [1, 2, 3, 4, 5, 'efae']
arr21.map((item) => {
    return item
})
console.log(arr21);

10-2-1. map 映射的应用 – 渲染 li 标签

var arr22 = ['张三', '李四', '王五']
var arr23 = arr22.map((item) => {
    return '<li>' + item + '</li>'
})
document.write(arr23.join(''))

10-3. filter 过滤

var arr24 = [
    {
        name: 'aaa',
        price: 100
    },
    {
        name: 'bbb',
        price: 200
    },
    {
        name: 'ccc',
        price: 300
    },
]

var arr25 = arr24.filter(function (item) {
    return item.price > 200
})
console.log(arr25);

10-4. every 每一个必须满足条件返回 true

    var arr26 = [80, 90, 80, 60, 40, 85, 95, 15]
    var arr27 = arr26.every((item) => {
        return item >= 10
    })
    console.log(arr27);

10-5. some 只要一个满足条件返回 true

var arr28 = [90, 98, 91, 2]
var arr29 = arr28.some((item) => {
    return item > 90
})
console.log(arr29);

10-6. find

var arr30 = [
    {
        name: '语文',
        grade: 90
    },
    {
        name: '数学',
        grade: 95
    },
    {
        name: '体育',
        grade: 100
    },
]
var arr32 = arr30.find((item) => {
    return item.grade == 100
})
console.log(arr32);

10-7. reduce(上一次的结果,每一项) 叠加

var arr33 = [1, 2, 3, 4, 5, 6, 7]
var arr34 = arr33.reduce((prev, item) => {
    return prev + item
}, 0)
console.log(arr34);

数组去重案例

利用对象去重

var ar = [16, 616, 16, 13, 515, 31, 6351, 35, 13]
var obj = {}
for (let i = 0; i < ar.length; i++) {
    // 找到 数字 并赋值
    obj[ar[i]] = '随便'
}
console.log(obj);

var ar2 = []
for (let k in obj) {
    // 获取到的是字符串 转换成  数值
    ar2.push(k - 0)
}
console.log(ar2);

寻找有无重复去重

var ar = [10, 20, 30, 616, 10, 20, 45, 03, 16, 616]
var newar = []
for (let i = 0; i <= ar.length - 1; i++) {
    if (newar.indexOf(ar[i]) === -1) {
        newar.push(ar[i])
    }
}
console.log(newar);

利用 New Set

var ar = [10, 20, 30, 616, 10, 20, 45, 03, 16, 616]
// 使用 ES6 语法将数组去重
var set1 = new Set(ar)
console.log(set1);
// 去重后得到的是对象, 转换成数组
var ar2 = Array.from(set1)
console.log(ar2);