前端知识梳理

简介：2018即将过去，为过去忙碌的自己梳理一份前端清单

Jquery方法

inArray

•查找制定元素索引

indexOf和findIndex

•返回某个指定的字符串值在字符串中首次出现的位置(“===”来进行比较的，所以只能检索简单类型的值)。没有则返回-1

•该方法接受一个函数，function(currentValue, index, arr)。分别为当前的数组项，当前的数组项索引，和当前数组。没有则返回-1

merge unique sort

splice

• 删除 array.splice(index,n);

  • index：数组中需要删除数据的起始位置；
  • n：需要删除的元素，数据的个数；
    

• 插入 array.splice(index,0,data1,data2,…);

  • index：数组中需要插入数据的起始位置；
  • 0：需要替换的元素的个数，实质是删除；
  • data1,data2：需要插入的元素，用逗号隔开
    

数组操作常用方法集合

• push 在数组尾部添加，返回添加后的数组元素的个数

• unshift 在数组头部添加，返回数组添加后元素的个数

• shift 删除数组的第一个元素，返回被删除的元素

• pop 删除数组的最后一个元素，返回被删除的元素

• splice 删除、插入、替换 执行的是操作，改变原数组的值，不返回任何值

• slice（start，end） 截取数组的一部分，返回截取的数组，start为起始位置，end为结束为止，不包括结束的位置元素

• concat a.concat(b) 将两个数组拼接在一起，返回一个拼接后的新数组，且a内部的元素在新数组的前部

• toString 将数组转换成字符串 返回一个字符串，toLocalString 实现与toString方法类似，不过在IE下会出现兼容性问题，比如字符前后出现空格，数字出现小数，导致length属性变化，所以尽量使用string

• join（’’& ‘’） 将数组以&符号间隔转换为字符串 返回一个字符串

• split（‘’& ‘’） 将字符串以&符号位标记转换成数组 返回一个新数组

• sort(function(a,b){return a-b}) 将数组进行排序，如果没有function函数，则按字符编码排序 返回操作后的新数组

• reverse() 将数组进行倒序排序，即将数组的顺序颠倒 返回倒序排列后的新数组

• valueOf 查看对象内的值，可以返回字符串类型的数组，不常用

• charAt（index）获取字符串制定顺序上的元素，返回要查询位置的元素，不能用于查询数组元素

filter

• filter()方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。
  

call、apply、bind

• call的作用就是改变this的指向的，第一个传的是一个对象，就是你要借用的那个对象。

box.onclick = function(){
     
　　function fn(){
     
　　　　alert(this);  //window 
　　}
　　fn();
};

改成如下：
box.onclick = function(){
     
　　function fn(){
     
　　　　console.log(this);  //box
　　}
　　fn.call(this);
};

• call就是挨个传值，apply传一个数组，bind也是挨个传值，但和call和apply还有多少不同，使用call和apply会直接执行这个函数，而bind并不会而是将绑定好的this重新返回一个新函数，什么时候调用由你自己决定。
  

extend

• 合并数组
  • 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。(如果多个对象具有相同的属性，则后者会覆盖前者的属性值。)

• 为jQuery类添加类方法，可以理解为添加静态方法
  
• 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。·

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：

//$("#input1")　为一个jQuery实例，当它调用成员方法 alertWhileClick后，
//便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。·
//jQuery.extend() 的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，
//如jQuery.init()，而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上，
//所以实例化一个jQuery对象的时候，它就具有了这些方法，这 是很重要的，在jQuery.js中到处体现这一点
 $.fn.extend({
     
        alertWhileClick: function () {
     
            $(this).click(function () {
     
                alert($(this).val());
            });
        }
    });
    $("#input1").alertWhileClick();

reverse

•颠倒数组顺序

 "123456".split('').reverse().join('')

object

assign()

•object.assign用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。第一个参数是target，后面的都是source。（注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。）

•如果只有一个参数即target，Object.assign会直接返回该参数,如果该参数不是对象，则会先转成对象，然后返回。undefined和null无法被转换成对象，会报错
• 如果非对象参数不在首参数target的位置，在source的位置，会尝试转换为对象，若无法转换为对象，则忽略。而不会报错。另外除了字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果。

is()

• 判断两个值是否是相同的值。
  • 在js中，相等运算符（==）会自动转换数据类型再进行比较 eg: ( 0 == false // true)
  • 全等运算符（===）虽然不会自动转换数据类型进行比较，但是：(NaN === NaN // false ; +0 === -0 // true)
  • ES6新增的object.is()便是为了解决 === 中存在的问题，用来比较两个值是否严格相等，基本行为与 === 一致
    

区别对比

prop()和attr()的区别

•对于HTML元素本身就带有的固有属性，特别是具有 true 和 false 两个属性的固有属性，如 checked, selected , disabled，在处理时，使用prop方法。

•对于HTML元素我们自己自定义的DOM属性,如data-*，在处理时，使用attr方法。

<input id="chk1" type="checkbox" />
<input id="chk2" type="checkbox" checked="checked" />
 
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
 
如果上面使用attr方法，则会出现：
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

逻辑符的短路运算 && ||

• &&

  • 如果逻辑与运算符左边的值布尔转换后为true，那么返回右边的值（不管右边的值是真还是假）。
  • 如果逻辑与运算符左边的值布尔转换后为false，那么返回左边的值（不管右边的值是真还是假）。
    

• ||

  • 如果逻辑或运算符左边的值布尔转换后为true，那么返回左边的值（不管右边的值是真还是假）。
  • 如果逻辑或运算符左边的值布尔转换后为false，那么返回右边的值（不管右边的值是真还是假）。
  • 

JSON.stringify() JSON.parse()

• //JSON.stringify()【从一个对象中解析出字符串】
  var data={name:‘goatling’} JSON.stringify(data) 结果：’{“name”:“goatling”}’

• //JSON.parse()【从一个字符串中解析出json对象】
  var data=’{“name”:“goatling”}’ JSON.parse(data) 结果：name:“goatling”

• //返回的是 JSON 对象

  • 后台可使用（string name,string age）接收
    $(“form”).serializeArray();

• 方法通过序列化表单值，创建 URL 编码文本字符串

  • 后台可使用（StuModel model）自动装载接收
    $(“form”).serialize();
    

字符串拼接

var str=`ES6拼接名字${
       name},性别${
       age}`;//中间复杂拼接
var newStr="名字"+name+"性别"+age;//简单拼接