这几天电脑有点问题 ，一直在弄 ，而且论文也逼近了也在时间弄那个 ，前面node有一个大项目 ，已经做完了 ，我现在是准备把上次复习断下的继续复习一直到这个项目 ，然后就开始vue了 。
1.
首先是函数的一个进阶 ，要明白函数也是对象 ，所以是可以通过new的方法来创建实例的 。
然后是调用函数的三个方法：call可以改变this加调用 、apply可以改变this但是传的参数是数组也可以调用 、bind可以改变this传的参数也跟第一个call一样但是就是不会自己调用 。
2.
今天的主打内容
闭包首先要知道严格模式 ，use srict放在局部或者全局作用域都可以 ，然后有哪些变化 ，变量必须声明赋值啊 、this普通函数为undefined啊 、函数形参不能重名啊 、函数生命必须在顶层啊等等 、
高阶函数：就是函数里面嵌套一个函数或者return为一个函数
然后就是闭包 ，什么事闭包？
闭包就是一个能够访问函数局部变量的函数 ，两个注意点 ，一个是函数 ，一个是访问局部变量 。
还是跟以前一样传一些我第二次做有些感想的案例吧 ，就不全部传上来了 。第一个是点击li打印索引号通过闭包来做
然后是闭包算价格这个 ，看得出来还有点没有完全吃透闭包的原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 打车起步价13(3公里内), 之后每多一公里增加 5块钱. 用户输入公里数就可以计算打车价格
如果有拥堵情况,总价格多收取10块钱拥堵费 -->
<script>
function getMoney() {
let total = 13
let price = 0
return {
price : function(n) {
// console.log(total, mile);
if(n > 3) {
price = total + Math.ceil(n - 3) * 5
} else {
price = total
}
return price
},
congestionPrice : function(n,congestion) {
this.price(n)
if (congestion) {
price += 10
} else {
price = total
}
return price
}
}
}
console.log(getMoney().price(1));
console.log(getMoney().congestionPrice(1,true));
console.log(getMoney().price(4));
console.log(getMoney().congestionPrice(4, true));
</script>
</body>
</html>
3.
递归
递归就是在函数内部在调用自身 ，类似于循环 ，通过return来结束 。递归有几个经典案例我觉得可以看一下 ，这次做还是熟练了好多
第一个求阶乘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n
function getResult(n) {
if (n == 1) {
return 1
}
return n * getResult(n - 1)
}
console.log(getResult(3));
</script>
</body>
</html>
然后斐波拉起亚数列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/* 利用递归函数求斐波那契数列(兔子序列) 1 、1 、2 、3 、5 、8 、13 、21...
// 用户输入一个数字 n 就可以求出 这个数字对应的兔子序列值
// 我们只需要知道用户输入的n 的前面两项(n-1 n-2)就可以计算出n 对应的序列值 */
function getResult(n) {
if (n == 1 || n == 2) {
return 1
}
return getResult(n - 1) + getResult(n - 2)
}
console.log(getResult(5));
</script>
</body>
</html>
这个有一点问题 ，我明说我没执行出来 ，但是我真的很想知道我错在哪里了 ，原理都摆在这里是没问题的 ，代码也没问题 ，求大神指教
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/* 我们想要做输入id号,就可以返回的数据对象*/
var data = [{
id: 1,
name: 家电,
goods: [{
id: 11,
gname: 冰箱,
goods: [{
id: 111,
gname: 海尔
}, {
id: 112,
gname: 美的
},
]
}, {
id: 12,
gname: 洗衣机
}]
}, {
id: 2,
name: 服饰
}];
var o = {}
function getData(arr, id) {
arr.forEach(function(item) {
if (item.id == id) {
o = item
return o
} else if(item.goods && item.goods.length > 0) {
getData(item.goods, id)
}
})
}
console.log(getData(data, 1));
console.log(getData(data, 11));
</script>
</body>
</html>
说到了递归就顺便说一下浅拷贝和深拷贝 。
浅拷贝就是只拷贝表面的一层 ，深层次的东西就拷贝引用 ，就是不管你改哪边的数据 ，双方都会受影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 浅拷贝只拷贝一层 更深层次只拷贝引用 也就是你改或者他改值双方都受影响
var obj = {
id: 1,
name: andy,
msg: {
age: 18
}
}
var o = {}
for (k in obj) {
o[k] = obj[k]
}
console.log(o);
console.log(------------------)
// es6快速浅拷贝语法
Object.assign(obj, o)
console.log(o);
</script>
</body>
</html>
然后就是深拷贝 ，深拷贝就是可以单独开辟空间 ，各管各的 ，互不影响 ，深拷贝的函数用到了递归 ，这个还是要记一下的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 深拷贝就是更深层的数据 也会单独开辟空间 比如数组 、函数等
var obj = {
id: 1,
name: andy,
msg: {
age: 18
},
color: [pink, red]
}
let o = {}
function getCopy(usedCopy, useCopy) {
for (k in usedCopy) {
if (usedCopy[k] instanceof Array) {
useCopy[k] = []
getCopy(usedCopy[k], useCopy[k])
} else if (usedCopy[k] instanceof Object) {
useCopy[k] = {}
getCopy(usedCopy[k], useCopy[k])
} else {
useCopy[k] = usedCopy[k]
}
}
}
getCopy(obj, o)
console.log(o);
</script>
</body>
</html>
4.
接下来是正则表达式 。
这个其实各种语法我就不多说了 ，参考mdn 、菜鸟教程这些多得很 ，我说一下今天的案例有一个替换敏感字符嘛 ，正则里面的规则是中文的话不用写引号 ，直接写进去就是 ，一个案例邮箱提取 ，说一下exec这个方法怎么来多次调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
将字符串小明：大神么么哒 ，正好是我想要的 ，我的邮箱是xiaoming@qq.com小红：我老公最爱看这个了 ，我想给他一个惊喜 ，么么么哒 ，
邮箱是xiaohong@sina.com我：好人一生平安 ，邮箱是wuyou@163.com中所有的邮箱号码提取出来
*/
// 注意 要使用exec进行多次匹配不仅正则要添加全局匹配 而且还有用一个while循环
let str = `小明：大神么么哒 ，正好是我想要的 ，我的邮箱是xiaoming@qq.com小红：我老公最爱看这个了 ，我想给他一个惊喜 ，么么么哒 ，
邮箱是xiaohong@sina.com我：好人一生平安 ，邮箱是wuyou@163.com`
let reg = /\w+@\w+.[a-zA-z]+/g
var result = reg.exec(str)
while(result!== null) {
console.log(result[0]);
result = reg.exec(str)
}
</script>
</body>
</html>
正则差不多就这样了
5.
然后是一些es6语法：let 、const 、解构赋值 、箭头函数 。
其实我一直搞不懂let这个块级作用域到底是限制在哪里 ，我感觉作用域范围跟var一样哪里都可以用 ，所以我后面基本都用let声明的变量 。当然我这个是错误思想哈 ，我是想以后慢慢通过实例来了解 。
然后剩余参数也就是扩展运算符三个点 ，然后就是array新增的一些方法 、form可以将维数组或者对象转为数组 ，第二个参数可以循环对每一个进来的值做操作 ，arr.find可以找满足第一个条件的值 ，没有就返回undefined ，参数也是写item\然后对应的findindex就是找
满足第一个条件的参数的下标 ，还有就是查找数组里面有没有包含这个值.includes
然后就是模板字符串 。
string页新增了一些方法：str.strtwith endstith看这个字符有没有在这个字符串的开头或结尾 。
.repeat可以将字符创重复n次返回一个新数组 。
最后就是set数据结构因为跟数组相似 ，通过new 里面的参数可以传数组 ，又因为自身的没有重复值的特点所以给数组起到一个去重的操作
然后他的一个属性.size可以查看set数据结构有多少值
add方法连式编程的形式新增数据
delete方法删除返回的是布尔值
has查看有无返回布尔值
clear清空数据结构
最后set也可以用forEach进行一个遍历操作
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
