日常笔记~~~~

去除字符串中空格

var a = 'a b c d e f';

去除所有空格: var c= a.replace(/\s*/g,"");      

去除两头空格: var c= a.replace(/^\s*|\s*$/g,"");

去除左空格: var c= a.replace( /^\s*/, “”);

去除右空格: var c= a.replace(/(\s*$)/g, "");

vue中实现文字间加空格的方法

<div style="word-spacing:10px">{{"\xa0\xa0"}}辆:</div>

jq拼串

<i18n data-i18n="determines">'+$.i18n.prop("determines")+'</i18n>

localstorage存取删

localStorage存储
我们通过以下方式将数据储存到localStorage中

window.localStorage.setItem('key',value)
但有时value为一个对象Object,以上面的方式写入,会出现读取的返回值为
{object Object}的情况,但这并不是我们想要的,此时我们需要使用新的方式
传入Object

window.localStorage.setItem('param',JSON.stringify(Object))
通过JSON.stringify(Object)方法将对象转化为一个json格式的字符串进行存储

localStorage读取
我们通过以下方式来读取localStorage中的值

window.localStorage.getItem('key')
相对的在读取json格式字符串只有我们也无法直接使用,需要将它转换为josn对象之后才是我们想要的结果,所以我们需要调用 JSON.parse()方法来进行转化,
之后在继续使用

JSON.parse(window.localStorage.getItem('key'))
localStorage删除
我们通过以下方法来删除对应key以及key中的内容

window.localStorage.removeItem('key')
localStorage清空所有的key
清空localStorage中所有的key;
注意:请谨慎使用,它会清空所有的本地存储数据

window.localStorage.clear()

jq获取带有某属性值的元素

全局查找:

1、$('*[name="username"]'):在前面加个*表示查找所有带有 name="username"DOM2、$('*[name]'):代表全局查找带有name属性的DOM,其实可以更简单的用$('[name]')就可以了;

  eg:$('[data-id]');

  $($('*[data-id]')[1]).html = $($('*[data-id]')[1]).attr('data-id')

在数组对象中添加或删除指定的一项

const result = this.userMenus.some(item => {
  if (item.id === row.id) {
    return true
  }
})
if (result) {
  for (const item in this.userMenus) {
    if (this.userMenus[item].id === row.id) {
      this.userMenus.splice(item, 1)
    }
  }
} else {
  this.userMenus.push({ id: row.id })
}


JS判断一个字符串是否在数组中

https://blog.csdn.net/u014651560/article/details/107620461?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%98%AF%E5%90%A6%E5%9C%A8%E6%95%B0%E7%BB%84%E4%B8%AD&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-107620461.142^v2^es_vector,143^v4^control&spm=1018.2226.3001.4187
arr.indexOf(某元素):未找到则返回 -1。
arr.find()
array.findIndex()和array.find()十分类似,返回第一个符合条件的数组元素的位置,如果所有元素都不符合条件,则返回-1


JS中的位置和宽度:clientWidth、offsetWidth、scrollWidth等区别

https://blog.csdn.net/qq_42089654/article/details/80515916?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164759722916781685340142%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=164759722916781685340142&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-80515916.142^v2^es_vector,143^v4^control&utm_term=clientWidth&spm=1018.2226.3001.4187

js如何准确获取当前页面url网址信息

https://blog.csdn.net/qq_40435659/article/details/82347888?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164784608716782092995527%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=164784608716782092995527&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-82347888.142^v2^es_vector,143^v4^control&utm_term=%E8%8E%B7%E5%8F%96url&spm=1018.2226.3001.4187
window.location.href(设置或获取整个 URL 为字符串)

时间戳

new Date().getTime(),

vue父子组件传值,以及监听传值(超级详细)

https://blog.csdn.net/qq_44063746/article/details/109764164?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164791713216780264049269%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=164791713216780264049269&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2alltop_positive~default-1-109764164.142v2es_vector,143v4control&utm_term=vue%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC&spm=1018.2226.3001.4187

子组件给父组件传值(子传父,下级向上级汇报需要自己主动发送,也就是事件发射)

子组件中:
![image.png](https://img-blog.csdnimg.cn/img_convert/a24718c7400cc998929d977ff8b725c6.png#clientId=ud32ec616-e5e9-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ub618c173&margin=[object Object]&name=image.png&originHeight=314&originWidth=695&originalType=url&ratio=1&rotation=0&showTitle=false&size=39527&status=done&style=none&taskId=u7119293e-a9ad-4da8-a02b-6311bda32bc&title=)
父组件中:
![image.png](https://img-blog.csdnimg.cn/img_convert/f7cebcc65dbd0fe4a4778d9e008c0ea1.png#clientId=ud32ec616-e5e9-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u684540e9&margin=[object Object]&name=image.png&originHeight=109&originWidth=1010&originalType=url&ratio=1&rotation=0&showTitle=false&size=17565&status=done&style=none&taskId=ud7ab8f0c-57f7-4dea-a05a-c4bea3530d3&title=)
![image.png](https://img-blog.csdnimg.cn/img_convert/4322439363817f23c837cb9b1e8decae.png#clientId=ud32ec616-e5e9-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u80604d2c&margin=[object Object]&name=image.png&originHeight=97&originWidth=518&originalType=url&ratio=1&rotation=0&showTitle=false&size=11037&status=done&style=none&taskId=ufecc153b-e05c-4815-b759-8c4386e769c&title=)

js获取url参数值

https://www.cnblogs.com/jiekk/archive/2011/06/28/2092444.html

方法一:正则分析法

 

function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
    }
这样调用:

alert(GetQueryString("参数名1"));

alert(GetQueryString("参数名2"));

alert(GetQueryString("参数名3"));

JS数组和对象相互转换方法[实用]

写在开头
最近公司项目重构,看了看之前的代码发现很多因为数据结构导致的问题,可是没办法啊,打工个人。所以总结了一些平时开发中对象与数组常用的方法与它们之间相互转换的方法。

数组转对象
展开运算符 (...)
这是一个简单快速的方法

const arr = ['one','two','three'];
const obj = {...arr};       
console.log(obj);    // { 0: 'one', 1: 'tow', 2: 'three' }
 
Objcet.assign(target, ...sources)
将所有可枚举属性的值从一个或多个源对象分配到目标对象

参数: target:目标对象、...sources:源对象

返回值:目标对象

const arr = ['one','two','three'];
const obj = Object.assign({}, arr);
console.log(obj);       // { 0: 'one', 1: 'tow', 2: 'three' }
Object.fromEntries(iterable)
把键值对转换为一个对象。

参数:类似Array、Map

返回值:由该迭代对象条目提供对应属性的新对象

当我们遇到如下的结构时我们可以很轻松的将这个数组转换为对象

const arr = [ ['a', 1], ['b', 2], ['c', 3] ];
const obj = Object.fromEntries(arr);
console.log(obj);    // { a:1 , b: 2, c: 3 }
 
forEach
const arr = [1,2,3,4,5];
let obj = {};
 
arr.forEach((item,index) => {
    obj[index] = item;
})
 
console.log(obj);     //{ 0: 1, 1: 2, 2: 3, 3: 4, 4: 5 }
 
对象转数组
Object.entries(obj)
把一个键值对转换为数组

参数: 可以返回其自身可枚举属性的键值对的对象

返回值:返回一个其自身可枚举属性的键值对数组

当我们遇到如下的结构时我们可以很轻松的将这个对象转换为数组

const obj = { a:1 , b: 2, c: 3 };
const arr = Object.entries(obj);
console.log(arr);   // [ ['a', 1], ['b', 2], ['c', 3] ]
 
Object.keys(obj)
由给定的对象自身可枚举的属性组成的数组

参数:对象

返回值:给定对象的属性组成的字符串数组

通常会配合一些数组的方法使用,如下

const obj = { a:1 , b: 2, c: 3 };
const arr = Object.keys(obj).map(item => obj[item]);
console.log(arr);  // [1, 2, 3];
 
也可以得到上面那样的结果
 
const arr = Object.keys(obj).map(item => [item, lobj[item]]);
console.log(arr);  // [ ['a', 1], ['b', 2], ['c', 3] ]
 
Object.values(obj)
由给定的对象自身可枚举的属性值组成的数组

参数:对象

返回值:给定对象的属性值组成的字符串数组

const obj = { a:1 , b: 2, c: 3 };
const arr = Object.values(obj);
console.log(arr);  // [1, 2, 3];
 
Array.from(array, fn, this)
从一个类似数组对象或可迭代对象创建一个新的,浅拷贝的数组实例。

参数:

array:要变换成数组的为数组对象或可迭代对象
 
fn: 指定了该参数,新数组中的每个元素都会执行该回调函数
 
this: 执行回调函数时的this对象
返回值:一个新的数组实例

先来说说什么是类似数组:就是含有length和索引属性的对象,如下就是一个简单的类似数组对象

const obj = {
    0: 'name',
    1: 'age',
    2: 'sex',
    3: 'height'
    length: 3,
}
注意:类似数组对象的length的值,决定了返回数组的长度

什么是可迭代对象:Array、Set、Map和字符串都是可迭代对象,更直接的是在控制台上看看当前的对象的原型链上是否有 Symbol的方法 ,看看下面通过生成器创建的可迭代对象

const obj = {
    0: 'name',
    1: 'age',
    2: 'sex',
    3: 'height',
}
 
function *createIterator(obj){
    for(let value in obj){
        yield obj[value];
    }
}
 
let iterator = createIterator(obj);
 
好的,我们来试试用Array.from创建一个数组吧。

类似数组对象
 
const obj = {
    0: 'name',
    1: 'age',
    2: 'sex',
    3: 'height',
    length: 3,
}
 
const arr = Array.from(obj);
 
console.log(arr);    //['name', 'age', 'sex' ];
 
输出3个是因为上面说的length的长度决定了数组的长度
 
 
可迭代对象
 
const obj2 = {
    0: 'name',
    1: 'age',
    2: 'sex',
    3: 'height'
}
 
function *createIterator(obj){
    for(let value in obj){
        yield obj[value];
    }
}
 
let iterator = createIterator(obj);
 
const arr2 = Arry.from(iterator);
 
console.log(arr2);    //['name', 'age', 'sex', 'height' ];

JavaScript根据对象的key重新排序

https://blog.csdn.net/yangwqi/article/details/109289506?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ETopBlog-1.topblog&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ETopBlog-1.topblog&utm_relevant_index=1


const sortArr=['aaa','bbb','ccc'];//指定排序顺序
//未排序的对象
const arr={
    "aaa":{ "id":"a"},
    "ccc":{"id":"c+"},
    "bbb":{ "id":"b+"}
}
let getArr={}//接收新顺序
sortArr.forEach(item => {
    Object.keys(arr).forEach(key=>{
        if(item===key){
            getArr[key]=arr[key]
        }
    });
});    
console.log(getArr)

总结几个对象转数组的方法

目标效果:

obj = { 0: 'a', 1: 'b', 2: 'c' }
=> 
ayy=['a','b','c']
1
2
3
1、Array.from(object)

注:
1️⃣ object中必须有length属性,返回的数组长度取决于length长度
2️⃣ key 值必须是数值

2、Object.values(object)

注:与第一种不同的是不需要length属性,返回一个对象所有可枚举属性值

返回数组的成员顺序:
const obj = { 100: 'a', 2: 'b', 7: 'c' };  
Object.values(obj)  
// ["b", "c", "a"] 
1
2
3
4
3、Object.keys(object)

注:返回一个对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 forin 循环遍历该对象时返回的顺序一致

4、Object.entries(object)

注:返回一个给定对象自身可枚举属性的键值对数组

const obj = { foo: 'bar', baz: 42 }; 
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
1
2
5、使用 forin…构建函数

function getObjectKeys(object) {
  let keys = []
  for(let property in object)
    keys.push(property)
    return keys
}
function getObjectValues(object) {
  let values = []
  for(let property in object)
    values.push(object[property])
    return values
}

location.ancestorOrigins Firefox 和 IE 下的替代用法

https://blog.csdn.net/lyn1772671980/article/details/79917594?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164800088516780265493095%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=164800088516780265493095&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allbaidu_landing_v2~default-1-79917594.142v3pc_search_insert_es_download,143v4control&utm_term=window.location.ancestorOrigins&spm=1018.2226.3001.4187

window.location.origin替代
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值