面向对象and正则

1.面向对象

面向过程：POP：分析解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用时再一个一个的依次调用。 Process-oriented programming

面向对象：oop：事物分解成一个个对象，然后由对象之间分工合作 object Oriented Programming

特性：封装性，继承性，多态性

对象：js中一组无序的相关属性和方法的集合，所有事物都是对象

对象由属性和方法组成。

属性：事物的特征，常用名词

方法：事物的行为，常用动词

类：es6新增的，class关键字声明一个类，通过类来实例化对象。

类抽象了对象的公共部分，泛指的某一大类。

1.1 创建类

class Star {
  constructor(uname){
    this.uname = uname;
  }
  sing(song){
    console.log(this.uname + song);
  }
}
var yy = new Star('杨洋');
yy.sing('安心的温柔');

1.2 继承

class Father{
  constructor(x,y){
   this.x = x;
   this.y = y;
  }
  money(){
    console.log('100');
  }
  sum(){
    console.log(this.x + this.y);
  }
}

class Sum extends Father {
  constructor(x,y){
    // 先继承父类，再使用子类的
    super(x,y);// 调用了父类的构造函数
    this.x = x;
    this.y = y;
  }
  subtract(){
    console.log(this.x - this.y);
  }
}
var son new Son(1,2);
son.sum();

注意点：1.es6中没有变量提升，必须先定义再使用

2.类里面的共有的属性和方法一定要加this使用

3.this的指向问题

constructor：this -- 创建的实例对象

方法： this -- 谁调用指向谁

2.构造函数和原型

• 首字母要大写
• 使用new关键字创建对象
• 存在内存的浪费问题

function Star(uname,age){
  this.uname = uname;
  this.age = age;
  this.sing = function (){
    console.log('我会唱歌');
  }
}
var yy = new Star('杨洋');

// 实例成员：构造函数内部通过this添加的成员 只能通过实例化对象访问
//this.uname = uname;
// 不能通过构造函数来访问实例成员
console.log(yy.uname);
// 静态成员：在构造函数本身上添加的成员 
Star.sex = '男';
// 静态函数只能通过构造函数访问
console.log(Star.sex);

构造函数原型prototype:每一个构造函数都有一个prototype这个对象

可以把一些不变的方法直接定义到prototype对象上，对象的实例化方法都可以共享。

function Star(uname,age){
  this.uname = uname;
  this.age = age;
}
// 一般情况下，我们公共的属性定义构造函数里面，公共的方法放到原型上。
/*Star.prototype.sing = function(){
  console.log('我会唱歌');
}*/
Star.prototype = {
  // 指回原来的构造函数
  constructor: Star,
  sing:function(){
    console.log('我会唱歌');
  },
  movie:function(){
    console.log('我会演电影');
  }
}
var yy = new Star('杨洋');

对象原型 proto:构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有proto原型的存在。

因为proto的存在，就会去构造函数的原型上查找，

proto对象原型和原型对象prototype是等价的。

proto和构造函数的原型对象prototype里面都有一个constructor属性-- 指向构造函数本身。

原型链：

• 只有构造函数，就有proto指向原型对象。
• 构造函数的原型对象的 proto指向Object的prototype
• Objec的proto指向 null.

this指向：

• 构造函数中的this指向 --- 对象实例
• 构造函数的原型对象中的函数中this指向 --- 对象实例

通过原型对象可以扩展内置对象：

Array.prototype.sum = function(){
  var sum = 0;
  for(var i=0;i

1.4 继承

call ：可以改变this指向 可以调用函数

// 借用父构造函数继承属性
function Father(uname,age){
  this.uname = uname;
  thi.age = age;
}
// 借用构造函数实现继承不能继承方法
Father.prototype.money = function(){
  console.log('100000');
}
function Son(uname,age,score){
  Father.call(this,uname,age);
  this.score = score;
}

var son = new Son('慕寒',18,100);
console.log(son);

// 借用原型对象继承方法
function Father(uname,age){
  this.uname = uname;
  thi.age = age;
}
// 借用构造函数实现继承不能继承方法
Father.prototype.money = function(){
  console.log('100000');
}
function Son(uname,age,score){
  Father.call(this,uname,age);
  this.score = score;
}
// 修改了父原型对象 -  修改子原型对象 父的也会修改 
// Son.prototype = Father.prototye;

// 如果利用对象的方式修改了原型对象，不忘用constructor指回原来的构造函数
Son.prototype = new Father();
Son.prototype.constructor = Son;
Son.prototype.exam = function(){
  console.log('孩子要考试')
}

var son = new Son('慕寒',18,100);
console.log(son);

1.5 es5新增的方法

数组方法：

//forEach 迭代数组  遍历数组
// map 
var arr = [1,4,5,6];
var sum = 0;
arr.forEach(function(value,index,array){
  console.log('每一个数组元素：',value);
  console.log('每一个数组索引号：',index);
  console.log('数组元素本身：',array);
  sum += value;
});

// filter 筛选数组 返回一个新数组  返回所有满足条件的元素
var arr = [12,55,67];
var newArr = arr.filter(function(value,index,array){
  return value >= 20;
});
console.log(newArr);

// some 返回值是布尔值 查找数组中是否有满足条件的元素存在 如果查找到第一个满足条件的元素就终止循环。
// every
var arr = [13,58,56,60];
var flag = arr.some(function(value,index,array){
  return value > 20;
});
console.log(flag);

字符串方法

// trim 去掉字符串两端的空格 返回一个新的字符串
var str  = '  andy  ';
var str1 = str.trim();

对象方法

// Object.keys(obj); 获取对象自身的所有属性 返回由属性名组成的数组
var obj = {
  id:1,
  pname:'苹果',
  price: 4.55
};
var arr = Object.keys(obj);
console.log(arr); // ["id","pname","price"];

// Object.defineProperty 定义对象的新属性或者修改原来的属性
// 参数：obj, prop[属性],descriptor[描述]

// 添加一条属性 num:1000
Object.defineProperty(obj,'num',{
  value:1000
});

// 修改 价格为5 
Object.defineProperty（obj,'price',{
  value:5
});

// 限定id不能被重写
Object.defineProperty(obj,'id',{
  // 值为false 不允许修改 默认值是false
  writable: false,
  // 是否可以枚举 
  enumrable:false,
  // 是否可以被删除或重新设置
  configurable: false
}) 

3. 函数进阶

函数的定义和调用

• 函数声明的方式 命名函数

• 函数表达式 匿名函数

• new Function 参数是字符串的格式

  // var f = new Function('console.log(123)');
  var f = new Function（'a','b','console.log(a+b)');
  f(1,2);
  

• 所有函数都是Function的实例 函数也是对象

函数的调用方式：

• 普通函数 函数名() this ---> window
• 对象的方法 对象.方法(); this ---> 指向调用者
• 构造函数 new this ---> 指向创建出来的实例
• 原型对象的this ---> 指向创建出来的实例
• 绑定事件的函数 触发相应事件调用 this ---> 指向触发事件的对象
• 定时器函数 定时器每个一定的调用 this ---> window
• 立即函数 自动调用 (function () {})() this ---> window

改变函数内部的this指向：

• call: fn.call(this,can1,can2) 继承

• apply：fn.apply(this,[can1,can2]); 利用apply借助数学内置对象求最大值最小值 数组

  var arr = [1,2,3,4,56,78];
  var max = Math.max.apply(null,arr);
  var min = Math.min.apply(null,arr);
  

• bind fn.bind(this,can1,can2) 返回原函数的拷贝 不会调用原函数

不需要立即调用，但又需要改变this指向

var o = {
  name: 'andy'
};
function fn(){
  console.log(this);
}
var f = fn.bind(o); 

this

严格模式

(function(){
  // 开启严格模式
  'use strict';
})

// 在严格模式，全局作用域 函数的this指向 undefined
// 严格模式，如果构造函数不加new创建 this指向 undefined
// 定时器中的this --- window
// 事件，对象还是指向调用者

高阶函数

对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出

jquery中动画执行完毕后调用的函数就是 高阶函数

闭包

变量作用域：

闭包：有权访问另一个函数作用域中变量的函数

作用：延伸了变量的作用范围

function fn(){
  var num = 10;
  return function() {
    console.log(num);
  }
}
fn();  // num = 10;

for(var i =0；i

递归

递归：函数内部自己调用自己

var num = 1;
function fn(){
  console.log('打印6句话');
  if(num == 6){
    return;
  }
  num++;
  fn();
}

// 递归求阶乘
function fn(n){
  if(n == 1){
    return 1;
  }
  return n * fn(n-1);
  
}
fn();

// 斐波那契数列的第n项
// 1 1 2 3 5 8 13 21
function fb(n){
  if(n === 1 || n === 2){
    return 1;
  }
  return fb(n-1) + fb(n-2);
}

// 函数递归完成深拷贝
function deepCopy(newObj,oldObj){
  for(var k in oldObj){
    // 判断属性值是哪种数据类型
    var item = oldObj[k];
    // 是否为数组
    if(item instanceof Array){
      newObj[k] = [];
      deepCopy(newObj[k],item);
    }else if(item instanceof Object){
      //是否为对象
      newObj[k] = {};
      deepCopy(newObj[k],item);
    }else {
       // 简单数据类型
      newObj[k] = item;
    }
  }
}

4.正则表达式

正则表达式：匹配字符串中字符组合的模式 对象形式存在

特点：1.灵活性，逻辑性和功能性非常强

2.可以迅速地用极简单的方式达到字符串的复杂控制

3.对于刚接触的人来说，比较晦涩难懂

// 创建正则表达式
// 利用 RegExp对象
var reg = new RegExp(/123/);
// 字面量
var reg = /123/;

//检测是否符合正则表达式规范
reg.test(123);

元字符：

边界符：

边界符	演示	说明
^	/^abc/	必须写abc开头
$	/abc$/	必须以abc结尾
()	/(abc){3}/	让abc重复3次

字符类：

字符流	演示	说明
[]	/[abc]/	只有包含a或者b或者c都返回true
[-]	[a-z]	26个大写英文字母任何一个
[-]	[^A-Za-z$]	英文字母中任意一个

量词符：设定某个模式出现的次数

量词符	演示	说明
*	/^a*$/	可以出现0次和n次
+	/^a+$/	可以出现1次和n+1次
？	/^a?$/	可以出现0次或1次
{3}	/^a{3}$/	重复3次
{3,}	/^a{3,}$/	重复3次及以上
{3,16}	/^a{3,16}$/	重复3-16次

预定义类：

预定义类	说明
\d	匹配0-9之前的数字 类似[0-9]
\D	匹配所有0-9以外的字符 类似[^0-9]
\w	匹配任意字母数字下划线 [A-Za-z0-9_]
\W	除字母数字下划线以外的字符 [^A-Za-z0-9_]
\s	匹配空格(换行符，制表符，空格符) [\t\r\n\v\f]
\S	匹配非空格字符

正则表达式的替换：replace

var str = 'andyred';
str.replace('andy','bady');
str.replace('/andy/','bady');
// 过滤敏感词
// 只能替换一个
str.replace('/激情/','**');
// g 全局 i 忽略大小写
str.replace('/激情/g','**');

5.es6

ES：EcmaScript 脚本语言的标准化规范

let const

let : 具有块级作用域 --- {} 产生的作用域

可以防止循环变量变成全局变量

不存在变量提升，必须先声明再使用

存在暂时性死区，变量会和块级作用域绑定，不会向上级作用域中查找

let a = 10;
{
  let b = 20;
}
console.log(b); // 访问不到b,报错

const:声明常量 值(内存地址)不能变化的量

具有块级作用域

声明时必须赋初始值，否则会报错

常量赋值后，值不能修改。 -- 基本数据

常量赋值后，不能改变内存地址 --- 复杂数据类型

存储的数据不需要变化，尽量使用const定义变量

const PI = 3.14;
const arr = [100,200];
arr[0] = 'a'; // 可以改
const arr = ['a','b']; // 不能更改，报错

解构赋值

数组解构：一一对应

let [a,b,c] = [1,2,3];
console.log(b);

对象的解构：

let person = {
  name: '慕寒',
  age:30,
  sex: '男'
};
let {name:myName,age,sex} = person;
console.log(myName);

箭头函数

如果函数体中一句代码，可以省略{}

如果形参只有一个，()可以省略

箭头函数不绑定this,没有this,箭头函数定义在哪，this就指向哪

let arr = () = >{
  console.log(123);
}

res = (n1,n2) =>  n1 + n2;

剩余参数

将一个不定量的参数放在一个数组中

const sum = (...args) => {
  let total = 0;
  args.forEach(item => total += item);
  return total;
}

// 匹配结构赋值使用
let arr1 = ['张三','李四','王五'];
let [s1,...s2] = arr1;

扩展运算符

let arr = [1,2,3];
// ...arr;
console.log(...arr);  // 1,2,3
// 用于合并数组
let arr1 = [1,2,3];
let arr2 = [3,4,5];
// 方法1：
let arr3 = [...arr1,...arr2];
// 方法2:
arr1.push(...arr2);

// 可以将伪数组转换为真正的数组
let divs = document.querySeletor('div');
var arr = [...divs];
console.log(arr);
arr.push('a');

// Array.from() 将伪数组转换为真数组
var arr Array.from(divs,item => item * 2);

// find 查找第一个满足条件的值
let arr =  [{
  id:1,
  name: '慕寒'
},{
  id:2,
  name: 'Vk'
}];
let res = arr.find(item => item.id == 2);
console.log(res);

// findIndex 找出第一个符合条件的索引
var arr = [10,20,50];
let res = arr.findIndex(item => item > 15);
console.log(res); // 1

// includes 某个数组是否包含给定的值 返回布尔值
let arr = ['a','b','c'];
arr.includes('a'); // true;
arr.includes('w'); // false

// 模板字符串
// 可以解析变量
// 可以换行
// 可以调用函数 直接显示函数的返回值
let name = '慕寒';
let sayHello = `hello,my name is ${name}`;
console.log(sayHello);
let res = {
  name: '慕寒',
  age: 18
};
let html = `

    ${res.name}
    ${res.age}
`;

// startsWith endsWith  以什么开头 以什么结尾
let str = 'asrfe';
console.log(str.startWith('as')); // true;
console.log(str.endsWith('fe'));

// repeat 将原字符重复
'x'.repeat(3); // 将x重复3次

Set数据结构

不会存储重复的值，其他和数组一样

const s1 = new Set(['a','b','c']);
console.log(s1.size); // 3
s1.add('d').add('e'); // 添加
s1.delete('a'); // 删除 
s1.has('a'); // 判断某个值是否为s1的成员
s1.clear(); // 清空

// 遍历
s1.forEach(value => {
  console.log(value)
});s
          
// 数组去重
let  s2 = new Set(['a','b','a','c']);
console.log(s2); // 3
let arr = ...s2;