简介: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();
- 后台可使用(string name,string age)接收
-
方法通过序列化表单值,创建 URL 编码文本字符串
- 后台可使用(StuModel model)自动装载接收
$(“form”).serialize();
- 后台可使用(StuModel model)自动装载接收
字符串拼接
var str=`ES6拼接名字${name},性别${age}`;//中间复杂拼接
var newStr="名字"+name+"性别"+age;//简单拼接