rest参数(...变量名)和扩展运算符(...)

2018年8月23日 · 阅读需 3 分钟

之前写的一篇数组去重的方法，这样写的。

const array = [1,1,2,3,4,5,5,6,6,7,8,8];
function distinct(){
    let arr = [].concat.apply([], arguments);
    console.log(arr);
    return Array.from(new Set(arr));
}
const a = [1,2,3,5],b = [2,5,8,6],c = [7,8,9];
console.log(distinct(a,b,c));//[1, 2, 3, 5, 8, 6, 7, 9]

后来我一想，既然都用ES6了，不如都用ES6语法吧。然后我就把代码改成这样了。

distinct = () => {
    let arr = [].concat.apply([], arguments);
    return Array.from(new Set(arr));
}
console.log(distinct(array));//Uncaught ReferenceError: arguments is not defined

报错了，让后查找了一下原因，使用为箭头函数没有arguments，怎么办，这就需要用rest参数了。

const a = [1,2,3,5],b = [2,5,8,6],c = [7,8,9];
distinct = (...theArgs) => {
    let arr = [].concat.apply([], theArgs);
    return Array.from(new Set(arr));
}
console.log(distinct(a,b,c));//[1, 2, 3, 5, 8, 6, 7, 9]

这个...theArgs就是rest参数了，theArgs是自定义的命名，可以随便起名字。

rest参数(...变量名)

最主要用于不定参数，用于获取函数多余的参数，将多余的逗号分隔的参数序列转换为数组参数

rest参数的语法

function f(a, b, ...theArgs) {
  // ...
}

看一个小例子

fun1 = (...theArgs) => {
    console.log(theArgs);
}
fun1(1, 2, 3, 4, 5, 6);//[1, 2, 3, 4, 5, 6]

fun2 = (a, b, ...theArgs) => {
    console.log(theArgs);//[3, 4, 5, 6]
}
fun2(1, 2, 3, 4, 5, 6);

注意：rest参数只能是最后一个参数，他代表除a,b以外的所有参数，如果后面在添加别参数，例如

fun2 = (a, b, ...theArgs, c) => {
    console.log(theArgs);
}
fun2(1, 2, 3, 4, 5, 6);Uncaught SyntaxError: Rest parameter must be last formal parameter

这样是会报错的。

说到这里这个...还有一个作用就是作为扩展运算符

扩展运算符(...)

扩展运算符可以理解为rest参数的逆运算，将数组转换为逗号分隔的参数序列

const nums = [1, 2, 3];
fun = (a, b, c) => {
    console.log(`${a} ${b} ${c}`)
}
fun(...nums);//1 2 3

ES5的话我们还需要这样调用

fun.apply(null,nums);

扩展运算符应用

合并数组

const arr1 = [1, 2, 3]
const arr2 = [5, 6]
ES5
console.log(arr1.concat(arr2));//[1, 2, 3, 5, 6]
ES6
console.log([...arr1, ...arr2]);//[1, 2, 3, 5, 6]

判断最大值最小值

const array = [1,1,2,3,4,5,5,6,6,7,8,8];
ES5
console.log( Math.max.apply(null, array));//8
console.log( Math.min.apply(null, array));//1
ES6
console.log( Math.max(...array));//8
console.log( Math.min(...array));//1

数组去重

const array = [1,1,2,3,4,5,5,6,6,7,8,8];
const distinct = arr => [...new Set(arr)];
console.log(distinct(array));//[1, 2, 3, 4, 5, 6, 7, 8]

position:sticky

2018年8月21日 · 阅读需 2 分钟

css position属性的值有absolute、fixed、relative、static、inherit等，今天发现一个新的值 sticky 粘性定位，该定位基于用户滚动的位置。

这个属性比较不错，遗憾的是兼容性还不是很好，先来张图看一下

再来看一下他能干什么，比如说我一片文章有6个标题，让后读者读到每个标题对应的内容的时候让标题在顶部显示，看demo。

See the Pen YOzJoP by 周艳伟 (@zywkuo) on CodePen.

还有一些移动端页面标题固定顶部，看这个demo

See the Pen sticky2 by 周艳伟 (@zywkuo) on CodePen.

这个属性值还是很不错的，用起来是不是感觉很方便，如果用js的话还需要进行判断高度在做处理相对来说还是这个简便快捷。

希望赶快普及吧！

js数组去重

2018年8月10日 · 阅读需 2 分钟

数组去重，老生常谈，记录我觉得比较好的方法

ES5方法

利用对象唯一属性进行去重

var array = [1,1,2,3,4,5,5,6,6,7,8,8];
Array.prototype.distinct = function () {
    var array = [];
    var obj = {};
    for(var i=0;i<this.length;i++){
        if(!obj[this[i]]){
            array.push(this[i]);
            obj[this[i]] = 1;
        }
    }
    return array;
}
console.log(array.distinct());//[1, 2, 3, 4, 5, 6, 7, 8]

利用indexOf属性进行判断

var array = [1,1,2,3,4,5,5,6,6,7,8,8];
Array.prototype.distinct = function () {
    var array = [this[0]];
    for(var i=0;i<this.length;i++){
        if(array.indexOf(this[i]) == -1){
            array.push(this[i])
        }
    }
    return array;
}
console.log(array.distinct());//[1, 2, 3, 4, 5, 6, 7, 8]

ES6方法

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。利用他的唯一性就可以进行去重了。

const array = [1,1,2,3,4,5,5,6,6,7,8,8];
console.log(new Set(array));//{1, 2, 3, 4, 5, 6, 7, 8}

此时可以看到原数组已经已经去重了，但是此时结构还不是数组的结构，因此我们还需要用到Array.from方法，Array.from方法可以将 Set 结构转为数组。

const array = [1,1,2,3,4,5,5,6,6,7,8,8];
console.log(Array.from(new Set(array)));//[1, 2, 3, 4, 5, 6, 7, 8]

记录一个多个数组合并去重的好方法

function distinct(){
    let arr = [].concat.apply([], arguments);
    console.log(arr);
    return Array.from(new Set(arr));
}
const a = [1,2,3,5],b = [2,5,8,6],c = [7,8,9];
console.log(distinct(a,b,c));//[1, 2, 3, 5, 8, 6, 7, 9]

:focus-within选择器

2018年8月7日 · 阅读需 2 分钟

看新闻看到了一个非常不错的选择器:focus-within，他可以做一些js的效果，focus是获取焦点，所以只能有focus状态的元素才可以使用。 :focus-within选择器是在元素获取焦点的时候可以触发自身或者父元素的属性（冒泡）。

举一个小例子效果如图

css
.parent{
            width: 100%;
            height: 200px;  
            background: #eeeeee;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .children{
            width: 100px;
            height: 60px;
            background: #999;
        }
        .parent:focus-within{
            background: #f60;
        }>

html
<div class="parent">
    <button class="children">点我</button>
</div>

写了一个选项卡的小例子效果可以看一下具体代码可以点击此链接前往codepen查看，效果也有哦！

在看一下兼容问题数据来源于https://caniuse.com/

虽然对浏览器的兼容效果还不是很好，希望快快普及吧。

sql语句学习

2018年8月3日 · 阅读需 6 分钟

sql学习记录

从 "qc_record" 表中选取所有记录 (*qc_record为一个表的名称)

select * from qc_record;

一些最重要的 SQL 命令（*SQL 对大小写不敏感：SELECT 与 select 是相同的。）

SELECT                  - 从数据库中提取数据
UPDATE                  - 更新数据库中的数据
DELETE                  - 从数据库中删除数据
INSERT INTO             - 向数据库中插入新数据
CREATE DATABASE         - 创建新数据库
ALTER DATABASE          - 修改数据库
CREATE TABLE            - 创建新表
ALTER TABLE             - 变更（改变）数据库表
DROP TABLE              - 删除表
CREATE INDEX            - 创建索引（搜索键）
DROP INDEX              - 删除索引

SELECT 语句

SELECT 语句用于从数据库中选取数据。结果被存储在一个结果表中，称为结果集。

SQL SELECT 语法

select * from qc_record;     查询整个表内容

select column_name,column_name from qc_record;      -- column_name(查询表内某一列名称可查询多个)

SELECT DISTINCT 语句

在表中，一个列可能会包含多个重复值，有时您也许希望仅仅列出不同（distinct）的值。DISTINCT 关键词用于返回唯一不同的值。

SQL SELECT DISTINCT 语法

select distinct column_name,column_name from qc_record;     -- column_name(查询表内某一列名称可查询多个)

WHERE 子句

WHERE 子句用于提取那些满足指定标准的记录。

WHERE 语法

select * from qc_record where column_name operator value;      -- 查找qc_record表中匹配column_name operator value（匹配表达式）的记录

select column_name,column_name from qc_record where column_name operator value;     -- 查找qc_record表中对应名称的匹配column_name operator value（匹配表达式）的记录

SQL 使用单引号来环绕文本值（大部分数据库系统也接受双引号）。如果是数值字段，请不要使用引号。

WHERE 子句中的运算符

运算符     描述
=           等于
<>          不等于。注释：在 SQL 的一些版本中，该操作符可被写成 !=
>           大于
<           小于
>=          大于等于
<=          小于等于
BETWEEN     在某个范围内
LIKE        搜索某种模式
IN          指定针对某个列的多个可能值

后记，在查询语句的时候用到了模糊查询，

LIKE 条件匹配模式

% 包含零个或更多字符的任意字符串。
_（下划线） 任何单个字符。
[ ] 指定范围（例如 [a-f]）或集合（例如 [abcdef]）内的任何单个字符。
[^] 不在指定范围（例如 [^a - f]）或集合（例如 [^abcdef]）内的任何单个字符。

AND & OR 运算符

AND & OR 运算符用于基于一个以上的条件对记录进行过滤。如果第一个条件和第二个条件都成立，则 AND 运算符显示一条记录。如果第一个条件和第二个条件中只要有一个成立，则 OR 运算符显示一条记录。

AND 语法

select * from qc_record where test_user = 'zyw' and device_id = 19222;   -- 与的关系，and连接的两个名称匹配都true才显示

OR 语法

select * from qc_record where test_user = 'zyw' or device_id = 19222;   -- 或的关系，or连接的两个名称有一个匹配的就显示

AND OR 语法

select * from qc_record where test_user = 'zyw' and (device_id = 19121 or status = 1);   -- 也可以把 AND 和 OR 结合起来（使用圆括号来组成复杂的表达式）

ORDER BY 关键字

ORDER BY 关键字用于对结果集进行排序。 ORDER BY 关键字用于对结果集按照一个列或者多个列进行排序。 ORDER BY 关键字默认按照升序对记录进行排序。如果需要按照降序对记录进行排序，您可以使用 DESC 关键字。

ORDER BY 语法

select * from qc_record order by create_date desc           -- ASC-->升序排列默认    DESC-->降序排列要写这个关键字

INSERT INTO 语句

INSERT INTO 语句用于向表中插入新记录。

INSERT INTO 语法(有两种编写形式)

第一种形式无需指定要插入数据的列名，只需提供被插入的值即可：

insert into qc_record values (value1,value2,value3,...);

第二种形式需要指定列名及被插入的值：

insert into qc_record (column1,column2,column3,...) values (value1,value2,value3,...);

UPDATE 语句

UPDATE 语句用于更新表中的记录。

UPDATE 语句

update qc_record set column1=value1,column2=value2,... where some_column=some_value; -- WHERE 子句规定哪条记录或者哪些记录需要更新。如果您省略了 WHERE 子句，所有的记录都将被更新！

DELETE 语句

DELETE 语句用于删除表中的记录。

SQL DELETE 语法

delete from qc_record where some_column=some_value;                                 -- 删除一条属性
delete from qc_record where some_column=some_value and some_column=some_value ...;      -- 删除多条属性
delete from qc_record                                                               -- 删除所有

参考网址 SQL教程|菜鸟教程

js模糊查询

2018年8月1日 · 阅读需 8 分钟

对于前端而言一些简单的查询还是不用需要后台配合的，前端自己也可以处理，最简单的就是用indexof判断进行显示隐藏，下面记录一个比较不错的方法，可以支持汉字、拼音、拼音首字母大写小写。

pinyin-engine 是一个简单高效的JavaScript拼音本地匹配引擎，它支持多音字，另外提供全文版支持繁体字下载PinyinEngine.js

也可以点击此处进行效果预览

源代码在这里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=yes" />
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    input{
        width: 80%;
        height: 50px;
        display: block;
        margin: 30px auto ;
        background: #F0F0F0;
        border: 1px solid #333;
        font-size: 26px;
        text-indent: 30px;
    }
    #cityBox{
        text-align: center;
    }
</style>
<body>
    <input type="text" id="inp">
    <ul id="cityBox">

    </ul>
</body>

<script src="PinyinEngine.js"></script>
<script>
    var demoData = [
        {name: '海门', value: 9},
        {name: '鄂尔多斯', value: 12},
        {name: '招远', value: 12},
        {name: '舟山', value: 12},
        {name: '齐齐哈尔', value: 14},
        {name: '盐城', value: 15},
        {name: '赤峰', value: 16},
        {name: '青岛', value: 18},
        {name: '乳山', value: 18},
        {name: '金昌', value: 19},
        {name: '泉州', value: 21},
        {name: '莱西', value: 21},
        {name: '日照', value: 21},
        {name: '胶南', value: 22},
        {name: '南通', value: 23},
        {name: '拉萨', value: 24},
        {name: '云浮', value: 24},
        {name: '梅州', value: 25},
        {name: '文登', value: 25},
        {name: '上海', value: 25},
        {name: '攀枝花', value: 25},
        {name: '威海', value: 25},
        {name: '承德', value: 25},
        {name: '厦门', value: 26},
        {name: '汕尾', value: 26},
        {name: '潮州', value: 26},
        {name: '丹东', value: 27},
        {name: '太仓', value: 27},
        {name: '曲靖', value: 27},
        {name: '烟台', value: 28},
        {name: '福州', value: 29},
        {name: '瓦房店', value: 30},
        {name: '即墨', value: 30},
        {name: '抚顺', value: 31},
        {name: '玉溪', value: 31},
        {name: '张家口', value: 31},
        {name: '阳泉', value: 31},
        {name: '莱州', value: 32},
        {name: '湖州', value: 32},
        {name: '汕头', value: 32},
        {name: '昆山', value: 33},
        {name: '宁波', value: 33},
        {name: '湛江', value: 33},
        {name: '揭阳', value: 34},
        {name: '荣成', value: 34},
        {name: '连云港', value: 35},
        {name: '葫芦岛', value: 35},
        {name: '常熟', value: 36},
        {name: '东莞', value: 36},
        {name: '河源', value: 36},
        {name: '淮安', value: 36},
        {name: '泰州', value: 36},
        {name: '南宁', value: 37},
        {name: '营口', value: 37},
        {name: '惠州', value: 37},
        {name: '江阴', value: 37},
        {name: '蓬莱', value: 37},
        {name: '韶关', value: 38},
        {name: '嘉峪关', value: 38},
        {name: '广州', value: 38},
        {name: '延安', value: 38},
        {name: '太原', value: 39},
        {name: '清远', value: 39},
        {name: '中山', value: 39},
        {name: '昆明', value: 39},
        {name: '寿光', value: 40},
        {name: '盘锦', value: 40},
        {name: '长治', value: 41},
        {name: '深圳', value: 41},
        {name: '珠海', value: 42},
        {name: '宿迁', value: 43},
        {name: '咸阳', value: 43},
        {name: '铜川', value: 44},
        {name: '平度', value: 44},
        {name: '佛山', value: 44},
        {name: '海口', value: 44},
        {name: '江门', value: 45},
        {name: '章丘', value: 45},
        {name: '肇庆', value: 46},
        {name: '大连', value: 47},
        {name: '临汾', value: 47},
        {name: '吴江', value: 47},
        {name: '石嘴山', value: 49},
        {name: '沈阳', value: 50},
        {name: '苏州', value: 50},
        {name: '茂名', value: 50},
        {name: '嘉兴', value: 51},
        {name: '长春', value: 51},
        {name: '胶州', value: 52},
        {name: '银川', value: 52},
        {name: '张家港', value: 52},
        {name: '三门峡', value: 53},
        {name: '锦州', value: 54},
        {name: '南昌', value: 54},
        {name: '柳州', value: 54},
        {name: '三亚', value: 54},
        {name: '自贡', value: 56},
        {name: '吉林', value: 56},
        {name: '阳江', value: 57},
        {name: '泸州', value: 57},
        {name: '西宁', value: 57},
        {name: '宜宾', value: 58},
        {name: '呼和浩特', value: 58},
        {name: '成都', value: 58},
        {name: '大同', value: 58},
        {name: '镇江', value: 59},
        {name: '桂林', value: 59},
        {name: '张家界', value: 59},
        {name: '宜兴', value: 59},
        {name: '北海', value: 60},
        {name: '西安', value: 61},
        {name: '金坛', value: 62},
        {name: '东营', value: 62},
        {name: '牡丹江', value: 63},
        {name: '遵义', value: 63},
        {name: '绍兴', value: 63},
        {name: '扬州', value: 64},
        {name: '常州', value: 64},
        {name: '潍坊', value: 65},
        {name: '重庆', value: 66},
        {name: '台州', value: 67},
        {name: '南京', value: 67},
        {name: '滨州', value: 70},
        {name: '贵阳', value: 71},
        {name: '无锡', value: 71},
        {name: '本溪', value: 71},
        {name: '克拉玛依', value: 72},
        {name: '渭南', value: 72},
        {name: '马鞍山', value: 72},
        {name: '宝鸡', value: 72},
        {name: '焦作', value: 75},
        {name: '句容', value: 75},
        {name: '北京', value: 79},
        {name: '徐州', value: 79},
        {name: '衡水', value: 80},
        {name: '包头', value: 80},
        {name: '绵阳', value: 80},
        {name: '乌鲁木齐', value: 84},
        {name: '枣庄', value: 84},
        {name: '杭州', value: 84},
        {name: '淄博', value: 85},
        {name: '鞍山', value: 86},
        {name: '溧阳', value: 86},
        {name: '库尔勒', value: 86},
        {name: '安阳', value: 90},
        {name: '开封', value: 90},
        {name: '济南', value: 92},
        {name: '德阳', value: 93},
        {name: '温州', value: 95},
        {name: '九江', value: 96},
        {name: '邯郸', value: 98},
        {name: '临安', value: 99},
        {name: '兰州', value: 99},
        {name: '沧州', value: 100},
        {name: '临沂', value: 103},
        {name: '南充', value: 104},
        {name: '天津', value: 105},
        {name: '富阳', value: 106},
        {name: '泰安', value: 112},
        {name: '诸暨', value: 112},
        {name: '郑州', value: 113},
        {name: '哈尔滨', value: 114},
        {name: '聊城', value: 116},
        {name: '芜湖', value: 117},
        {name: '唐山', value: 119},
        {name: '平顶山', value: 119},
        {name: '邢台', value: 119},
        {name: '德州', value: 120},
        {name: '济宁', value: 120},
        {name: '荆州', value: 127},
        {name: '宜昌', value: 130},
        {name: '义乌', value: 132},
        {name: '丽水', value: 133},
        {name: '洛阳', value: 134},
        {name: '秦皇岛', value: 136},
        {name: '株洲', value: 143},
        {name: '石家庄', value: 147},
        {name: '莱芜', value: 148},
        {name: '常德', value: 152},
        {name: '保定', value: 153},
        {name: '湘潭', value: 154},
        {name: '金华', value: 157},
        {name: '岳阳', value: 169},
        {name: '长沙', value: 175},
        {name: '衢州', value: 177},
        {name: '廊坊', value: 193},
        {name: '菏泽', value: 194},
        {name: '合肥', value: 229},
        {name: '武汉', value: 273},
        {name: '大庆', value: 279}
    ];
    var $ = function (id) {
        return document.getElementById(id)
    };
    var $cityBox = $('cityBox');
    var $input = $('inp');
    var preVal = $input.value;
    //重点将input内容进行search
    var engine = new PinyinEngine(demoData,['name']);

    //初始加载
    loadCity(demoData);
    //加载所有数据
    function loadCity(data) {
        //判断是否为空
        if(data.length === 0){
            var $li = document.createElement("li");
            $li.innerText = '未找到！！！！！！';
            $cityBox.appendChild($li);
            return false;
        }
        //循环插入
        for (var i=0;i<data.length;i++){
            var $li = document.createElement("li");
            $li.innerText = data[i].name;
            $cityBox.appendChild($li)
        }
    }
    //input改变进行search
    $input.oninput = $input.onpropertychange = function () {
        var val = $input.value;
        if (val === preVal) return;
        preVal = $input.value;
        if (val === '') {
            loadCity(demoData);
        } else {
            $cityBox.innerText = '';
            var list = engine.query(val);
            loadCity(list);
        };
    }

</script>
</html>

vivo手机H5页面ERROR

2018年7月26日 · 阅读需 2 分钟

今天收到用户反馈，vivo手机我们的app H5页面怎么显示的不对啊，让后我们就测试了好几个机型，华为、小米、oppo、酷派，都没有问题啊，安卓小哥虚拟机都用上了。

后来安卓小哥用vivo手机测试在log处发现了报错，让后打开js一看有这个 ` 符号，还有这个Array.from()，${ele}等。

这都是ES6语法啊，原来vivo手机居然不支持ES6

都这么久了vivo还不支持ES6！！！！！！

错误纠正。

后来我们专门进行了测试，发现只有``，ES6新增的模板字符串有问题，我们的app在vivo收手机上不起作用。别的语法都没有问题。在vivo手机自带的浏览器进行测试也是没有问题的。原谅我还黑了vivo一波。最后是我们app的内核有问题。。。。。。

AJAX error参数及状态码

2018年7月11日 · 阅读需 9 分钟

$.ajax({
    type:"post",
    url:"",
    dataType:"json",
    data:{},
    success:function(res){
        console.log(res)
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log(jqXHR.readyState);
        console.log(jqXHR.status);
        console.log(jqXHR.statusText);
        console.log(jqXHR.responseText);
        console.log(textStatus);
        console.log(errorThrown);
    }
})

参数一（jqXHR）

jqXHR是一个jqXHR对象，在Jquery1.4和1.4版本之前返回的是XMLHttpRequest对象，1.5版本以后则开始使用jqXHR对象，该对象是一个超集，就是该对象不仅包括XMLHttpRequest对象，还包含其他更多的详细属性和信息。

readyState

当前状态 0 －（未初始化）还没有调用send()方法 1 －（载入）已调用send()方法，正在发送请求，服务器连接已建立 2 －（载入完成）send()方法执行完成，已经接收到全部响应内容，请求已接收 3 －（交互）正在解析响应内容，请求处理中 4 －（完成）响应内容解析完成，可以在客户端调用了，请求已完成，且响应已就绪

status

返回的HTTP状态码，比如常见的404,500等错误代码。

statusText

对应状态码的错误信息，比如404错误信息是not found,500是Internal Server Error。

responseText

服务器响应返回的文本信息

参数二（textStatus）

返回的是字符串类型，表示返回的状态，根据服务器不同的错误可能返回下面这些信息："timeout"（超时）, "error"（错误）, "abort"(中止), "parsererror"（解析错误），还有可能返回空值。

参数三（errorThrown）

也是字符串类型，表示服务器抛出返回的错误信息，如果产生的是HTTP错误，那么返回的信息就是HTTP状态码对应的错误信息，比如404的Not Found,500错误的Internal Server Error。

AJAX状态码说明

0**—状态未初始化

1**—请求收到，继续处理

100—客户必须继续发出请求
101—客户要求服务器根据请求转换HTTP协议版本

2**—操作成功收到，分析、接受

200—交易成功
201—提示知道新文件的URL
202—接受和处理、但处理未完成
203—返回信息不确定或不完整
204—请求收到，但返回信息为空
205—服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206—服务器已经完成了部分用户的GET请求

3**—完成此请求必须进一步处理

300—请求的资源可在多处得到
301—删除请求数据
302—在其他地址发现了请求数据
303—建议客户访问其他URL或访问方式
304—客户端已经执行了GET，但文件未变化
305—请求的资源必须从服务器指定的地址得到
306—前一版本HTTP中使用的代码，现行版本中不再使用
307—申明请求的资源临时性删除

3**—完成此请求必须进一步处理

300—请求的资源可在多处得到
301—删除请求数据
302—在其他地址发现了请求数据
303—建议客户访问其他URL或访问方式
304—客户端已经执行了GET，但文件未变化
305—请求的资源必须从服务器指定的地址得到
306—前一版本HTTP中使用的代码，现行版本中不再使用
307—申明请求的资源临时性删除

4**—请求包含一个错误语法或不能完成

401—请求授权失败
401.1-登录失败。  
401.2-服务器配置导致登录失败。  
401.3-由于ACL对资源的限制而未获得授权。  
401.4-筛选器授权失败
401.5-ISAPI/CGI应用程序授权失败。  
401.7–访问被Web服务器上的URL授权策略拒绝。这个错误代码为IIS6.0所专用。  
402—保留有效ChargeTo头响应
403—请求不允许
403.1-执行访问被禁止。  
403.2-读访问被禁止。  
403.3-写访问被禁止。  
403.4-要求SSL。  
403.5-要求SSL128。  
403.6-IP地址被拒绝。  
403.7-要求客户端证书。  
403.8-站点访问被拒绝。  
403.9-用户数过多。  
403.10-配置无效。  
403.11-密码更改。  
403.12-拒绝访问映射表。  
403.13-客户端证书被吊销。  
403.14-拒绝目录列表。  
403.15-超出客户端访问许可。  
403.16-客户端证书不受信任或无效。  
403.17-客户端证书已过期或尚未生效。  
403.18-在当前的应用程序池中不能执行所请求的URL。这个错误代码为IIS6.0所专用。  
403.19-不能为这个应用程序池中的客户端执行CGI。这个错误代码为IIS6.0所专用。  
403.20-Passport登录失败。这个错误代码为IIS6.0所专用。  
404—没有发现文件、查询或URl
404.0-（无）–没有找到文件或目录。  
404.1-无法在所请求的端口上访问Web站点。  
404.2-Web服务扩展锁定策略阻止本请求。  
404.3-MIME映射策略阻止本请求。  
405—用户在Request-Line字段定义的方法不允许
406—根据用户发送的Accept拖，请求资源不可访问
407—类似401，用户必须首先在代理服务器上得到授权
408—客户端没有在用户指定的饿时间内完成请求
409—对当前资源状态，请求不能完成
410—服务器上不再有此资源且无进一步的参考地址
411—服务器拒绝用户定义的Content-Length属性请求
412—一个或多个请求头字段在当前请求中错误
413—请求的资源大于服务器允许的大小
414—请求的资源URL长于服务器允许的长度
415—请求资源不支持请求项目格式
416—请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417—服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
423–锁定的错误。  

5**—服务器错误

500—服务器产生内部错误
500.12-应用程序正忙于在Web服务器上重新启动。  
500.13-Web服务器太忙。  
500.15-不允许直接请求Global.asa。  
500.16–UNC授权凭据不正确。这个错误代码为IIS6.0所专用。  
500.18–URL授权存储不能打开。这个错误代码为IIS6.0所专用。  
500.100-内部ASP错误。  
501—服务器不支持请求的函数
502—服务器暂时不可用，有时是为了防止发生系统过载
502.1-CGI应用程序超时。  
502.2-CGI应用程序出错。application.  
503—服务器过载或暂停维修，这个错误代码为IIS6.0所专用。  
504—关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505—服务器不支持或拒绝支请求头中指定的HTTP版本

event.stopPropagation()、event.stopPropagation()、 return false 理解与兼容

2018年7月10日 · 阅读需 3 分钟

这个布局div里有一个a链接，我们队div和a都添加点击事件（使用jq方法添加点击事件）来查看效果。

<div class="testBox">
    <a href="https://www.baidu.com/" target="_blank">百度一下</a>
</div>

$('.testBox').click(function () {
    console.log(1);
});

$('.testBox a').click(function () {
    console.log(2);
});

默认情况下

控制台输出结果为2、1并且跳转打开链接。因为事件冒泡原理，DOM上触发事件后，通过DOM树往上，在每一级父元素上触发。有时候我们想先不执行跳转链接或者只执行当前DOM的事件，我们就用到下面的了。

event.preventDefault();//阻止默认行为

$('.testBox a').click(function (event) {
    event.preventDefault();
    console.log(2);
});

控制台输出结果为2、1链接没有跳转。阻止事件的默认行为，但不阻止冒泡。如果考虑IE还需要进行兼容（用三元表达式进行兼容）

event.preventDefault ? event.preventDefault() : event.returnValue=false;

event.stopPropagation();//阻止事件冒泡

$('.testBox a').click(function (event) {
    event.stopPropagation();
    console.log(2);
});

控制台输出结果为2并且跳转打开链接。阻止事件的冒泡，但不阻止事件的默认行为。如果考虑IE还需要进行兼容（用三元表达式进行兼容）

event.stopPropagation ? event.stopPropagation() : event.cancelBubble=true;

return false;

$('.testBox a').get(0).addEventListener("click",function(){
    return false;
     console.log(2);
},false);

控制台输出结果为1并且跳转打开链接。若使用a.addEventListener,则return false 不会阻止默认行为；使用原生js时，若要阻止默认行为，最好还是用event.preventDefault（针对非IE）或event.returnValue=false（针对IE）来设定。

$('.testBox a').click(function (event) {
    return false;
    console.log(2);
});

控制台没有输出结果链接也咩有进行跳转。使用a.onclick或a.attachEvent,则 return false会阻止默认行为；使用jquery，return false 即会阻止默认行为，也会阻止事件的冒泡。在jquery中，一般使用return false.

在使用的时候要注意return false;后面的代码不会执行。

时间戳与时间获取

2018年7月9日 · 阅读需 3 分钟

1.Date.parse(new Date()) 不推荐这种办法，毫秒级别的数值被转化为000

var timestamp1 = Date.parse(new Date());
console.log(timestamp1); //1531100204000

2.(new Date()).valueOf() 通过valueOf()函数返回指定对象的原始值获得准确的时间戳值

var timestamp2 = (new Date()).valueOf();
console.log(timestamp2); //1531100216013

3.new Date().getTime() 通过原型方法直接获得当前时间的毫秒值，准确

var timestamp3 = new Date().getTime();
console.log(timestamp3); //1531100225639

4.Number(new Date()) 将时间转化为一个number类型的数值，即时间戳

var timetamp4 = Number(new Date());
console.log(timetamp4); //1531100238110

5.Date.now() ES5给Date提供了一种获取时间戳的新特性

var timetamp5 = Date.now();
console.log(timetamp5); //1531100248079

获取当前时间

一个获取当前时间的函数，比较不错，好用。

Date.prototype.pattern=function(fmt) {
    var o = {
        "M+" : this.getMonth()+1, //月份
        "d+" : this.getDate(), //日
        "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时
        "H+" : this.getHours(), //小时
        "m+" : this.getMinutes(), //分
        "s+" : this.getSeconds(), //秒
        "q+" : Math.floor((this.getMonth()+3)/3), //季度
        "S" : this.getMilliseconds() //毫秒，
    };
    var week = {
        "0" : "星期日",
        "1" : "星期一",
        "2" : "星期二",
        "3" : "星期三",
        "4" : "星期四",
        "5" : "星期五",
        "6" : "星期六"
    };
    if(/(y+)/.test(fmt)){
        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
    }
    if(/(E+)/.test(fmt)){
        fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);
    }
    for(var k in o){
        if(new RegExp("("+ k +")").test(fmt)){
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        }
    }
    return fmt;
}

使用方法如下 yyyy(年) MM(月) dd(日) HH(时) mm(分) ss(秒) 随意搭配可以调换顺序使用

console.log(new Date().pattern("HH:mm"));//09:41
console.log(new Date().pattern("yyyy-MM-dd HH:mm"));//2018-07-09 09:41
console.log(new Date().pattern("yyyy年MM月dd日 HH:mm"));//2018年07月09日 09:41
console.log(new Date().pattern("yyyy年MM月dd日 HH:mm:ss"));//2018年07月09日 09:41:55
console.log(new Date().pattern("HH:mm yyyy年MM月dd日 E"));//09:41 2018年07月09日 星期一

移动端比较不错的时间插件 lCalendar.js

详情可以点击此链接查看手机端日期插件lCalendar.js

多多记录，方便以后查看。

rest参数(...变量名)

扩展运算符(...)

扩展运算符应用

合并数组​

判断最大值最小值​

数组去重​

ES5方法

利用对象唯一属性进行去重​

利用indexOf属性进行判断​

ES6方法

SELECT 语句

SELECT DISTINCT 语句

WHERE 子句

AND & OR 运算符

ORDER BY 关键字

INSERT INTO 语句

UPDATE 语句

DELETE 语句

参数一（jqXHR）

readyState​

status​

statusText​

responseText​

参数二（textStatus）

参数三（errorThrown）

AJAX状态码说明

0**—状态未初始化​

1**—请求收到，继续处理​

2**—操作成功收到，分析、接受​

3**—完成此请求必须进一步处理​

3**—完成此请求必须进一步处理​

4**—请求包含一个错误语法或不能完成​

5**—服务器错误​

默认情况下

event.preventDefault();//阻止默认行为

event.stopPropagation();//阻止事件冒泡

return false;

1.Date.parse(new Date()) 不推荐这种办法，毫秒级别的数值被转化为000​

2.(new Date()).valueOf() 通过valueOf()函数返回指定对象的原始值获得准确的时间戳值​

3.new Date().getTime() 通过原型方法直接获得当前时间的毫秒值，准确​

4.Number(new Date()) 将时间转化为一个number类型的数值，即时间戳​

5.Date.now() ES5给Date提供了一种获取时间戳的新特性​

获取当前时间

移动端比较不错的时间插件 lCalendar.js

合并数组

判断最大值最小值

数组去重

利用对象唯一属性进行去重

利用indexOf属性进行判断

readyState

status

statusText

responseText

0**—状态未初始化

1**—请求收到，继续处理

2**—操作成功收到，分析、接受

3**—完成此请求必须进一步处理

3**—完成此请求必须进一步处理

4**—请求包含一个错误语法或不能完成

5**—服务器错误

1.Date.parse(new Date()) 不推荐这种办法，毫秒级别的数值被转化为000

2.(new Date()).valueOf() 通过valueOf()函数返回指定对象的原始值获得准确的时间戳值

3.new Date().getTime() 通过原型方法直接获得当前时间的毫秒值，准确

4.Number(new Date()) 将时间转化为一个number类型的数值，即时间戳

5.Date.now() ES5给Date提供了一种获取时间戳的新特性