Javascript对象和数组

对象和数组

对象

世界万物皆对象；

object，一切具有本质特征和行为的事物

属性：事物的本质特征

方法: 事物的行为

一个鼠标
  属性(本质特征)：大小   形状  颜色
  事物的行为： 干什么事情 --点击  选择
  
  
一个人
   属性(本质特征)：姓名  年龄  身高  体重
   事物的行为： 跑步  唱歌 敲代码

类

一类具有共同的本质特征和行为的实物

类是对象的抽象化

对象是类的具体化

一、如何创建对象

/* 
 变量  只能存储一个值 
 对象   存储一个对象的所有信息   姓名，年龄，成绩.... 一条数据
*/


      // 创建对象
      //  1:字面量方式   {key:value,key:value}

      var obj = {
        name: '张三',
        age: 12,
        showName: function () {
          return this.name
        },
        showAge: function () {
          return this.age
        },
      }

      // new 构造函数----放在高级

二、如何访问对象中的属性和方法

• 对象是由键值对（key:value），键值对也可以叫对象得属性，（键-属性名：值-属性值）

• 对象得属性值，可以是任意数据类型，当属性值是函数得时候，就叫对象得方法

• 取值：使用对象得属性可以用.属性名查看对应得属性值，也可以用[属性名（或者变量）]方式查看属性值，用[]属性名需要添加""变为字符串，如：[“name”]

• 对象得属性名是字符串，写的时候一般省略了""，自动会转为字符串

• 赋值：使用.属性名或者[属性名]给对象赋值。

  var car ={
              0:"id",
              name:"车",
              brand:"比亚迪",
              type:"唐",
              move:function(){  //对象得方法
                  console.log("move");
              }
          }
          console.log(car["name"]);
          car.name="suv";
          car["brand"]="哈弗";
          console.log(car);
  

• 删除属性

  delete car[0];
  delete car.move;
  

• 查看对象得素有属性名，Object是js内置得对象，里面封装了操作js对象得属性和方法

  var keys=Object.keys(car)
  console.log(keys);
  Object.keys(car).forEach(function(item){   //数组一个forEach方法，可以遍历数组得每一个元素，item就是遍历数组得元素。推荐遍历对象用这种方式，性能比for in 遍历更高
              console.log(item+":"+car[item]);
   })
  

• 查看对象是否存在某个属性 in ，有则返回true,没有返回false

  console.log("name" in car);
  

• 遍历对象 for in

   for(var o in car){
        console.log(o+":"+car[o]);
   }
  

数组

变量 ：存储数据的，只能存储一个值

var name = “张三” ； var age = 12；

对象：本质特征和行为的事物 能存储一条数据

var obj = {name:“张三”,age:12,score:100}

数组：可以存储一组（多条数据）或一系列相关数据的容器

数组元素：存储在数组中，并赋予唯一索引号(下标–从0开始)的数据段

​ 数组元素的数据类型可以不相同

数组下标：标识数组元素的唯一索引号 最小下标 0 ，最大下标length-1

好处

可以集中管理，提高性能

声明数组

1:字面量方式 var 数组名 = []

2：构造函数的方式 var 数组名 = new Array()

有且仅有一个正整数作为参数，表示数组的长度 ,其他情况表示数组中的元素

数组的属性

数组名.length 返回数组的长度

数组的数据类型

object

遍历数组(循环数组)

// 遍历数组  读取数组中的所有数组元素
      // 下标 从0开始   length-1结束
      for (var i = 0; i < arr.length; i++) {
        console.log(arr[i])
      }

一般不用for in遍历，开销比较大。 一般数组用for循环或者forEach遍历。forEach遍历不可以使用break;

arr1.forEach(function(item){
            console.log(item);
        })

方法（增，删，改，截，拼，排，转)

增

unshift(新增元素)
在数组的前面增加新的元素
新增后数组的长度
是否影响原数组:是

后增 push(新增元素)
在数组的尾部增加新的元素
返回值：新增后数组的长度
是否影响原数组:是

      // 增
      var arr = [5, 6, 4, 5, 6, 7]
      var res = arr.unshift(4, [1, 2, 3], 5)
      // console.log(res) //9
      // console.log(arr)

      var arr1 = [2, 3, 4, 5, 6, 7]
      var res1 = arr1.push(4, [1, 2, 3], 4)
      console.log(res1) //9
      console.log(arr1)

删

shift()
删除数组首部的元素，一次只能删除一个元素
返回值：返回被删除的元素
是否影响原数组：是

pop()
删除数组尾部的元素，一次只能删除一个元素
返回值：返回被删除的元素
是否影响原数组：是

      var arr = [2, 3, 4, 5, 6, 78, 88]
      var res = arr.shift()
      //   console.log(res)//2
      //   console.log(arr)

      var arr1 = [23, 5, 6, 7, 8, 3, 5, 4, 2, 1]
      var res1 = arr1.pop()
      console.log(res1) //1
      console.log(arr1) // [23, 5, 6, 7, 8, 3, 5, 4, 2]

改

splice(从哪个下标开始，删除的长度，新增的元素,…)
作用:在数组的任意位置可以实现增，删，改
返回值：被删除的元素数组
是否影响原数组：是

      // var arr = [5, 6, 7, 8, 9]
      // var res = arr.splice(2)
      // console.log(res)  //[7, 8, 9]
      // console.log(arr)  //[5, 6]

      // var arr = [5, 6, 7, 8, 9]
      // var res = arr.splice(2, 1)
      // console.log(res) //[7]
      // console.log(arr) //[5, 6, 8, 9]

      // var arr = [5, 6, 7, 8, 9]
      // var res = arr.splice(2, 1, [1, 2, 3], true)
      // console.log(res) // [7]
      // console.log(arr) // [5, 6, [1, 2, 3], true, 8, 9]

      var arr = [5, 6, 7, 8, 9]
      var res = arr.splice(2, 0, [1, 2, 3], true)
      console.log(res) // []
      console.log(arr) //[5, 6, [1, 2, 3], true,7, 8, 9]

拼

concat(拼接的元素)
作用:将新的元素拼接到指定的数组后面，形成新的数组(新数组中有数组，则将最外层数组拆开进行拼接)
返回值：拼接后的新数组
是否影响原数组：否

 /*  
      */
      var arr = [5, 6, 7, 8, 9]
      var res = arr.concat(-4, -2, [2, 3, [4, 6]], 10)

      console.log(res) // [5, 6, 7, 8, 9, -4, -2, 2, 3, [4, 6], 10]
      console.log(arr) //[5, 6, 7, 8, 9]

截

slice(start,end)
作用:截取指定范围的数组元素
返回值:被截取的新数组
是否影响原数组:否

      var arr = [5, 6, 7, 8, 9]
      // var res = arr.slice(2)
      // console.log(res) //[7, 8, 9]
      // console.log(arr) //[5, 6, 7, 8, 9]

      // var res = arr.slice(2, 4)
      // console.log(res) //[7, 8]
      // console.log(arr) //[5, 6, 7, 8, 9]

      // var res = arr.slice(4, 2)
      // console.log(res) //[]
      // console.log(arr) //[5, 6, 7, 8, 9]

      var res = arr.slice(-4, -2)
      console.log(res) //[6,7]
      console.log(arr) //[5, 6, 7, 8, 9]

排序

reverse
作用:将数组元素逆序
返回值:逆序后的数组
是否影响原数组:是

var arr = [4, 2, 100, 3, 5]
var res = arr.reverse()
console.log(res) //[5, 3, 100, 2, 4]
console.log(arr) //[5, 3, 100, 2, 4]

sort
作用:将数组元素按字符串的编码进行从小到大的排列
返回值:返回排序后的数组
是否影响原数组:是

var arr = ['A', 'C', 'D', 'B']
var res = arr.sort()

console.log(res) //[100, 3, 4, 5, true]
console.log(arr)  //[100, 3, 4, 5, true]

扩展：
sort(function(a,b) {return a - b}) 按数字从小到大排列
sort(function(a,b) {return b - a}) 按数字从大到小排列

var arr1 = [23, 4, 5, 1, 3, 51, 43, 23]
var res1 = arr1.sort(function (a, b) {
return b - a
})
console.log(res1) //[1, 3, 4, 5, 23, 23, 43, 51]
console.log(arr1) //[1, 3, 4, 5, 23, 23, 43, 51]

转换

toString() 将数组转为字符串
返回值: 返回转后的字符串(以逗号分隔)
是否影响原数组：否

var arr = [2, 3, 45, 7, true]
var res = arr.toString()
console.log(res) //2,3,45,7,true
console.log(arr) // [2, 3, 45, 7, true]

toString() 用于简单变量转成指定进制的字符串
toString(进制数)

var iNum = 88
console.log(iNum.toString(2)) //1011000
console.log(iNum.toString(8)) //130
console.log(iNum.toString(16)) //58

join(连接符)
将数组转为以指定连接符链接的字符串
返回值:返回转后的字符串
是否影响原数组：否

var arr1 = [4, 2, 36, 5, 4]
var res1 = arr1.join('*') //
var res1 = arr1.join('')
console.log(res1) //4*2*36*5*4
console.log(arr1)

for-in循环

遍历数组或对象

语法:

for(变量 in 数组/对象){
    //js语句
}

排序算法

冒泡排序，选择排序，插入排序…

冒泡排序

 /* 
冒泡排序:相邻的两个数进行比较，符号条件，交换位置
   9, 6, 15, 4, 2
   6, 9, 4 , 2, 15    4次
   6, 4, 2 , 9        3次
   4, 2, 6            2次
   2, 4               1次

   挨着的两个数进行比较，如果前一个比后一个大，就把两个数交换位置
   数组遍历一遍以后，最后一个数字就是最大的那个数
   进行第二遍遍历，按照之前的规则，第二个大的数字就会跑到倒数第二个位置了
   依次类推

*/
      var arr = [9, 6, 15, 4, 2]

      for (var i = 1; i < arr.length; i++) {
        //外层  遍历的次数 从第一次开始遍历
        for (var j = 0; j < arr.length - i; j++) {
          //内层  比较的次数  从第一个开始比较  第一个下标为0
          // arr[j] 前一个  arr[j+1]后一个
          if (arr[j] > arr[j + 1]) {
            // 交换位置
            var t = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = t
          }
        }
      }

      console.log(arr)

选择排序

 // 选择排序   依次取出第一个元素，与后面所有元素进行比较，符合条件 交换位置

      /*
      9, 6, 15, 4, 2
        2   9, 15, 6, 4      4次
            4  15, 9, 6     3次
                6  15,9     2次
                   9  15    1次
      */

      var arr = [9, 6, 15, 4, 2]

      for (var i = 0; i < arr.length - 1; i++) {
        //比较的轮数
        // 每一轮比较的次数
        for (j = i + 1; j < arr.length; j++) {
          if (arr[i] > arr[j]) {
            var t = arr[i]
            arr[i] = arr[j]
            arr[j] = t
          }
        }
      }
      console.log(arr)

值传递和引用传递

简单数据类型（值传递）: 字符串，数值，boolean布尔,undefined,null

复杂数据类型(引用传递)：function arrary,object

 var a = 3
      var b = a
      a = 4
      // console.log(a, b) //4 , 3

      var arr = [1, 2, 3]
      var list = arr //传递的是地址
      arr[0] = 5
      // console.log(arr, list) //[5, 2, 3]  [5, 2, 3]

      var obj = { name: '张三', age: 18 }
      var obj1 = obj
      obj.name = '李四'
      console.log(obj, obj1) //{name: '李四', age: 18} {name: '李四', age: 18}

ES5扩展

严格模式

启动严格模式: “use strict”

注意: 只能加在作用域开头部分，如果函数里加 加载函数作用域开头的地方

数组的扩展方法

都不改变原数组

indexOf lastIndexOf forEach map filter reduce

/*
      indexOf(元素,start)
      作用:查找元素在数组中第一次出现时下标的位置，如果没有返回-1
      返回值:下标
      */
      // var arr = [1, 2, 3, 4, 5, 2, 3, 4, 5, 6, 2, 2, 3, 4, 5]
      // var res = arr.indexOf(2, 0)
      // console.log(res) //1

      //  思考?如何将数组中重复的元素去掉

      /*
            lastIndexOf(元素,start)
            作用:查找元素在数组中最后一次出现时下标的位置，如果没有返回-1

            如果指定第二个参数 start，则在一个字符串中的指定位置从后向前搜索
           返回值:下标
            */

      // var arr = [1, 2, 3, 4, 5, 2, 3, 4, 5, 6, 2, 2, 3, 4, 5]
      // var res = arr.lastIndexOf(2)   11
      // var res = arr.lastIndexOf(2, 10)
      // console.log(res) //10

      /*
            forEach 遍历数组
            arr.forEach(function(value,index,array) {

            }); */
      // var arr = [1, 2, 3, 4, 5, 2, 3, 4, 5, 6, 2, 2, 3, 4, 5]
      // arr.forEach(function (value, index, array) {
      //   // value  每一个数组元素
      //   // index  下标
      //   // array  数组
      //   console.log(value, index, array)
      // })

      /*
             映射 返回一个新数组
              map(function(value,index,array){ return ...})
            */

      // var arr = [1, 2, 3, 4, 5, 2, 3, 4, 5, 6, 2, 2, 3, 4, 5]
      // var newArr = arr.map(function (value, index, array) {
      //   // return的值是新数组的数组元素
      //   return value * 2
      // })
      // console.log(newArr)

      /* 
      
       filter(function(value,index,array){ return 过滤条件})
      */

      // var arr = [1, 2, 3, 4, 5, 2, 3, 4, 5, 6, 2, 2, 3, 4, 5]
      // // 过滤数组中值大于4的数组元素  返回过滤后的数组
      // var newArr = arr.filter(function (value, index, array) {
      //   return value >= 4
      // })

      // console.log(newArr)

      /* 
      reduce(function(累加器,当前值，索引，数组){return ...},累加器初始值)
      
      */
      var arr = [1, 2, 3, 4, 5, 2, 3, 4, 5, 6, 2, 2, 3, 4, 5]
      // 求和
      var sum = arr.reduce(function (s, value, index, array) {
        return s + value
      }, 0)
      console.log(sum) //51  数组中所有数组元素的和