zoukankan      html  css  js  c++  java
  • js,jquery备忘录

    1.var s = str.charCodeAt();转ASCII码

    2.String.fromCharCode(65);转字母

    3.es6 ... (扩展运算符),将一个数组转化成由逗号分割的队列。

    如:arr = [1,2,3] ...arr => 1,2,3;

    当你需要找一个数组中的最小值的时候便可以Math.min(...arr);

    4.arr.reduce(function(){},初始值);累计一个数组中的元素,

    如累加:arr.reduce(function(x,y){

    return x + y;

    },0)//初始值我理解为x的初始值为0;也就是需要求和的值。

    5.es6 set 集合长度用size;

    6.es7 padStart(自定义长度,自定义值)头部补全

    如:“123”.padStart(“5”,“0”);=》“00123”;

    7.Number.isInterger()用来判断一个数是否是整数。

    8.判断两个数组是否相等:arr1.toString()==arr2.toString().

    9.实现反转的sort排序:sort(x=>1)//箭头函数

    10.replace()想要替换所有匹配的值时,要在正则表达式那里加上g,也就是全局,否则他只会匹配第一个。

    11.$("li:gt(index));取大于索引的所有值。

    12.判断二进制数能否被3整除正则表达式:var reg = /^0*(1(01*0)*10*)*$/

    13.instanceOf 用来判断一个对象是否是由另一个对象生成的

    typeOf 用来判断类型

    14.//判断二进制数能否被五整除:

    /*let divisibleByFive = /^(0|1(10)*(0|11)(01*01|01*00(10)*(0|11))*1)+$/*/

    15.在一个数组中有null和false时;

    在转化为字符串时,null会变成空位,false会变成“false”;

    在判断数组元素是否为0或者“0”时,要用===;因为如果是==;false会转化为0。

    16.将二维数组扁平化:[].concat(...arr);

    17.四舍五入且保留两位小数的方法:num.toFixed(2);保留两位小数;

    如果是 +num.toFixed(2)则代表整数依然保留整数,小数保留两位。

    Math.round(num*100)/100;

    18.反转一个数组:不用reverse():reverse=a=>[...a].map(a.pop,a);

    19.判断url是否能被正确链接

    function checkUrl(url, name)
    {
    $.ajax({
    url: url,
    type: "get",
    dataType : 'jsonp',
    crossDomain : true,

    complete: function(xhr, textStatus) {
    if( xhr.readyState === 4 && xhr.status === 200 )
    {
    代表能访问链接成功
    }
    }
    });
    }

    20.在做一些网页上的tab栏切换的时候,建议用jquery的show()和hide()方法来实现。(且默认隐藏的元素也用hide()方法初始化)。

    21.jquery记录index:$(this).index()。

    22.substring(index)代表从索引处开始截取;substring(a,b)代表从下标为a处截取长度为b-a个字符。(参数不为负数)
    slice()和substr()形似,参数可以为负数。

    23.运用jquery或者js不能直接获取到after,before的样式;如果需要修改此样式,应该新定义一个class,再给class定义after或before去覆盖之前的样式。

    24.当运用layui的弹出层想弹出layui的表格时,可以如下写:

    html页面:
    <script type="text/html" id="alerttable">//注意type
    <div id="creattable"></div>
    </script>
    js:
    layui.use('table',function(){
    var table = layui.table;

    table.render({
    elem:“#creattable”,.....//子节点
    })
    })
    layer.open({
    area:['1200px','600px'],
    content:$("#alerttable").html()//父节点
    });

    25.$.extend(合并到此处,对象1,对象2)合并对象。

    26.ES6 对象提供了 Object.assign()这个方法来实现浅复制。(将源对象可枚举的属性拷贝给目标对象)。

    27.验证的八个正则表达式(手机号,密码,身份证,日期,验证码等)https://www.cnblogs.com/hejun26/p/9811090.html。

    28.jquery提供closest(selector)方法,寻找所匹配的第一个选择器元素,dom向上遍历。

    29.Object.create()创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。(可以用此方法来实现类式继承)

    30.Symbol的作用非常的专一,换句话说其设计出来就只有一个目的——作为对象属性的唯一标识符,防止对象属性冲突发生。
    (https://www.zhangxinxu.com/wordpress/2018/04/known-es6-symbol-function/)

    31.js移除Array中指定元素:

    首先需要找到元素的下标:

    var array = [2, 5, 9];
    var index = array.indexOf(5);
    使用splice函数进行移除:

    if (index > -1) {
    array.splice(index, 1);
    }

    32.用 apply 将数组添加到另一个数组
    concat确实具有我们想要的行为,但它实际上并不附加到现有数组,而是创建并返回一个新数组。 但是我们想要附加到我们现有的阵列:
    var array = ['a', 'b'];
    var elements = [0, 1, 2];
    array.push.apply(array, elements);
    console.info(array); // ["a", "b", 0, 1, 2]

    33.正则表达式中s代表匹配空格;S代表非空白字符。

    34.我也不知道为什么,网上也有很多iframe获取父页面的元素和获取子页面的元素,可我偏偏就只能从子iframe获取父页面的dom元素;奇了怪了,记录一下:(已解决,博客园已记录)
    window.parent.document.getElementById("id");子iframe获取父级的元素。

    35.正则表达式懒惰限定符:(列举两个)(详情见https://www.cnblogs.com/lizhenlin/p/6654934.html)
    "*?" 重复任意次,但尽可能少重复
       如 "acbacb" 正则 "a.*?b" 只会取到第一个"acb" 原本可以全部取到但加了限定符后,只会匹配尽可能少的字符 ,而"acbacb"最少字符的结果就是"acb"

    "??" 重复0次或1次,但尽可能少重复
       如 "aaacb" 正则 "a.??b" 只会取到最后的三个字符"acb"

    36.伪数组转化为数组:(均不改变原伪数组)
    可以用es6的Array.from();
    var arr = Array.prototype.slice.call(arguments);

    37.$("table").on("click","tbody tr td:nth-child(n)",function(){}) //n取整数,代表点击表格的第几列触发。

    38.要习惯使用axios去获取数据(https://www.kancloud.cn/yunye/axios/234845)

    39.正则表达式 ?代表前面的字符只能匹配一次或零次。

    40.str.match(/reg/)得到一个数组,数组第一个值为结果,第二个值为子表达式,且它会按照最长匹配的字符串进行获取。

    41.前端图片压缩上传(纯js的质量压缩,非长宽压缩)(https://www.cnblogs.com/007sx/p/7583202.html)

    42.$("<img/>")为一个set的方法,是建立一个新的标签元素"img"并赋予相应标签相应的属性,如:$("<img/>").attr("src", src).load(function () {})

    43.ajax设置成同步时(async:false),浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。
    当我们执行异步ajax的时候没有问题,但当设置为同步请求时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。

    44.$("img").size()计算文档中所有图片的数量==$("img").length。

    45.$("img").selector返回传给jQuery()的原始选择器,此处为img。

    46.jquery ajax参数:traditional:true时,传值时可以传数组。

    47.ajax 与 xhrFields: { withCredentials: true }:
    xhrFields 大概的意思是,默认情况下,标准的跨域请求是不会发送cookie等用户认证凭据的。
    所以,当你再次访问远程api的时候,cookie是不会被带上的,于是乎,服务器理所当然地认为你还没有登录。
    用XMLHttpRequest请求的时候,我们需要设置属性 withCredentials=true ;

    48.document.getElementById().scrollIntoView();让制定id的元素出现在滚动层顶部。

    49.当涉及到滚动事件的时候,如果哪一个元素给了定高且有overflow:auto;则已这个元素为节点触发滚动事件,而不仅仅局限于屏幕滚动。
    如:$("#id").scroll(function(){});

    50.debugger;会中断程序运行,可以用来调试。

    51.trigger(event,[param]);触发某个元素的绑定事件。

    52.window是javascript的顶层对象,所有的全局变量都是它的属性。(V8,Rhino引擎除外)

    53.(0,eval)(“this”);//逗号表达式只解析逗号后面的,此表达式相当于eval(‘this’)

    因为在严格模式下,匿名函数中的this为undefined;
    为了防止在严格模式下window变量被赋予undefined,使用(0, eval)(‘this’)就可以把this重新指向顶层对象。

    54.JS添加事件和解绑事件:addEventListener()与removeEventListener()
    正确用法:function bodyScroll(event){
    event.preventDefault();
    }
    document.body.addEventListener('touchmove',bodyScroll,false);
    document.body.removeEventListener('touchmove',bodyScroll,false);//共用函数bodyScroll不能带参数

    55.取消事件:对象.事件模型 = null;

    56.window.history.pushState(null,null,url)无刷新页面改变页面路径,url为改变后的路径。
    (服务器端被搜索的内容放进<noscript></noscript>中,结合这个可以让搜索引擎抓取AJAX内容?
    http://www.ruanyifeng.com/blog/2013/07/how_to_make_search_engines_find_ajax_content.html)

    57.猜想:感觉能利用history.length来获取网页浏览历史物品详情页的数据。

    58.popstate事件

    每当同一个文档的浏览历史(即history对象)出现变化时,就会触发popstate事件

    59.require.js模块化开发:http://www.ruanyifeng.com/blog/2012/11/require_js.html(三部曲)

    60.es6数组的扩展方法
    includes()判断数组中是否包含;
    find()查找对应的值
    findIndex()

    61.var arr = [1,2,3];
    type of arr //obj
    Array.isArray(arr) //true判断是数组

    62.浅拷贝指的是新数组拷贝的是对象的引用,即原对象值改变,数组也变。

    63.indexOf()传两个参数的时候,第二个参数为搜索的开始位置。

    64.跨域通信:postMessage(message, targetOrigin);
    message :信息内容,低版本浏览器只支持字符串,高版本可以各种数据都行
    targetOrigin :目标窗口的源,可以是字符串*表示无限制,或URI,需要协议端口号和主机都匹配才会发送
    window.onload = function(){
    window.frames[0].postMessage("str","协议+域名+端口号【url可加可不加】")
    }
    接收postMessage发送的信息MessageEvent
    window.addEventListener("message", function(event){
    //var origin = event.origin || event.originalEvent.origin;
    if(event.source!=window.parent) return;//不是父窗口发的就不接收
    ....
    }, false);
    MessageEvent四个属性:
    1.message(类型)
    2.data(window.postMessage的第一个参数)
    3.origin(调用postMessage时页面的当前状态)
    4.source(调用postMessage的窗口信息)

    65.复选框全选赋值时用$('input[type=checkbox]').prop('checked',true);
    用attr时有些版本会只能执行一次,所以用prop
    如果你要去恢复或者改变DOM状态值,类似checked,selected,disabled等表单元素的状态,最好使用.prop()方法。

    66.在layui中,凡是动态加载的表单,表格数据都要重新render一下。

    67.监听文本框改变的一种方法:
    addEventListener('keyup', function (event) {
    obj.msg = event.target.value
    })

    68.在HTML body部分中的JavaScripts会在页面加载的时候被执行。
    在HTML head部分中的JavaScripts会在被调用的时候才执行。

    69.任何对象转为布尔值,都会得到 true(切记!在 JS 中,只有 0,-0,NaN,"",null,undefined 这六个值转布尔值时,结果为 false)。

    70.在查找 b.n 是首先查找 b 对象自身有没有 n 属性,如果没有会去原型(prototype)上查找

    71.DHTML 的动态样式的作用是使网页作者改变内容的外部特征而不强制用户再次下载全部内容

    72.es6:‘Promise 对象代表一个异步操作,有3种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已完成)’

    73.垃圾回收规则如下:
    1.全局变量不会被回收。
    2.局部变量会被回收,也就是函数一旦运行完以后,函数内部的东西都会被销毁。
    3.只要被另外一个作用域所引用就不会被回收

    74.undefined和null与任何有意义的值比较返回的都是false,但是null与undefined之间互相比较返回的是true。

    75.1+ +"2"
    +"2"中的加号是一元加操作符,+"2"会变成数值2,因此1+ +"2"相当于1+2=3.

    76.file文件对象是一个只读对象,想要改变需要定义全局变量遍历存储文件信息,并对此全局变量进行更改再操作。

    77.parseInt(num,10);按10进制去处理字符串,碰到非数字字符,会将后面的全部无视。

    78.parseInt("10000",2);将二进制数转化为十进制

    79.正则表达式1代表引用第一个分组,2引用第二个分组;分组就是()里的内容,一个()叫一个分组。
    判断一个字符串中有没有连续相同的两个字符:
    /([a-zA-Z])1/.test(str)
    假设aa;首先a属于a-z,1再引用一次a,为aa,符合条件,返回true;
    假设ab;首先a属于a-z,1再引用一次a,为aa,不符合条件,返回false。

    80.js将0开头的数默认为8进制的数

    81.正则表达式模式修饰符s的作用主要是能够匹配换行,在处理换行数据时,通常会用到。

    82.jQuery限制字符字数的方法(多行文本超出...)
    //限制字符个数
    $(".zxx_text_overflow").each(function(){
    var maxwidth=23;
    if($(this).text().length > maxwidth){
    $(this).text($(this).text().substring(0,maxwidth));
    $(this).html($(this).html()+'...');
    }
    });

    83.[u4e00-u9fa5]表示中文字符匹配

    84.this.replace(/^s*(.*?)s*$/, '$1');去掉前后空格,$1表示第一个括号里的值。

    85.前瞻:
    exp1(?=exp2) 查找exp2前面的exp1
    后顾:
    (?<=exp2)exp1 查找exp2后面的exp1
    负前瞻:
    exp1(?!exp2) 查找后面不是exp2的exp1
    负后顾:
    (?<!=exp2)exp1 查找前面不是exp2的exp1

    86.Array.prototype.flat()将数组按照指定深度扁平化。Array.prototype.flat(Infinity)无论多少层都扁平化。

    87.在华为手机中,运用qCode生成的二维码是通过canvas展示的,img标签被隐藏,而且img.src没有任何内容。

    88.数组的一些方法是否改变原数组及返回值

    改变原数组的:

    shift:将第一个元素删除并且返回删除元素,空即为undefined
    unshift:向数组开头添加元素,并返回新的长度
    pop:删除最后一个并返回删除的元素
    push:向数组末尾添加元素,并返回新的长度
    reverse:颠倒数组顺序
    sort:对数组排序
    splice:splice(start,length,item)删,增,替换数组元素,返回被删除数组,无删除则不返回


    不改变原数组的:

    concat:连接多个数组,返回新的数组
    join:将数组中所有元素以参数作为分隔符放入一个字符
    slice:slice(start,end),返回选定元素
    map,filter,some,every等不改变原数组

    89.为了解决网页卸载时,异步请求无法成功的问题,浏览器特别实现了一个 Beacon API,允许异步请求脱离当前主线程,放到浏览器进程里面发出,这样可以保证一定能发出。

    window.addEventListener('unload', function (event) {
    navigator.sendBeacon('/log', 'foo=bar');
    });
    上面代码中,navigator.sendBeacon()方法可以保证,异步请求一定会发出。第一个参数是请求的网址,第二个参数是发送的数据。
    注意,Beacon API 发出的是 POST 请求。

    90.所谓"反弹追踪",就是网页跳转时,先跳到一个或多个中间网址,以便收集信息,然后再跳转到原来的目标网址。

    // <a id="target" href="https://baidu.com">click</a>
    const theLink = document.getElementById('target');
    theLink.addEventListener('click', function (event) {
    event.preventDefault();
    window.location.href = '/jump?url=' +
    encodeURIComponent(theLink.getAttribute('href'));
    });
    上面代码中,用户点击的时候,会强制跳到一个中间网址,将信息携带过去,处理完毕以后,再跳到原始的目标网址。
    谷歌和百度现在都是这样做,点击搜索结果时,会反弹多次,才跳到目标网址。

    91.在小数调用toFixed()方法后,会转变为字符串。

    92.关于内存管理可了解垃圾回收机制。

    93.微任务包括 process.nextTick ,promise ,Object.observe ,MutationObserver

    宏任务包括 script , setTimeout ,setInterval ,setImmediate ,I/O ,UI rendering
    很多人有个误区,认为微任务快于宏任务,其实是错误的。因为宏任务中包括了 script ,浏览器会先执行一个宏任务,
    接下来有异步代码的话就先执行微任务。所以正确的一次 Event loop 顺序是这样的

    执行同步代码,这属于宏任务
    执行栈为空,查询是否有微任务需要执行
    执行所有微任务
    必要的话渲染 UI
    然后开始下一轮 Event loop,执行宏任务中的异步代码

    94.apply() 的参数为空时,默认调用全局对象

    95.返回数组对象中key与数组值相等的值

    var arr1=['a','b','c']
    var arr = [{'a':1,'b':2,'c':3},{'a':11,'b':22,'c':33}]
    arr.map(item => arr1.map(item1 => item[item1]))

    96.当用正则表达式test()的值为undefined,null时,感觉会将undefined和null当成字符串处理。

    97.promise自身是同步的,而promise.then是异步的,也就是说then之前的代码会直接执行,而then里的会等待。

    98.async await;await之前的代码会直接执行,之后的代码实际上就是一个promise.then里执行。

    99.每次遇到宏任务,会先进入执行队列,等待前一个宏任务执行完毕,再将所有微任务执行完毕,再回过头来执行宏任务队列,执行队列采用先进先出的原则。

    100..'字符不能用于在捕获正则表达式中捕获字符。例如,不能使用'/user-.+/'来捕获'users-gami',使用[\s\S][\w\W]代替(如'/user-[\s\S]+/'

    101.void就是接收一个参数的js函数,返回值始终是undefined,void 0返回就是undefined;

    102.js是一种解释性语言,即一边编译一边执行,所以会比较慢;不同于c++等,是编译性语言,需要全局编译通过。为了更快的解析和执行js,v8引擎应运而生。

    103.map遍历数组,当数组的值为值类型时,原数组不会改变;当数组的值为引用类型,值会改变。(建议还是用新变量去接收map循环后的值)。

    104.typeof 方法总是返回字符串。
    105.
    Array(..) 构造器有一个众所周知的陷阱,就是如果只传入一个参数,并且这个参数是数字的话,那么不会构造一个值为这个数字的单个元素的数组,而是构造一个空数组,其length 属性为这个数字,这个动作会产生不幸又诡异的“空槽”行为。
    可采用var arr = Array.of(number);解决。

  • 相关阅读:
    链表--判断一个链表是否为回文结构
    矩阵--“之”字形打印矩阵
    二叉树——平衡二叉树,二叉搜索树,完全二叉树
    链表--反转单向和双向链表
    codeforces 490C. Hacking Cypher 解题报告
    codeforces 490B.Queue 解题报告
    BestCoder19 1001.Alexandra and Prime Numbers(hdu 5108) 解题报告
    codeforces 488A. Giga Tower 解题报告
    codeforces 489C.Given Length and Sum of Digits... 解题报告
    codeforces 489B. BerSU Ball 解题报告
  • 原文地址:https://www.cnblogs.com/xinyouhunran/p/9999258.html
Copyright © 2011-2022 走看看