有关es5|es6小记

Posted on | Updated on | In , | comments: | Visitors:
Words count in article: 7.1k | Reading time ≈ 29

正则表达式

应用对象：文本

使用正则表达式可以指定想要匹配的字符串规则，然后通过这个规则来匹配、查找、替换或切割那些符合指定规则的文本。

正则表达式的==标识符==： / /

PS：

“ “ 是 字符串str 的标识符、[ ] 是 数组arr 的标识符、{ } 是 对象obj 的标识符。

match 获取匹配的项目 返回数组

search 字符串搜索

replace 替换

正则表达式的创建

###1.构造函数方式：

1
var reg=new RegExp("a");

2.字面量方式：

1
var reg=/a/;

正则方法

1.==test== 方法用于检测一个字符串是否匹配某个模式. 返回true和false；

2.==exec( )== 找到了返回数组，找不到返回null；

量词

​ 1.贪婪(贪心) 如 * 字符，贪婪量词会首先匹配整个字符串，尝试匹配时，它会选定尽可能多的内容，如果 失败则回退一个字符，然后再次尝试回退的过程就叫做回溯，它会每次回退一个字符，直到找到匹配的内容或者没有字符可以回退。相比下面两种贪婪量词对资源的消耗是最大的，

​ 2.懒惰(勉强) 如 ? 字符，懒惰量词使用另一种方式匹配，它从目标的起始位置开始尝试匹配，每次检查一个字符，并寻找它要匹配的内容，如此循环直到字符结尾处。

​ 3.占有 如 + 字符，占有量词会覆盖整个目标字符串，然后尝试寻找匹配内容 ，但它只尝试一次，不会回溯，就好比先抓一把石头，然后从石头中挑出黄金

​

1.” * “ 匹配 0个或多个， 相当于 {0, }

1
2
3
4
5
var str="aaaaaaaa";
var reg=/a*/;
var res=reg.exec(str);
console.log(res);	
   输出结果："aaaaaaaa"

2.” + “ 匹配 1次或 更多(至少一个)，相当于 {1, }

1
2
3
4
5
var str="aaabbsaassb";
var reg=/a+/;
var res=reg.exec(str);
console.log(res);	
   输出结果："aaa"

3.” ? “ 匹配0个或者1个， 相当于{0, 1}

1
2
3
4
5
var str="aaabbsaassb";
var reg=/a?/;
var res=reg.exec(str);
console.log(res);	
   输出结果："a"

4.{n}：匹配前一个字符正好出现n次

1
2
3
4
5
var str="aaabbsaassb";
var reg=/a{2}/;
var res=reg.exec(str);
console.log(res);	
   输出结果："aa"

5.{n,}：匹配前一个字符出现n次以上，没有限制

1
2
3
4
5
var str="aaabbsaassb";
var reg=/a{2,}/;
var res=reg.exec(str);
console.log(res);
   输出结果："aaa"

6.{n,m}：匹配一个字符出现n到m次

1
2
3
4
5
var str = "aaaaaaaaabbsaassb";
var reg = /a{1,5}/;
var res = reg.exec(str);
console.log(res);
   输出结果："aaaaa"

元字符

​ 【小写】

​ \d [0-9] 数字

​ \w [a-z0-9_] 数字，字母，下划线(之间没有空格)

​ \s 空白字符

​ \b 匹配单词边界

​ 【大写】

​ \D [^0-9] 非数字

​ \W [^a-z0-9_ ] 非数字，字母，下划线

​ \S 非空白字符

​ . 表示任意字符

修饰符

​ i 忽略大小写

​ g 全局匹配

表达式

[abc] 查找方括号之间的任何字符 等同于 a|b|c

[0-9] 查找任何从 0 至 9 的数字

[a-z] 查找任何从小写 a 到小写 z 的字符

[A-Z] 查找任何从大写 A 到大写 Z 的字符

[A-z] 查找任何从大写 A 到小写 z 的字符

ES5

严格模式

进入严格模式 ：”use strict”

1
2
3
1.针对整个脚本文件：将 "use strict" 放在脚本文件的第一行，则整个脚本文件都将以“严格模式”运行，
如果这行语句不在第一行，则无效，整个脚本以“正常模式”运行。
2.针对单个函数：将 "use strict" 放在函数的第一行，则整个函数以“严格模式”运行。

严格模式下的注意事项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
1.全局变量声明时，必须加关键字(var)
正常模式：a = 10;    console.log(a)    //10
严格模式：a = 10;    console.log(a)    //a is not defined

2.this无法指向全局对象
正常模式：function fn(){ console.log(this) }        //window
严格模式：function fn(){ console.log(this) }        //undefined

3.函数内不允许出现重名参数
正常模式：function fn( a,b,b ){ console.log(a,b) }
fn(1,2,3)        //1,3
严格模式：function fn( a,b,b ){ }
//报错：Duplicate parameter name not allowed in this context    在此上下文中不允许出现重复的参数名

4.arguments对象
4.1 arguments对象不允许被动态改变
正常模式：
function fn(a){
    a=20;
    console.log(a);                //20
    console.log(arguments[0]);     //20
}
fn(10);

严格模式：
function fn(a){
    a=20;
    console.log(a);                //20
    console.log(arguments[0]);     //10
}
fn(10);

5、不允许使用arguments.callee


6.新增的保留字：implements，interface，let，package，private，protected，public，static，yield

ES5新增数组方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
索引方法：indexOf() 和 lastIndexOf();

1、indexOf(data,start)：接收两个参数：参数1表示 要查找的数组元素  参数2表示要从什么位置开始查找。（从左到右）
2、lastIndexOf()			  （从右到左）

迭代方法：forEach()、map()、filter()、some()、every();
1、forEach()： 循环对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值

2、map(callback)： 会遍历当前数组，然后调用参数中的方法，返回当前方法的返回值

3、filter() ：遍历和过滤 

4、some()： 方法用于检测数组中的元素是否满足指定条件（函数提供）。如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。否则返回false

5、every()： 用于检测数组所有元素是否都符合指定条件（通过函数提供）。如果有一个不符合就返回false

归并方法：reduce()、reduceRight()；
1、reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。//参数1表示 数组第一项元素 参数2表示数组剩余的元素  参数3表示数组剩余的下标


2、reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。//参数1表示 数组最后一项元素 参数2表示数组剩余的元素  参数3表示数组剩余的下标

字符串方法

==trim( )== 去掉字符串前后空格；

==trimLeft( )== 去掉字符串前面空格

==trimRight( )== 去掉字符串后面空格

反序列化

1
2
3
4
5
JSON.parse(str); 字符串---->>json
用于从一个字符串中解析出json对象
var str = '{"name" : "张三", "sex" : "男"}';
console.log(JSON.parse(str));//{name: "张三", sex: "男"} typeof object
注意点：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。

序列化

1
2
3
4
5
6
7
JSON.stringify(); obj(json)------>>字符串
用于从一个对象解析出字符串
var obj={
    name:"张三",
    sex:"男",
}
console.log(JSON.stringify(obj))//{"name":"张三","sex":"男"} typeof string

日期对象得到当前日期的毫秒数

1
2
3
4
5
6
7
Date.now();
before:
var d = new Date();
var res = d.getTime();

now:
var s = Date.now();

ES6

ES6新增定义变量的方法

1.let

let定义的变量没有声明提升，在 { } 中有let定义变量，该区域就会变成块级作用域。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
    let b =10;
    console.log(b)  //输出10
}
console.log(b) // a is not defined

PS:在一个大括号中用let声明的变量在外部不可访问了，每个大括号都是独立的作用域!!!
    
Before:
for(var i = 0 ; i < aLi.length ; i ++){	//事件在循环里面，先执行循环，循环彻底结束后再执行事件。
    aLi[i].onclick = function(){
        //console.log(i) 这是输出的i永远都是aLi.length
        this.style.color="red";
    }
}

Now:
for(let i = 0 ; i < aLi.length ; i ++){	//执行一次循环，就执行一次事件。
    aLi[i].onclick = function(){
        aLi[i].style.color="red";
    }
}
有了let声明我们在函数外部就无法访问到 i ，i作为下标只存在于for循环中， 所以，这个时候每个i都是独立的；我们在点击的时候可以轻易的获取当前元素的下标.

关于暂时性死区：

1
2
3
4
5
6
var a = 10;
    if(true){
    console.log(a);//ReferenceError(引用错误): a is not defined;
    let a = 20;
}
PS:ES6规定在某个区块中， 一旦用let或const声明一个变量，那么这个区块就变成块级作用域，用let 或者const声明的变量即为该区块绑定， 该变量不受任何变量影响。 在该变量使用let声明前不可以用。在语法上，我们叫这种情况为：暂时性死区 (temporal dead zone，简称 TDZ)

2.const

常量（不能改变的量）,赋值和覆盖都不可以改变它的值。同样在 { } 中有const定义变量，该区域就会变成块级作用域。

1
2
3
const a =20;
a=30;
console.log(a); //报错  不能重新赋值

知识了解

Unicode编码

ES6字符串扩展

###1.字符串新增方法

==repeat()==

1
2
3
var str="我永远拥护中国共产党"
var res=str.repeat(10); //复制str字串符10遍
console.log(res)

==includes()== ==startsWith()== ==endsWith()== 判定字符串中是否存在某个字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
var s = 'Hello world!';

s.startsWith('Hello') // true      以参数开头
s.endsWith('!') // true            以参数结尾
s.includes('o') // true            包括参数;


第二种方法接受第二个参数，第二个参数表示从第几位开始;
var s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

==for of==

可以用于遍历字符串：

1
2
3
4
var str= "abcd";
for(var i of str){
    console.log(i)	//输出a b c d
}

字符串模板

ES6中存在一种新的字符串， 这种字符串是 以 `` (波浪线上的那个字符 > 反引号)括起来表示的；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
拼接
befor:
变量+"<p>"+变量+"</p>"+变量
now:
`${变量}<p>${变量}</p>${变量}`

输出一个表格:
var str = `
	<table>
		<tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
    	</tr>
    </table>
`
document.write(str);

箭头函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = {    

    left : 200,    

    move : function(){         

        setTimeout( ()=>{          

            this.left = 100;      

        },1000);    

    } }

PS:箭头函数this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为这个，所以箭头函数也不能做构造函数。

解构赋值

基本

1
2
3
4
var [a,b,c] = [1,2,3];
// a = 1
// b = 2
// c = 3

可嵌套

1
2
3
4
let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

可忽略

1
2
3
let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

不完全解构

1
2
let [a = 1, b] = [];
// a = 1, b = undefined

字符串等

1
2
3
4
5
6
let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

应用：交换两个变量的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
before:
var a=10;
var b=20;
var temp;
temp = a;
a = b;
b = temp;

now:
var a = 10;
var b = 20;
console.log(a, b);

[b, a] = [10, 20];
console.log(a, b);

ES6新增的基本数据类型

==symbol== ：凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突

1
2
3
var sy1=sybol("10");
var sy2=sybol("10");
console.log(sy1==sy2);  //false

ES6新数据结构set

类似数组，但是成员的值都是唯一的，没有重复性（可用于去重）

属性

size：返回值得长度

1
2
var s=new Set(["a","b","c","d"])	
console.log(s.size)  //输出  4

方法

==add(value)== 添加一个值，返回Set结构本身

1
2
3
var s=new Set(["a","b","c","d"])
var res= s.add("我是新增的")
console.log(res)  //输出  {"a", "b", "c", "d", "我是新增的"}

==delete(value)== 删除某个值，返回布尔值

1
2
3
4
var s=new Set(["a","b","c","d"])
var res= s.delete("d")
console.log(s)	//输出  {"a", "b", "c"}
console.log(res)  //输出 true

==has(value)== 返回布尔值，表示是否是成员

1
2
3
4
var s=new Set(["a","b","c","d"])
var res= s.has("d")
console.log(s)	//输出  {"a", "b", "c","d"}
console.log(res)  //输出 true

==clear()== 清除所有成员，无返回值

1
2
3
var s=new Set(["a","b","c","d"])
var res= s.clear()
console.log(s)	//输出  Set(0) {}

面向对象

面向对象（Object Oriented，OO）是软件开发方法，一种高级的编程思想。

面向对象的特点

封装

不考虑内部实现，只考虑功能实现（全局变量会导致命名污染问题）。

继承

从已有对象上，继承出新对象（获取已存在的对象已有的属性和方法的）。

1
2
3
4
5
6
7
//简单的继承
var obj1 = {name : "张三", age : 18};
var obj2 = {};
for(var i in obj1){
	obj2[i] = obj1[i];
}
console.log(obj2);

多态

多态, 统一操作结果会不一样

1
2
3
4
5
6
7
8
9
10
11
var arr = ["a", "c", "d"];
var res = arr.toString();
console.log(res);
console.log(typeof res);
var obj = {
	name : "张三",
	age : 18
}
var res2 = obj.toString();
console.log(res2);
console.log(typeof res2);

类与对象的关系

JavaScript中的类相当于图纸，用来描述一类事物。

JavaScript中可以自定义类, 但是也提供了一个默认的类叫做Object。

1
2
3
4
5
6
7
8
9
10
function Person(name, age){		//这就是 类 相当于模板
    this.name = name;
    this.age = age;
    this.say = function(){
    console.log("hello");
    }
}
var p1 = new Person("小明", 18);	//实例化，通过类实例化出来的对象
var p2 = new Person("熊大", 20);
console.log(p1, p2);

创建对象的方式

1.通过new Object( )创建对象

1
2
3
4
5
6
7
8
9
var obj = new Object();   //创建一个空对象
obj.name = "李长波";      //设置属性
obj.age = 24;
obj.sex = "男";
obj.say = function () {     //设置方法
	console.log("我是李长波");
}
console.log(obj.name);  //使用属性
obj.say(); 				 //使用方法

2.通过字面量创建对象

1
2
3
4
5
6
7
8
9
10
var obj = {
    name: "李长波", //设置属性
    age: 24,
    sex: "男",
    say: function () {      //设置方法
        console.log("我是李长波");
	}
}
console.log(obj.name);  //使用属性
obj.say();  //使用方法

3.通过工厂函数创建对象

第一种形式

1
2
3
4
5
6
7
8
9
10
11
12
function person(name,age,sex){
	var obj=new Object();   //创建一个空对象
    	obj.name=name;  //设置属性
		obj.age=age;
		obj.sex=sex;
		obj.say=function(){     //设置方法
			console.log("我是工厂函数的第一种形式创建的");
		}
		return obj; //把对象返回给外界
}
var p1=person("李长波",24,"男");
console.log(p1);

第二种形式

1
2
3
4
5
6
7
8
9
10
11
12
13
function person(name,age,sex){
	var obj={
		name:name,
		age:age,
		sex:sex,
		say:function(){
 			console.log("我是工厂函数的第二种形式创建的");
		}
	}
	return obj;
}
var p1=person("李长波",24,"男");
console.log(p1);

函数中的this关键字

每个函数中都有一个this，根据调用方式不同，this的指向就不同。谁调用当前函数，this就是谁。

1.默认情况下直接调用的函数都是由==window==调用的：

1
2
3
4
function fn(){
    console.log(this);//window
}
fn();

2.如果函数作为对象的方法，由对象来调用函数，这个时候函数里面的this就是==对象本身==。

1
2
3
4
5
6
7
8
var obj = {
    name : "张三",
    age : 18,
    say : function(){
        console.log(this); //指的是obj对象本身
    }
}
obj.say();

构造函数

1、什么是构造函数？构造函数和工厂函数是一样的，都是专门用来创建对象的，构造函数本质上来说是工厂函数的简写。

2、构造函数和工厂函数的区别？

①构造函数的函数名称必须==首字母大写==;

②构造函数只能通过==new关键字来调用==。

1
2
3
4
5
6
7
8
9
10
11
function Person(name, age){
    this.name = name;
    this.age = age;
    this.say = function(){
    console.log("hello");
    }
}
var p1 = new Person("小明", 18);
var p2 = new Person("小花", 20);
console.log(p1, p2);
console.log(p1.say== p2.say); //false;

对比上面的工厂形式，系统为我们做了什么？
会在构造函数中自动==创建一个对象==，将自动创建的==对象赋值给this==，会在构造函数的最后自动添加==return this==；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Person(name, age, sex) {
	//var obj=new Object(); //系统自动添加
	//this=obj;     //系统自动添加
	this.name = name;
	this.age = age;
	this.sex = sex;
	this.say = function () {
		console.log("我是李长波");
	}
	//return this; //系统自动添加
}
var p1 = new Person("李长波", 24, "男");
console.log(p1);
p1.say();

构造函数优化

new出（即实例化出来）的对象都是使用的构造函数中的方法，但是存储不一样，所以会有性能问题；

在构造函数里面, 提供了一个==prototype==属性, 可以用存储一个公共的方法。存储在prototype中的方法和属性可以被对应的构造函数创建出来的所有对象共享

==查找规则==：先查找自己构造函数中，再去找prototype中的

####1.prototype

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。

这个对象的所有属性和方法，都会被构造函数的所拥有。

可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Person(name, age, sex) {
	this.name = name;
	this.age = age;
	this.sex = sex;
	
}
Person.prototype.say=function () {		//先查找自己构造函数中，再去找prototype中的
		console.log("我是李长波");
	}
var p1 = new Person("李长波", 24, "男");
var p2 = new Person("李二狗", 12, "男");
console.log(p1);
p1.say();
console.log(p2);
p2.say();
console.log(xiaohei.rg == xiaohua.rg); //true

对象的三角恋关系

  • 每个==构造函数==中都有一个默认的属性，叫做prototype。prototype属性保存着一个对象，这个对象我们称之为“==原型对象==”
  • 每个”原型对象“中都有一个默认的属性，叫做constructor。这个constructor指向当前原型对象对应的构造函数
  • 通过构造函数创建出来的对象我们称之为“实例对象”。每个实例对象都有一个默认的属性，叫做_proto_
  • __proto__指向创建它的那个构造函数的原型对象。

函数和对象

  • JavaScript中的函数是引用类型（对象类型），既然是对象，所以也是通过构造函数创建出来的， “所有函数”都是通过Function构造函数创建出来的对象

  • JavaScript中只要是”函数”，就有prototype属性。Function函数的prototype属性指向Function原型对象

  • JavaScript中只要有原型对象就有constructor属性。Function原型对象的constructor指向它对应的构造函数

  • JavaScript中万物皆对象，只要是对象就有__proto__属性。

原型链

1.先查找当前对象，当前对象有就使用当前对象的方法。

2.当前对象没有再逐层在原型链查找，最先找到那个就用那个。

3.如果找到null都没找到，就报错。

==4.Function构造函数的__proto__是Function的原型对象!!!==

原型链1

ES6定义类

从ES6开始系统提供了一个名称叫做class的关键字，这个关键字就是专门用于定义类的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Person{
    //当我们通过new创建对象的时候,系统会自动调用constructor
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    say(){
    console.log("hello");
}
}
var p1 = new Person("小明", 18);
var p2 = new Person("小红", 22);
console.log(p1, p2);
console.log(p1.say());
console.log(p1.say === p2.say);//true

OOA和OOD

OOA面向对象分析

OOD面向对象设计

构造函数和对象的关系

1
2
3
4
5
面向对象－－－－对一个对象进行编程

构造函数－－－－提供一个对象供你编程

通过构造函数，实现面向对象编程

前后端交互

服务器协议

应用程序分类

B/S：Browser（浏览器）/ Server（服务器）

C/S：Client（客户端）/ Server（服务器）

http协议：基于TCP/IP的无状态通信协议

前端（浏览器客户端）向后台（web服务器端）发送http请求获取数据

http请求报文

请求报文的组成：

==请求行==（request line）

==请求头部==（header）

空行（主要隔开数据与头部）

==请求数据==；

form的enctype属性为编码方式。常用有两种：urlencoded和form-data;

application/x-www-form-urlencoded和multipart/form-data，==默认==为application/x-www-form-urlencoded;

当action为==get==时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2…），然后把这个字串追加到url后面，用?分割，加载这个新的url。

当action为==post==时候，浏览器把form数据封装到http body中，然后发送到server。 如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话，就要用到multipart/form-data了。

当action为==post==且Content-Type类型是multipart/form-data，浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)。

http响应报文

Response Headers里的==Content-Type==指服务器告诉浏览器相应的数据，类型一般有这三种：

application/x-www-form-urlencoded：数据被编码为名称/值对。这是标准的编码格式

multipart/form-data： 数据被编码为一条消息，页上的每个控件对应消息中的一个部分

text/plain： 数据以纯文本形式(text/json/xml/html)进行编码，其中不含任何控件或格式字符

Status-Code表示服务器发回的响应状态代码；Reason-Phrase表示状态代码的文本描述。状态代码由三位数字组成，第一个数字定义了响应的类别，且有五种可能取值。

  • 1xx：指示信息–表示请求已接收，继续处理。
  • 2xx：成功–表示请求已被成功接收、理解、接受。
  • 3xx：重定向–要完成请求必须进行更进一步的操作。
  • 4xx：客户端错误–请求有语法错误或请求无法实现。
  • 5xx：服务器端错误–服务器未能实现合法的请求。

常见状态代码、状态描述的说明如下。

  • 200 OK：客户端请求成功。
  • 400 Bad Request：客户端请求有语法错误，不能被服务器所理解。
  • 401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。
  • 403 Forbidden：服务器收到请求，但是拒绝提供服务。
  • 404 Not Found：请求资源不存在，举个例子：输入了错误的URL。
  • 500 Internal Server Error：服务器发生不可预期的错误。
  • 503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常。

PHP和数据库

PHP（HyperText Preprocessor）是一种创建动态交互性站点的强有力的服务器端脚本语言。

1
2
3
4
5
6
7
<?php
 	echo "hello world";	//输出一句hello world
	$num = 20;	//声明变量，一次声明，直接使用。
	echo $num;	
?>
    
php代码一行结束必须加分号;

超级全局变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- $GLOBALS

- $_SERVER

- $_REQUEST	//常用

- $_POST	//常用

- $_GET		//常用

- $_FILES

- $_ENV

- $_COOKIE

- $_SESSION

PHP关联数组

数组

1
2
$arr = array(1,2,3,4,5)；	//获取数组长度：count()函数;
echo count($arr);  //返回数组长度 4

关联数组

1
2
3
4
5
$testarr = array(
    'name' => "zhangsan",
    'age' => 17 
);
echo $testarr['name']

JOSN返回

json_encode( )方法进行JSON格式的转码；

json_decode( )方法对JSON进行解析;

在PHP中连接数据库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
连接数据库：
mysql_connect('localhost', 'root', '');
设置编码：
    mysql_query("set charset 'utf8'");
  	mysql_query("set character set 'utf8'");
选择数据库：
    mysql_select_db('1906');

 // 查询
  $sql = "select * from shop";
  $res = mysql_query($sql);

  // $res是一个资源类型的数据,php需要把他转换成JSON返回给前端
  // 先把资源转换成php的数组，然后再转成json
  $arr = array();
  // 把资源一条一条取出来，赋值给$row，再把$row放到数组$arr里
  while ($row = mysql_fetch_assoc($res)) {
    array_push($arr, $row);
  }

  // 把$arr转换成json格式返回给前端
  echo json_encode($arr);


PS：字符串解析的结果还要再加单引号，数字不需要
    如：insert into shop (title,price) values ('$title',$price)

数据库增删改查语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
-- 查询所有数据
select * from shop
-- 查询所有的title字段
select title from shop
-- 查询Id为3的这一条数据
select * from shop where Id=3
-- 查询价格大于100的数据
select * from shop where price>100
-- 查询价格大于100而且Id大于1的数据
select * from shop where price>100 and Id>1
-- 查询价格大于100或者Id大于1的数据
select * from shop where price>100 or Id>1
-- 查询前两条数据
select * from shop limit 2
-- 跳过前两条，查询两条数据
select * from shop limit 2,2
-- 查询所有数据并以price降序排列（不写排序方式把排序方式写成ASC代表升序）
select * from shop order by price DESC
-- 查询title里含有 ‘鼠’ 字的数据
select * from shop where title like '%鼠%'
-- 插入一条数据
insert into shop (title,price) values ('优盘',99)
-- 更新一条数据
update shop set price=9 where Id=2
-- 更新多条数据
update shop set price=9,title='李二狗',num=10 where Id=2
-- 删除一条数据
delete from shop where Id=2

通信协议

TCP协议 —>> 浏览器 —> 服务器之间的交流 

1
2
连接--三次握手
断开--四次挥手

HTTP (无状态协议) –>> 基于TCP协议的一种高级协议, 用于客户端和服务器直接的通信

这种通信最大的问题在哪？

问题就在于每次收到返回的页面后，连接都断开了。

Cookie会话跟踪技术

一个网站从打开到浏览（包括这个网站的其他子页面）到最后关闭浏览器整个过程叫一个“会话”。

在一次会话从开始到结束的整个过程，全程跟踪记录客户端的状态（例如：是否登录、购物车信息、是否已下载、是否 已点赞、视频播放进度等等）。 多次请求页面，数据共享

Cookie的存取

1
2
3
4
5
6
7
8
9
10
function setCookie () {
     const username = prompt()
     // const str = 'username='+username
     // 存储一条名叫username的cookie，值是prompt输入的字符串
     document.cookie = `username=${username}`
   }
function getCookie () {
     let cookie = document.cookie
     console.log(cookie)
   }

注意：cookie是http/https协议下的技术，大部分浏览器都不支持本地file文件对cookie操作

Cookie的时效问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function setCookie () {
      const username = prompt()
      // const str = 'username='+username
      // cookie默认是会话过期，但是在存储的时候可以手动设置过期时间
      let date = new Date()
      // 把日期设置到7天以后
      date.setSeconds(date.getSeconds() + 7)
      // date.setDate(date.getDate() + 7)
      document.cookie = `username=${username};expires=${date.toUTCString()}`
    }
function getCookie () {
      let cookie = document.cookie
      console.log(cookie)
    }

cookie的特点

1
2
3
4
5
6
7
8
9
10
11
1 只能使用文本 
 
2 单条存储有大小限制  4KB    

3 数量限制   （一般浏览器，限制大概在50条左右）

4 读取有域名限制     不可跨域读取，只能由来自 写入cookie的 同一域名 的网页可进行读取。

5 时效限制     每个cookie都有时效，最短的有效期是，会话级别：就是当浏览器关闭，那么cookie立即销毁     （安全学基本理论：密码锁每次打开都需要重新输入密码，输入一次密码，以后就不再验证，就没有安全可言  )

6 路径限制   存cookie的时候可以指定路径。只允许子路径读取外层cookie，外层不能读取内层

==PS:==

cookie直接存==中文==会造成未知错误，所以一般使用==encodeURIComponent( )==进行编码，

====decodeURIComponent( )==进行解码。

封装cookie的设置，获取和删除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/** 获取cookie
   * @param key <string> 要取的cookie的名称
   * @return <string> 这条cookie的值，如果这条cookie不存在就返回undefined
   *  */
  getCookie: function (key) {
    let cookie = document.cookie
    let arr = cookie.split('; ')
    let obj = {}
    arr.forEach(item => {
      let subArr = item.split('=')
      obj[subArr[0]] = decodeURIComponent(subArr[1])
    })
    return obj[key]
  }

  /** 设置cookie
   * @param key    <string>  要存的cookie的名称
   * @param value  <string>  要存的cookie的值
   * @param [option] <object>  { expires: 7, path: '/' } 可选参数，如果需要设置过期时间或者路径就传入这个参数
   */
  setCookie: function (key, value, option) {
    let str = `${key}=${encodeURIComponent(value)}`
    if (option) {
      // 先判断option是否存在，然后再判断有没有expires属性
      if (option.expires) {
        let date = new Date()
        date.setDate(date.getDate() + option.expires)
        str += `;expires=${date.toUTCString()}`
      }
      if (option.path) {
        str += `;path=${option.path}`
      }
    }
    document.cookie = str
  }

  /** 删除cookie
   * @param key <string> 要删除的那条cookie的名称
   * @param [path][] <string> 要删除的那条cookie本来的路径，可选参数，如果是当前路径那就不用传
   */
  deleteCookie: function (key, path) {
    let date = new Date()
    // 这里只需要把日期设置成过去的日期就行了，可以减去任意数
    date.setDate(date.getDate() - 1)
    // 由于这里的目的是要把cookie删掉，所以这里的value就无所谓了，我们用空字符串就行
    let str = `${key}="";expires=${date.toUTCString()}`
    if (path) {
      str += `;path=${path}`
    }
    document.cookie = str
  }
0%