复习 - es6语法
这几天电脑有点问题，一直在弄，而且论文也逼近了也在时间弄那个 ，前面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>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
/* let ul = document.querySelector('ul')
for(var i = 0; i < ul.children.length; i++) {
ul.children[i].setAttribute('data-index',i)
ul.children[i].onclick = function() {
console.log(this.getAttribute('data-index'));
}
} */
// 这里我自己做了一下没有用到闭包来完成，如果规定不能添加自己的属性呢
// 这个时候你只能用i 但是当你一点击就打印出i的值那肯定是最后一个i退出循环的值，为什么，因为这里for是主栈道上的代码，会先执行完，
// 才会去执行事件里面的异步任务也就是回调函数，所以这里可以先用一个立即执行函数，一执行到这个i就先把这个i保存起来有几个循环就有几个立即执行函数，
// 当你一点击就把函数里面存着的i给到他 两个函数 两个作用域 用到了局部变量 所以闭包产生
let ul = document.querySelector('ul')
for(var i = 0; i < ul.children.length; i++) {
/* ul.children[i].onclick = function() {
console.log(i);
} */
(function(i) {
ul.children[i].onclick = function() {
console.log(i);
}
})(i)
}
</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>
<!-- 打车起步价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进行一个遍历操作
复习 - es6语法的更多相关文章
- es6语法重构react代码
1.使用React.Component创建组件,需要通过在constructor中调用super()将props传递给React.Component.另外react 0.13之后props必须是不可变 ...
- vue 2.0 无法编译ES6语法
# vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...
- 把JavaScript代码改成ES6语法不完全指南
目录 * 核心例子 * 修改成静态变量(const)或块级变量(let) * 开始修改 * 疑问解释(重复定义会发生什么) * 疑问解释(let的块级作用域是怎样的) * 疑问解释(const定义的变 ...
- 让intellij idea 14 支持ES6语法
用eclipse做前端开发,用到了webpack,结果各种依赖导致软件卡的一比,简直不能动!虽然在同事的帮忙下,修改了一下配置,但仍然卡的没脾气.改用intellij idea 14解决了卡的问题,但 ...
- .vue文件在webstorm中es6语法报错解决方法
1 语法支持es6设置 Preferences > Languages & Frameworks > JavaScript 把 Javascript Language versio ...
- webpack打包不识别es6语法的坑
今天Vue项目npm run build 后webpack,报错uglifyjs,自己研究了一下,翻译过来,意思是不识别项目中写的高级语法,这里要把项目里es6语法转es5让浏览器识别, 也就是web ...
- ES6语法的学习与实践
ES6是JavaScript语言的新一代标准,是ECMAScript的第六个版本,加入了很多新的功能和语法,在很多框架,如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的,下面对经常 ...
- 如何让浏览器支持ES6语法，步骤详细到小学生都能看懂！
为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...
- Webstorm添加新建.vue文件功能并支持高亮vue语法和es6语法
转载:https://blog.csdn.net/qq_33008701/article/details/56486893 Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法 ...
- vue-i18n使用ES6语法以及空格换行问题
1.运行报错 报错使用了不恰当的exports Uncaught TypeError : Cannot assign to read only property 'exports ' of objec ...
随机推荐
- AI 编译器CINN中的OpLowering优化Pass
一.Lower 主逻辑 在 OpLower::Lower() 接口中,主要分为两大类: Elementwise类,主要涉及的 OpPattern 包括:kElementwise .kBroadcast ...
- ansible系列(34)--ansible实战之部署WEB集群架构（4）
目录 1. 业务环境部署 1.1 wordpress-base编写 1.2 wordpress-web编写 1.3 wordpress-mysql编写 1.4 wordpress-proxy编写 1. ...
- ansible(14)--ansible的get_url模块
1. get_url模块 功能:通过互联网下载软件至被控端本地: 主要参数如下: 参数 说明 url 资源文件在互联网上的具体url地址 dest 文件下载位置的绝对路径 mode 文件下载位置的绝对 ...
- 2022最新的Dubbo-Admin各个版本打包方案
目录 前景提要 环境整合 构建工具(参考工具部署方式) 官网查阅 打包 一.编译器打包 二.命令行打包 前景提要 很简单的一个操作很多人还在那整各种收费,明明是个免费开源的,干嘛让他们挣二手钱. 环境 ...
- 解析 ABP vNext 依赖注入实现【属性注入】的原理
前言 这几天闲来没事看看ABP vNext的文档和源码,关于关于依赖注入(属性注入)这块儿产生了兴趣. 我们都知道.Volo.ABP 依赖注入容器使用了第三方组件Autofac实现的.有三种注入方式, ...
- C#老码农的职业生涯
开头白 大家好,我是tibos,19年10月1号由深圳回武汉的码农,目前入职武汉福禄网络,最近刷到的年终总结也比较多,赶在这最后一天,我也来凑个热闹 心路历程 -> 菜鸟入江湖 13年开启码农的 ...
- 关于Embedded Resource的理解
Embedded Resource .NET中使用外部资源时常用的方式都是使用资源文件,作为程序集的一部分发布.资源文件的读取也比较方便,字符串.图片和任何二进制数据,包括任何类型的文件都可以作为资源 ...
- ASP.NET Core替换Action实际执行方法
RequestDelegate 上次,我们在<如何判断当前请求的API类型>中查看endpoints.MapControllers()实现时,最终定位到ActionEndpointFact ...
- LlamaFS自组织文件管理器
LlamaFS是一个自组织文件管理器.它可以基于文件内容和修改时间等属性自动重命名和组织您的文件.它能让你不把时间花在对文件的复制.粘贴.重命名.拷贝.排序等简单操作上.有幸在Github上看到Lla ...
- NumPy 均匀分布模拟及 Seaborn 可视化教程
均匀分布 简介 均匀分布是一种连续概率分布,表示在指定范围内的所有事件具有相等的发生概率.它常用于模拟随机事件,例如生成随机数或选择随机样本. 参数 均匀分布用两个参数来定义: a:下限,表示分布的最 ...