首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

JS笔记

Sonder
2019-09-11
8455字
21分钟
浏览 (3.8k)

获取url问号后面的参数

复制代码 
function getQueryString(variable) {
  var query = window.location.href.split("?")[1];
  if (query) {
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return pair[1];
      }
    }
  }
}
复制代码 
function parseQuery() {
 var query = {};
 var href = window.location.href;
 var index = href.indexOf("?");
 if (index !== -1) {
   var queryArr = href.slice(index + 1).split("&");
   for (var i = 0, len = queryArr.length; i < len; i++) {
     var arr = queryArr[i].split("=");
     if (arr.length === 2) query[arr[0]] = String(arr[1]);
   }
   if (query.prefix) query.prefix = decodeURIComponent(query.prefix);
   // console.log(query);
 }
 return query;
}

获取列表某个字段

复制代码 
function getFields(input, field) {
  var output = [];
  for (var i = 0; i < input.length; ++i) output.push(input[i][field]);
  return output;
}

修改数组对象的Key和指定的值

复制代码 
convertKey (arr) {
  return arr.map(item => ({
    label: item.gameName,
    value: item.gameCode
  }))
},

截取时间戳

复制代码 
function timeRange(time) {
  let timeRange = time ? time.split("~") : [];
  let start = timeRange ? timeRange[0] : "";
  let end = timeRange ? timeRange[1] : "";
  return [start, end];
}

如何将 JS 日期转换为ISO标准

toISOString() 方法用于将js日期转换为ISO标准。 它使用ISO标准将js Date对象转换为字符串。

复制代码 
var date = new Date();
var n = date.toISOString();
console.log(n);
// YYYY-MM-DDTHH:mm:ss.sssZ

如何在JS中克隆对象

复制代码 
var x = {myProp: "value"};
var y = Object.assign({}, x);

解析浏览器上的url

decodeURIComponent

复制代码 
var href = decodeURIComponent(window.location.href);

获取二维数组下面的某个键里面的值

结果：

复制代码 
[
   { Q:123,R:101,lng:103.55,lat:34.55 },
   ...
]

期望结果：

复制代码 
[
   { lng:103.55,lat:34.55 },
   ...
]
复制代码 
function jsonFun(data) {
 let output = [];
 data.forEach(obj => {
   let temp_obj = {
     lng: obj["lng"],
     lat: obj["lat"]
   };
   output.push(temp_obj);
 });
 //数组转json字符串
 return JSON.stringify(output);
}

倒计时

复制代码 
setInterval(function(){
    var time=new Date();
    var year=time.getFullYear();
    var month=time.getMonth()+1;
    var day=time.getDate();
    var hour=checkTime(time.getHours());
    var minite=checkTime(time.getMinutes());
    function checkTime(i){
        if(i<10) return "0"+i;
        return i;
    }
    var box=document.getElementById("nowtime");
    box.innerHTML=year+"-"+month+"-"+day+" "+hour+":"+minite;
},6000);

向js文件传值

复制代码 
<script src="../about.js" hiddenComment="true"></script>

about.js

复制代码 
var script=document.getElementsByTagName("script");
//获取最后一个js文件
var endScript = script[script.length-1]

var hiddenComment= endScript.getAttribute("hiddenComment");

console.log(hiddenComment)

数字格式化

复制代码 
function paddingNum(number){
    return number.toLocaleString()
}

console.log(paddingNum(1236699.12))

对象中出现两次以上的为true，否则为false

复制代码 
function duplicatedWord(chars) {
    var map = new Map();
    for (var i = 0; i < chars.length; i++) {
        if (map.has(chars[i])) {
            map.set(chars[i], 'true');
            continue;
        } else {
            map.set(chars[i], 'false');
        }

    }
    return map;
}

执行顺序（异步）

同步可以保证顺序一致，但是容易导致阻塞；异步可以解决阻塞问题，但是会改变顺序性，根据不同的需要去写你的代码。

复制代码 
setTimeout(function(){console.log(1)},0);
new Promise(function(resolve,reject){
console.log(2);
resolve();
}).then(function(){console.log(3)
}).then(function(){console.log(4)});
process.nextTick(function(){console.log(5)});
console.log(6);

//输出2,6,5,3,4,1
复制代码 
setTimeout(() => console.log('a'));
Promise.resolve().then(
  () => console.log('b')
).then(
  () => Promise.resolve('c').then(
    (data) => {
      setTimeout(() => console.log('d'));
      console.log('f');
      return data;
    }
  )
).then(data => console.log(data));
//b f c d a

如何实现sleep的效果（es5或者es6）

https://www.nowcoder.com/tutorial/96/7a253a443122467b8d022ca88d33ec62

  1. 通过promise来实现
复制代码 
function sleep(ms){
  var temple=new Promise(
    (resolve)=>{
      console.log(111);setTimeout(resolve,ms)
    });
  return temple
}
sleep(500).then(function(){
 console.log(222)
})
//先输出了111，延迟500ms后输出222
  1. 通过async封装
复制代码 
function sleep(ms){
  return new Promise((resolve)=>setTimeout(resolve,ms));
}
async function test(){
  var temple=await sleep(1000);
  console.log(1111)
  return temple
}
test();
//延迟1000ms输出了1111

写一个函数，第一秒打印1，第二秒打印2

复制代码 
for(let i =0; i< 5;i++){
    setTimeout(function(){
        console.log(i)
    },1000*i)
}

把多维数组变成一维数组的方法

https://www.nowcoder.com/tutorial/96/f34606528fb24c529210c6e4196c1cfc

1、递归

复制代码 
function flatten(arr) {
 var result = [];
 for (var i = 0, len = arr.length; i < len; i++) {
   if (Array.isArray(arr[i])) {
     result = result.concat(flatten(arr[i]))
   }
   else {
     result.push(arr[i])
   }
 }
 return result;
}

2、toString

复制代码 
function flatten(arr) {
 return arr.toString().split(',').map(function(item){
   return +item
 })
}

3、用ES6给的flat方法

复制代码 
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity);
// [1, 2, 3, 4, 5, 6]

正则

从字符串当中找到自己想要的

复制代码 
const str = 'qwbewrbbeqqbbbweebbbbqee';
var i =  str.match(/b{1,5}/g)
// str.match(/b+/g);
console.log(i)
// Array(4)
// 0: "b"
// 1: "bb"
// 2: "bbb"
// 3: "bbbb"
// length: 4

代码回收规则

  1. 全局变量不会被回收。
  2. 局部变量会被回收，也就是函数一旦运行完以后，函数内部的东西都会被销毁。
  3. 只要被另外一个作用域所引用就不会被回收
复制代码 
//三个变量没有被回收
var i = 1;
var i = 2;
var add = function() {
    var i = 0;
    return function()
{
        i++;
        console.log(i);
    }
}();
add();

清空数组

  • arrayList = []
  • arrayList.length = 0;
  • arrayList.splice(0, arrayList.length);

JavaScript回调函数

https://cnodejs.org/topic/564dd2881ba2ef107f854e0b

回调函数

复制代码 
function add(num1, num2, callback){
   var sum = num1 + num2;
   callback(sum);
}

function print(num){
   console.log(num);
}

add(1, 2, print);        //=>3

jQuery中大量的使用了回调函数

复制代码 
$("#btn").click(function() {
 alert("button clicked");
});

Js类型判断

  • typeof
  • instanceof
  • Object.prototype.toString

在html渲染数组中判断是不是最后一个

复制代码 
 <li v-for="(item,index) in data" :key="index">
      <span class="mr-15">{{ item }}</span>
      <img v-if="index !== data.length - 1" src="@/assets/images/goods/arrow.png" alt="">
    </li>

JS使用递归删除children中长度为空的数组

复制代码 
removeEmptyArrayEle(arr) {
  if(arr.length){
    for(let i in arr){
      if(arr[i].children.length) {
        this.removeEmptyArrayEle(arr[i].children)
      } else {
        delete arr[i].children;
      }
    }
  }
  return arr;
},

回到锚点位置

复制代码 
  var linkc = document.querySelector('#linkc')
  var cc = document.querySelector('#cc')
复制代码 
   to(toEl,n = 80) {
      let bridge = toEl;
      let body = document.body;
      let height = 0;
      do {
        height += bridge.offsetTop;
        bridge = bridge.offsetParent;
      } while (bridge !== body)
      window.scrollTo({
        top: height - n,
        behavior: 'smooth'
      })
    },
复制代码 
 linkc.addEventListener('click', function () {
    to(cc)
  });

删除数组某个值

复制代码 
//https://www.h5w3.com/521.html
function removeByValue(arr, val) {
  for(var i=0; i<arr.length; i++) {
    if(arr[i] == val) {
      arr.splice(i, 1);
      break;
    }
  }
}
var somearray = ["mon", "tue", "wed", "thur"]
removeByValue(somearray, "tue");
//somearray will now have "mon", "wed", "thur"

把sessionStorage存的值转为对象

复制代码 
checkBe(obj) {
  if (!(typeof obj == 'object')) {
    return;
  }
  for (let key in obj) {
    if (obj.hasOwnProperty(key)
        && (obj[key] == null || obj[key] === undefined || obj[key] === '')) {
      delete obj[key];
    }
  }
  return obj;
}
复制代码 
// 存
sessionStorage.setItem('select_game', JSON.stringify(this.objName))

// 取
let select_game = sessionStorage.getItem('select_game');
if(select_game && select_game !== '{}') {
  this.getSelectData = this.checkBe(JSON.parse(select_game))
}

获取数组第一个

复制代码 
var arr = [1,2,3...........10000];
我需要的是[1]，后面无限多的不需要，怎么获取呀

this.selectArr.slice(0,1);

input只能输入价格

复制代码 
<input type="text" v-model="inputGroupScreen.priceMin" oninput="value=value.replace(/[^\d.]/g,'').replace(/\.{2,}/g, '.').replace(/^(\d+)\.(\d\d).*$/, '$1.$2')" class="numberInput" placeholder="请输入" min="0">
复制代码 
// vue要加@
@oninput
#js公共方法#js技巧#笔记
浏览 (3.8k)
下一篇 / javascript – 从对象数组中,将属性的值提取为数组

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)