【Web】0基础学Web—数组创建、数组遍历、数组增删改查、数组方法

数组创建

let ary=[10,20,true,‘abc’,null]
let ary=new Array(10,true,‘abc’)
let ary=new Array(5) //创建一个长度为5的数组

<script>
let ary1 = [10, 20, true, 'abc', null]
let ary2 = new Array(10, true, 'abc')
let ary3 = new Array(5)
ary1[8] = '张三'
console.log(ary1)
console.log(ary1[10])  //undefined
console.log(ary2)
console.log(ary3)
console.log(ary3[3]) //undefined
</script>

数组解构

let ary=[1,2,3]
let [a,b,c]=ary //1 2 3
let [a,…res]=ary //1 [2,3]
let [a,c]=ary // 1 3
Math.max(…ary) //展开运算符

<script>
let ary = [1, 2, 3]
let [a, b, c] = ary
console.log(a, b, c)   //1 2 3
let [x, ...res] = ary
console.log(x, res)   //1 [2,3]
let [m, , n] = ary
console.log(m, n)  // 1  3
console.log(Math.max(...ary))  // 3 展开运算符
//解构交换,必须加分号
let i = 5;
let j = 10;
[i, j] = [j, i]
console.log(i, j)  // 10 5
let x1 = 11, y1 = 22;
[x1, y1] = [y1, x1]
console.log(x1, y1)  // 22 11        
function test() {
    //将类数组转换为数组
    console.log([...arguments])
}
test(1, 2, 3, 'asd', ' ')  // [1, 2, 3, 'asd', ' ']
</script>

数组遍历

通过下标遍历

<script>
for (let index = 0; index < array.length; index++) {
    console.log(array[index])
}        

for (const index in array) {
    console.log(array[index])
    console.log(index)            
    console.log(typeof(index))            
}
</script>

直接获取元素

<script>
for (const item of array) {
    console.log(item)
}
</script>

通过下标和元素

<script>
array.forEach((item, index, self) => {
    console.log(item, index,self)
})
</script>

数组增删改查

let arr = [10]

增

开头添加:array.unshift(多个)
末尾添加:array.push(多个)

<script>
array.push('a', 'b')
console.log(array)  // [10, 'a', 'b']
array.unshift(11, 22)
console.log(array)  // [11, 22, 10, 'a', 'b']
</script>

删

只能删除一个
开头删除：item=array.shift()
末尾删除: item=array.pop()

<script>
console.log(array.pop())  // b
console.log(array.shift())  // 11
console.log(array)  // [22, 10, 'a']

let y = ary.splice(1, 3, 'a', 'b', 'c', 'd')
console.log(y) // [20, 30, 40]
console.log(ary) // [10, 'a', 'b', 'c', 'd', 50]
</script>

改

array[下标]=值

<script>
for (const index in array) {
	array[index] = index
    console.log(array[index])              
}
</script>

查

array[下标]

<script>
for (const index in array) {
    console.log(array[index])
    console.log(index)            
    console.log(typeof(index))            
}
</script>

移动

<script>
// [10,20,30,40] 左移2位 [30,40,10,20]
let ary2 = [10, 20, 30, 40]
for (i = 0; i < 2; i++) {
    ary2.push(ary2.shift())
}
console.log(ary2)  // [30, 40, 10, 20]
// [10,20,30,40] 右移3位
let ary3 = [10, 20, 30, 40]
for (i = 0; i < 3; i++) {
    ary3.unshift(ary3.pop())
}
console.log(ary3)  // [20, 30, 40, 10]
</script>

数组方法

<script>
    let arr = [19, 23, 18, 45, 36, 23]
    console.log(arr.concat([11, 22])) //拼接
    //console.log(arr.fill(0,1,3)) //填充，原数组改变
    console.log(arr.includes(23)) //判断是否包含
    console.log(arr.indexOf(23)) //第一个下标
    console.log(arr.lastIndexOf(23)) //最后一个下标
    console.log(arr.join(' * ')) //拼接为字符串
    console.log(eval(arr.join(' * ')))
    //console.log(arr.reverse()) //数组翻转,原数组变化
    //console.log(arr)
    //字符串反转
    let s = 'hello world'
    console.log(s.split('').reverse().join(''))
    //slice[start,end)  数组截取
    console.log(arr.slice(2, 3))
    console.log(arr.toString()) // 转换为字符串19,23,18,45,36,23
    //判断一个变量是否是数组
    console.log(Array.isArray([1, 2, 3])) //true
    console.log(typeof ([1, 2, 3])) //object
    //类数组转换为数组
    function test() {
        console.log('...arguments:', [...arguments])
        console.log(Array.from(arguments))
    }
    test(1, 2, 3)
    //排序
    //    arr.sort()  //默认升序
    //    arr.sort((a,b)=>a-b)  //默认升序
    arr.sort((a, b) => b - a)  //降序
    console.log(arr) //[18, 19, 23, 23, 36, 45]
</script>

高阶函数

filter：过滤返回数组， 找不到返回[]
find: 返回第一个符合条件的元素, 找不到返回undefined
findIndex: 返回第一个符合条件的下标, 找不到返回-1
map: 返回映射后的新数组
reduce: 对返回结构累计处理
every: 判断每个元素是否都符合条件
some: 判断是否有元素符合条件

<script>
    let arr = [19, 23, 18, 45, 36, 23]
    //filter返回过滤后的新数组
    let newarr = arr.filter(function (item, index, self) { return item % 2 == 0 })
    console.log(newarr)  //[18, 36]
    //find 返回查找的第一个元素
    let finditem = arr.find(item => item > 30)
    console.log(finditem)  //45
    //find 返回查找的第一个元素下标
    let findindex = arr.findIndex(item => item > 30)
    console.log(findindex)  //3
    //every 判断每一个元素是否都符合条件
    console.log(arr.every(item => item > 30))  // false
    //some 判断是否有元素符合条件
    console.log(arr.some(item => item > 30))  // true
    //map映射，处理每一个元素返回新的数组
    console.log(arr.map(item => item * 2))  // [38, 46, 36, 90, 72, 46]
    // reduce((返回结果,item)=>{},初始值)
    let res = arr.reduce((res, item, index, self) => {
        console.log(res)
        return res + item
    }, 10)
    console.log(res)
    //求最大值
    let maxn = arr.reduce((res, item, index, self) => {
        return res > item ? res : item
    })
    console.log(maxn)
    //交集 差集
    let arr1 = [3, 5, 8, 6, 9]
    let arr2 = [6, 7, 8, 2]
    let jiaoji = arr1.filter(item => arr2.includes(item))
    let chaji = arr1.filter(item => !arr2.includes(item))
    let bingji = arr1.concat(arr2.filter(item => !arr1.includes(item)))
    console.log(jiaoji)
    console.log(chaji)
    console.log(bingji)
</script>