一、map、forEach、reduce
1、数组中每一项是简单数据类型,修改数据项没有改动,若是复杂数据类型,修改数据项有改动,map和forEach相同。
var arr = [0,2,4,6,8];
arr.map(function(item,index,arr){
item = 1;
},this); // this默认是window
console.log(arr); // 0,2,4,6,8 没有改动
var arr2 = [{name: 'a'}, {name: 'b'}];
arr2.map(function(item,index,arr){
item.name = 1;
},this);
console.log(arr); // [{name: 1}, {name: 1}] 有改动
2、map的回调函数中支持return返回值,forEach不支持
var arr = [2,4,6,8,10];
var arr2 = arr.map(function(item,index,arr){
return item/2;
},this);
console.log(arr2); // 1,2,3,4,5
3、map速度比foreach快
4、map因为返回数组所以可以链式操作,foreach不能
var arr = [1, 2, 3];
console.log(
arr.map(function(i){
return i+i;
}).sort() //链式风格
);// [2,4,6]
5、reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。
var arr = [2,4,6,8,10];
console.log(arr.reduce(function (sum, item, index, array) {
console.log(sum, ' ', item, ' ', index, ' ', array);
return sum + item;
}, 10)); // 40 其中10为初始值
二、字符串常用方法(slice和indexOf/lastIndexOf:数组和字符串都有)
1、str.charAt(index) 返回某个字符。
2、str.charCodeAt(index) 返回某个字符的Unicode编码。
3、str.indexOf(searchString,startIndex); 返回searchString在str中第一次出现的位置,从startIndex开始查找,找不到返回-1.
4、str.lastIndexOf(searchString,startIndex); 从由往左找子字符串,找不到时返回-1。
5、字符串之间的比较:比较第一个字符的unicode编码值,第一个字符要是相同,就比较第二个,依次往下
‘10000’ < ‘2’ 1的unicode值比2的unicode值小 true
‘10000’ > 2 转成数字比较 true
6、str.substr(index, length): index为负值时表示从右取,length省略则默认取到末尾
‘abcdef’.substr(1, 2)) ‘bc’
‘abcdef’.substr(-3, 2)) ‘de’
‘abcdef’.substr(2)) ‘cdef’
‘abcdef’.substr(-3)) ‘def’
7、str.substring(start,end); 两个参数都为正数,end省略则默认取到末尾,以两个参数中较小一个作为起始位置,较大的参数作为结束位置。任意一个参数为负数则默认为0
‘abcdef’.substring(2) ‘cdef’
‘abcdef’.substring(3,1) ‘bc’
‘abcdef’.substring(3,-1) ‘abc’
‘abcdef’.substring(-3,3) ‘abc’
‘abcdef’.substring(-3,-3) ‘’
8、str.slice(start,end); 两个参数可正可负,负值代表从右截取,对原字符串无影响,返回截取后的字符串
‘abcdef’.slice(-3,-1) ‘de’
9、str.split(separator,limit); 参数1指定字符串或正则,参照2指定数组的最大长度
arr.join(’.’)
10、str.replace(rgExp/substr,replaceText) 返回替换后的字符串,仅替换一次,原字符串不变
11、trim() 去掉字符串前后的空格,原字符串保持不变
12、str.match(rgExp); 正则匹配
‘abcdef’.match(‘c’)
只进行一次匹配,返回一个数组,只有1个元素
‘abcdefabcdef’.match(/c/g)
进行全局匹配,返回一个数组,有多个元素,且结果不同
13、search() 返回字符串中第一个匹配项的索引,如果没有,则返回-1
var str = 'abc';
console.log(str.search(/b/)); // 1
14、replace() 替换字符串,元字符串不变
var str = 'abc,def,abc,def';
var str2 = str.replace(/ab/, '00'); // 仅替换第一个匹配项
console.log(str2); // '00c,def,abc,def'
var str = 'abc,def,abc,def';
var str2 = str.replace(/ab/g, '00'); // 替换所有匹配项
console.log(str2); // '00c,def,00c,def'
var str = 'abc,def,abc,def';
var str2 = str.replace(/ab/g, function(march, pos, originalStr){
return '00'; // match: 'ab'
});
console.log(str2); // '00c,def,00c,def'
三、数组常用方法
改变原数组
1、arr.push() 从尾部添加
2、arr.pop() 从尾部移除
3、arr.shift() 从头部移除
4、arr.unshift() 从头部添加
5、arr.reverse() 数组翻转
6、arr.sort() 将每一项转化成字符串,从小到大排序
arr.sort((val1, val2) => {return val1 - val2}) // 数值升序
7、arr.splice(index, num, item1,…,itemX) 从数组中添加/删除项目,然后返回被删除的项组成的数组
不改变原数组
1、arr.join(separator); 返回字符串
2、arr.concat(arr2,…,arrX) 合并数组,返回合并后的数组
3、arr.slice(index1, index2) 截取index1到index2之间的数组项,若index1>index2,返回空数组
遍历方法
1、every() 对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true
var arr = [1,2,3,4];
var res = arr.every((item, index, array) => {
return item > 2;
});
console.log(res); // false
2、some() 对数组中的每一项运行给定函数,如果该函数对任意一项返回true,则返回true
var arr = [1,2,3,4];
var res = arr.same((item, index, array) => {
return item > 2;
});
console.log(res); // true
3、filter() 对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组
var arr = [1,2,3,4];
var res = arr.filter((item, index, array) => {
return item > 2;
});
console.log(res); // [3,4]
4、map() 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
var a = [0, 1, 2, 3, 4];
var b = a.map((item, index, array) => {
item = item * 2; // 原数组不变
return item * 2;
});
console.log(a, b); // a:[0, 1, 2, 3, 4], b:[0, 4, 8, 12, 16]
var a = [0, 1, 2, 3, 4];
var b = a.map((item, index, array) => {
array[index] = item * 2; // 原数组改变
return item * 2;
});
console.log(a, b); // a:[0, 1, 2, 3, 4], b:[0, 2, 4, 6, 8]
5、forEach() 对数组中的每一项运行给定函数,没有返回值
6、reduce() 从数组第一项开始,逐个遍历到最后,典型用法是求和
var a = [0, 1, 2, 3, 4];
var sum = a.reduce((prev, cur, index, array) => {
return prev + cur;
});
console.log(sum);
7、reduceRight() 从数组最后一项开始,逐个遍历到第一项,其他跟reduce一样
8、find() 返回通过测试(函数内判断)的数组的第一个元素的值。为数组中的每个元素都调用一次函数执行:
- 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 undefined
let arr = [1, 2, 3];
let num = arr.find((val, index, arrTemp) => {
val *= 2;
return val > 5;
});
console.log(num); // 3
四、上传视频时获取视频尺寸和时长
方法1:通过URL.createObjectURL()获取待上传视频URL
var video = document.getElementById('myVideo');
var url = URL.createObjectURL(document.getElementById('file').files[0]);
video.src = url;
video.load();
video.onloadedmetadata = () => {
console.log(video.videoWidth, video.videoHeight, video.duration);
};
方法2:通过FileReader获取
var video = document.getElementById('myVideo');
var reader = new FileReader();
reader.readAsDataURL(document.getElementById('file').files[0]);//发起异步请求
reader.onload = function(){
//读取完成后,将结果赋值给img的src,此处this指reader对象
video.src = this.result;
video.load();
video.onloadedmetadata = () => {
console.log(video.videoWidth, video.videoHeight, video.duration);
};
}
五、上传图片时获取图片尺寸
let img = new Image();
// 改变图片的src
img.src = imgUrl;
// 加载完成执行
img.onload = function(){
console.log(img.width, img.height);
};
六、!!(a)代表将参数a强制转换成bool类型
七、promise用法
1、基本用法
var pro1 = new Promise((resolve, reject) => {
console.log('0');
// resolve是通往下一个操作的必经之路,没有它,下一步无法进行
resolve(1);
});
pro1.then((num) => {
// 这里输出1,是由上面的resolve中的参数传进来的
console.log(num);
// 这里必须返回一个新的promise对象,下面操作才能继续进行
return new Promise((resolve, reject) => {
resolve(2);
});
}).then(num => {
console.log(num);
})
2、Promise.all用法
当一个promise对象数组里的promise对象都执行完了,才会触发
var arr = [{num: 1}, {num: 2}, {num: 3}];
var promiseArr = [];
arr.map(item => {
// 构建promise对象数组
promiseArr.push(new Promise((resolve, reject) => {
console.log(item.num);
// 将一个对象作为参数传入下一个阶段
resolve({num: item.num * 2});
}));
});
Promise.all(promiseArr).then(obj => {
// 每个promise对象都传出一个对象,这些对象组合起来构成一个数组
console.log(obj);
});
输出:
八、JS方法截图
直接使用html2canvas截图是空白,使用以下方法可以达到分享图片的目的。
sharePicture () {
var img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
img.crossOrigin = 'Anonymous';
img.src = document.getElementById('curCard').src;
img.onload = function () {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
document.getElementById('curCard').setAttribute('src', canvas.toDataURL('image/png'));
canvas = null;
// 重新给img赋值成功后,执行截图方法
html2canvas(document.getElementById('curCard')).then(function (canvas) {
document.getElementById('copyImage').src = canvas.toDataURL('image/png');
});
};
},
九、抛出异常
let a = -1;
try {
if (a > 0) {
console.log('correct');
} else {
throw new Error('invalid');
}
} catch (error) {
console.log(typeof error); // object
console.log(error); // Error: invalid
console.log(error.message); // invalid
}
传进Error的参数都会被当做字符串,通过error.message读取,若想传对象,可以先将对象转字符串,使用时再将字符串转对象
let a = -1;
try {
if (a > 0) {
console.log('correct');
} else {
throw new Error(JSON.stringify({code: 111, msg: 'invalid'}));
}
} catch (error) {
let err = JSON.parse(error.message);
console.log(err.code, err.msg); // 111 "invalid"
}