js-day07

呱呱gugu
76 阅读6分钟
冒泡排序封装

封装思路：

  • 第一步：先不管其他的，直接把业务代码放进一个函数里面，起一个语义化的名称（bubble sort）
  • 第二步：观察下看看哪些东西是需要变化的，然后把它提成参数即可
var data = [10, 2, 8, 1, 6]
function bubbleSort(arr, select){

    if(select == 'a'){
    //升序
        for(var i=0; i<arr.length-1; i++){
            for(var j=0; j<arr.length-1-i; j++){
                if(arr[j]>arr[j+1]){
                    var temp
                    temp = arr[j]
                    arr[j] = arr[j+1]
                    arr[j+1] = temp
                }
            }
        }
    }else{
    //降序
        for(var i=0; i<arr.length-1; i++){
            for(var j=0; j<arr.length-1-i; j++){
                if(arr[j]<arr[j+1]){
                    var temp
                    temp = arr[j]
                    arr[j] = arr[j+1]
                    arr[j+1] = temp
                }
            }
        }
    }
    return arr
}
var res = bubbleSort(data, 'b')
document.write(res)

选择排序

一组无序的数，先使用第一个和后面所有的进行比较，如果那个小就交换位置放在前面，依次使用第二个和后面所有的进行比较...

var arr = [5, 3, 7, 12, 1]
// 规律：当i执行一次，j执行一轮，因此使用i和j依次进行比较是合理的
for(var i=0; i<arr.length-1; i++){
    // 问题：j每一次都会从头进行执行，那么i和j进行比较的时候会出现回头比较的情况
    for(var j=i+1; j<arr.length; j++){
        if(arr[i]>arr[j]){
            var temp
            temp = arr[i]
            arr[i] = arr[j]
            arr[j] = temp
        }
    }
}
console.log(arr)
选择排序封装
var data = [5, 3, 7, 12, 1]
function selectSort(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] > arr[j]) {
                var temp
                temp = arr[i]
                arr[i] = arr[j]
                arr[j] = temp
            }
        }
    }
    return arr
}
console.log(selectSort(data))

数组去重

把数组里面重复的数据给删除掉

  • 问题：为什么出现连续三个或者三个以上的字符，删除不掉？
  • 原因：当有多个连续的字符的时候，在删除当前字符的时候，后面的会进行补位操作（这个时候进行补位的元素和前面被删除的元素是一样的），由于前面已经比较过了，因此程序不会回过头再进行比较一次，所以产生了'漏网之鱼'
  • 解决方案：可以让它回来再比较一次
var arr = ['a', 'a', 'a', 'b', 'b', 'a', 'c', 'b', 'c', 'f', 'g', 'f', 'g', 's']
for(var i=0; i<arr.length-1; i++){
    for(var j=i+1; j<arr.length; j++){
        //     'a' == 'a' 满足条件的，进入判断体里面
        //     'a' == 'a' 满足条件的，进入判断体里面
        //     'a' == 'b' 不满足条件的，因此去执行j++，j=2
        if(arr[i] == arr[j]){
            //         1，因此把第二个a字符给删除掉
            //         1，因此把第二个a字符给删除掉
            arr.splice(j, 1)
            // 1--，变成了0
            // 1--，变成了0
            j--
        }
    }
}
console.log(arr)

拷贝传值和引用传值

问题：为什么第一段代码不变，第二段代码的结果要变化？

// 第一段代码：
var a = 10
var b = a
console.log(a, b)
a = 20
console.log(a, b)

// 第二段代码：
var arr = ['王成', 18]
var newArr = arr
console.log(arr, newArr)
arr[0] = '崔傑瑜'
console.log(arr, newArr)

电脑的存储空间

  • 运行内存，当你打开一个软件的时候，软件其实是在运行在内存里面执行的
  • 硬盘，你下载的软件或许资料都是存储在硬盘里面的，硬盘一般比较大的 内存存储问题
  • 这里的内存是运行内存，代码执行是在运行内存里面的。包括变量的存储也是在内存里面的
  • 分区
    • 栈区，主要用来存储基本数据类型的，引用数据类型的地址是存储在栈区
    • 堆区，主要用来存储引用数据类型的

对象Object

  • 自定义对象语法
    • {} 字面量
    • new Object() 构造函数
  • 作用
    • 对象类型的结构更为清晰（数据结构）
    • 对象添加很多的属性和方法
    • 可以避免变量命名污染问题
  • 对象的组成
    • 由键值对组成的 key: value
    • 键值对分为属性和方法
    • 因此也可以说对象是由属性和方法组成的
  • 属性和方法
    • 属性指的是静态的东西，例如：姓名、性别、年龄、体重等等，也可以把属性理解为特征
    • 方法指的是动态的东西，例如：开飞机、开车、谈恋爱、打游戏、喜欢睡觉等等，指的是人的行为

不同类型对象

在js里面对象是一个大的范畴，对象它的形态是不一样的

var arr = ['a', 'b']
console.log(typeof arr) // object

var obj = {a: 1}
console.log(typeof obj) // object

var btn = document.getElementById('btn')
console.log(typeof btn) // object

console.log(typeof window) // object

console.log(typeof document) // object

问

var arr = ['a', 'b', 'c']
// 注意点：数组是属于对象，可以使用自定义对象添加属性的方式，但是为了不破坏原有的数据结构，不会算在下标里面。依旧会以键值对的形式存在
arr.d = 'hello'
console.log(arr)
console.log(arr.length)
console.log(arr.d)

var btn = document.getElementById('btn')
console.log(btn)
// 注意点：给标记添加属性，属于隐式添加不会显示在标记上面，但是添加的属性可以使用
btn.a = 1
console.log(btn.a)

对象赋值

对象赋值方式

  • 第一种使用点的形式
    • 语法：对象名称.属性名称或者方法名 = 值
  • 第二种使用[]的形式
    • 语法：对象名称[属性名称或者方法名] = 值
    • []形式更灵活，因为[]可以解析变量，而点不能解析变量
  • 注意
    • 添加的键对象都会默认转成字符串类型

注意点：如果在添加键的时候，不加引号，会默认当成变量去解析。如果加了引号会当成键名去解析

 obj['name'] = '张三'
 obj['age'] = 18

键名是不确定的，可以让别人自定义

// 问题：键名是不确定的，可以让别人自定义
var key = 'myName'
// 注意点：如果写成这种形式，会直接把key当成对象的键名进行添加
obj.key = '张三'
obj[key] = '张三'
console.log(obj)

var obj = {
    name: '张三',
    age: 18,
    123: '我是数值类型',
    // '["a", "b"]': '哈哈！我是一个数组',
    [arr]: '哈哈'
}

// 遍历对象
for(var key in obj){
    console.log(key)
    console.log(typeof key) // string
}

遍历对象

var obj = {
name: '张三',
age: 18,
sex: '男'
}
for(var key in obj){
// 这个表示查找对象里面是否有一个键名为key的属性
// console.log(obj.key)
// 注意点：这种情况下必须使用中括号形式
console.log(obj[key])
}
// 读取对象属性
console.log( obj['name'])
// 对象属性简化形式
var a = 10
// 注意点：如果对象的键和值是一样的情况下，可以省略值不写
var obj = {
a

}
console.log(obj)

数据类型组合使用

var list = [
    {
        id: 1,
        url: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310251928_35fb2880108e9aa56fdcf7f894249f26.png?thumb=1&w=400&h=400&f=webp&q=90',
        title: 'Xiaomi 14 Pro',
        desc: '徕卡Summilux可变光圈镜头｜小米澎湃OS',
        price: 4999
    },
    {
        id: 2,
        url: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310251937_a4ac1ae382a402426beb915f401e50e5.png?thumb=1&w=400&h=400&f=webp&q=90',
        title: 'Xiaomi 14',
        desc: '徕卡光学Summilux镜头｜小米澎湃OS｜第三代骁龙®8移动平台',
        price: 3999
    },
    {
        id: 3,
        url: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309200030_9a6a9bf107f4b4a7a25e4ccedf0c1174.png?thumb=1&w=400&h=400&f=webp&q=90',
        title: 'Redmi Note 13 Pro',
        desc: '小金刚品质',
        price: 1399
    }
]

function render(data){
      var str = '<ul>'
      for(var i=0; i<data.length; i++){
            str += '<li>'
            // str += '<img src='+data[i]['url']+'>'
            str += '<img src='+data[i].url+'>'
            str += '<h3>'+data[i].title+'</h3>'
            str += '<p class="desc">'+data[i].desc+'</p>'
            str += '<p class="price">'+data[i].price+'</p>'
            str += '</li>'
    }
    str += '</ul>'
    document.write(str)
}
render(list)

css自己设置

avatar
文章
阅读
粉丝