vue重点问题

一.vue项目pc端针对于IE浏览器的兼容,一般都需要兼容什么,如何解决
vue项目兼容ie8以上版本;
IE 不兼容 axios的promiss对象;
IE 不兼容es6语法;
ES6转ES5
1.使用babel-polyfill插件,主要用于对ES6新语法不支持的浏览器。
2.使用es6-promise插件,解决对es6的promise请求不支持的浏览器。

二.vue项目移动端、pc端适配方案(px转rem)
lib-flexible 根据屏幕宽度,自动设置html的font-size
postcss-px2rem 自动将px单位转换成rem

简要介绍这两个包的用途:
lib-flexible会为页面根据屏幕自动添加标签,动态控制initial-scale,maximum-scale,minimum-scale等属性的值。

postcss-px2rem会将px转换为rem用于适配不同宽度的屏幕,根据标签的font-size值来计算出结果,即1rem=html标签的font-size值。(具体可自行百度单位rem的定义)

三.rem知识点
1.rem 是指相对于根元素的字体大小的单位。
2.目前,IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。
3.pc端使用rem做适配,用js动态获取当前的屏幕尺寸,动态换算html的根字体大小。代码入下:

四.数组的常用方法

1.如何将两个数组的,不同的属性,添加到一个数组中。

var arrName = [
            {name:'小明'},
            {name:'小红'},
            {name:'小黑'},
        ]
        var arrAge = [
            {age:'11'},
            {age:'22'},
            {age:'33'},
        ]
        var arrNew = []

        arrName.forEach(item => {
            arrNew.push(item)
        })
        arrNew.forEach((item,index) => {
            item.age = arrAge[index].age
        })
        console.log(arrNew,'arrNew');

2.数组的去重方法

// es6 set 方法去重
        var arr1 = ['1','1','1','2','2',1,1,2,31,3,33,31,22,22]

        function setArr(arr) {
            return  Array.from( new Set(arr))
        }
        var res = setArr(arr1)
        console.log(res,'res');
// es6 set+扩展运算符去重
        var arr1 = ['1','1','1','2','2',1,1,2,31,3,33,31,22,22]
        var newArr = [...new Set(arr1)]
        console.log(newArr,'newArr');
// indexOf去重
        var arr = [123,123,123,123,22,22,22,111,111,111]
        var newArr = []
        for(let a = 0; a < arr.length; a ++ ) {
            // 如果 indexOf = -1 就是没有找到要查的值
            // 如果没有找道值,就push到新的数组中,已经push进去的值就不会在push
            if (newArr.indexOf(arr[a]) === -1 ) {
                newArr.push(arr[a])
            }
        }
        console.log(newArr); // [123, 22, 111]0: 1231: 222: 111length: 3[[Prototype]]: Array(0) '去重之后的数组'

3.数组排序

// sort排序 a-b 正序,b-a 倒序
        var arr = [123,23,23,124,124,234,43,23,32,3232,2]
        arr.sort((a,b) => b - a)
        console.log(arr,'[3232, 234, 124, 124, 123, 43, 32, 23, 23, 23, 2]');
//	冒泡排序
var arr = [123,2,25,33,66,666]
        // 循环中的arr[i],执行顺序,第一次123,第二次2,第三次25···
        for (let i = 0; i < arr.length; i ++) {
            // 循环中的arr[j],执行顺序,一直是123
            // 利用arr[j]中的123,依次跟arr[i],对比,arr[i]小于j就不跟换位置 
            for(let j = 0; j < arr.length -1; j ++) {
                if(arr[j] > arr[i]) {
                    var t = arr[j]
                    arr[j] = arr[j + 1]
                    arr[j+1] = t
                }
            }
        }
        console.log(arr); // [2, 25, 33, 66, 123, 666] 'arr???'

4.找出数组中的最大值,和最小值

var arr = [123,123,2,22,444,42,5,6,575,56]
        var iman;
        iman = Math.min(...arr)
        console.log(iman,'最小值'); // 2 '最小值'

        var imax;
        imax = Math.max(...arr)
        console.log(imax,'最大值'); // 575 '最大值'

5.日期格式处理(js原生方法)

function dataPre0 (params) {
                // 1.先将字符串用split分割成数组,分为 2020 ,8 , 22 这三个部分
                let arr = params.split('-');
                // 2. 封装函数如果穿得参数 ,1位就在前边加上0 
                let prefix = function (num) {
                    return num.length < 2 ? '0' + num : num;
                }
                // 3. 将已经分成三部分arr 中的数据传到函数的参数中
                // 4. arr[1] 代表arr 数组中,索引值为 2 的部分,则是 月份的数字
                arr[1] = prefix(arr[1]);
                // 5. arr[2] 代表arr 数组中, 索引值为3的部分, 也就是日期中的,天的数字
                arr[2] = prefix(arr[2]);

                return arr.join('')
            }    
            var res = dataPre0(startDate) // res 为处理好格式之后的值

6.reverse() (反转数组(方法用于颠倒数组中元素的顺序。))

var arr=[12,25,5,20];
	console.log(arr.reverse()); // [20, 5, 25, 12]
	console.log(arr); // [20, 5, 25, 12] (原数组改变)

7.concat() (连接两个或多个数组)

// concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。
var arr=[1,2,3,4];
	var arr2=[11,12,13] 
	var arrCopy = arr.concat(arr2);
	console.log(arr.concat()); // [1, 2, 3, 4] (复制数组)
	console.log(arrCopy); // [1, 2, 3, 4, 11, 12, 13]
	console.log(arr); // [1, 2, 3, 4] (原数组未改变)

8.slice()(数组截取)

// arr.slice(start , end);
start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
返回值:返回一个新的数组,包含从 start 到 end (不包括该元素)的 arr 中的元素。

var arr = [1,4,6,8,12];
	var arrCopy1 = arr.slice(1);	
	var arrCopy2 = arr.slice(0,4);	
	var arrCopy3 = arr.slice(1,-2);
	var arrCopy4 = arr.slice(-5,4);
	var arrCopy5 = arr.slice(-4,-1)
	console.log(arrCopy1);  // [4, 6, 8, 12]
	console.log(arrCopy2);  // [1, 4, 6, 8] 
	console.log(arrCopy3);  // [4, 6] 
	console.log(arrCopy4);  // [1, 4, 6, 8]
	console.log(arrCopy5);  // [4, 6, 8]
	console.log(arr);  // [1, 4, 6, 8, 12] (原数组未改变)

9.splice删除/添加数组中的数据

// splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。(该方法会改变原始数组)
// 返回值:含有被删除的元素的数组,若没有删除元素则返回一个空数组。
var arr = ["张三","李四","王五","小明","小红"];
        // splice中第一个位置是代表其实的位置。第二个位置是删除的数量,第三个位置是需要添加的值
        let res =  arr.splice(1,2)
        console.log(res,'res');// ['李四', '王五'] 'res'
        console.log(arr,'原数组');// ['张三', '小明', '小红'] '原数组'