回顾js语法

内置对象:数组对象方法

1.连接数组arr.concat(数组)

//声明数组
        let arr = [10,20,30]
        //(1) arr.concat(数组)   ： 把两个数组连接成一个数组
        //应用场景： 一般用于长列表(下一页),不断往后面拼接数组
        let newArr = arr.concat([40,50])
        console.log(newArr)//[10,20,30,40,50]

2.翻转数组arr.reverse()

 let arr = [10,20,30]
  //(2) arr.reverse()   : 翻转数组
        //应用场景： 价格从低到高 切换成 从高到低， 只需要翻转数组即可
        arr.reverse()
        console.log( arr )//[30,20,10]

3.拼接arr.join(‘分隔符’)

        //(3) arr.join('分隔符') : 把数组每一个元素拼接成字符串
        let arr1 = [80,90,55,60]
        //应用场景 :  有些歌曲是多个人合唱，服务器会给我们一个数组。 这个时候就需要将数组元素通过join拼接起来然后再页面显示
        let str = arr1.join('&')
        console.log( str )//80&90&55&60

4.排序arr.sort(function(a,b)
{return a-b
// return a-b //从小到大 //return b-a //从大到小})

//(4) arr.sort( function(a,b){return a-b} ) : 排序
         let arr = [10,30,2]
        arr.sort( function(a,b){
            // return a-b //从小到大
            return b-a //从大到小
        } )
        console.log(arr)//[30,10,2]

字符串对象

** 1. 字符串类似于数组，也有长度和下标**

let  str='我要去曦度看武'
//1. 字符串类似于数组，也有长度和下标
        console.log( str.length )//7
        console.log( str[5] )//看

2. str.indexOf(‘字符串’) 获取 ‘字符串’ 在str中的首字母下标
如果字符串存在则返回首字母下标， 如果字符串不存在则返回固定值 -1
应用场景： 一般用户判断 str中是否有某个字符串 如果没有则返回-1,不是-1说明有

let  str='我要去曦度武'
let  index1=str.indexOf('度武')//4
let  index1=str.indexOf('去武')//-1

3. str.split(‘分隔符’) 用分隔符切割字符串，得到切割之后的数组
应用场景 : 一般用户解析 网址

let url = 'http://www.baidu.com?name=张三&age=20'
        console.log( url.split('|') )//['http://www.baidu.com?name=张三&age=20']
        console.log( url.split('?') )//['http://www.baidu.com', 'name=张三&age=20']
        console.log( url.split('=') )//['http://www.baidu.com?name', '张三&age', '20']

**4. str.substr(起始下标,截取长度) 截取字符串
应用场景 ： 一般后台返回的数据 不会和前端完全匹配。 有时候需要自己截取一部分
例如： 商品价格后台返回 :价格58元 但是前端只需要显示58元，就需要截取
**

let  str='我要去曦度看武剑仙降临'
 console.log( str.substr(2,5) )//从2下标开始，往后截取5个字 //曦度看武剑仙 

5.大小写转换 （中文没有大小写）
应用场景： 字母验证码不区分大小写 （一般无论你输入什么，都会转成大写或小写保持格式统一）

        console.log('dsSFJSGDJHsdfs'.toLocaleLowerCase() )//小写 dssfjsgdjhsdfs
        console.log('dsSFJSGDJHsdfs'.toLocaleUpperCase() )//大写 DSSFJSGDJHSDFS
        

原型对象:

一.构造函数
1.工厂函数(了解) : 用于创建对象的函数
2.构造函数 : 使用new调用一个函数
构造函数作用与工厂函数一致，都是用来创建对象的。但是代码更加简洁。
3.构造函数new工作原理
(1)创建空对象
(2)this指向这个对象
(3)对象赋值
(4)返回这个对象
4.构造函数new在使用时需要注意的地方
4.1 构造函数首字母一般大写, 为了提醒调用者不要忘记new关键字
4.2 如果在构造函数内部 手动return
return 值类型 ： 无效,还是返回new创建的对象
return 引用类型 ： 有效，会覆盖new创建的对象

 function Person(name,age,sex){
            //(1)创建空对象   {}
            //(2)this指向这个对象  this = {}
            //(3)对象赋值
            this.name = name
            this.age = age
            this.sex = sex
            //(4)返回这个对象 return this
        }

        let p1 = new Person('嘿嘿嘿',23,'男')
        console.log(p1)//{name:'嘿嘿嘿',age:23,sex:'男'}
        

二.原型函数
(1)构造函数内部方法: 浪费内存资源 2.使用全局函数解决内存浪费3.使用对象 ： 解决内存浪费 + 变量污染

//   function Person(name,age){
      //       this.name = name
      //       this.age = age
      //       this.eat = function(){
      //           console.log('eat');

      //       }
      //   }

      //   let p1 = new Person('张三',18)
      //   let p2 = new Person('李四',20)
      //   console.log( p1,p2)
      /* 思考: p1和p2都有eat方法,而是函数体相同。但是他们是同一个函数吗？
      不是同一个： 因为每一次调用构造函数， 内部都会执行一次function,就会在堆中开辟一个新的空间。虽然代码是一样的，但是地址不同。 就会导致每调用一次构造函数，多出一个函数堆空间。导致内存资源浪费
      */
      //   console.log( p1.eat == p2.eat )//false

      /* 2.使用全局函数解决内存浪费
      导致新的问题： 全局变量污染
      */
      //   let eat = function() {
      //     console.log("吃东西")
      //   }

      //   let learn = function() {
      //     console.log("学习")
      //   }

      //   function Person(name, age) {
      //     this.name = name
      //     this.age = age
      //     this.eat = eat
      //     this.learn = learn
      //   }

      //   let p1 = new Person("张三", 18)
      //   let p2 = new Person("李四", 20)
      //   console.log(p1, p2)
      /* 思考题：p1的eat和p2是不是同一个
      答案：是的  因为构造函数内部并没有重新function创建一个函数，而是拷贝eat的地址赋值。 无论你调用构造函数多少次，都是拷贝eat的地址
      */
      //   console.log( p1.eat == p2.eat )//true

      /* 3.使用对象 ： 解决内存浪费 + 变量污染 */

      let obj = {
        eat: function() {
          console.log("吃东西")
        },
        learn: function() {
          console.log("学习")
        }
      }

      function Person(name, age) {
        this.name = name
        this.age = age
        this.eat = obj.eat
        this.learn = obj.learn
      }

      let p1 = new Person("张三", 18)
      let p2 = new Person("李四", 20)
      console.log(p1, p2)

三.原型对象
** 原型继承 :把父对象 作为子对象构造函数的原型
1.原型对象是什么? : 任何函数在声明的时候，系统会自动帮你创建一个对象，称之为原型对象
2.原型对象作用? : 解决 内存浪费 + 变量污染
3.原型对象相关三个属性 : 描述 构造函数、原型对象、实例对象三者关系
(1)prototype : 属于构造函数, 指向原型对象
(2)proto : 属于实例对象,指向原型对象, proto : 属于实例对象的,指向原型对象
注意： 这个属性不是web标准，很多浏览器不会显示的。 这个属性在开发中不能使用，只能用于学习研究
(3) constructor : 属于原型对象，指向构造函数
**

 /* 
        1.原型对象是什么? :  任何函数在声明的时候，系统会自动帮你创建一个对象，称之为原型对象
        2.原型对象作用? : 解决  内存浪费 + 变量污染
        3.原型对象相关三个属性
        */

      //构造函数
      function Person(name, age) {
        this.name = name
        this.age = age
      }

      //原型对象
      console.log(Person.prototype)
      Person.prototype = {
        eat: function() {
          console.log("吃东西")
        },
        learn: function() {
          console.log("学习")
        }
      }
      //实例对象 : 用new调用构造函数，返回的那个对象(new创建的那个对象)
      let p1 = new Person('张三',20)
      console.log( p1 )

      let p2 = new Person('李四',22)
      console.log( p1.eat == p2.eat )//true
      

四.获取对象所有的属性值
(1)以前 for-in 循环

         //1 以前的写法：  for-in 循环
         for(let key in person ){
             console.log( person[key] )  
         }

(2)现在:

 //2.静态方法  Object.values(对象名)
         //返回值是一个数组,会存储对象每一个属性值
         let arr = Object.values(person)
         console.log(arr)

面向对象的三大特征

面向对象三大特征: 封装 、 继承 、 多态
1.封装 : 把代码放入对象的方法中
2.继承 : 一个对象 拥有 另一个对象 所有的成员
3.多态 : 一个对象 在不同情况下的不同状态
js语言基本不涉及多态