JS知识点集锦

一、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"
    }