JS笔记1

119 阅读7分钟

1.什么是对象

对象是一个 复杂数据类型, 也叫做 引用数据类型

    var obj = {
    num: 100,
    str: 'hello',
    boo: true
   }

对象就是一个键值对的集合

什么是键值对?

  • 对象 obj 中, num 是键, 100 是值
  • 对象 obj 中, str 是键, 'hello' 是值
  • 对象 obj 中, boo 是键, true 是值

2.创建对象

字面量方式创建对象

语法:

    var obj = {}   var obj1 = {键值对, 键值对}

内置构造函数创建

语法:

    var obj = new Object()

3.对象数据类型的操作(增删改查)两种语法

点语法

var obj = {}
obj.name = 'qianfeng'   // 增
obj.name = 'qianfeng123'    // 改
console.log(obj.name)       // 查
delete obj.name         // 删

中括号语法(数组语法)

var obj = {}
obj['name'] = 'qianfeng'        // 增
obj['name'] = 'qianfeng123123'  // 改
console.log(obj['name'])        // 查
delete obj['name']              // 删

两者的差异

符合变量命名规范与规则的情况,两者并无差异

操作不符合变量命名规范与规则的名称时,比如纯数字或者带有特殊符号的,就只能用中括号语法

涉及变量相关的时候,只能使用中括号语法

4.for in 循环遍历对象

for (var k in obj) {
console.log('我执行了', k, obj[k])

}

5.数组数据类型

什么是数组

数组字面意思就是存放数字的一个组合, 但这么说太过于片面, 更完善的说法应该是 `数组是存放一些数据的集合

简单来说我们把数据放到一个盒子中, 这个盒子就是数组, 注意数字内的数据是有顺序的

    var arr = [1, 2, 3, 'qwe', 'abc', true, false, undefined, null]

6.创建数组数据类型

使用字面量的方式创建数组

创建一个空数组

    var arr = [];
    

创建一个有内容的数组

    var arr1 = [1, 2, 3]

内置构造函数创建数组

创建一个空数组

    var arr = new Array()

创建一个有长度的数组

    var arr1 = new Array(10)

创建一个有内容的数组

    var arr2 = nee Array(1, 2, 3)

7.数组的 length 属性

length 就是长度的意思, 代表数组内有多少个成员(数据)

    var arr = [1, 2, 3]
    console.log(arr.length)     // 3
    
    
    var arr1 = [4, 5]
    console.log(arr1.length)     // 2

8. 数组的索引概念

索引也叫做下标, 就是指一个数据在这个数组内排列在第几个位置上

注意: 在所有的语言中, 索引(下标)都是从0开始的

    var arr = ['hello', 'world']
    // 在这个数组中, 第一个数据(元素)是 'hello', 那么它的下标就是 0, 后续的 'world', 下标为1
    // 想要获取数组中某一个位置上的数据(元素), 可以直接 数组名[下标]

    console.log(arr[0], arr[1])

9.for 循环遍历数组

遍历数组就是想办法拿到数组的每一个元素, 通常我们可以通过下标获取到元素的某一项, 所以我们只需要想办法拿到数组的所有下标即可

    var arr = [1, 2, 3, 'qwe', 'abc', true, false, undefined, null]
    for (var i = 0; i < arr.length; i++) {
        console.log(arr[i])
    }

10.数组基本操作案例

冒泡排序

    var arr = [9, 6, 3, 1, 4, 7, 8, 2, 5];
    console.log('原始数组: ', arr)
    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 = arr[j]
                arr[j] = arr[j + 1]
                arr[j + 1] = temp
        }
    }
}console.log('交换后的数组: ', arr)
    
    

选择排序

    var arr = [9, 6, 3, 1, 4, 7, 8, 2, 5];
    console.log('原始数组: ', arr)
    for (var j = 0; j < arr.length; j++) {
        // 1. 假定数组中的第 0 个是最小数字的索引
        var minIndex = j
        // 2. 遍历数组找到数组中最小的哪一项的下标将其替换之前记录的索引
        for (var i = j; i < arr.length; i++) {
            if (arr[i] < arr[minIndex]) {
                minIndex = i
    }
}
        // 3. 遍历结束, 找到最小的索引, 将两个位置的数据对换
        var temp = arr[j]
        arr[j] = arr[minIndex]
        arr[minIndex] = temp

} console.log('排序结束后: ', arr)

11.数组常用方法

push

语法:

    数组名.push(数据)

作用: 向数组末尾添加数据

返回值: 追加数据后, 数组最新的长度

pop

语法:

    数组名.pop()

作用: 删除数组最后一条数据

返回值: 被删除的数据

unshift 语法:

    数组名.unshift(数据)

作用: 向数组开头添加数据

返回值: 添加数据后, 数组最新的长度

shift 语法:

    数组名.shift()

作用: 删除数组第一条数据

返回值: 被删除的数据

forEach 语法:

    数组.forEach(function (item, index, origin) {})

item: 数组的每一项

index: 数组的每一项对应的下标

origin: 原始数组

作用: 遍历数组

返回值: 没有(undefined)

注意: 手写 return 也没用

map 语法:

    数组.map(function (item, index, origin) {})

item: 数组的每一项

index: 数组的每一项对应的下标

origin: 原始数组

作用: 映射数组

返回值: 和数组长度一样的数组, 只不过内部数据经过映射加工

注意: 映射条件以 return 的形式书写

filter 语法:

    数组.filter(function (item, index, origin) {})

item: 数组的每一项

index: 数组的每一项对应的下标

origin: 原始数组

作用: 过滤数组

返回值: 返回一个新数组, 内部存储的是原始数组内过滤出来的部分数据

注意: 过滤条件以 return 的形式书写

find 语法:

    数组.find(function (item, index, origin) {})

item: 数组的每一项

index: 数组的每一项对应的下标

origin: 原始数组

作用: 在数组内查找满足条件的第一项

返回值: 找到的数据

注意: 查找条件以 return 的形式书写

findIndex 语法:

     数组.findIndex(function (item, index, origin) {})

item: 数组的每一项

index: 数组的每一项对应的下标

origin: 原始数组

作用: 在数组内查找满足条件的第一项的下标

返回值: 找到的数据

注意: 查找条件以 return 的形式书写

every 语法:

    数组.every(function (item, index, origin) {})

item: 数组的每一项

index: 数组的每一项对应的下标

origin: 原始数组

作用: 判断数组内是否每一个都满足条件

返回值: 一个布尔值

注意: 判断条件以 return 的形式书写

some 语法:

    数组.find(function (item, index, origin) {})

item: 数组的每一项

index: 数组的每一项对应的下标

origin: 原始数组

作用: 判断数组内是否有一个符合条件的

?返回值: 一个布尔值

注意: 判断条件以 return 的形式书写

reduce 语法:

    数组.reduce(function (prev, item, index, origin) {}, init)

prev: 表示初始值或者上一次的运算结果

item: 数组的每一项

index: 数组的每一项对应的下标

origin: 原始数组

作用: 用来实现叠加效果

返回值: 最终叠加结果

注意:

叠加条件以 return 的形式书写

prev 的值, 如果你传递了 init, 就是 init 的值, 如果没有传递 init, 那么就是 数组[0] 的值

如果传递了 init, 循环执行 length 次, 如果没有传递 init, 循环执行 length - 1 次

12.数据类型之间的区别

存储的区别

基本数据类型存储在 栈内存中, 比如: string; number; undefined; null; boolean;

复杂数据类型(引用数据类型)

将数据本体存放在 堆内存中, 比如对象或者数组, 然后将指向该堆内存的地址, 存放在数组名或者对象名中

数组名或者对象名存放在栈内存中

赋值的区别

基本数据类型:赋值以后,两个变量没有关系了, 相当于将我自己的某一个东西, 复制一份给到你, 然后你的是你的, 我的是我的

复杂数据类型:赋值以后,两个变量操作一个存储空间, 相当于我将我房间的钥匙复制给你一份, 你可以自由进出该房间或者对这个房间的布局做一些调整, 我也可以自由进出该房间并且也可以对这个房间的布局做调整

  • 两种数据类型存储的区别
    • 基础数据类型直接存储在 栈内存中
    • 复杂数据类型会将数据本体存在堆内存中,变量名存储在堆内存中,变量名内部存储着指向堆内存的地址

比较的区别

基本数据类型是 的比较

    var a = 1
    var b = 2

    console.log(a == b) // false, 因为两个变量的值是 12, 所以对比结果为 false
    

复杂数据类型是 存储地址 的比较

    var obj1 = {a: 1}
    var obj2 = obj1
    var obj3 = {a: 1}
    console.log(obj1 === obj2) // 两个变量的存储地址相同, 所以为true
    console.log(obj1 === obj3) // 两个变量的存储地址不相同, 所以为false
    
    

传参的区别

基本数据类型: 将值拷贝一份传递给形参, 在函数内修改不会影响外界

复杂数据类型: 将存储地址赋值给形参, 在函数内修改会影响外界