练习向----对象，数组

对象数据类型

1. 对象数据类型
  + 是一个 JS 的复杂数据类型
  + 是一个无序的承载数据的集合
  + 是私人: 是一个 "盒子", 承载数据的 "盒子"
  + 是一个键值对的集合
2. 对象数据类型的创建
  2-1. 字面量方式创建
    => 创建空对象: var obj = {}
    => 创建带有内容的对象: var obj = { 键值对 }
      -> 键值对      键:值
      -> 多个键值对之间使用 逗号(,) 分隔
    => var obj = { 键值对, 键值对 }
  2-2. 内置构造函数方式创建
    => 创建空对象: var obj = new Object()
3.对象内的 key
   =>使用 数字字母下划线美元符 以外的内容来命名 key
    + 书写和使用时, 需把 key 用引号包裹(纯数字不需要)
  对象内的 value
   =>可以是任何数据类型

1. 字面量方式创建
1-1. 创建空对象
    var o1 = {}
1-2. 创建带有内容的对象
    var o2 = {
      aaa: 100,
      name: 'Jack',
      age: 18,
      'user-name': '',
      '@#$%^&': 200,
      1: 365
    }
2. 内置构造函数方式创建
2-1. 创建空对象
    var o3 = new Object()
存储任何类型的数据
    var obj = {
      name: 'Jack',
      age: 18,
      gender: '男',
      info: {
        weight: 180,
        height: 180
      },
      play: function () { console.log('玩游戏') }
    }
    console.log(obj)

对象数据类型的基本操作(增删改查/CRUD)

1. 对象的操作语法
  1-1. 点语法
    => 增: 对象.键名 = 值
    => 删: delete 对象.键名
    => 改:  => 语法: 对象名.键名 = 值
            => 对象内的 key 不能重名
    => 查: 对象.键名
            => 如果对象内没有这个键名, 那么就是 undefined

// 1. 增加
// 添加了一个叫做 name 的 key, 值是 'Jack'
obj.name = 'Jack'
obj.age = 18
obj.gender = '男'
console.log('增加之后 : ', obj)

// 2. 删除
// 删除 obj 对象内一个叫做 age 的键
delete obj.age
console.log('删除之后 : ', obj)

// 3. 修改
// 因为 obj 内本身存在 name 数据, 此时就是修改
obj.name = 'Rose'
console.log('修改之后 : ', obj)

// 4. 查
console.log(obj.name)
console.log(obj.gender)
console.log(obj.age)

对象的数组关联语法

+ 增
	=> 语法: 对象名['键名'] = 值
+ 删
	=> 语法: delete 对象名['键名']
+ 改
	=> 语法: 对象名['键名'] = 值
+ 查
	=> 语法: 对象名['键名']

准备一个对象
var obj = {}
console.log('原始对象 : ', obj)

// 1. 增加
obj['name'] = 'Rose'
obj.age = 18
obj['gender'] = '女'
console.log('增加之后 : ', obj)

// 2. 删除
delete obj['name']
console.log('删除之后 : ', obj)

// 3. 修改
obj['age'] = 20
console.log('修改之后 : ', obj)

// 4. 查
console.log(obj['age'])
console.log(obj['gender'])

两套操作语法的区别

• 如果操作的 key 是符合变量命名规则的 key, 没有区别
• 如果操作带有特殊符号或者纯数字的 key, 只能用数组关联语法
• 如果你操作的key 和 变量有关, 只能使用数组关联语法

  // 注意:数组关联语法
    console.log('======================================');

    var obj_1 = {
        name:'莎莎',
        age:'22',
        info : {id:'123',weight:'67'},
        play:function(){
            console.log('你好啊');
        },
    }
    
    console.log(obj_1);
    obj_1['ues-name'] = '奇奇怪怪'
    
    delete obj_1['age']
    
    console.log('Play:',obj_1['play']);
    
    // 注意：运行数组关联式的方法
    obj_1['play']()
    
    
    var message =  'play'
    console.log('play:',obj_1[message]());
    
    console.log(obj_1);
    
    console.log('======================================');

对象数据类型的比较地址

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

var o1 = {}
var o2 = {}
console.log(o1)
console.log(o2)
console.log(o1 == o2)//地址不一样

遍历对象用for in

+ 使用 for in 循环遍历
+ 作用: 主要就是用来遍历对象
+ 语法: for (var k in 对象) { 重复的代码 }
	  => 会根据对象内有 多少个成员 执行多少次
	  => 随着循环, k 分别是对象内的每一个 key(键名), 是一个字符串类型
	  => 随着循环, 对象名[k] 就分别是对象内每一个 value(值)
  for(var k in obj_1){
    console.log(obj_1[k])
   }

认识数组数据类型 - Array数组

认识数组数据类型 - Array
+ 是一个数据的集合, 是一个复杂数据类型
+ 是一个有序的数据集合
    => 按照索引进行数据排列
    => 索引: 从 0 开始, 依次 +1

创建数组数据类型
1. 字面量方式创建
	  1-1. 创建空数组: var arr = []
	  1-2. 创建带有数据的数组: var arr = [ 数据1, 数据2, 数据3, ... ]

2. 内置构造函数方式创建
	  2-1. 创建空数组: var arr = new Array()
	  2-2. 创建带有数据的数组: var arr = new Array( 数据1, 数据2, 数据3, ... )
	  2-3. 创建指定长度的数组: var arr = new Array(数字)
	    -> 数字不是填充在数组中的数据, 而是数组的长度
	    -> 所有位置使用 empty 填充
3. 数组的基本操作
  3-1. length 属性
    + 是一个读写的属性
    + 读: 获取
      => 语法: 数组.length
      => 得到: 该数组的长度
    + 写: 设置
      => 语法: 数组.length = 数字
      => 结果:
        -> 你设置的数字 小于 length, 从后面开始删除
        -> 你设置的数字 等于 length, 不变
        -> 你设置的数字 大于 length, 多出来的位置使用 empty 补齐
  3-2. 索引 属性
    + 是一个读写的属性
    + 读: 获取
      => 语法: 数组[索引]
      => 得到:
        -> 如果该数组有该索引位置, 那么就是该索引位置的数据
        -> 如果该数组没有该索引位置, 那么就是 undefined
    + 写: 设置
      => 语法: 数组[索引] = 值
      => 结果:
        -> 你设置的索引 小于 length, 修改指定索引位置的数据
        -> 你设置的索引 等于 length, 追加一个数据
        -> 你设置的索引 大于 length, 中间空余位置使用 empty 补齐
  3-3. 遍历 数组
    + 使用循环遍历数组
    + 示例
      for (var i = 0; i < arr.length; i++) {
        // 随着循环, i 就是每一个索引
        // 随着循环, arr[i] 就是每一个数据
      }

4. 数组常用方法
  + push()     后面追加
  + pop()      后面删除
  + unshift()  前面添加
  + shift()    前面删除
  + reverse()  反转数组
  + sort()     排序数组
  + splice()   截取数组并插入
  + 以上方法会直接修改原始数组
  + slice()    截取数组
  + concat()   拼接数组
  + join()     把数组内内容连接成字符串
  + indexOf()  查询数据所在索引位置
  + lastIndexOf()  从后向前查询数据所在索引位置

数组常用方法

改变原数组形式

1. push()

语法: 数组.push(数据, 数据, ...)
作用: 向数组的末尾追加指定的数据
返回值: 追加数据后最新的数组的长度
var res = arr.push('新来的', '2222222222')
console.log('追加之后 : ', arr)
console.log('返回值 : ', res)

2. pop()

语法: 数组.pop()
作用: 删除数组的最后一个数据
返回值: 被删除的数据
var res = arr.pop()
console.log('删除之后 : ', arr)
console.log('返回值 : ', res)

3. unshift()

语法: 数组.unshift(数据)
作用: 向数组的最前面插入数据
返回值: 插入数据后最新的数组的长度
var res = arr.unshift('新来的')
console.log('插入之后 : ', arr)
console.log('返回值 : ', res)

4. shift()

语法: 数组.shift()
作用: 删除数组最前面一个数据
返回值: 被删除的数据

5. reverse()

语法: 数组.reverse()
作用: 反转数组
返回值: 反转以后的数组
var arr = [ 100, 200, 300, 400 ]
console.log('原始数组 : ', arr)
var res = arr.reverse()
console.log('反转之后 : ', arr)
console.log('返回值 : ', res)

6. sort()

语法:
  数组.sort()
  数组.sort(function (a, b) { return a - b }) 升序
  数组.sort(function (a, b) { return b - a }) 降序
作用: 对数组进行排序
返回值: 排序后的数组
var arr = [ 1, 2, 10, 21, 33, 13, 110, 109, 3, 103 ]
console.log('原始数组 : ', arr)
var res = arr.sort()
var res = arr.sort(function (a, b) { return a - b })
var res = arr.sort(function (a, b) { return b - a })
console.log('排序之后 : ', arr)
console.log('返回值 : ', res)

7. splice()-注意splice()的实现原理

语法:	注意：影响的是本身的数组内容和长度
	  数组.splice(开始索引, 多少个)
	  数组.splice(开始索引, 多少个, 要插入的数据)
		    注意: 从哪一个索引开始截取, 从哪一个索引插入
作用: 截取数组部分内容, 并插入新的内容
返回值: 一个新的数组
	  你截取的所有内容放在这个新数组内
var arr = [ 100, 200, 300, 400, 500, 600, 700 ]
//           0    1    2    3    4    5    6
console.log('原始数组 : ', arr)
// 从 [2] 开始, 截取 3 个内容
// var res = arr.splice(2, 3)
// 从 [2] 开始, 截取 1 个内容, 把 '新来的' 插入到 [2] 位置
var res = arr.splice(2, 1, '新来的', '2222')
console.log('截取之后 : ', arr)
console.log('返回值 : ', res)

不改变原数组形式

8. slice()

语法: 数组.slice(开始索引, 结束索引)
	  注意: 包前不包后, 包含开始索引, 不包含结束索引
	  注意: 可以填写负整数, 等价于 length + 负整数
作用: 从数组内截取部分数据(不会改变原始数组, 而是复制出来)
返回值: 必然是一个新数组
	  数组内就是截取出来的部分数据  
var arr = [ 100, 200, 300, 400, 500, 600, 700 ]
console.log('原始数组 : ', arr)
从 [2] 开始截取到 [5], 包含 [2] 数据, 不包含 [5] 数据
var res = arr.slice(2, 5)
var res = arr.slice(2, -2)
console.log('返回值 : ', res)

9. join()

    语法: 数组.join('连接符')
    作用: 把数组内的每一项用连接符连接成一个字符串
    返回值: 连接好的字符串
    
var arr = [ 2022, 3, 5 ]
console.log('原始数组 : ', arr)
var res = arr.join(' ^_^ ')
console.log('返回值 : ', res)

10. concat()

语法: 数组.concat(数组2, 数据)
作用: 把参数的数组展开拼接到原始数组内
返回值: 拼接好的数组

	var arr = [ 10, 20, 30, 40 ]
	console.log('原始数组 : ', arr)
	var res = arr.concat([ 50, 60 ], 70, [ 80, 90, [ 100, 200 ] ])
	console.log('返回值 : ', res)

11. indexOf()

语法:
	数组.indexOf(数据)
	数组.indexOf(数据, 开始索引)
作用: 从前向后检索数组中第一次出现该数据的索引位置
返回值: 是一个数字
如果检索到的该数据, 那么就是该数据第一次出现的索引位置
如果没有该数据, 那么就是 -1

    var arr = [ 100, 200, 300, 100, 200, 100, 400 ]
    console.log('原始数组 : ', arr)
   // 从 arr 数组中检测 100 这个数据, 会从 [0] 位置开始向后检索
    var res = arr.indexOf(100)
    //从 arr 数组中检测 100 这个数据, 会从 [1] 位置开始向后检索
    var res = arr.indexOf(100, 1)
    var res = arr.indexOf(100, 6)
    console.log('返回值 : ', res)

12. lastIndexOf()

语法:
	数组.lastIndexOf(数据)
	数组.lastIndexOf(数据, 开始索引)
作用: 从后向前检索数组中第一次出现该数据的索引位置
返回值: 是一个数字
	如果检索到的该数据, 那么就是该数据第一次出现的索引位置
	如果没有该数据, 那么就是 -1


	var arr = [ 100, 200, 300, 100, 200, 100, 400 ]
	console.log('原始数组 : ', arr)
	//从 arr 数组中检测 100 这个数据, 会从 最后 位置开始向前检索
	var res = arr.lastIndexOf(100)
	//从 arr 数组中检测 100 这个数据, 会从 [4] 位置开始向前检索
	var res = arr.lastIndexOf(100, 4)
	console.log('返回值 : ', res)