• js小知识点


    1、setTimeout(function(num){

      alert(num);},1000,123);

    第三个参数为实参。

    2、拼接字符串:

      document.body.innerHTML = '<div>div</div>'+

              '<span>span</span>'+

              '<p>p</p>'

      换行的另一种做法:

      

     document.body.innerHTML = '<div>div</div>

             '<span>span</span>

              <p>p</p>'

      加上反斜杠

    3、console.log()添加样式

      eg:

      var a = 'hello';

      console.log('%c'+a,'font-size:40px;background:blue;')

    4、双层for 循环跳出:

      a : for(var i=0;i<5;i++){

        for(var j=0;j<1;j++){

          if(i==3){

            break a;

            }

          alert(i);}

        }

      即可跳出第一层循环。

    5、for循环省略参数

      var i = 0;

      for(;;){

      alert(i);

      if(++i>=5){

      break;

        }

      }

    6、立即执行函数写法

      除了写成(function(){})()这种样式

      还可以写成~function(){}()

      或者写成   !function(){}()

     7、document.querySelectorAll('div')

      document.querySelector('div')

      

      两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法。

      element = document.querySelector('selectors');
      elementList = document.querySelectorAll('selectors');

      其中参数selectors 可以包含多个CSS选择器,用逗号隔开。

      element = document.querySelector('selector1,selector2,...');
      elementList = document.querySelectorAll('selector1,selector2,...');

      使用这两个方法无法查找带伪类状态的元素,比如querySelector(':hover')不会得到预期结果。

      querySelector

      该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素。

      element = document.querySelector('div#container');//返回id为container的首个div
      element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素

      querySelectorAll

      该方法返回所有满足条件的元素,结果是个nodeList集合。查找规则与前面所述一样。

      elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div
    8、array两个方法
      
    array.forEach(function(currentValue, index, arr), thisValue)

      function(currentValue,index,arr)---->必须参数,数组中每个元素调用的函数。
      currentValue 必需。当前元素
      index 可选。当前元素的索引值。
      arr 可选。当前元素所属的数组对象。
      thisValue 可选。传递给函数的值一般用 "this" 值。如果这个参数为空,“undefined”会传递给"this"值

       Array.from方法可以将 Set 结构转为数组。

      const items = new Set([1, 2, 3, 4, 5]);
      const array = Array.from(items);
     
     

    -------------------------------------------------------------

    ES6的set

    <!DOCTYPE html>

    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <script>
    const s = new Set();
    [2,3,5,4,5,2,2].forEach(x => s.add(x));
    for(let i of s){
    console.log('%c'+i,'font-size:400%;background:blue');
    }
    //set结构不会添加重复的值
    // 例一
    const set = new Set([1, 2, 3, 4, 4]);
    alert([...set]);
    // [1, 2, 3, 4]

    // 例二
    const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
    alert(items.size) // 5

    // 例三
    // function divs () {
    // return [...document.querySelectorAll('div')];
    // }
    //document.querySelectorAll('div')选取所有的div元素

    // const set = new Set(divs());
    // set.size // 56

    // 类似于
    // divs().forEach(div => set.add(div));
    // set.size // 56

    //数组去重 [...new Set(array)]
    //向 Set 加入值的时候,不会发生类型转换,所以5和"5"是两个不同的值。Set 内部判断两个值是否不同,使用的算法叫做“Same-value equality”,它类似于精确相等运算符(===),主要的区别是NaN等于自身,而精确相等运算符认为NaN不等于自身。

    console.log(NaN===NaN); //false

    // 两个对象总是不相等的。

    // let set = new Set();

    // set.add({});
    // set.size // 1

    // set.add({});
    // set.size // 2
    // 上面代码表示,由于两个空对象不相等,所以它们被视为两个值。

    // Set 实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。

    // add(value):添加某个值,返回 Set 结构本身。
    // delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
    // has(value):返回一个布尔值,表示该值是否为Set的成员。
    // clear():清除所有成员,没有返回值。
    </script>
    </body>
    </html>

  • 相关阅读:
    eclipse-source not found
    eclipse-[org.apache.hadoop.util.Shell]
    Oracle—字段多行合并(LISTAGG)
    Selenium IDE 命令使用——断言
    Selenium IDE录制脚本——Chrome浏览器使用介绍
    Selenium家族谱(三生三世)
    python自动化测试之多线程生成BeautifulReport测试报告
    Python接口自动化之ExtentHTMLTestRunner测试报告
    [Java] Tomcat
    [刷题] 1002 写出这个数 (20分)
  • 原文地址:https://www.cnblogs.com/qdcnbj/p/8298854.html
Copyright © 2020-2023  润新知