日常方法小记

最新推荐文章于 2021-02-13 08:13:43 发布

vun，

最新推荐文章于 2021-02-13 08:13:43 发布

阅读量206

点赞数 1

本文链接：https://blog.csdn.net/a_xixi/article/details/87872242

版权

时间戳转化为现在时间

new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');

js之JSON， ajax ，跨域，回调

js之正则表达式

// 正则表达式2中写法
var reg=/^[a-z]at$/;
var reg2=new RegExp('^[a-z]at$');
reg2.test('cat')

//\b  匹配一个单词的边界  \B匹配一个单词的非边界
// 表达式 /\bhi\b/.test('hi this')
// 表达式 /\Bhi\B/.test('this')
// \d 匹配数字  \D匹配非数字
// /\d/.test('12345')
// /\D/.test('aaaa')
// \w 匹配数字，字母，下划线  \W  取反
// /\w/.test('#123abc_')
// ^开头  $结束  /^hi$/只能匹配'hi'
// []匹配一堆字符中的任意一个 /^[A-Za-z]at$/   /^[aeiou]at$/.test('iat')
// [^] 不匹配这个集合中的任意一个字符  /^[^aeiou]at$/.test('cat')
// +  表示前一模式可以重复一次或者n次  /^go+at$/.test('goooooat')
// *  表示前一模式可以重复0次或者n次  /^go*at$/.test('gat')
// ？ 表示前一模式可以重复0次或1次  /^go?at$/.test('goat')
// {x} 表示前一模式被重复x次  /^go{2}le$/.test('goole')
// {x,y} 表示前一模式被重复x到y次 /^go{2,4}le$/.test('goooole')
// {x,} 表示前一模式被重复至少x次
// ()可以指定一堆字符来匹配一个模式  /^(very )*/.test('large')
// | 或者 /^com$|^org$/只能匹配com org
// \转移符  '^\\w+$' 由数字，26字母，或者下划线组成的字符串
// [\u4e00-\u9fa5]汉字中的任意一个汉字

js-this 指向函数的拥有者

        //1.在函数中引用 指向window
        var str = 'js';
        function fo() {
            var str = 'jq';
            console.log(this.str);//此时this指向window
            console.log(this === window);
            //输出js，true
        }
        fo();
        //2.对象调用 指向当前对象
        //3.构造函数调用  this指向实例化对象
        function Fun(name, age) {
            this.name = name;
            this.age = age
        }
        var fun = new Fun('lisa', 14)// this指向fun
        console.log(fun.name)
        //4.this指向 .call()  .apply() 在一个对象中调用另一个对象
        var a = '111';
        function test() {
            return this.a;
        }
        var o = {};
        o.a = 1;
        o.b = test;
        console.log(o.b.call())//为空指向window

        // 函数自执行 this指向window
        var number = 1;
        var obj = {
            number: 2,
            showNumber: function () {
                this.number = 3;
                (function () {
                    console.log(this.number)//1
                })();
                console.log(this.number);//3
            }
        }
        obj.showNumber();

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li>list item 3</li>
</ul>
<script>
$('ul>li').click(function(){
// siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。
   $(this).css('color', 'red').siblings().css('color','#000');
})
</script>

js-原型公共属性和方法

    function Person() { }
    Person.prototype.name = 'Lina';
    var person1 = new Person()
    var person2 = new Person()
    console.log(person1.name, person2.name)//Lina Lisa
    // 修改原型属性
    person1.__proto__.name = 'aaa';
    console.log(person1.name, person2.name)//aaa aaa
    // 检查是否为实例对象 isPrototypeOf
    console.log(Person.prototype.isPrototypeOf(person1))//true

    // 混合使用构造函数和原型
    function Aa(name, age) {
        this.name = name;
        this.age = age;
    } Aa.prototype.action = function () {
        return this.name + this.age
    }
    aa = new Aa('lisa', 15);//.....实例化n个
    console.log(aa.action())
//继承

js-操作DOM//文档对象模型

节点类型：Node-节点 NodeList-节点集合

// 获取节点的4个方法
document.getElementsByTagName('body')//标签-返回的是节点集合nodelist
document.getElementById('wrap')//id-返回的是节点
document.getElementsByClassName('aa')//class-返回节点集合
document.querySelectorAll('.aa')//选择器获取节点集合

js-立即执行函数

function f1(){
     return new Promise((resolve,reject)=>{
            setTimeout(function(){
                console.log("f1")
            },80)

    })
}
// 异步变同步
(async function(){
    await f1();
     console.log('a')
})()

js属性设置和获取 . / []的区别：.是自身的属性，[]可以是变量

var obj={};
obj.name='lina';
obj['age']=22;
console.log(obj['name'])

var o={};
o.name='xxx';
var nameA='name'
console.log(o[nameA])//xxx


// 3种检测属性：1.in运算符2.hasOwnProperty()3.!=undefined
'name' in o
o.hasOwnProperty('name')
o.name!=undefined

var obj = { key1: 1, key2: 2 }; 
for (a in obj) { console.log(a) }//key1 key2
for (a in obj) { console.log(obj[a]) }//1 2

var arr=[{x:1},{y:2},{z:3}]
for(a in arr){console.log(a)}//0,1,2 数组一般使用for 和
$.each(arr,function(index,item){

})

js-arguments

使用：在不确定实参个数时函数内部使用

特性：1.类数组，代表实参集合2..length返回数组个数3.[index]下标的形式提取某个元素

js-函数创建：

普通函数驼峰命名 this指向函数的使用者

构造函数使用方式： new this指向实例化对象命名：首字母大写

工厂模式

函数声明和函数表达式区别：函数声明在声明之前可以使用，但是函数表达式不行

优化眼睛：webpack-bundle-analyzer

安装：npm install --save-dev webpack-bundle-analyzer

node调试：npm --inspect xx.js 访问 chrome://inspect

1.window.open("http://www.runoob.com");打开一个新窗口

2.arr.unshift()数据追加前 push()数组追加后.arr.splice(i, 1)

3.https://music.liuzhijin.cn/生成音乐外链（.mp3），但是会失效

4.height:100vh=height:100%;撑开与屏幕高度一致

5.z-index和position一起使用

6.box-shadow样式：

7.先平移再旋转

8.[v-cloak]{display:none}//当页面没有加载完是不显示

9.event.preventDefault()//取消事件的默认动作

在elintrc.js的rules里配置

'semi':['error','always'],//分号
'indent':0,//忽略缩进

在代码行添加

/* eslint-disable no new*/
new Vue({    //忽略该行校验

})

vue的路由，状态管理，服务器端渲染

vue插件使用：eg：

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')

// 不要忘了调用此方法
Vue.use(VueRouter)

如果想在VUE项目运行后自动打开浏览器预览，设置如下：

打开config文件夹下的index.js文件
设置autoOpenBrowser: true,

微信小程序：

只有两个标签：view代替所有的块级标签 text所有的行级标签

小bug：text里面不能换行

样式：

<image src="网络地址"></image>

js:基本类型和基本包装类型

基本类型：Undefined,Null,Boolean,Number,String

基本包装类型：Boolean,Number,String Number.prototype

new Number(123.123).toFixed(2)

new String("a").charCodeAt()

包装类型：封装了原始类型，提供操作值API的对象

如何使用：自动创建，自动销毁

原则：变量是啥类型就自动创建啥类型

通过prototype给基本类型添加方法

区别在于：生存期------引用类型所创建的对象，在执行的期间一直在内存中，而基本包装对象只是存在了一瞬间。

js：数组合并：var c=concant（arr1,arr2）

搜索框：this.monitObejtData.filter((item, i) => (item.name.toLowerCase().indexOf(searchContent.toLowerCase()) > -1));

trim()去空格

null>=0   //true
undefined>=0   //false

h5之cookie，localStorage、sessionStorage

    public SetCookie(name,value){//两个参数，一个是cookie的名子，一个是值
        var Days = 7; //此 cookie 将被保存1天
        var exp = new Date();  
        exp.setTime(exp.getTime() + Days*24*60*60*1000);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toUTCString();        
    }

优势：1.拓展了cookie的4k限制2.将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

局限：1.高版本浏览器才支持2.值类型为String3.内存消耗过多会导致浏览器卡顿4.不能被爬虫抓取到5.隐私模式下面是不可读取的localStorage与sessionStorage：就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

使用：

    var storage = window.localStorage;
    // 三种写入
    storage.setItem('a', 1)
    storage.b = 2;
    storage['c'] = 3;
    // 3种读取
    console.log(storage.getItem('a'), storage.a, storage['a'])
    //将localStorage中的某个键值对删除
    storage.removeItem("a");
    // 键值获取
    for (var i = 0; i < storage.length; i++) {
        var key = storage.key(i);
        console.log(key);
    }
    // storage.clear()//清空
    // JSON.stringify()JSON=>JSON字符串  JSON.parse() JSON字符串=>JSON对象，使用

js:常用方法：

'abc'.charCodeAt(0) //97  获得字符串中某个具体字符的 Unicode 编码。
'abc'.indexOf('b')//1  返回某个指定的字符串值在字符串中首次出现的位置。
//1.indexOf() 方法对大小写敏感！2.如果要检索的字符串值没有出现，则该方法返回 -1。
'abcoabco'.lastIndexOf('o')//7   返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

'abc'.substring(1)//"bc"   不能为负值
'abcdfetghh'.slice(1)//bcdfetghh 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符
'abcdfetghh'.slice(-1) //"h"
'abcdfetghh'.slice(1,2)//"b"
'abcdfetghh'.substr(1,2) //"bc"
substr()
/*String 对象的方法 slice()、substring() 和 substr() （不建议使用）都可返回字符串的指定部分。
slice() 比 substring() 要灵活一些，因为它允许使用负数作为参数。
slice() 与 substr() 有所不同，因为它用两个字符的位置来指定子串，而 substr() 则用字符位置和长度来指定子串。
还要注意的是，String.slice() 与 Array.slice() 相似。*/

css3边框：border-radius box-shadow border-image

box-shadow: 10px 10px 5px #888888;
/*box-shadow: h-shadow v-shadow blur spread color inset;
水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影的颜色 外部阴影 (outset) 改为内部阴影。 */

border-image: url(border.png) 30 30 round;
/* border-image ：border-image-source border-image-slice border-image-width border-image-outset border-image-repeat */


border-radius: 2em 1em 4em / 0.5em 3em;
/* 等价于： */
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

css的transform: rotate() translate() skew() scale()

perspective景深,透视点：模拟人眼到3d物体的距离，取值越大 perspective为none元素则没有Z轴(就是2D元素)

旋转scale：先平移再旋转：1：旋转原点会影响旋转效果，2连同坐标一起转