js-day06

83 阅读7分钟

定义一个数组

对象是js里面一个大的范畴,而对象的呈现形式是多种多样的,数组也属于对象这个类型下的一个分支,因此返回的类型就是对象

var arr = ['111', 'ddd', '小小小']
console.log(typeof arr) // object
数组的操作
  1. 获取数组元素
var arr = ['111', 'ddd', '小小小', '火辣', '甜妹', '御姐', '姨']
console.log(arr[0])
console.log(arr[1])

希望获取到最后一个数组元素?
数组.length-1 2. 设置数组元素(不存在的下标,如果是存在的下标就变成替换--修改)

arr[6] = '哈哈'
// arr[8] = '嘻嘻'
  1. 修改(替换)
 arr[5] = '呵呵'
  1. 删除,要使用系统关键字delete(删除后数组元素的位置依旧存在)
delete arr[5]
console.log(arr)

数组遍历

第一种方式直接使用for循环

var arr = [['111', 'ddd', '小小小', '内敛的', '火辣', '甜妹', '御姐', '姨']
for(var i=0; i<arr.length; i++){
document.write('<h1>'+arr[i]+'</h1>')
}

第二种遍历方式 for in

var arr = [['111', 'ddd', '小小小', '内敛的', '火辣', '甜妹', '御姐', '姨']
for(var i in arr){
console.log(arr[i])
}
for和for in区别
  • for方式可以指定遍历的开始和结束位置
  • for in方式无法指导遍历的开始和结束位置
  • for不能遍历对象,而for in可以遍历对象
  • for下标数据类型是number
  • for in下标数据类型string

练习
将数组中数字内容求和,数组[10, 2, 6, 20, 6]

var arr = [10, 2, 6, 20, 6, 10]
var sum = 0
for(var i=0; i<arr.length; i++){
    sum += arr[i]
}
console.log(sum)

已知数组[3, 5, -2, 7, 4],获取数组中最大的值并打印 --- 并改成函数形式

var data = [3, 5, -2, 7, 12, 4]
// 注意点:函数的实参和形参名称可以是一样的
function getMax(arr){
    // 假设第一个数组元素是最大值
    var max = arr[0]
    // 遍历
    for(var i=0; i<arr.length; i++){
        // 比较
        if(arr[i]>max){
            max = arr[i]
        }
    }
    // 把最大值返回给外界
    return max
}   
var res = getMax(data)
console.log(res)

数组方法

shift():

删除数组中第一个元素,并将长度减1.

var arr = ['张三', '李四', '成成', '俊俊骏']
arr.shift()
pop():

删除数组中最后一个元素,并将长度减1. arr.pop()

unshift():

往数组前面添加一个或多个数组元素,长度要改变。 arr.unshift('123', '嘿嘿', '嘻嘻')

push():

往数组结尾添加一个或多个数组元素,长度要改变。 arr.push('你好啊', 'hello')

实例

var arr = [1, 5, 6, 3, 8, 10, 7, 2]
var data = []
for(var i=0; i<arr.length; i++){
    if(arr[i]%2==0){
        data.push(arr[i])
    }
}
console.log(data)
concat():

方法用于连接两个或多个数组, 不改变原数组。返回一个新的数组。

var age = [18, 20, 16, 21, 23]
var myName = ['王成', '张三']
var data = age.concat(myName, ['嘿嘿', '嘻嘻'])
console.log(data)

封装一个组合数据的方法

function myConcat(){
    var data = []
    for(var i=0; i<arguments.length; i++){
        data = data.concat(arguments[i])
    }
    return data    
        }
var res = myConcat([1, 2, 3], ['你好', '嘻嘻'])
console.log(res)
reverse():

逆向排序, 原数组也被逆向排序了

var arr = ['张三', '李四', '成成', '俊俊骏']
        var res = arr.reverse()
        console.log(arr)
        console.log(res)
 var arr = ['张三', '李四', '成成', '俊俊骏']
    for(var i=0; i<arr.length; i++){    
        document.write('<h1>'+arr[i]+'</h1>')
        }
arr.reverse()
toString():

将数组转成字符串

var arr = ['张三', '李四', '成成', '俊俊骏']
var res = arr.toString()
console.log(res)

注意:加号运算符把其他类型转成字符串,就是默认调用了toString()方法

join(“拼接符”):

将数组转成字符串,中间以拼接符连接

var arr = ['张三', '李四', '成成', '俊俊骏']
var res = arr.join('-')
console.log(res)

注意:join()方法不传递参数,默认是以逗号隔开的。如果传递的是一个空字符串,那么字符和字符之间没有隔开符号了

slice(start,end):

不修改原数组, 将原数组中的指定区域数据提取出来。start开始 end结束。 如果参数是负值表示从倒数开始。不含结束位置

  • 参数1表示开始的位置
  • 参数2表示结束的位置(不包含,例如:到3结束,拿不到3那个位置的数据)
  • 注意:如果给负值,那么会从倒数开始截取
var arr = ['成', '强', '俊骏', '烟友之家', '早点戒烟', '避免影响你的身体']
console.log(arr)
var data = []
for(var i=1; i<3; i++){
    data.push(arr[i])
}
console.log(data)

var data = arr.slice(1, 3)
console.log(data)
var data = arr.slice(1, -2)
console.log(data)
splice():

删除、替换、增加

  • 1表示从那个位置开始删除或者添加
  • 2表示删除的项数,如果是新增的话那么第二个参数必须为0
  • 3表示添加的数组内容
  • 点:返回值是被删除掉的元素
 var res = arr.splice(0, 2)
console.log(res)

// 删除功能
arr.splice(0, 2)

// 替换功能
arr.splice(1, 2, 'a', 'b')

// 添加功能
arr.splice(1, 0, 'a', 'b', 'c')
console.log(arr)
sort():
  • 会进行字母排序
var arr = ['d', 'a', 'g', 'f', 'b']
var res = arr.sort()
console.log(arr)
console.log(res)
  • 会对数字进行排序
var arr = [5, 1, 3, 2, 4, 6]
arr.sort()
console.log(arr)
  • 注意:如果排序的数组中出现了两位以上的数字,那么它们在排序的时候会以数字的位数进行排序
var arr = [5, 1, 3, 12, 4, 6]
 arr.sort()
console.log(arr)

为了解决以上的问题,官方给咱们提供了一种方式

a-b 如果它的值为正数,就交换它们的位置
b-a 如果值为正数,交换它们的位置

var arr = [5, 1, 3, 12, 4, 6]
// 要求给sort()方法传递一个函数作为参数,在作为参数的这个函数里面有一个a和b作为形参
// a - b 升序排列 ( b - a 降序排列)
var res = arr.sort(function(a, b){
    return a - b
})
console.log(arr)
console.log(res)
常用总结
  • push()
  • concat()
  • toString() 不是说咱们自己会经常用到,而是js会默认调用这个方法的次数比较多的
  • slice() 截取数据
  • splice() 组合方法(删除、添加、修改--替换) 把二维数组转成一维数组

练习
要求将数组中的0项去掉,将不为0的值存入一个新的数组

var arr = [0, 'a', 0, 'b', 0, 0, 'c', 0]
var data = []
// 思考1:为什么这里会存在删除不掉的情况
// 思考2:为什么结果里面会出现undefined
for(var i=0; i<arr.length; i++){
    if(arr[i]==0){
        arr.splice(i, 1)
    }
    data.push(arr[i])
}


for(var i=0; i<arr.length; i++){
    if(arr[i]==0){
        continue
    }
    data.push(arr[i])
}
console.log(data)

数组:数组嵌套数组

var arr = [['张三', '王成'], ['你好', 'hello']]

var data = []
for(var i=0; i<arr.length; i++){
    data = data.concat(arr[i])
}
console.log(data)
// 读取二维数组
console.log(arr[0][0])
console.log(arr[0][1])
// 修改二位数
arr[1][0] = '王成成'
console.log(arr)

调函数

关于函数调用

  • 函数名称加括号调用
  • 通过事件调用函数
  • 一个函数里面可以调用另一个函数
  • 函数自己调用自己,就是递归

callback回调函数

  • 简写:cb
  • 把函数自身作为参数给另一个函数使用,当当前的函数执行完毕后,作为参数的函数再去执行,把这种情况称之为回调函数
  • 作用
    • 方便数据的传递
    • 作为参数,可以处理的业务逻辑更多
function data(a, b){
console.log(a, b)
console.log('我是作为参数的函数')
}
function fn(callback){
callback(10, 20)
}
fn(data)
回调函数应用

计算器

// 有几个计算的方法
function add(num1, num2){
    return num1 + num2
}
function sub(num1, num2){
    return num1 - num2
}
function nul(num1, num2){
    return num1 * num2
}
function dis(num1, num2){
    return num1 / num2
}

// 可以利于回调函数把这几个计算方法进行整合处理
function calc(num1, num2, callback){
    return callback(num1, num2)
}
var res = calc(10, 20, sub)
console.log(res)

冒泡排序

一组无限的数,两两依次进行比较,如果那个大就和小的交换位置,直到比较完毕

var arr = [5, 3, 7, 12, 1]
// 外层循环执行一次,内层循环执行一轮
// 外层循环控制的是轮数
// 注意点:外层循环长度-1,是由于四个数字其实只需要比较三轮就出结果了,最后一轮没有比较执行,因此-1

// count1表示的是外层循环的循环次数
 var count1 = 0
 // count2表示的是内层循环的循环次数
 var count2 = 0
for(var i=0; i<arr.length-1; i++){
    // 注意点:内层循环长度-1,是由于使用前面一个数和后面一个数进行比较,把下标长度每次比较时+1,因此多出了一个下标的值是取不出数组元素,所以-1
    for(var j=0; j<arr.length-1-i;j++){
        // 前面和后面进行比较
        //     0      1
        //     1      2
        if(arr[j]>arr[j+1]){
        //交换两个数的值
            var temp
            temp = arr[j]
            arr[j] = arr[j+1]
            arr[j+1] = temp
        }
        count2++
    }
    count1++
}
console.log(arr)
console.log('外层循环执行了'+count1+'次')
console.log('----------内层循环执行了'+count2+'次')