数组去重的几种方式

发表于 2017-09-15

一：遍历数组去重

function arrays(arr){
	 var list = [];
   arr.forEach((item)=>{
       if(!list[item]){
           list.push(item)
       }
   })
   return list
}
var a = [1,2,4,6,'erw','wee',1,2,3,4,4,4];
console.log(arrays(a))

二：对象键值对匹配去重

function arrays(arr){
    var obj = {},list = [],v,type;
    arr.forEach((item,index)=>{
       type = typeof item;
       if(!obj[item]){
           obj[item] = type;
           list.push(item)
       }else if(obj[item].indexOf(type) < 0){
           obj[item].push(type);
           list.push(item)
       }
    })
    return list
}
var a = [1,2,4,6,'erw','wee',1,2,3,4,4,4];
console.log(arrays(a))

三：数组排序后判断相邻是否相等

function arrays(arr){
    arr.sort();
    let l = arr.length;
    var array = [arr[0]];
    for(let i = 1; i < l, i++){
    	 if(arr[i] !== arr[i-1]){
          array.push(arr[i])
    	 }
    }
    return array;
}
var a = [1,2,4,6,'erw','wee',1,2,3,4,4,4];
console.log(arrays(a))

四：获取最右值放入新数组

    function arrays(array){ 
var r = []; 
for(var i = 0, l = array.length; i < l; i++) { 
   for(var j = i + 1; j < l; j++) 
      if (array[i] === array[j]) j = ++i; 
      r.push(array[i]); 
 } 
 return r; 
 }
    var a = [1,2,4,6,'erw','wee',1,2,3,4,4,4];
    console.log(arrays(a))

Angular4 http

发表于 2017-09-12

在项目开发中使用了angular 的http,post 后台服务器一直接收不到，后来找大神问发现angular 使用的post 是原生的post 和jQuery 有所不同，这才明白。

jquery的send方法

jq对send方法内的data做了转化，成为以下方式。

1	?a=qweqewqe&b=awqder214ef&c=32424er;

这样的方式后台就可以收到了。

angular的send方法；

angular直接对send的data没有做任何处理，后台自然接收不到，并且angular的post头信息为：

1	"Content-Type":"application/json";

而 jQuery中的post 头为：

1	Content-Type:application/x-www-form-urlencoded; charset=UTF-8;

所以后台php 以及node都接受不到的；

解决办法

toFormJson(data: any) {
  const str = [];
  for (const item in data) {
      if (item) {
       str.push(encodeURIComponent(item) + ‘=’ + encodeURIComponent(data[item]));
       }
   }
   return str.join(‘&’);
 }

用toFormJson方法对data进行转化后再用xhr的send方法发送后台就可以接收到数据了

javascript 的观察者模式

发表于 2017-09-12

javascript观察者模式

观察者模式主要是一种订阅事件，然后触发事件，调用回调函数，类似于nodejs的事件机制.

nodejs的事件模式

nodejs的事件主要继承自events模块，
1
2
3 const EventEmitter = require('events');
class MyEmitter extends EventEmitter{};
let myEmitter = new MyEmitter();

用一个新类继承EventEmitter，然后实例化它，就可以使用原型上的方法了。
1
2
3
4
5 myEmitter.on('events',()=>{
     console.log('events事件触发');
})
myEmitter.emit('events');

nodejs默认最多设置10个监听器，超出之后将会发出警告，可以使用以下方式增加监听数量。
1 myEmitter.setMaxListener(n);

javascript的订阅发布者模式

首先创建一个watcher，

function Watcher(){
    this.list = [];
}
Watcher.prototype.addEventListener = function(type,cb){
    if(!this.list[type]){ //检查是否注册事件,如果没有，则直接添加。
        this.list[type] = [cb];
    }else{
    	 this.list[type].push(cb);
    }
}

至此订阅器完成。如果有事件注册，添加到Watcher的原型方法addEventListener上，用来监听事件。

Watcher.prototype.emit = function(event){
    let events = this.list[event];
    if(events){
       retrun ;
    }else{
       events.forEach( item =>{
           item && item();
       })
    }
}

事件发射器完成，类似于nodejs的事件模式。

1
2
3

Watcher.prototype.removeListener = function(eventtype,cb){
    this.list[eventtype].splice(this.list[eventtype].indexOf(cb),1)
}

然后实例化Watcher。

var watcher = new Watcher();
watcher.addEventListener('events',()=>{
     console.log('events事件触发了')
})
watcher.emit('events');
watcher.emit('events');
watcher.emit('events');
watcher.emit('events');
watcher.emit('events');
//触发'events'事件。

删除注册的事件

var watcher = new Watcher();
var addEvents = function(){
	console.log('触发事件了哦！');
}
watcher.addEventListener('events',addEvents);
watcher.removeListener(addEvents,()=>{
    console.log('事件被删除了！')
})
 
watcher.emit('events');
//此时怎么也触发不了事件了，要删除一个注册的事件必须要用声明的方式创建callback函数，然后删除该cb，也就没有'events'事件了。

使用Flow写javascript

发表于 2017-06-13

介绍

Flow是一个用于 JavaScript 的静态类型检查器，最早由 Facebook 在 2014 年的 Scale 大会上推出。它的目标是不需要开发人员去频繁的修改实际代码，就能找到 JavaScript 代码中的类型错误，从而大大节省这方面时间与精力的消耗。同时，它也向 JavaScript 增加了额外的语法，以提供给开发者更多的控制能力。

安装

使用 npm 安装
1
npm install --save-dev flow-bin
添加到package.json 文件
1
2
3
"script":{
"flow": "flow"
}

入门

先创建一个配置文件，放在根目录下
1
npm run flow init
在终端执行如下命令检查
1
npm run flow check
也可使用flow服务器检查
1
npm run flow
停止用如下命令
1
npm run flow stop
需要检查的文件只需在只在这些 JavaScript 文件顶部添加 @flow 作为注释就可以了
1
/*@flow/

类型推断

有两种方法
- 通过注解: 我们指定期望的类型并把它作为代码的一部分，类型检查器会基于这些期望来对代码进行评估。
- 通过代码推断: 工具聪明到可以通过查看代码被使用的上下文来推断出类型，并基于此对代码进行检查。
如下示例
1
2
3
4
5
6
/*@flow*/
function foo(x) {
return x.split(' ');
}
foo(34);
- 这段代码会在你运行 npm run flow 命令的时候在终端上报错, 因为函数 foo() 需要的是一个字符串作为参数，而我们传入的却是一个数字。
- 报错提示大概如下：
  1
  2
  3
  4
  5
  index.js:4
  4: return x.split(' ');
  ^^^^^ property `split`. Property not found in
  4: return x.split(' ');
  ^ Number
- 它明确说明了错误的位置和发生的原因。当我们将参数从数字修改为字符串，报错就会消失，如下：

/*@flow*/
function foo(x) {
  return x.split(' ');
};
foo('Hello World!');

上面的代码就不会报错。在这里我们能发现的就是 Flow 理解了 split() 方法只适用于字符串，所以适合的 x 就必须是一个字符串。

可为空类型

Flow 不像其它的类型系统一样对待 null。它不会忽略掉null，因此它可以防范那些作为其他类型传入的null可能会导致应用程序崩溃的问题。

/*@flow*/
function stringLength (str) {
  return str.length;
}
var length = stringLength(null);

在上述场景中，Flow 会抛出一个错误, 我们就不得不像下面这样对 null 进行单独的处理:

/*@flow*/
function stringLength (str) {
  if (str !== null) {
    return str.length;
  }
  return 0;
}
var length = stringLength(null);

为了保证代码在所有的情况下都能正常运行，我们专门针对 null 进行检查。Flow 就会将最后的那行代码当做是有效的代码。

函数

/*@flow*/
/*--------- Type annotating a function --------*/
function add(x : number, y : number) : number {
  return x + y;
}
add(3, 4);

上面的代码展示了一个变量和一个函数的注解。add()函数的参数以及返回值都被期望是数字的。如果传入了任何其它的数据类型， Flow 就会抛出一个错误。

数组

1 2	/-------- Type annotating an array ----------/ var foo : Array<number> = [1,2,3];

数组注解采用 Array 的形式，其中的 T 表示数组中单个元素的数据类型。在上述代码中，foo应该是一个元素为数字的数组。

类

如下是类和对象的一个示例模式。唯一需要牢记的一点是我们可以使用 | 符号在两个类型间执行 OR 操作。变量 bar1 被加上了注解，期望的是 Bar 类的模式。

/*-------- Type annotating a Class ---------*/
class Bar{
  x:string;           // x should be string       
  y:string | number;  // y can be either a string or a number
  constructor(x,y){
    this.x=x;
    this.y=y;
  }
}
var bar1 : Bar = new Bar("hello",4);

文章来自flow

Vue知乎项目总结

发表于 2017-06-11

vue-cli框架

根据官网操作建立vue脚手架，主要有带有轮播图的首页，列表页，以及详情页，用到的有vuex,vue-touter,axios
vuex

项目最开始时候没有用到vuex，到后来感觉状态有些难控制，就使用了，vuex真的强大。
建立一个store，所有不同组件下的可变状态都由store统一管理，
首先在入口文件全局注册vuex，使用Vue.use(vuex)即可在全局状态下使用vuex，要想改变store里边的状态，只有在methods里边显式的提交mutation，使用this.$store.commit(‘**‘{}),可带有参数，在哪里想要获取这个状态，只需在computed里边使用this.$store.state.来获取状态

import Vuex from 'vuex'
import Vue from 'vue'
import {getContent} from '../server9999.js'
import {getTitle} from '../server9999.js'
Vue.use(Vuex)
const store=new Vuex.Store({
    state:{
	    idmsg:[],
	    message:'',
	    css:[],
	    name:[]
	},
	mutations:{
		GETID(state,id){
			getContent(id).then((res)=>{
				state.idmsg=res
			})
		},
		GETNAME(state,name){
            state.name=name
		},
		GETMESSAGE(state,id){
			getTitle(id).then((res)=>{
				var getcss=res.css;
				var cssList=getcss.map((item)=>{
					return `<link rel="stylesheet" href="${item}"/>`;
			    });
                var getbody=res.body;
                var all=cssList+getbody;
				state.message=all
				
			})
		}
	}
})
export default store

vue-router使用

** 单页面应用程序势必会用到router，vue-router很强大，使用vue-router只需引入即可，然后对router进行配置

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
	import Counter from '../components/Counter.vue'
	import Pagec from '../components/Pagec.vue'
	import View from '../components/View.vue'
	var routes =[
	    {
	    	path:'/',
	    	component:Counter
	    },{
	    	path:'/content',
	    	component:Pagec
	    },{
	    	path:'/view',
	    	component:View
	    }]
export default new Router({
	routes,
	mode:'hash'
})

axios

主要用axios采取数据请求；
1
2
3
axiso(url).then(res=>{
//res
})

markdown 语法学习

发表于 2017-05-07

一号标题

‘#’代表，等同于<h1></h1>
二号标题
- 。。。。。
- ###:三号
  - ####:四号
  - #####:五号
    六号标题
”“代表无无序列表
**段落* 第一次模拟
- 段落一
- 段落二
- 段落三
  链接采用如下方式
blog：@EbBlovery
github: @EbBlovery
采用‘[](#)’的方法来表示<a href="#">的效果
引用<blockquote>

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,

Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
引用类型

代码编写

JavaScript 代码

function Person(name,age){
   this.name=name;
   this.age=age
}
Person.prototype.setSpeak=function(value){
    alert(value + "world !")
}
var person1 = new Person(yuan,21)
person1.setSpeak(hello)

markdown语法练习

发表于 2017-05-04

这是斜体
这也是斜体
这是粗体
这是粗体加斜体
~~删除线~~

title yuan

一级标题

二级标题

三级标题

这是H1

引用格式

return shell_exex(“echo $input | $markdown_script”)
1
2
3
4
var a=10;
var obj={
   a:"yuan"
}