js 笔记整理
Js中for、for-in、forEach以及for-of的用法及特性对比
for-in
for...in以任意顺序遍历一个对象的可枚举属性。所以for-in不适合用来迭代一个Array。同时，for-in是可以遍历对象中所有可枚举属性的，包括原型链上的可枚举属性。
let ret = [];
array.num = 6; // 对象上直接添加属性
Array.prototype.num = 6; // 原型链中添加属性
for(let i in array){
ret.push(array[i])
}
console.log(ret) // [ 1, 2, 3, 4, 5, 6, 7 ]
如果可以地设置属性为不可枚举，那么for-in循环将不会遍历到这个属性
let ret = [];
Object.defineProperty(array,"num",{
enumerable: false, // 设置属性不可遍历
value: 8
})
for(let i in array){
ret.push(array[i])
}
console.log(ret) // [ 1, 2, 3, 4, 5 ]
解决方法：使用hasOwnProperty()
hasOwnProperty()方法可以检测一个属性是存在于实例中，还是存在于原型中。这个方法只在给定属性存在于对象实例中时，才会返回true。
/数组
var arr = ["星期一","星期二","星期三"];
Array.prototype.something = ["放假","休息咯"];
for (var i in arr){
if(arr.hasOwnProperty(i)){
console.log(arr[i])
}
}
for（最原始的写法）、 支持 break、continue和return语句）、
forEach 数组的方法，arr.forEach; forEach（ES5，但是它不支持使用break、continue和return语句）、
for…in循环数组索引、对象的属性，但使用 for…in 原型链上的所有属性都将被访问，用 hasOwnProperty() 方法解决。
for…of（ES6，循环数组的元素值）这三个是循环数组（对象数组）的；
定义变量的6种方式
ES5 只有两种声明变量的方法：
var命令和function命令。
ES6 除了添加let和const命令，
还有 import命令和class命令。
去重两种方式
方法一 分析
function unique(arr) { //定义常量 res,值为一个Map对象实例 const res = new Map(); //返回arr数组过滤后的结果，结果为一个数组 //过滤条件是，如果res中没有某个键，就设置这个键的值为1 return arr.filter((a) => !res.has(a) && res.set(a, 1)) }
方法二：
function unique(arr) { return Array.from(new Set(arr)) }
两种还是有差异的，比如[2,,3,3]==>[2,3]/[2,3,undefined]
-----------------------
不指定字段去 es6 new Set 有缺陷,无法过滤 null,undefined
function myseta(ary) {
const strings = ary.map((item) => JSON.stringify(item))
// 使用Set数据结构去重对象
// return new Set(strings)
//var arr6 = [null, "null", undefined, "undefined", "", NaN, null, , undefined, , , NaN, ""]
//console.log("strings", strings)
// ['null', '"null"', undefined, '"undefined"', '""', 'null', undefined]
// 使用Array.from()把Set数据结构去重对象后的结构，转为数组
// return Array.from(new Set(strings))
//报错 JSON.parse(item) "undefined" is not valid JSON
// 使用Array.from()转为数组，然后再使用数组的map方法把数组里面的字符串类型转化为对象类型:
return Array.from(new Set(strings)).map((item) => JSON.parse(item))
};
特别注意下面可，完美 过滤null,NaN,undefined,{}
function normalarr(array, index) {
// var arr5 =[1, 2, 0, 0, null, "null", false, "false", {"id": 1}, {"id": 2}, {"id": 1},5, "5", {}, {}]
// var arr6 = [null, "null", undefined, "undefined", "", NaN, null, , undefined, , , NaN, ""]
// var arr7 = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
// 'NaN', 0, 0, 'a', 'a', {}, {}
// ]
//console.log("去重arr5 ", unique(arr5))
//[[1, 2, 0, null, 'null', false, 'false', {id: 1}, {id: 2}, 5, '5', {}]]
//console.log("去重arr6 ", unique(arr6))
//[null, 'null', undefined, 'undefined', '', NaN]
//console.log("去重arr7 ", unique(arr7))
//[1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {}]
var obj = {};
return array.filter(function(item, index) {
//console.log("typeof item + item", typeof item + JSON.stringify(item))
var hasOne = typeof item + JSON.stringify(item)
return obj.hasOwnProperty(hasOne) ? 0 : (obj[hasOne] = 1) //已存在则过滤，不然就新增属性
})
}
字段去重 指定与不指定 两者封装
function unique(array, prop) {
var len = array && array.length;
if (!len) {
return [];
}
var util = {
isObject: function(value) {
return Object.prototype.toString.call(value) === '[object Object]';
}
}
function normalarr(array, index) {
// var arr5 =[1, 2, 0, 0, null, "null", false, "false", {"id": 1}, {"id": 2}, {"id": 1},5, "5", {}, {}]
// var arr6 = [null, "null", undefined, "undefined", "", NaN, null, , undefined, , , NaN, ""]
// var arr7 = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
// 'NaN', 0, 0, 'a', 'a', {}, {}
// ]
//console.log("去重arr5 ", unique(arr5))
//[[1, 2, 0, null, 'null', false, 'false', {id: 1}, {id: 2}, 5, '5', {}]]
//console.log("去重arr6 ", unique(arr6))
//[null, 'null', undefined, 'undefined', '', NaN]
//console.log("去重arr7 ", unique(arr7))
//[1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {}]
var obj = {};
return array.filter(function(item, index) {
//console.log("typeof item + item", typeof item + JSON.stringify(item))
var hasOne = typeof item + JSON.stringify(item)
return obj.hasOwnProperty(hasOne) ? 0 : (obj[hasOne] = 1) //已存在则过滤，不然就新增属性
})
}
function uuidarr(array, prop) {
// var ary1 = [
// {id: 0,text: 0},
// {id: 1,text: "1"},
// {id: 1,text: "1"},
// {id: 2,text: "2"},
// {id: '',text: ''},
// {id: true,text: true},
// {id: null,text: null},
// {id: NaN,text: NaN},
// {id: undefined,text: undefined},
// {id: "true",text: "true"},
// {id: "null",text: null},
// {id: "NaN",text: NaN},
// {id: "undefined",text: undefined},
// ];
var result = [];
var obj = {};
var len = array.length;
for (var i = 0; i < len; i++) {
var oneitem = array[i];
if (util.isObject(oneitem) && oneitem.hasOwnProperty(prop)) {
var oneVal = oneitem[prop];
//区分 字符串 [null,NaN, undefined,"null","NaN","undefined"]
//var keyOne =oneVal;无法区分字符串 null 与 "null" NaN 与 "NaN" undefined 与 "undefined"
var keyOne = typeof oneVal + oneVal;
if (!obj[keyOne]) {
result.push(oneitem);
obj[keyOne] = 1;
}
}
}
return result;
}
if (typeof prop === "undefined") {
return normalarr(array)
}
return uuidarr(array, prop)
}
数组中存在某个字段
function inArray(elem, array, i) {
var util = {
isNaN: function(value) {
return value !== value
},
isObject: function(value) {
return Object.prototype.toString.call(value) === '[object Object]';
},
}
// var array = []; arr[2] = 1;
// var array = [null, '', NaN, undefined, {}, "null", "undefined", "NaN", "{}", {id: 1}, {id: 2}, {id: 1}]
// console.log(" null inArray", inArray(null, array))
// console.log(" '' inArray", inArray('', array))
// console.log(" NaN inArray", inArray(NaN, array))
// console.log(" undefined inArray", inArray(undefined, array))
// console.log(" {} inArray", inArray({}, array))
// console.log("'null' inArray", inArray('null', array))
// console.log("'undefined' inArray", inArray("undefined", array))
// console.log("'NaN' inArray", inArray('NaN', array))
// console.log("'{}' inArray", inArray('{}', array))
// console.log(" {id:1} inArray", inArray({
// id: 1,
// }, array))
// console.log(" {id:2} inArray", inArray({
// id: 2,
// }, array))
// console.log("'test' inArray", inArray("test", array))
var len = array && array.length;
var i = i ? i < 0 ? Math.max(0, len + i) : i : 0; // 当i为负数时，从数组后边len+i的位置开始索引；当i不存在时，从数组首元素开始检索;
if (!len) {
return -1;
}
// console.log("i", i)
if (!util.isNaN(elem) && !util.isObject(elem) && typeof elem !== 'undefined' && array.indexOf) {
//console.log("indexOf")
//1，array.indexOf 无法区分 NaN、{} ；2，array.indexOf(empty)返回-1
//var arr0 = [];arr0[2] = 1; 此时 arr0 =[empty × 2, 1] array.indexOf(arr0[0]) 查找为-1
return array.indexOf(elem)
}
for (; i < len; i++) {
var oneitem = array[i];
//console.log(oneitem, "i in arr", i in array)
if (util.isNaN(elem)) {
if (util.isNaN(elem) === util.isNaN(oneitem)) {
//console.log("isNaN", i)
return i;
}
} else if (util.isObject(elem)) {
if (JSON.stringify(elem) === JSON.stringify(oneitem)) {
//console.log("obj", i)
return i;
}
} else if (elem === oneitem) {
//console.log("其他", i)
return i;
}
}
//没有找到的话就返回-1
return -1;
}
数组去交集
// 原数组
const serveralArr = [
[1,2,2,5,3],
[3,2,3,2,2],
[3,2,4,4],
[3],
]
// 取交集
function intersectRepeat(arr){
var result= arr.reduce((a, b) => a.filter(c => b.includes(c))) // [4]
result= Array.from(new Set(result))
return result
}
console.log("交集结果 是：",intersectRepeat(serveralArr)) // [2, 3]
变量作用域常见问题
//例如，以下代码会输出5次，结果都是5，那么如何输出0、1、2、3、4？
for(var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
//利用闭包的原理实现，代码如下：
for(var i = 0; i < 5; i++) {
(function(e) {
setTimeout(function() {
console.log('传进来的是'+e);
}, 1000);
})(i);
}
for(let i = 0; i < 5; i++) {
setTimeout(function() {
console.log('传进来的是'+i);
}, 1000);
}
数组中随机随 指定个数
function getRandomArray(arr,num){
//新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组;
var temp_array = new Array();
for (var index in arr) {
temp_array.push(arr[index]);
}
//取出的数值项,保存在此数组
var return_array = new Array();
for (var i = 0; i<num; i++) {
//判断如果数组还有可以取出的元素,以防下标越界
if (temp_array.length>0) {
//在数组中产生一个随机索引
var arrIndex = Math.floor(Math.random()*temp_array.length);
//将此随机索引的对应的数组元素值复制出来
return_array[i] = temp_array[arrIndex];
//然后删掉此索引的数组元素,这时候temp_array变为新的数组
temp_array.splice(arrIndex, 1);
} else {
//数组中数据项取完后,退出循环,比如数组本来只有10项,但要求取出20项.
break;
}
}
return return_array;
}
es6 字符串
$("#result").append(
`He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
);
:prop="`list.${index2}.tableData.${scope.$index}.input`"
js 数据类型判断 iview
function typeOf(obj) {
const toString = Object.prototype.toString;
const map = {
'[object Boolean]' : 'boolean',
'[object Number]' : 'number',
'[object String]' : 'string',
'[object Function]' : 'function',
'[object Array]' : 'array',
'[object Date]' : 'date',
'[object RegExp]' : 'regExp',
'[object Undefined]': 'undefined',
'[object Null]' : 'null',
'[object Object]' : 'object'
};
return map[toString.call(obj)];
}
es6 剩余参数
function setData(index,howmany){
var arg=arguments;
var index=arg[0];
var howmany=arg[1];
var newList =[].slice.call(arguments).filter(function (item,index) {
return index>1;
});
//var args = [].slice.call(arguments)
// 避免泄露参数 参数是执行数组方法时括号中的参数
// http://jsperf.com/closure-with-arguments
// let i = arguments.length
// var args = new Array(i)
// while (i--) {
// args[i] = arguments[i]
// }
// 从第二个参数开始处理(数组下标1)
// for (var i = 2, len = arguments.length; i < len; i++) {
// result[arguments[i]] = object[arguments[i]]
// }
// 子类续承父类
//Rectangle.prototype = Object.create(Shape.prototype);
//Rectangle.prototype.constructor = Rectangle;
}
function func(a,b ...rest) { console.log(a) console.log(rest) } func(1) func(1, 2, 3, 4)
<script> function func(a) { var normalArray = [].slice.call(arguments); var default_len=arguments.callee.length; //获取形参的个数：函数名.length 或 arguments.callee.length var option_len=normalArray.length||0;//获取实参的个数：arguments.length console.log('arguments--------------',arguments,) console.log("default_len",default_len,"option_len",option_len,"normalArray",normalArray) var first=normalArray.slice(0,default_len); var rest=normalArray.slice((default_len)); if(default_len>=option_len){ rest=[]; console.log("相等",rest) } console.log("first",first) console.log("rest",rest) console.log("-------------------------------------------------------------------") } func() func(1) func(9,8) func(2, 6, 3, 4) </script>
// ES5 a = list[0], rest = list.slice(1) // ES6 [a, ...rest] = list
字符串长度
function length(str) {
return [...str].length;
}
console.log( length('x\uD83D\uDE80y')) // 3
console.log( length('22')) // 2
console.log( length('哈哈')) // 2
伪数组转换为数组
var nodeList = document.querySelectorAll('div');
console.log([...nodeList]); // [div, div, div ... ]
拆解字符串与数组
var array = [1,2,3,4];
console.log(...array);//1 2 3 4
var str = "String";
console.log(...str);//S t r i n g
数组清空
数组中间 插入数组
<script> var arr1=[1,2,3,4,7,8] var arr2=[5,6] arr1.splice(4,0,...arr2) console.log("arr1",arr1) var adrr1=[1,2,3,4,7,8] var adrr2=[5,6] adrr1.splice.apply(adrr1,[4,0].concat(adrr2)) console.log("adrr1",adrr1) var array1=[1,2,3,4,7,8] var array2=[5,6] var nArray1 = array1.slice(0, 4).concat(array2, array1.slice(4)); var nArray2 = [...array1.slice(0, 4), ...array2, ...array1.slice(4)]; console.log("nArray1",nArray1) console.log("nArray2",nArray2) function insert(arrfirst,arrlast,index){ if (index < 0){ index = 0; }else if(index > arrfirst.length){ index = arrfirst.length; } for (var i = arrlast.length-1; i >= 0; i--){ arrfirst.splice(index,0,arrlast[i]);//是在index位置用arrlast[i]替换掉arrfirst数组中的0个元素 } return arrfirst; } var a1rr1=[1,2,3,4,7,8] var a1rr2=[5,6] console.log('insert',insert(a1rr1,a1rr2,4)); </script>
替换整个数组 splice 与slice
var ar2r=[1,2,3]
var ar3r=[4,5,6]
ar2r.splice(0,ar2r.length,...ar3r)
var ar6r=ar3r.slice()
console.log("ar2r",ar2r,'ar6r',ar6r,'ar3r',ar3r)//[4,5,6]
// ar2r [4, 5, 6] ar6r (3) [4, 5, 6] ar3r (3) [4, 5, 6]
/**
* Creates a slice of `array` from `start` up to, but not including, `end`.
*
* **Note:** This method is used instead of
* [`Array#slice`](https://mdn.io/Array/slice) to ensure dense arrays are
* returned.
*
* @since 3.0.0
* @category Array
* @param {Array} array The array to slice.
* @param {number} [start=0] The start position. A negative index will be treated as an offset from the end.
* @param {number} [end=array.length] The end position. A negative index will be treated as an offset from the end.
* @returns {Array} Returns the slice of `array`.
* @example
*
* var array = [1, 2, 3, 4]
*
* _.slice(array, 2)
* // => [3, 4]
*/
function slice(array, start, end) {
let length = array == null ? 0 : array.length;
if (!length) {
return [];
}
start = start == null ? 0 : start;
end = end === undefined ? length : end;
if (start < 0) {
start = -start > length ? 0 : length + start;
}
end = end > length ? length : end;
if (end < 0) {
end += length;
}
length = start > end ? 0 : (end - start) >>> 0;
start >>>= 0;
let index = -1;
const result = new Array(length);
while (++index < length) {
result[index] = array[index + start];
}
return result;
}
export default slice;
start 是 {},却可以返回空数组而没有报错，秘诀在于使用了 >>>, 这个符号叫做无符号右移操作符，>>>0 作用是保证值是有意义的正整数，若无意义则缺省为 0，这里 {}>>>0 会被转换为 0，因此不会报错。
去掉opt里面的 ‘undefined’，‘null ’ 字符串
Object.keys(opt).forEach(key => {
if (opt[key]&&(opt[key]=="undefined"||opt[key]=="null")) {
opt[key]="";
}
})
function deleteEmptyProp(opt,delArr,del) {
var delArr=delArr||["undefined","null",undefined,null,NaN];
for (var key in opt) {
var val=opt[key];
if (delArr.includes(val)) {
if(del){
delete opt[key];
}else{
var isValueNaN= (typeof val === 'number')&&(val !== val)?1:0;//判断NaN ，替换成0
if(isValueNaN){
opt[key]=0;
}else{
opt[key]="";
}
}
}
}
return opt;
}
var sas={a: 'duo1', b: 0, c: null,d:"null",e:"undefined",f:NaN,g:undefined}
console.log((deleteEmptyProp(sas)))
var sas2={a: 'duo2', b: 0, c: null,d:"null",e:"undefined",f:NaN,g:undefined,h:"NaN"}
console.log(deleteEmptyProp(sas2,["undefined","null","NaN"]))
限制数字两位小数或者正整数
<input class="uni-input" v-model="form1Data.aa" @input="handleInput($event,'aa',0)" placeholder="填写整数" />
<input class="uni-input" v-model="form1Data.bb" @input="handleInput($event,'bb',2)" placeholder="填写2位小数" />
<input class="uni-input" v-model="form1Data.cc" @input="handleInput($event,'cc','int')" placeholder="整数不设置min 空开始，1有效" />
<input class="uni-input" v-model="form1Data.dd" @input="handleInput($event,'dd','int',{min:0})" placeholder="整数设置 0开始 " />
<input class="uni-input" v-model="form1Data.ee" @input="handleInput($event,'ee','int',{min:1})" placeholder="整数设置 1开始" />
<input class="uni-input" v-model="form1Data.ff" @input="handleInput($event,'ff','int',{min:3,max:5})" placeholder="整数设置 3开始,最大5" />
使用
handleInput(e,prop,len,minAndMaxOut){
//正则表达试
var len=len||0;
var val=e.detail&&e.detail.value||e.target&&e.target.value||e;
if (val!="") {
//console.log("handleInput "+prop,"--val--",val,typeof val)
if(len==0||len=="int"||len=="integer"){
//console.log("正整数",val);
var isObj= Object.prototype.toString.call(minAndMaxOut) === '[object Object]'
if(isObj){
val =parseInt(val||0);
var minAndMax={min:"",max:""}//
minAndMax={...minAndMax,...minAndMaxOut}
if(val!=""&&val<parseInt(minAndMax.min)){
val=minAndMax.min
}
if(val!=""&&val>parseInt(minAndMax.max)){
val=minAndMax.max
}
if(val==0&&val<minAndMax.min){
//console.log(val,"数字0 的处理")
val=minAndMax.min
}
}else{
val =parseInt(val||0)||"";
}
}else{
//console.log("正小数",val);
var value=val;
if(typeof value!="string"){
value=value.toString();
}
value =value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
value =value.replace(/^\./g,""); //验证第一个字符是数字
value =value.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
value =value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");//限制"10.5." 这种情况
value =value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
if (value.indexOf(".") < 0 && value != "") {
value = parseFloat(value);
}
val=value;
}
}
//重新赋值给input
this.$nextTick(() => {
if(val !== val){//值是为NaN
val="";
}
this.formData[prop]= val
// console.log("最后 val",val,"this.form1Data."+prop,this.form1Data[prop]);
})
},
对象拷贝 浅一层深拷贝 es5的 Object.assign({},objNew) 与 es6的 {...{},...objNew} 一样
<script> var target0 = { name: '0带你飞' } var result0 = Object.assign(target0) result0.name = "0新名字" console.log("Object.assign =>(target) 覆盖 旧的target", target0, '新的', result0) //覆盖 旧的target {name: '0新名字'} 新的 {name: '0新名字'} var target1 = { name: '1带你飞' } var result1 = Object.assign({}, target1) result1.name = "1新名字" console.log(" Object.assign =>({}, target) 拷贝 旧的target", target1, '新的', result1) //拷贝 旧的target {name: '1带你飞'} 新的 {name: '1新名字'} console.log("---------------------------") let person1 = { key: { age: '旧1的' } } let res1 = Object.assign({}, person1) res1.key.age = "新1的" + 18 console.log("拷贝第2层浅拷贝 ", "旧", person1, "新", res1) //拷贝第2层浅拷贝 旧 {key: {age: '新1的18'} 新 {key: {age: '新1的18'} // 深拷贝 let person2 = { key: { name: '旧1的' } } let res2 = Object.assign({}, person2) res2.key = "新2的" + 28 console.log("拷贝第1层深拷贝 ", "旧", person2, "新", res2) //拷贝第1层深拷贝 旧 {key: {name: '旧1的'}} 新 {key: '新2的28'} var objnew11 = { name: "1旧的第一层" } var objnew22 = { name: "2旧的第一层" } var copy11 = Object.assign({}, objnew11) var copy22 = { ...{}, ...objnew22 } copy11.name = "新的第1层" copy22.name = "新的第2层" console.log("copy11=Object.assign({},objnew11)形式----objnew11", objnew11, "新的", copy11) //copy11=Object.assign({},objnew11)形式----objnew11 {name: '1旧的第一层'} 新的 {name: '新的第1层'} console.log("copy22={...{},...objnew22}形式 -----objnew22", objnew22, "新的", copy22) //copy22={...{},...objnew22}形式 -----objnew22 {name: '2旧的第一层'} 新的 {name: '新的第2层'} </script>
结果：
数组浅拷贝
const arr = [1,2,3]
const copyArr = [...arr]
var arr1 = [1,2,3]
var arr2 = arr1.slice() // 方法一
// var arr2 = arr1.concat() //方法二
arr2.push(4)
console.log('arr1:', arr1) // arr1: [1, 2, 3]
console.log('arr2:', arr2) // arr1: [1, 2, 3, 4]
深拷贝
function deepClone1(obj) {
return JSON.parse(JSON.stringify(obj));
}
function deepClone(obj) { //
if (obj === null) return obj
//if ([null, undefined, NaN, false].includes(obj)) return obj;
if (typeof obj == 'function') return new Function('return ' + obj.toString())()
if (typeof obj != 'object') return obj
if (obj instanceof RegExp) return new RegExp(obj)
if (obj instanceof Date) return new Date(obj)
// 运行到这里，基本上只存在数组和对象两种类型了
let newObj = Object.prototype.toString.call(obj) === '[object Array]' ? [] : {};
for (let index in obj) {
newObj[index] = deepClone(obj[index]); // 对子项进行递归复制
}
return newObj;
}
// 深度克隆
function deepClone3(obj) {
// 对常见的“非”值，直接返回原来值
if ([null, undefined, NaN, false].includes(obj)) return obj;
if (typeof obj !== "object" && typeof obj !== 'function') {
//原始类型直接返回
return obj;
}
var o = Object.prototype.toString.call(obj) === '[object Array]' ? [] : {};
for (let i in obj) {
if (obj.hasOwnProperty(i)) {
o[i] = typeof obj[i] === "object" ? deepClone3(obj[i]) : obj[i];
}
}
return o;
}
测试数据
let obj = {
a: 1,
arr: [1, 3, 5, 7, 9],
c: {
num: 100
},
fn: function() {
console.log(1)
},
date: new Date(),
reg: /\.*/g,
aa: null,
bb: undefined,
cc: NaN,
dd: false
}
console.log("原始", (obj))
console.log("deepClone1", deepClone1(obj))
console.log("deepClone", deepClone(obj))
console.log("deepClone3", deepClone3(obj))
测试结果
合并对象
function myExtend() { var length = arguments.length; var target = arguments[0] || {}; if (typeof target!="object" && typeof target != "function") { target = {}; } if (length == 1) { target = this; i--; } for (var i = 1; i < length; i++) { var source = arguments[i]; for (var key in source) { // 使用for in会遍历数组所有的可枚举属性，包括原型。 if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }
简单合并对象
//var obj3= {...{},...obj1,...obj2 }
//var obj3 =Object.assign({},obj1,obj2)
//var obj3= myExtend({},obj1,obj2)
var person1 = {
name: '小明',
age: 18,
sex: '男',
}
var hobby = {
music: '伤感类歌曲',
like: '吃饭、睡觉、打游戏',
}
var xiaoHong = {
...person1,
...{name: '小红',sex:'女'},
...hobby
}
console.log(xiaoHong)
// 输出：{name: "小红", age: 18, sex: "女", music: "伤感类歌曲", like: "吃饭、睡觉、打游戏"}
jquery 版本
function myExtend2() {
function isArray(arr) {
return Object.prototype.toString.call(arr) === '[object Array]';
}
function isFunction(arr) {
return Object.prototype.toString.call(arr) === '[object Function]';
}
function isPlainObject(arr) {
return Object.prototype.toString.call(arr) === '[object Object]';
}
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = true;
if (typeof target === "boolean") {
deep = target;
target = arguments[1] || {};
i = 2;
}
if (typeof target !== "object" && !isFunction(target)) {
target = {};
}
if (length === i) {
target = this;
--i;
}
for (; i < length; i++) {
if ((options = arguments[i]) != null) {
for (name in options) {
src = target[name];
copy = options[name];
if (target === copy) {
continue;
}
if (deep && copy && (isPlainObject(copy) || (copyIsArray = isArray(copy)))) {
if (copyIsArray) {
copyIsArray = false;
clone = src && isArray(src) ? src : [];
} else {
clone = src && isPlainObject(src) ? src : {};
}
target[name] = myExtend2(deep, clone, copy);
} else if (copy !== undefined) {
target[name] = copy;
}
}
}
}
return target;
}
var obj1 = {
a: 1,
name: "张珊",
title: {
text: 'hello world',
subtext: 'It/s my world.'
}
};
var obj2 = {
a: 2,
name: "李四",
title: {
subtext: 'Yes, your world.'
}
}
//var obj3= {...{},...obj1,...obj2 }
// Object.assign（目标对象，...源对象）可以有多个源对象
//var obj3 =Object.assign({},obj1,obj2)
//var obj3= myExtend({},obj1,obj2)
//console.log("$",$.version)
//var obj3= $.extend(true,{},obj1,obj2)
//var obj3= myExtend({},obj1,obj2)
var obj3 = myExtend2({}, obj1, obj2)
obj3.name = '王五'
console.log("obj1", obj1);
console.log("obj2", obj2);
console.log("obj3", obj3, "title", obj3.title);
那async到底哪里简化了Promise
我们在写Promise操作的时候，经常会把Promise作为一个函数的返回值，如果函数很多，我们就要一直 return new Promise(...) ，这样非常麻烦，既然都要返回Promise，如果有简化操作，岂不是很香嘛？那解决办法就是async~
async function test() {
return 123;
}
// 上面的代码相当于写成这样
function test() {
return new Promise((resolve, reject) => {
resolve(123);
})
}
---
async function mayi() {
return "1蚂蚁雅黑";
}
async function test() {
console.log(await mayi());
}
test();
// 上下代码等效
function mayi() {
return new Promise((resolve, reject) => {
resolve("1蚂蚁雅黑")
})
}
function test() {
return new Promise((resolve, reject) => {
mayi().then(res => {
console.log(res)
})
})
}
test();
fetch('http://localhost:8088/getInfo?name=clz')
.then(async (res) => {
const data = await res.text()
console.log(data)
console.log(typeof data)
})
for /while 循环 省略
var cars=["BMW","Volvo","Saab","Ford"];
for (var i=cars.length;i--;)
{
console.log(cars[i] + "<br>");
}
var cars0=["BMW0","Volvo0","Saab0","Ford0"];
for (var i=0;i<cars0.length;i++)
{
console.log(cars0[i] + "<br>");
}
var cars=["BMW1","Volvo1","Saab1","Ford1"];
var i=0;
for (;cars[i];)
{
console.log(cars[i] + "<br>");
i++;
}
var cars2=["BMW2","Volvo2","Saab2","Ford2"];
var i=0;
while (cars2[i])
{
console.log(cars2[i] + "<br>");
i++;
}
var cars3=["BMW3","Volvo3","Saab3","Ford3"];
var i=cars3.length;
while (i--)
{
console.log(cars3[i] + "<br>");
}
获取css3 translate 属性
function getTransform(el) { //获取translate
var transform = window.getComputedStyle(el, null).getPropertyValue('-webkit-transform')|| window.getComputedStyle(el, null).getPropertyValue('transform');
var matrix = transform.match(/matrix(3d)?\((.+?)\)/);
var is3D = matrix && matrix[1];
if (matrix) {
matrix = matrix[2].split(",");
if (is3D === "3d")
matrix = matrix.slice(12, 15);
else {
matrix.push(0);
matrix = matrix.slice(4, 7);
}
} else {
matrix = [0, 0, 0];
}
var result = [
Number(matrix[0]),
Number(matrix[1]),
Number(matrix[2])
];
console.log("result",result)
return result;
}
json对象 还是json字符串
/**
* 是否json字符串
*/
function isJSONStr(value) {
if (typeof value == 'string') {
try {
var obj = JSON.parse(value);
if (typeof obj == 'object' && obj) {
return true;
} else {
return false;
}
} catch (e) {
return false;
}
}
return false;
}
//https://github.com/lodash/lodash
function isJSONObj(obj){
return typeof(obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length;
}
移动端 键盘事件
onCompositionStart以及onCompositionEnd
两个dom 是否相同
所谓相同，指的是两个节点引用的是同一个对象； 所谓相等，指的是两个节点是否是同一类型，具有相等的属性（nodeName，nodeValue。。。等等），还有相等的attributes，childNodes（相同的位置包含相同的值） 语法：
node1.isSameNode(node2) node1.isEqualNode(node2)
formatDate
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
console.log(formatDate('Sun May 13,2016'))
toFormatNumber
function toFormatNumber(event,itemprops,item,minVal){
var item2=item;
var result= item2[itemprops]||"";
result = result.toString().replace(/[^\d.]/g,""); //清除“数字”和“.”以外的字符
result = result.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
result = result.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
result= result.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
if(result.indexOf(".")< 0 && result !=""){//以上已经过滤，此处如果没有小数点，首位不能为类似于 01、02的金额
result= parseFloat(result);
}
if(minVal&&result<minVal){
result=minVal;
}
this.$set(item2,itemprops,result);
};
数组字符串
var str2 = "0123456789";
console.log(str2.slice(4,7)); //----------"456"
var arrs=[0,1,2,3,4,5,6,7,8,9];
console.log(arrs.slice(4,7)); //----------"[4,5,6]"
var test = 'hello world';
console.log(test.slice(4,7)); //o w
console.log(test.substring(4,7)); //o w
console.log(test.substr(4,7)); //o world
//需要注意的地方就是：substring是以两个参数中较小一个作为起始位置，较大的参数作为结束位置。
console.log(test.substring(7,4))
变量 提升 作用域
var msg1='This is message 1';
var msg3='This is message 3';
function otherFunction()
{
msg2='This is message 2'; //不使用var关键字，-其实也是定义一个全局变量
var msg3='Message 3';
var ms4='Message 4';
alert(msg1); //This is message 1 （-函数内当然可以访问到外面定义的全局变量，再深的函数嵌套一样能正确获到这个全局变量，这是JavaScript闭包的其中一种体现）
alert(msg3); //Message 3 （局部变量msg3）
alert(window.msg3); //This is message 3 （-使用window前缀访问同名的全局变量msg3）
alert(this.msg3); //This is message 3 （-因为otherFunction ()定义在一个全局的环境中，此时otherFunction ()的this也是指向window，所有你看到window. msg3是等于this. msg3的）
}
otherFunction();
//otherFunction-函数外面定义的msg1和里面定义的msg2依然是全局变量
alert(window.msg1); //-- This is message 1
alert(window.msg2); //-- This is message 2
alert(window.ms4); // -- underfind 外部不可以访问内部
new操作符创建对象
一般来说，new操作符创建对象可以分为四个步骤：
1. 创建一个空对象
2. 将所创建对象的__proto__属性值设成构造函数的prototype属性值
3. 执行构造函数中的代码，构造函数中的this指向该对象
4. 返回该对象（除非构造函数中返回一个对象）并且最后隐式的返回 this 。
用代码表示如下：
function Person(a, b) {
this.name = a;
this.age = b;
}
Person.prototype.show = function() {
console.log(this.name, this.age);
};
// var p = new Person('address', 10);
var p = {};
p.__proto__ = Person.prototype;
Person.call(p, 'address', 10);
console.log(p);
封装一下 大致如此
function realizeNew () {
//创建一个新对象
let obj = {};
//获得构造函数
let Con = [].shift.call(arguments);
//链接到原型（给obj这个新生对象的原型指向它的构造函数的原型）
obj.__proto__ = Con.prototype;
//绑定this
let result = Con.apply(obj,arguments);
//确保new出来的是一个对象
return typeof result === "object" ? result : obj
}
js错误类型
Error对象有两个最基本的属性：
name：错误名称
message：错误提示信息
除了Error对象，JavaScript还定义了其他6种错误，即存在Error的6个衍生对象
EvalError：执行代码时发生的错误
RangeError：当一个数值型变量或参数超出有效范围时发生的错误
ReferenceError：引用一个不存在的变量时发生的错误
SyntaxError：解析代码时发生的语法错误
TypeError：变量或参数的类型无效时发生的错误
URIError：向encodeURI() 或者 decodeURI() 传入无效参数时发生的错误
js 命名规范
s：表示字符串。例如：sName，sHtml； n：表示数字。例如：nPage，nTotal； b：表示逻辑。例如：bChecked，bHasLogin； a：表示数组。例如：aList，aGroup； r：表示正则表达式。例如：rDomain，rEmail； f：表示函数。例如：fGetHtml，fInit； o：表示以上未涉及到的其他对象，例如：oButton，oDate； g：表示全局变量，例如：gUserName，gLoginTime；
