面向过程
理解：亲力亲为
优点：性能高
面相对象
理解：把一个个东西当作对象来使用（对象，往往都是被人封装好的代码）
优点：好维护、复用、拓展
缺点：性能稍低
面向对象和面向过程都是一种思维
类
类 （构造函数） 模板
对象 具体的事物
// 构造函数
function Student(name,age){
this.name = name;
this.age = age
}
var xzp = new Student('谢志鹏',18)
// 类 其实就是构造函数的语法糖
class Ter{
constructor(name,age){
this.name = name;
this.age = age
}
}
var mly = new Ter('玛利亚',38);
console.log(xzp);
console.log(mly);
继承super
class Jun{
constructor(){
this.money = 100;
}
poxie(){
console.log('穿破鞋')
}
}
class Lang extends Jun{
constructor(){
super()
}
}
var l = new Lang()
l.poxie()
var j = new Jun();
console.log(j.money);
j.poxie()
注意事项
- 每一个class的时候都要注意 都应该拥有一个constructor
- 在继承父类的时候，constructor里面第一排就写上super()
- 在使用类里面的公用方法或者是属性的时候，前面一定要带this.
- 类没有预解析，不会有提升
能够直接插入文本
// div.insertAdjacentHTML(position,txt)
// xxxxxbegin 前面
// beforebegin 外面的前面
// afterbegin 里面的前面
// xxxxxend 后面
// beforeend 里面后面
// afterend 外面后面
显示位置：
beforebegin<div>afterbegin元素beforeend</div>afterend
div.insertAdjacentHTML('beforebegin',p)
静态和实例成员
// 模拟Date构造函数的基本内容
function Date(){
// 实例成员
this.getFullYear = function(){
console.log(1)
}
this.getMonth = function(){
console.log(2)
}
}
// 静态成员
Date.now = function(){
console.log(3)
}
Date()
let d = new Date()
console.log(d.getFullYear());
console.log(Date.now());
原型
凡事有构造函数的地方，就默认自动生成一个原型对象
function Student(name){
this.name = name;
// this.gf = function(){
// // .......
// }
}
Student.prototype.smoking = function(){
console.log('走，莫西莫西')
}
Student.prototype.gf = function(){
console.log('我绿了')
}
let kt = new Student('康涛');
let xzp = new Student('谢志鹏');
kt.smoking()
xzp.smoking()
原形链
就近原则，原形链的图
__proto__
浏览器帮我们写好的一个非标准的方法
原形链的查找规则
就是先从自己开始找，自己没有的再找爸爸要，爸爸没有的再找爷爷要，一级一级往上找的规则就是原形链的查找规则
call
1. 改变this的指向
2. 传递参数
3. 借用函数
构造函数的继承
继承属性
// 1. 父构造函数
function Father(uname, age) {
// this 指向父构造函数的对象实例
this.uname = uname;
this.age = age;
}
// 2 .子构造函数
function Son(uname, age, score) {
// this 指向子构造函数的对象实例
Father.call(this, uname, age);
this.score = score;
}
var son = new Son('刘德华', 18, 100);
console.log(son);
类其实就是构造函数，就是一种语法糖
循环
forEach、some、filter、map、every
some 循环数组，只要有一个满足，就返回布尔值
every 循环数组，每一个都满足，就返回布尔值
filter 循环数组，收集满足条件的，返回一个新数组
map 循环数组（数组的加工厂），给数组中的每一项数据进行对应的处理，返回一个新数组
去除字符串两侧的空格
str.trim()
一般都用于获取表单元素里的内容
input.value.trim()或者用正则表达式
数据劫持
Object.definedProperty(目的对象,属性,{
value 值
writable 是否可以被修改,false
enumerable 是否可以被遍历,false
configurable 是否可以被操作,false
set(){}
get(){}
})
默认都是false，但是有一个条件，就是这个属性必须是通过definedProperty创建出来的新属性才具备
借调的几种方式
call、apply、bind
语法：
call
Array.prototype.push.call(调用者,参数,参数2,...)
被借用的方法.call(调用者,参数,参数2,...)
-----------------------------------------
apply
Array.prototype.push.apply(调用者,[参数,参数2,...])
被借用的方法.apply(调用者,[参数,参数2,...])
前面两者都是借用方法使用，但是自己没有这个方法
-----------------------------------------
bind
let fn = Array.prototype.push.bind(调用者,参数1,参数2,参数3,...)
fn()
let fn = 被借用的方法.bind(调用者,参数1,参数2,参数3)
fn()
上面用bind的方法借调的这个方法，只是把别人的方法借用过来，并且复制一份，自己随时可以调用（这里只是复制，没有调用）
严格模式
use strict 之后的所有代码就比较严格
1. 变量必须先声明再使用 let 、const
2. 新增保留字
书写的位置
1. 在所有的 js 的script标签的第一行 写入
2. 在函数内部写入
**
类似于作用域
**
几个基本变化
1. 变量必须先声明再使用
2. 不能删除已经声明好的变量
3. 全局调用的函数里面this 指向 undefined
4. 构造函数必须用new才能调用
5. 函数参数不能有重复变量
6. 函数不能在块级作用域中
高阶函数
===回调函数
把一个函数当作一个参数传递到另一个函数中去执行。
定时器、some、forEach
闭包
概念：有权访问另一个作用域的变量 、跨作用于访问变量
作用：延伸了变量的作用范围
递归
自己调用自己 递归
防止死循环
深浅拷贝
Object.assign(新对象，老对象) 只能够做浅拷贝
var obj = {
name:'yj',
age:19,
arr:[1，2，3，4],
obj2:{
name:'lang'
}
}
为什么不能做深拷贝呢？
所有的复杂类型数据，都存储在堆中，那么会有一个变量名存储在栈。
如果要进行复杂类型的复制，会出现一个问题！只复制了栈中的地址而不是复制了复杂数据类型的真实数据
深拷贝：
直接复制简单数据类型，发现如果是数组或者对象。创建一个新的数组或者对象，然后再把值依次复制进去
简单的深拷贝（工作）
var obj = {
name:'yj',
age:19,
arr:[1，2，3，4],
obj2:{
name:'lang'
}
}
简单数据类型
var obj = '{name:"yj",age:"19",arr:"[1,2,3,4]"}'
var obj2 = obj
// 利用了简单数据类型可以直接复制，字符串转对象和 对象转字符串的方法 可以很快的实现深拷贝
var obj2 = JSON.parse(JSON.stringify(obj));
obj2.obj2.name = '骚浪';
console.log(obj,obj2)
正则表达式
匹配字符串中的内容
正则表达式的两种声明方式
var reg = new RegExp('\u4e00-\u9fa5');
var reg2 = /^[\u4e00-\u9fa5]/;
以及最基本的使用方式
// 测试是否是中文 test
正则表达式.text(需要被测试的内容) 如果存在中文，返回true 如果不存在，返回false
console.log(reg2.test('9999'));
边界类
包含a /a/
以a开头 /^a/
以a结尾 /a$/
精确匹配a /^a$/
字符类
[] 包含、限定 [ab]
[^] 不包含、取反 [^a]
- 范围 [a-z]
连接 zA a-zA-Z0-9
量词类
* 相当于 >=0
+ 相当于 >=1
? 相当于 0||1
{} 自己定义个数
{n} ==n
{n,} >=n
{,m} <=m
{n,m} >=n && <=m
优先级
() 把里面的内容看做一个整体
例如：
/abc{3}/ 重复3次c
/(abc){3}/ 重复3次abc 把括号内的abc看做一个整体来重复
预定义类
\d 只匹配数字
\D 是\d取反的意思
\w 只匹配字母数字下划线
\W 是\w取反的意思
\s 只匹配空格、换行
\S 是\s取反的意思
修饰符
g 全局
i 不区分大小写
gi
一般和replace替换一起使用
replace？有什么问题？ 每次执行只能替换一次
es6
他是一个集合，2015年后的所有es版本都统称es6
let
作用域范围是块级
先声明再使用
暂时性死区 一个块级内，声明的let变量，只在当前作用域生效，而且外面的变量无法影响到里面
const
-
块级作用域
-
声明时必须有初始值
const a = 1; -
const声明的变量是一个常量，是一个不可以更改的（不能更改地址）
const obj = {} 这个obj就是一个常量，我们不能够直接替换这个对象 obj.name = '1'
解构赋值
数组解构
把数据和对象中的一些数据，提取出来，用一个个的变量保存
let arr = [1,2,3,4,5]; 提取出来的时候，就想函数的形参/实参
let [a,b,c,d] = arr
a 1
b 2
c 3
d 4
e 5
f undefined
对象解构
let obj = {
name:'yj',
age:'19'
}
平常使用
obj.name
obj.age
解构
let {name,age} = obj;
解构使用
name
age
如果对象里面的属性很复杂
let objShopDateSeller = {
objShopDateSeller_a:{},
objShopDateSeller_b:[]
}
let {objShopDateSeller_a:a,objShopDateSeller_b:b} = objShopDateSeller;
objShopDateSeller_a和objShopDateSeller_b 使用
使用别名之后，直接就可以使用：后面的别名
a和b
箭头函数
function go(name){
return name
}
// 普通函数转箭头函数
let go = ()=>{return name}
// 规则
// 变量来保存函数
// let go2 =
// () 放的形式参数，什么时候可以省略() --- 形式参数只有一个的时候
// {} 放函数体,什么时候可以省略{}--- 函数体只有一句话的时候（并且可以帮助我们默认返回return）
// 如果有return，并且默认一句话，那么可以省略return 和{}
// ()=>{}
let go3 = name => name
// 调用方式
go3('yj')
箭头函数没有this 。如果在箭头函数里面使用了this。这个this属于外面
dom操作是不能用箭头函数的，因为dom操作经常要控制当前元素
剩余参数
获取剩余的参数
let sum = (a,...pppp)=>{
// console.log(a)
console.log(pppp);
}
// 剩余参数要比argments更加强大。并且剩余参数是真实的真数组，可以调用任何数组的方法
sum(1,2,3,4,5,6,7,8,9,0)
拓展运算符
能够把数组中的每一项，以逗号形式分隔开
function sum(a,b,c,d){
return a+b+c+d
}
// 以前的写法
// var a = 1;
// var b = 2;
// var c = 3;
// var d = 4;
var arr = [1,2,3,4];
let a = arr[0];
let b = arr[1];
let c = arr[2];
let d = arr[3];
console.log(sum(a,b,c,d));
// 拓展运算符的写法
// ...arr // 1,2,3,4
console.log(sum(...arr));
let arr1 = [1,2,3];
let arr2 = [4,5,6];
...arr1 //1,2,3
...arr2 //4,5,6
[1,2,3,4,5,6]
[...arr1,...arr2] //1,2,34,5,6
...伪数组 , , ,
再用一个[] 包裹
[...arr]
Array.from()
能够把伪数组转换为真数组
let 真数组 = Array.from(伪数组)
let 真数组 = Array.from(伪数组,v=>v+1)
find
遍历数组，找到匹配项 返回数组值
let item = arr.find(函数)
findIndex
遍历数组，找到匹配项 返回索引号
let index = arr.findIndex(函数)
函数中，只要匹配了就会返回 返回索引号
incluldes
遍历数组，找到匹配项 返回布尔值
let boolean = arr.includes(内容)
模版字符串
调用函数
使用变量
保存html格式
使用表达式
字符串新方法
startsWith
检测字符串是否以**开头
str.stratsWith('内容') 返回布尔值
endsWith
检测字符串是否以**结尾
str.endsWith('内容') 返回布尔值
repeat
将字符串重复多少次
str.repeat(n) 返回重复后的字符串
新的数据结构----类似于数据 但是他没有重复的项
新增 add
删除 delete
检测是否存在 has
清空 clear
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
