webstorm的快捷方式（mac）

发表于 2016-09-01 | 分类于 webstorm常用快捷键 |

打开preferences中
进入keymap，选择Mac OS X

Shift+Shift

任何想搜索的比如文件名、某个操作等（但一般都会直接输入某个操作的快捷键，所以这个方式用的不多）

⌘+Shift+A

如果不记得某个操作的快捷键，可以使用这个操作来进行查找。比如输入rename

⌘+N

新建文件或文件夹

⌘+E

可以快速切换到最近打开的文件

⌘+Shift+N

通过输入名字来打开对应的文件

Alt+F1

可以快速定位到当前打开的文件所在的位置

Ctrl+Shift+F

在所选的目录下查找所有包含关键字的文件

Ctrl+Shift+R

在所选的目录下替换所有包含关键字为新的关键字的文件

Shift+F6

修改文件名

⌘+Y

删除此行

⌘+D

复制此行

#Shift+Enter

从当前行的任意位置跳到下一行

⌘+G

跳转到对应的行数

⌘+Shift+UP/DOWN

选择区域的代码上移/下移；如果没选中默认是当前行

⌘+,

打开preferences

Ctrl+G

选中鼠标所在的单词，重复此快捷键会继续选中下一个

熟悉cookie

发表于 2016-08-26 | 分类于 js cookie |

设置cookie

1	document.cookie = "name=qiqi"

获取cookie

1	document.cookie // "name=qiqi"

设置过期时间

由于默认情况关闭浏览器后,cookie会自动清除,需要设置expires的值来延长cookie的时间

1
2
3

var date = new Date();
date.setDate(date.getDate()+7);
document.cookie = "expires="+date.toUTCString();

实战

可以看到cookie的形式是以分号分割的key=value的字符串,如果想从cookie中通过key来获得value,需要写一些代码

function getValueOfCookie(key, cookie) {
    if(document.cookie){
        var cookieArr = document.cookie.split(';');
        cookieArr.forEach(function(elem, index){
            cookieArr[index] = {
                key: elem.split('=')[0],
                value: elem.split('=')[1]
            }
        })
        var filterObj = cookieArr.filter(function(elem){
            return elem['key'] == key
        });
        return filterObj.length>0?filterObj[0].value:'';
    }
}
document.cookie = "name=qiqi";
document.cookie = "nickname=supershy";
getValueOfCookie('name') //qiqi

js实现数组中的值是唯一的

发表于 2016-08-26 | 分类于 js数组去重 |

去重方法一

遍历数组的值,当此值不存在新的数组中,则push到新的数组中去

function isInArray(value, array) {
    var hasValue = false;
    array.forEach(function(elem){
        if (elem === value) {
            hasValue = true;
            return;
        }
    })
    return hasValue;
}
function uniq1(array){
    var arr = [];
    array.forEach(function(elem){
        if (!isInArray(elem, arr)) {
            arr.push(elem);
        }
    });
    return arr;
}
uniq1([1,1,1,3,3,3,5,5,5,6,7,8]) //[1, 3, 5, 6, 7, 8]

去重方法二

根据对象的key不会重复的特点来进行去重

function uniq2(array){
    var arrTemp = [];
    var obj = {};
    for(var i=0; i<array.length; i++){
        if (obj[array[i]]) {
            continue;
        } else {
            obj[array[i]] = true;
            arrTemp.push(array[i]);
        }
    }
    return arrTemp;
}
uniq2([1,2,3,4,4,4]) //[1, 2, 3, 4]

去重方法三

根据Array的indexOf方法只会返回符合条件的第一个值的index索引,如果有多个相同的值,其它的值的索引和它的位置不一致。
具体看参照

function uniq3(array) {
    return array.filter(function(item, pos) {
        return array.indexOf(item) == pos;
    })
}
uniq3([1,2,2,22,3]) //[1, 2, 22, 3]

js Array中pop、push、shift、unshift和concat的用法

发表于 2016-08-25 | 分类于 js Array |

js pop

将数组最后一个元素删除,并返回这个元素

1
2
3

var arr = [1,2,3,4,5];
arr.pop(); //5
arr //[1,2,3,4]

js push

将一个或多个元素添加到数组末尾,并返回新数组的长度

1
2
3

var arr = [1,2,3,4,5];
arr.push(7); // 6
arr // [1,2,3,4,5,7]

js shift

将数组第一个元素删除,并返回这个元素

1
2
3

var arr = [1,2,3,4,5];
arr.shift(); // 1
arr // [2,3,4,5]

js unshift

将一个或多个元素添加到数组开头,并返回新数组的长度

1
2
3

var arr = [1,2,3,4,5];
arr.unshift(0); // 6
arr // [0,1,2,3,4,5]

js concat

将一个或多个元素或者一个或多个数组添加到此数组,并返回新的数组

1 2	var arr = [1,2,3,4,5]; arr.concat(7,[8,9],[10]) //[1, 2, 3, 4, 5, 7, 8, 9, 10]

思考扩展

push、unshift都可以传多参,那用apply也可以实现数组的合并了。
当然concat已经包含这些功能了,只是想思维发散一下当练习了。

var arr = [1,2,3,4,5];
Array.prototype.push.apply(arr, [6,7]); //7
arr //[1,2,3,4,5,6,7]
Array.prototype.unshift.apply(arr, [-1,0]); //9
arr //[-1, 0, 1, 2, 3, 4, 5, 6, 7]

concat是可以传多参(值或数组),那用apply的话就可以实现二维数组合并成一维数组了。

1 2	var arr = [1,[2,3],[4,5,6]]; Array.prototype.concat.apply([], arr); //[1, 2, 3, 4, 5, 6]

js Array中 filter、map和reduce的用法

发表于 2016-08-24 | 分类于 js Array |

js filter

根据回调函数的条件,返回对应的数组。

var arr = [1,2,3,4,5];
arr.filter(function(elem){
    return elem > 2
}) //[3,4,5]

js map

对每个元素进行操作,并返回新的数组。

var arr = [1,2,3,4,5];
arr.map(function(elem){
    return elem * 2
}) //[2,4,6,8,10]

js reduce

通过回调函数不断累计后返回一个值。

var arr = [1,2,3,4,5];
arr.reduce(function(result, elem){
    return result + elem
}, 0) //15

实战

初始条件

var students = [
    {
        name:'小红',
        age:22,
        score:80
    },
    {
        name:'小白',
        age:21,
        score:66
    },
    {
        name:'小琦',
        age:27,
        score:77
    },
    {
        name:'小明',
        age:20,
        score:85
    },
    {
        name:'小二',
        age:25,
        score:90
    }
];

筛选出年龄大于或等于22岁的同学,其成绩的平均值。

用filter筛选年龄大于或等于22的同学
用map得到人数
用reduce计算成绩之和

var count = 1;
students
.filter(function(ele, index){
    return ele.age >= 22
})
.map(function(obj, index){
    count = index+1;
    return obj;
})
.reduce(function(a, b){
   return  a+b.score
},0)/count

git实战

发表于 2016-08-22 | 分类于 git |

初始化git(你们即将成为git的子民)

git init

提交你的修改

因为git init不会创建master分支,除非commit一些东西。

1	git commit -m "commit message"

修改提交的message

难免手一抖的情况将提交的message打错了,可以通过amend方式修改

1	git commit --amend

合并提交的message

提交了几次突然发现其中几个提交可以合并为一个。

1	git reset --soft 你想合并的commit的前一个值

取消这次提交

纠结的事来了,你好不容易合并了几个commit,但产品说header和footer的样式不用调整了。。。(好伤)

1	git reset --hard 你想取消的commit的前一个值

还原这次提交

领导说header和footer的设计稿挺好的,否定了之前产品的说法。(我擦)

1	git reset --hard 你想还原的commit的值

合并分支(git rebase)

以下情况都需要用到git rebase

我为了开发方便自己建了一个新分支,并且做了一些提交。当合并到master时我希望不显示这个分支(个人开发分支,跟团队没关系,不重要),就好像在最新的master做了一些提交一样。

我和同事在本地master修改了一些东西,他已经提交到了远程服务器的master上。我pull的时候也希望就在master分支上,而不是有个merge的提交。所以pull的时候最好使用git pull -r。

1
2
3

git rebase 分支
git pull --rebase // git pull -r
git rebase --continue //解决冲突后,add到index区然后执行此命令即可

合并分支(git merge)

以下情况都需要用到git merge

需要新建个分支来处理bug或者新加一个功能,通过git merge可以清楚地看到分支的合并情况。

1
2
3

git merge 分支
git pull // git pull -r
git commit //如果有冲突,解决并add后直接输入此命令,然后修改merge的提交信息

忽略某些文件或文件夹

只是自己本地测试的代码,并不希望提交到master上

编辑器产生的一些文件,和项目无关

还有其它情况等等

未完待续

熟悉webStorage

发表于 2016-08-19 | 分类于 html5 webStorage |

webStorage有两种类型

sessionStorage
localStorage

共同点

有相同的api

length 用来获取storage内的键值对数量
key 获取storage的键名例如key(0)
getItem 根据key获取storage内的对应value
setItem 为storage内添加键值对
removeItem 根据键名，删除键值对
clear 清空storage对象

有相同的event事件(为了保证多个页面操作storage时,数据可以同步)

window.addEventListener('storage',function(e){
    e.key //修改的键名
    e.oldValue //修改之前的value
    e.newValue //修改之后的value
    e.url //触发改动的页面url
    e.storageArea //可以判断是localStorage还是sessionStorage
})

不同点

localStorage在本地永久性存储数据，除非显式将其删除或清空
sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除

学习完了,我们来实战一下