ES6中的Set和Map数据结构
Set集合(Set)是由一组无序且唯一的项组成的,该数据结构使用了和有限集合相同的数学概念,但应用在计算机科学的数据结构中。
可以把集合想象成一个既没有重复元素,也没有顺序概念的数组
一些集合可用的方法:add(element):向集合添加一个新元素。delete(element):从集合移除一个元素。has(element):如果元素在集合中,返回 true ,否则返回 false。clear():移除集合中的所有元素。size():返回集合所包含元素的数量。它与数组的 length 属性类似。keys():返回一个包含集合中所有键名的数组。values():返回一个包含集合中所有值(元素)的数组。
Set 本身是一个构造函数,用来生成 Set 数据结构。
123456789//例 const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); //2,3,5,4 }//Set 函数 ...
ES6中的import as
import * as xxx from ‘xxx’ 会将 “xxx” 中所有 export 导出的内容组合成一个对象返回(或import * as obj from ‘xx’ 这种写法是把所有的输出包裹到obj对象里);
eg:
xxx里中:
export function test(){
return '返回是test 内容';
}
export function login(){
return '返回login 内容';
}
调用test 函数,即obj.test();
调用login 函数,即obj.login();
扩展:那不带*as(即import xxx from ‘xxx’)
总结:
import * as xxx from ‘xxx’: 会将若干export导出的内容组合成一个对象返回;
import xxx from ‘xxx’:(export default Din)只会导出这个默认的对象作为一个对象。
扫码点餐各个页面的制作过程
扫码点餐各个页面是如何实现的登录界面首先用到的模块是 ‘react-router-dom’ 的 withRouter 和封装好的 axios API。整个登录逻辑写在 withRouter中,在 jsx 里使用 ref 获得输入的用户名、密码、验证码,登录先 preventDefault 然后用户名密码验证码分别是 ref 获取到的当前输入值,使用 try-catch 用 post 请求发送给后端,如果成功就用 history.push 给 url 传值转跳页面,不然就 alert 后端设定好的错误信息。
点餐界面:首先用到的模块是 ‘prop-types’,’immer’,’history’,’socket.io-client’。
菜单内容是一个函数组件,参数是 food,onupdate 和 amount,返回的 jsx 是一个菜单列表,列表里的每个菜都有按钮可以增减选择数量,使用 onupdate 来控制点击按钮时的菜品数量增减。随后用到了 React 的属性验证功能 要求菜单内容这个函数组件必须要传参数且必须要传指定类型的参数。calTotaoPrice 是一个用 reduce ...
组件库的制作
提示,这里需要先学习一下Vue插件的API: https://cn.vuejs.org/v2/api/#Vue-use
在package.json中加一条命令,用于指定打包目标为库
12345{ "scripts": { "lib": "vue-cli-service build --target lib packages/index.js" }}
在命令行输入 yarn lib打包完成,可以看到多了个dist文件夹,里面将我们的组件打包成了一个js文件,字体图标也打包好了,以后使用的话只要用dist文件夹就行了
接下来让我们整个项目用 pc-hub 管理一下,把打包好的dist放到npm上,提醒一下在index里要有install,不然不能作为Vue的插件也不能全局使用
接下来将my-ui上传到github上,这个不写了,主要是如何将组件库发布到npm上,需要做一点修改,首先将package.json中的 “private”: false 其次name属性要是npm ...
把packages处理成Vue插件
封装了几个Vue组件,怎么把它们制作制作成插件呢
先新建Vue项目
1vue create my-ui
在my-ui文件夹中新建packages和examples文件夹,packages用来存放我们封装的所有组件,examples用来进行测试,把src改成examples
新建vue.config.js,写入如下代码
1234567891011121314151617181920212223const path = require('path')module.exports = { pages: { index: { entry: 'examples/main.js', template: 'public/index.html', filename: 'index.html' } }, // 扩展 webpack 配置,使 packages 加入编译 chainWebpack: config => ...
“['1', '2', '3'].map(parseInt)” what & why?
第一眼看到这个题目的时候,脑海跳出的答案是 [1, 2, 3],但是真正的答案是[1, NaN, NaN]。
首先回顾一下,map函数的第一个参数callback:var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])这个callback一共可以接收三个参数,其中第一个参数代表当前被处理的元素,而第二个参数代表该元素的索引。
而parseInt则是用来解析字符串的,使字符串成为指定基数的整数。parseInt(string, radix)接收两个参数,第一个表示被处理的值(字符串),第二个表示为解析时的基数。
了解这两个函数后,我们可以模拟一下运行情况
parseInt(‘1’, 0) //radix为0时,且string参数不以“0x”和“0”开头时,按照10为基数处理。这个时候返回1
parseInt(‘2’, 1) //基数为1(1进制)表示的数中,最大值小于2,所以无法解析,返回NaN
pa ...
图的遍历——广度优先搜索和深度优先搜索
前置知识:图的相关术语和图的表示
图的遍历和树数据结构类似,我们可以访问图的所有节点。由两种算法可以对图进行遍历:广度优先搜索(breadth-first search,BFS)和深度优先搜索(depth-first search,DFS)。图遍历可以用来寻找特定的顶点或寻找两个顶点之间的路径,检查路径是否相同,检查图是否有环,等等。
在实现算法之前,让我们来更好的理解一下图遍历的思想。
图遍历算法的思想是必须追踪每个第一次访问的节点,并且追踪有哪些节点还没有完全被探索,对于两种图遍历算法,都需要明确指出第一个被访问的顶点。
完全探索第一个顶点要求我们查看该顶点的每一条边。对于每一条边所连接的没有被访问过的顶点,将其标注为被发现的,并将其加入待访问的定点列表中。
为了保证算法的效率,务必访问每个顶点至多两次。连通图中每条边和顶点都会被访问到。
广度优先搜索算法和深度优先搜索算法基本上是相同的,只有一点不同,那就是待访问顶点列表的数据结构。如下表所示
算法
数据结构
描述
深度优先搜索
栈
将顶点存入栈,顶点是沿着路径被探索的,存在新的相邻顶点就去访问
广度优先搜索
队列 ...
简单的React父子组件和平级组件之间传值
1.父组件对子组件传值 利用props属性传值
1234567891011121314151617181920class Component extends React.Component { constructor (props) { super(props); } render() { return ( <div> <h1>I am {this.props.name}</h1> </div> ); }}ReactDOM.render( <div> <Component name='cat'></Component> <h1>hello world!!!</h1> </div>, document.getElementById('app& ...
web通讯的四种方式:短轮询、长轮询(comet)、长连接(SSE)、WebSocket
短轮询定义http端轮询是服务器收到请求不管是否有数据都直接响应 http 请求;其实就是普通的轮询。指在特定的的时间间隔(如每1秒),由浏览器对服务器发出 HTTP request,然后由服务器返回最新的数据给客户端的浏览器。
应用场景传统的 web 通信模式。后台处理数据,需要一定时间,前端想要知道后端的处理结果,就要不定时的向后端发出请求以获得最新情况。
优点前后端程序编写比较容易。
缺点请求中有大半是无用,难于维护,浪费带宽和服务器资源;响应的结果没有顺序(因为是异步请求,当发送的请求没有返回结果的时候,后面的请求又被发送。而此时如果后面的请求比前面的请 求要先返回结果,那么当前面的请求返回结果数据时已经是过时无效的数据了)。
实例:适于小型应用。
前端实现:12345678var xhr = new XMLHttpRequest(); setInterval(function(){ xhr.open('GET','/user'); xhr.onreadystatechange = functi ...
扫码点餐时遇到的问题
在写个人项目——扫码点餐中碰到的一些问题React报错: Objects are not valid as a React Child解决方法:标签之间的内容不能为对象,不能作为原生元素的子元素,但可以作为自定义组件的子元素
React报错: props is not defined at xxx.render解决方法:1. render中应写this.state,是否写成了props.state?
Error: Request failed with status code 401一些前端基础功能部分抛出的错误,promise抛出的错误,不是响应体而是错误对象
向后端请求餐桌信息,跨域问题后端app.js
12345app.use(cors({ origin: true,//修改这里 maxAge: 86400, credentials: true,}))
proxy errorproxy代理设置 “proxy”: “http://localhost:5002" 即可同代表本机的10.1.1就不可以,最好各处写的一致
React脚手架运行npm s ...