一些实用的方法

153 阅读5分钟

数据结构

栈: 后入先出 队列: 先进先出

h5嵌入页调试控制台

<script src="//cdn.bootcss.com/eruda/1.3.0/eruda.min.js"></script>
<script>eruda.init();</script>

h5和app 通信

<script src="js/dsbrige.js"></script>

  dsBridge.call("getTaskList", "", function (v) {
    alert(JSON.stringify(v));
  })
  
  var str = dsBridge.call("getAnchorInfo")

地址栏获取参数

function GetUrlParam(paraName) {  // 获取url 参数
&emsp;&emsp;&emsp;&emsp;var url = document.location.toString();
&emsp;&emsp;&emsp;&emsp;var arrObj = url.split("?");

&emsp;&emsp;&emsp;&emsp;if (arrObj.length > 1) {
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;var arrPara = arrObj[1].split("&");
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;var arr;

&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;for (var i = 0; i < arrPara.length; i++) {
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;arr = arrPara[i].split("=");

&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;if (arr != null && arr[0] == paraName) {
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;return arr[1];
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;}
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;}
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;return "";
&emsp;&emsp;&emsp;&emsp;}
&emsp;&emsp;&emsp;&emsp;else {
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;return "";
&emsp;&emsp;&emsp;&emsp;}
&emsp;&emsp;}

地址栏乱码解决 decodeURI两次

var name = GetUrlParam('name') 
var decodeName = decodeURI(decodeURI(name))

移动端解决方案

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

!function (n) {
  var e = n.document,
    t = e.documentElement,
    i = 720,
    d = i / 100,
    o = "orientationchange" in n ? "orientationchange" : "resize",
    a = function () {
      var n = t.clientWidth || 320; n > 720 && (n = 720);
      t.style.fontSize = n / d + "px"
    };
  e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
}(window);


//or

(function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
                };
            recalc();
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
        })(document, window);

rem,em, px的区别

  • px实际上就是像素,用PX设置字体大小时,比较稳定和精确。
  • em是相对于其父元素来设置字体大小的 如 父元素 是16px,那么子元素的1em = 16px;
  • rem是相对于根元素 如 htm font-size:16px 那么 1rem = 16px rem 移动端最常见

开启本地服务

首先要安装node npm 包 

npm install http-server -g 

然后 cd 目标文件夹

http-server

axios 的response 改为直接返回data的

axios.interceptors.response.use(
  response => {
    const res = response.data
    if (response.status === 200) {
      return res
    }
    return null
  },
  error => {
    console.log('err' + error)// for debug
    return Promise.reject(error)
  })

js 常识

    delete 删除不了原型链中的变量

http和https

    http 默认端口监听80
    https 默认监听443
    
    http 三次握手四次挥手
    https 在http基础上多一次握手
    

array 方法

let arr = Array = []
1. Array.length 获取数组长度
    
2. Array.prototype  属性表示 Array构造函数的原型,并允许您向所有Array对象添加新的属性和方法。
 Array.isArray(Array.prototype); 
 
3.Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。
    Array.of(7);       // [7] 
    Array.of(1, 2, 3); // [1, 2, 3]
    
    Array(7);          // [ , , , , , , ]
    Array(1, 2, 3);    // [1, 2, 3]
    返回 新的 Array 实例。
    
3. Array.concat(Array) 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

4.Array.copyWithin(target, start,end) copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,而不修改其大小。 
改变了的数组。

5.Array.entries() 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。

6.Array.every(callback[, thisArg]) arr.every(callback[, thisArg]) 不会改变原数组.

7.arr.fill(value[, start[, end]])    方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。 会改变原数组
示例
// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

8. var new_array = arr.filter(callback(element[, index[, array]])[, thisArg]) 
filter()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
一个新的通过测试的元素的集合的数组,如果没有通过测试则返回空数组

9.arr.find(callback[, thisArg]) 
当某个元素通过 callback 的测试时,返回数组中的一个值,否则返回 undefined。

10. arr.findIndex(callback[, thisArg])
    findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
    findIndex不会修改所调用的数组。

11.var newArray = arr.flat(depth) 
flat() 方法会递归到指定深度将所有子数组连接,并返回一个新数组。

变量提升

// 任何时候,请使用var声明变量, 并放置在作用域的顶端.
// 对JavaScript解释器而言,所有的函数和变量声明都会被提升到最前面, 并且变量声明永远在前面,赋值在声明过程之后。比如:

var x = 10;
function x(){};
console.log(x); // 10

// 实际为

var x;
function x(){};
x = 10;
console.log(x); // 10

函数提升

// 函数的声明方式主要由两种:声明式和变量式。

// 声明式会自动将声明放在前面并且执行赋值过程。而变量式则是先将声明提升,然后到赋值处再执行赋值。比如:

function test() {
    foo(); // TypeError "foo is not a function"
    bar(); // "this will run!"
    var foo = function () { // function expression assigned to local variable 'foo'
        alert("this won't run!");
    }
    function bar() { // function declaration, given the name 'bar'
        alert("this will run!");
    }
}
test();

// 实际上等价于:

function test() {
    var foo;
    var bar;
    bar = function () { // function declaration, given the name 'bar'
        alert("this will run!");
    }

    foo(); // TypeError "foo is not a function"
    bar(); // "this will run!"

    foo = function () { // function expression assigned to local variable 'foo'
        alert("this won't run!");
    }
}
test();

// 主要注意的地方:带有命名的函数变量式声明,是不会提升到作用域范围内的,比如:

var baz = function spam() {};
baz(); // vaild
spam(); // ReferenceError "spam is not defined"

作用域问题 {}

JavaScript语言的作用域仅存在于函数范围中。这是必须要牢记的一点,还有一点重要的就是作用域的提升规则。 if条件语句,就不算一个独立的作用域:

reduce

// reduce代替map和filter方法, map函数通常用来更新它的每一项,filter函数通常用来过滤掉不需要的东西,而reduce两样可以同时做
const arr = [1, 2, 3, 4];
const filterArr = arr.reduce((newArr, current, currentIndex) => {
    current *= 2;
    if (current > 3) {
        newArr.push(current);
    }
    return newArr;
}, [])
let log = console.log.bind(console);
let person = [
     {id: 0, name: "小明"},
     {id: 1, name: "小张"},
     {id: 2, name: "小李"},
     {id: 3, name: "小孙"},
     {id: 1, name: "小周"},
     {id: 2, name: "小陈"},   
];

let obj = {};

person = person.reduce((cur,next) => {
    obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
    return cur;
},[]) 
//设置cur默认类型为数组,并且初始值为空的数组
log(person);