一切福田，不離方寸，從心而覓，感無不通。

Category Archives: JavaScript

这些一行 JS 实现功能的代码，让你看起来像一个前端专家

JavaScript 可以做很多神奇的事情！ 从复杂的框架到处理 API，有太多的东西需要学习。 但是，它也能让你只用一行代码就能做一些了不起的事情。 看看这 13 句 JavaScript 单行代码，会让你看起来像个专家! 1. 获取一个随机布尔值 (true/false) 这个函数使用 Math.random() 方法返回一个布尔值（true 或 false）。Math.random 将在 0 和 1 之间创建一个随机数，之后我们检查它是否高于或低于 0.5。这意味着得到真或假的几率是 50%/50%。

1
2
3
const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());
// Result: a 50/50 change on returning true of false

  2. 检查日期是否为工作日 使用这个方法，你就可以检查函数参数是工作日还是周末。

1
2
3
4
5
const isWeekday = (date) => date.getDay() % 6 !== 0;
console.log(isWeekday(new Date(2021, 0, 11)));
// Result: true (Monday)
console.log(isWeekday(new Date(2021, 0, 10)));
// Result: false (Sunday)

  3. 反转字符串 有几种不同的方法来反转一个字符串。以下代码是最简单的方式之一。

1
2
3
const reverse = str => str.split('').reverse().join('');
reverse('hello world');    
// Result: 'dlrow olleh'

  4. 检查当前 Tab 页是否在前台 我们可以通过使用 document.hidden 属性来检查当前标签页是否在前台中。

1
2
3
const isBrowserTabInView = () => document.hidden;
isBrowserTabInView();
// Result: returns true or false depending on if tab is in view / focus

  5. 检查数字是否为偶数 最简单的方式是通过使用模数运算符（%）来解决。如果你对它不太熟悉，这里是 Stack Overflow 上的一个很好的图解。

1
2
3
4
5
const isEven = num => num % 2 === 0;
console.log(isEven(2));
// Result: true
console.log(isEven(3));
// Result: false

  6. 从日期中获取时间 通过使用 toTimeString() 方法，在正确的位置对字符串进行切片，我们可以从提供的日期中获取时间或者当前时间。

1
2
3
4
5
const timeFromDate = date => date.toTimeString().slice(0, 8);
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)));
// Result: "17:30:00"
console.log(timeFromDate(new Date()));
// Result: will log the current time

  7. 保留小数点（非四舍五入） 使用 Math.pow() 方法，我们可以将一个数字截断到某个小数点。

1
2
3
4
5
6
7
8
const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
// Examples
toFixed(25.198726354, 1);       // 25.1
toFixed(25.198726354, 2);       // 25.19
toFixed(25.198726354, 3);       // 25.198
toFixed(25.198726354, 4);       // 25.1987
toFixed(25.198726354, 5);       // 25.19872
toFixed(25.198726354, 6);       // 25.198726

  8. 检查元素当前是否为聚焦状态 我们可以使用 document.activeElement 属性检查一个元素当前是否处于聚焦状态。

1
2
3
const elementIsInFocus = (el) => (el === document.activeElement);
elementIsInFocus(anyElement)
// Result: will return true if in focus, false if not in focus

  9. 检查浏览器是否支持触摸事件

1
2
3
4
5
const touchSupported = () => {
  ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
}
console.log(touchSupported());
// Result: will return true if touch events are supported, false if not

  10. 检查当前用户是否为苹果设备 我们可以使用 navigator.platform 来检查当前用户是否为苹果设备。

1
2
3
const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);
// Result: will return true if user is on an Apple device

  11. 滚动到页面顶部 […]

龙生   26 Jan 2021
View Details

JS数据类型转换

显式转换 其他数据类型转换成Number 将其他数据类型的值转化为数值时，有几种方法？ Number() parseInt() parseFloat() +/- （一元操作符） 说一说上面方法的异同？ 它们都是可以将非数值转化为数值，不同点如下：

1
2
3
4
5
1. Number() 可以处理Boolean、null、undefined，Object而parseInt不可以
2. 在处理字符串时
    - number能处理数字字符串（正负），包括十六进制的数字以及空字符串；
    - parseInt是从第一个非空格字符开始解析，直到遇到一个非数字字符串，如果第一个不是数字或者负号，parseInt就会返回NaN
3. parseFloat()与parseInt()类似，+/-与Number()类似

  规则 除以下情况外能正常转化为数字，其余全为NaN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1. Boolean值, true--->1  false--->0
2. null--->0
3. 空字符串（''）---> 0
4. 数字字符串（'123', '1.23', '0xf'）---> 123, 1.23, 15
5. 对象则是先调用valueOf方法，看该方法的返回值是否能转化成数字，如果不行则基于这个返回值调用toString方法，再测试改返回值能不能转化成数字
    var a = {
        valueOf: function() {
            return 'xyxy';
        },
        toString: function() {
            return 1;
        }
    };
    
    Number(a)  // NaN

  其他数据类型转换成String 将其他数据类型的值转化为字符串时，有几种方法？ 其他数据类型的值.toString() String(其它数据类型的值) 说一说上面方法的异同？

1
null与undefined上没有toString()方法

  规则 字符串拼接时，加号两边如果出现字符串或者引用类型的值({}、[]、function(){})，都会变成字符串拼接(因为原本应该是把引用类型的值转为数字，但是需要先转为字符串，遇到字符串就直接变成字符串拼接了)

1
2
3
4
{} => "[object Object]"  
function(){}  =>"function(){}"
{}+0; //0 没有变成字符串拼接的原因：把{}当做块处理了，不参与数学运算
({}+0); //"[object Object]0" 用括号运算符包起来就是数学运算了

 

1
2
3
4
5
6
// 做个题目吧
 
let result =10 + false +undefined+[]+'Tencent'+null+true+{};
//(10+0+NaN)+''+'Tencent' +'null' +'true' + '[object Object]'
//"NaNTencentnulltrue[object Object]"
console.log(result)

  其他数据类型转换成Boolean 将其他数据类型的值转化为布尔值时，有几种方法？ ! 转换为布尔类型后取反 !! 转换为布尔类型 Boolean 规则？

1
只有 0、NaN、空字符串、undefined、null 五个值会变为false，其余都是true

  隐式转换 isNaN、Math方法

1
参考显式转换成Number的规则

  + 操作

1
2
两边的数据有一个是字符串类型则选用字符串拼接操作，
之后才是考虑数学计算的加操作

  == 「类型一样的几个特殊点」

1
2
3
{} == {} : false  说明：对象（引用类型的值）比较的是堆内存的地址
[] == [] : false 同上
NaN == NaN : false

  2.「类型不一样的转换规则」

1
2
3
4
5
6
1. null == undefined : true
2. null、undefined和其他任何值都不相等即 在比较相等性之前，不能将null与undefined转换成其他任何职
3. 字符串 == 对象 要把对象转换为字符串
4. 剩下如果==两边数据类型不一致，都是需要转换为数字再进行比较
5.注意点：
虽然Number(null)的结果是0，但是null和0 ==比较时并不是转为数字比较的，即验证3中所说

  作者：妍等等xy 链接：https://juejin.cn/post/6920236688224550925 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

龙生   25 Jan 2021
View Details

js实现保存文件到本地

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function fake_click(obj) {
    var ev = document.createEvent("MouseEvents");
    ev.initMouseEvent(
        "click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null
    );
    obj.dispatchEvent(ev);
}
 
function download(name, data) {
    var urlObject = window.URL || window.webkitURL || window;
 
    var downloadData = new Blob([data]);
 
    var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
    save_link.href = urlObject.createObjectURL(downloadData);
    save_link.download = name;
    fake_click(save_link);
}
 
//调用方法
download("save.txt","内容");

  from:https://www.cnblogs.com/frost-yen/p/10226705.html

龙生   19 Jan 2021
View Details

js解析websocket二进制数据包

js解释数据包 做一个项目,服务器要给我发一个数据包,格式为,前面16位short,后32位int,后面就全是string,我用javascript怎么去把这个数据包解读出来?   用WebSocket,接收到的就是一个Blob对象.而我要给服务器返回的也是这种格式,我又怎么把我的数据封装成这样的数据包? ——解决方案——————--

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var reader = {
  readAs: function(type,blob,cb){
var r = new FileReader();
r.onloadend = function(){
      if(typeof(cb) === 'function') {
        cb.call(r,r.result);
      }
    }
    try{
      r['readAs'+type](blob);
    }catch(e){}
  }
}
function parseBlob(blob){
  var shortVar, intVar, stringVar;
  reader.readAs('ArrayBuffer',blob.slice(0,2),function(arr){
    shortVar = (new Int16Array(arr))[0];
    console.log(shortVar);
  });
  reader.readAs('ArrayBuffer',blob.slice(2,6),function(arr){
    intVar = (new Int32Array(arr))[0];
    console.log(intVar);
  });
  reader.readAs('Text',blob.slice(6,blob.size,'text/plain;charset=UTF-8'),function(result){
    stringVar = result;
    console.log(stringVar);
  });
}
var buffer = new ArrayBuffer(6);//建立6个字节的缓冲，前两个字节是short，后四个是int
var bufferView = new Int16Array(buffer); //建立16位的视图,那么视图的长度应该是3
bufferView[0] = 32767;
bufferView[1] = 0;
bufferView[2] = 1;  
//现在buffer中的内容由低位到高位应该是
//11111111 11111110 00000000 00000000 100000000 00000000
var blob = new Blob([bufferView,"words words 文本文本文本文本"]);
//构造这个blob类型
//测试一下parseBlob函数是否正确
parseBlob(blob);
//32767
//65536
//words words 文本文本文本文本
//第一个short是32767
//第二个int，前16位为0，第17位为1，所以结果是65536
//第三个字符串，和我们构造blob的时候一样

  from:https://blog.csdn.net/woxingwosu0100/article/details/51273523/

龙生   16 Jan 2021
View Details

JS字符串与二进制的相互转化

1
2
3
4
5
//字符串转ascii码，用charCodeAt();
//ascii码转字符串，用fromCharCode();
var str = "A";
var code = str.charCodeAt();
var str2 = String.fromCharCode(code);

  十进制转二进制

1
2
3
var a = "i";
console.log(a.charCodeAt()); //105
console.log(a.charCodeAt().toString(2)); //1101001

 

1
2
3
var a = "我";
console.log(a.charCodeAt()); //25105
console.log(a.charCodeAt().toString(2)); //110001000010001

1
2
3
4
var a = "我们";
console.log(a.length); //2
var list = a.split("");
console.log(list.length); //2<br>console.log(a.charCodeAt().toString(2)); //110001000010001 100111011101100

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//将字符串转换成二进制形式，中间用空格隔开
function strToBinary(str){
    var result = [];
    var list = str.split("");
    for(var i=0;i<list.length;i++){
        if(i != 0){
            result.push(" ");
        }
        var item = list[i];
        var binaryStr = item.charCodeAt().toString(2);
        result.push(binartStr);
    }  
    return result.join("");
}
console.log(strToBinary("我们")); //110001000010001 100111011101100
console.log(strToBinary("@%$+")); //1000000 100101 100100 101011
//将二进制字符串转换成Unicode字符串
function binaryToStr(str){
    var result = [];
    var list = str.split(" ");
    for(var i=0;i<list.length;i++){
         var item = list[i];
         var asciiCode = parseInt(item,2);
         var charValue = String.fromCharCode(asciiCode);
         result.push(charValue);
    }
    return result.join("");
}
console.log(binaryToStr("110001000010001 100111011101100")); //我们
console.log(binaryToStr("1000000 100101 100100 101011")); //@%$+

转载请注明出处：http://www.cnblogs.com/it-deepinmind/ from:https://www.cnblogs.com/it-deepinmind/p/7430025.html  

龙生   16 Jan 2021
View Details

axios全局设置url公共请求头

需求由来： 公司项目外链到别公司项目或者网页（通俗的说就是通过别的随意网页跳转至你项目网页），这时公司项目就要区分是从哪个公司或者哪个网页跳转过来的，从而进行不同的接口请求（公司所有接口都要带上请求头）。大部分做法都是设置请求头来区分。做法如下： 废话不多说   直接上代码  通俗易懂： 新建一个配置文件requst.js  内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import axios from 'axios';
// 设置公共请求头
const init = function () {
   let url = window.location.search.toString() // 获取外链过来的连接参数部分
   let arr = []
   let obj = {} // 预封装集合
   arr = url.split('&') // 对参数切割处理  在封装
   arr.forEach(l => {
     l = l.split('=')
     obj[l[0]] = l[1]
   })
   // 具体有哪些参数看你们后台定义了哪些  下面的参数有 osType、deviceId、deviceChannel、language .....
   axios.defaults.headers.common['deviceChannel'] = 'gclife_bmp_pc';
   axios.defaults.headers.common['language'] = window.localStorage.defaultLanguage;
   // 有则赋值
   obj.osType ? axios.defaults.headers.common['osType'] = obj.osType : axios.defaults.headers.common['osType'] = '';
   obj.deviceId ? axios.defaults.headers.common['deviceId'] = obj.deviceId : axios.defaults.headers.common['deviceId'] = '';
　　　　　　　　　　.
　　　　　　　　　　.
　　　　　　　　　　.
}
export default {
   init
}

  接下来就是在main.js引入就行了 如下：

1
2
3
// 引入请求头文件
import request from './request'
request.init() // 请求头初始化

上诉内容就是设置公共请求头的内容了。   from:https://www.cnblogs.com/ljx20180807/p/9766699.html

龙生   08 Jan 2021
View Details

Vue 子组件与父组件之间的 双向数据绑定

方法一（常规） 父组件传递数据到子组件； 子组件将数据转成本地数据

1
2
3
4
5
6
props: ['name'],
data() {
    return {
        iName: this.name
    }
},

  但是此时，父组件如果更新了name 值，但是子组件中的 iName 不会随之更改；所以要监听父组件传入数据的变化，随之更新子组件；

1
2
3
4
5
6
watch: {
    // 监听父组件传入的数据，更新到本地
    name(newVal, oldVal){
        this.iName = newVal;
    }
},

  此时，父组件更新 name ，子组件展示出来的数据（iName）会随之变化，但是子组件修改数据，父组件不会变化，所以需要监听子组件数据（iName）的变化，通知父组件进行更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 子组件中的监听
watch: {
    // 监听父组件传入的数据，更新到本地
    name(newVal, oldVal){
        this.iName = newVal;
    },
    // 监听本地数据的变化，通知父组件更新
    iName(newVal, oldVal) {
        this.$emit('update', newVal);
    }
},
 
// 父组件中的更新
<test :name="name" @update="update"/>
methods: {
    update(str) {
        this.name = str;
    }
},

  方法二（自定义 v-model 双向数据绑定） 自定义组件中使用 v-model 进行双向数据绑定，相当于；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<test v-model="selected" />
相当于
<test :value="selected" @input="data=> selected=data"/>
 
 
所以子组件需要做的事情就是
1.  接收 value 数据
    props: ['value'],
2.  将value 转成本地数据
data() {
    return {
        checked: this.value
    }
},
3. 监听 value 的变化，更新到本地数据，
   监听 本地数据的变化，使用 input 事件通知父组件更新
watch: {
    value(newVal){
        this.checked = newVal;
    },
    checked(newVal){
        this.$emit('input', newVal)
    }
},

  方法三（.sync 修饰符）

1
<input :title.sync="xx"/>

  拆开后

1
<input @update:title="data => xx=data" :title="xx"/>

    from:https://blog.csdn.net/qq_39125684/article/details/90380268

龙生   08 Jan 2021
View Details

ES5 数组方法map

概述 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。 语法 array.map(callback[, thisArg]) 参数 callback 原数组中的元素经过该方法后返回一个新的元素。 currentValue callback 的第一个参数，数组中当前被传递的元素。 index callback 的第二个参数，数组中当前被传递的元素的索引。 array callback 的第三个参数，调用 map 方法的数组。 thisArg 执行 callback 函数时 this 指向的对象。 例子：将数组中的单词转换成对应的复数形式. 下面的代码将一个数组中的所有单词转换成对应的复数形式.

1
2
3
4
5
6
7
8
9
10
11
12
function fuzzyPlural(single) {
  var result = single.replace(/o/g, 'e');  
  if( single === 'kangaroo'){
    result += 'se';
  }
  return result;
}
 
var words = ["foot", "goose", "moose", "kangaroo"];
console.log(words.map(fuzzyPlural));
 
// ["feet", "geese", "meese", "kangareese"]

例子：求数组中每个元素的平方根 下面的代码创建了一个新数组，值为原数组中对应数字的平方根。

1
2
3
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
/* roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9] */

例子：在字符串上使用 map 方法 下面的例子演示如在在一个 String  上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组：

1
2
3
var map = Array.prototype.map
var a = map.call("Hello World", function(x) { return x.charCodeAt(0); })
// a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

使用技巧案例 通常情况下，map 方法中的 callback 函数只需要接受一个参数，就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 下面的语句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]
 
// 通常使用parseInt时,只需要传递一个参数.但实际上,parseInt可以有两个参数.第二个参数是进制数.可以通过语句"alert(parseInt.length)===2"来验证.
// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身.
// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.
 
/*
//应该使用如下的用户函数returnInt
 
function returnInt(element){
  return parseInt(element,10);
}
 
["1", "2", "3"].map(returnInt);
// 返回[1,2,3]
*/

兼容旧环境（Polyfill） map 是在最近的 ECMA-262 标准中新添加的方法；所以一些旧版本的浏览器可能没有实现该方法。在那些没有原生支持 map 方法的浏览器中，你可以使用下面的 Javascript 代码来实现它。所使用的算法正是 ECMA-262，第 5 版规定的。假定Object, TypeError, 和 Array 有他们的原始值。而且 callback.call 的原始值也是 Function.prototype.call

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// 实现 ECMA-262, Edition 5, 15.4.4.19
// 参考: http://es5.github.com/#x15.4.4.19
if (!Array.prototype.map) {
  Array.prototype.map = function(callback, thisArg) {
 
    var T, A, k;
 
    if (this == null) {
      throw new TypeError(" this is null or not defined");
    }
 
    // 1. 将O赋值为调用map方法的数组.
    var O = Object(this);
 
    // 2.将len赋值为数组O的长度.
    var len = O.length >>> 0;
 
    // 3.如果callback不是函数,则抛出TypeError异常.
    if (Object.prototype.toString.call(callback) != "[object Function]") {
      throw new TypeError(callback + " is not a function");
    }
 
    // 4. 如果参数thisArg有值,则将T赋值为thisArg;否则T为undefined.
    if (thisArg) {
      T = thisArg;
    }
 
    // 5. 创建新数组A,长度为原数组O长度len
    A = new Array(len);
 
    // 6. 将k赋值为0
    k = 0;
 
    // 7. 当 k < len 时,执行循环.
    while(k < len) {
 
      var kValue, mappedValue;
 
      //遍历O,k为原数组索引
      if (k in O) {
 
        //kValue为索引k对应的值.
        kValue = O[ k ];
 
        // 执行callback,this指向T,参数有三个.分别是kValue:值,k:索引,O:原数组.
        mappedValue = callback.call(T, kValue, k, O);
 
        // 返回值添加到新数组A中.
        A[ k ] = mappedValue;
      }
      // k自增1
      k++;
    }
 
    // 8. 返回新数组A
    return A;
  };      
}

参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map   from:https://www.cnblogs.com/leejersey/p/5462427.html

龙生   31 Dec 2020
View Details

elementUI中el-table 如何动态生成列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<el-table :data="tableData" style="width: 100%">
  <el-table-column
    v-for="col in cols"
    :prop="col.prop" :label="col.label" >
  </el-table-column>
</el-table>
<el-button raw-type="button" @click="addCol">
  添加一列
</el-button>
data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
          cols: [
          {prop: 'date', label: '日期'},
        {prop: 'name', label: '姓名'},
      ]
        }
      },
  methods: {
      addCol(){
        this.cols.push({prop: 'address', label: '地址'})
    }

from:https://blog.csdn.net/baidu_34692401/article/details/83348130

龙生   22 Dec 2020
View Details

vue 进入页面与离开页面触发事件

1.切换进入当前路由之前的钩子函数 beforeRouteEnter

1
2
3
4
5
6
7
<script>
export default {
  beforeRouteEnter(to, form, next) {
    next()
  }
}
</script>

2.离开当前路由之前的钩子函数 beforeRouteLeave

1
2
3
4
5
6
7
<script>
export default {
  beforeRouteLeave(to, form, next) {
    next()
  }
}
</script>

  from:https://www.cnblogs.com/gqx-html/p/11233014.html

龙生   08 Dec 2020
View Details
1 … 6 7 8 … 37

Copyright © 2025 Longsheng All rights reserved