zoukankan      html  css  js  c++  java
  • JS入门

    1,undefined,NaN,Null,infinity

    1) undefined 是undefined 类型

    var a; //声明变量后不赋值

    typeof 类型判断方法

    console.log(typeof(a))  //undefined

    2) NaN 是 number 型 表示不是一个数字

    var a=123;

    var b="abc";

    a-b 得到NaN

    console.log(typeof(a-b)) number

    3) Null 面向对象的概念 表示该对象为空

    4)infinity 是number 类型 表示无穷大 除数为0可得

    2,js精度问题

    js在运算时会存在精度问题:

    1)可以先乘以100 1000 ....先化成整数在100 1000
    2)number.toFixed(参数) 设置保留小数位数 1.528.toFixed(2) =1.53

    3,Math 对象常用几个函数

    1)天花板函数 ceil Math.ceil(1.23)=2 向上返回最小的整数
    2)地板函数 floor Math.floor(1.23)=1 向下返回最小的整数
    3)随机数
    Math.random() 返回0-1 的随机数
    Math.floor(Math.random()*10) 返回0-9 的随机数
    4) Math.max() Math.min() 返回最大最小的值
    5)Math.abs(x)返回一个绝对值
    6)Math.round(x) 四舍五入

    4,数据类型转换

    1)隐式转换 变量在运算过程中发生的类型转换
    !! console.log(!!"abc")
    2)显示(强制)转换:
    转字符串:a,(String)变量 b,变量.toString()
    转数字型:a,Number(变量) b,parseInt(变量) c,parseFloat(变量)
    转布尔型:Boolean(变量)
    几种转换为false的 undefined NaN Null 0 false ""

    5,逻辑运算符的短路操作:当操作数不是bool值时

    1)隐式转换
    2)从左往右
    3) 哪个操作数可以决定结果,就返回这个原操作数
    "100"&&0;//true&&false

    6,数组检测方式

    var arr=[]
    1)Array.isArray(arr) 有兼容性问题
    2)arr instanceof Array 推荐使用
    3) Object.prototype.toString.Call(arr) 可检测任意类型

    7,函数的arguments 和 es6 rest 用法

    1)arguments只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数 类似数组
    2)rest参数只能写在最后,前面用...标识
    function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
    }

    foo(1, 2, 3, 4, 5);
    // 结果:
    // a = 1
    // b = 2
    // Array [ 3, 4, 5 ]

    8,函数变量提升:

    先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部
    'use strict';
    function foo() {
    var x = 'Hello, ' + y;
    alert(x);
    var y = 'Bob';
    }
    foo();
    虽然是strict模式,但语句var x = 'Hello, ' + y;并不报错,原因是变量y在稍后申明了。
    但是alert显示Hello, undefined,说明变量y的值为undefined。
    这正是因为JavaScript引擎自动提升了变量y的声明,但不会提升变量y的赋值。

    ............................................................................................
    变量提升后代码:
    function foo() {
    var y; // 提升变量y的申明
    var x = 'Hello, ' + y;
    alert(x);
    y = 'Bob';

    注意:函数内变量的怪异声明模式
    function fun(){
    num=10 //没写var 就相当于全局变量
    }
    fun()
    console.log(num) //10

    9,this 指向问题

    复制代码
     1 'use strict';
     2     var obj={
     3         name:"test",
     4         printName:function(){
     5             console.log(this.name)
     6         }
     7     }
     8     obj.printName(); //显示 test  this 指的就是obj
     9 
    10     var obj={
    11             name:"test",
    12             printName:function(){
    13                 function showName (){
    14                     console.log(this.name)
    15                 } 
    16                 return showName()
    17             }
    18         }
    19     obj.printName(); //this 指向 undefined (在非严格模式下指向Windows)
    20 
    21      解决方法: var obj={
    22             name:"test",
    23             printName:function(){
    24                 var self=this //在函数外捕获this
    25                 function showName (){
    26                     console.log(self.name)
    27                 } 
    28                 return showName()
    29             }
    30         }
    复制代码

    10,sort 排序的坑

    1)Array的sort()方法默认把所有元素先转换为String再排序,如果直接排序数字你就踩坑了
    2)默认根据ASCII码进行排序
    3)sort 是一个高阶函数,sort(function(){
    //写具体的实现逻辑
    })
    // 升序
    sort(function(a,b){
    return a-b
    })
    //降序
    sort(function(a,b){
    return b-a
    })

    11,获取样式

    getComputedStyle(el,null).width ie 不支持
    document.getElementById("btn").currentStyle.width ie提供的
      function getStyle(tag, attr) {  return tag.currentStyle ? tag.currentStyle[attr] : getComputedStyle(tag,null)[attr];  } 

    12,拼接字符串的问题

    在ie7以下存在性能问题,可用数组替换
    ie7以上不存在该问题

    13,数组的几个方法

    1)arr.slice(start,end) 拷贝数组中的一段数据,返回拷贝的数组
    2)splice(start,length) 返回截取数组的部分元素,修改原数组
    splice 的参数超过2个会将剩下的参数添加到被截取的数组位置上
    arr.splice(1,2,"a","b")

    14,清空数组:

    1)arr.length=0
    2)arr=[] //推荐使用
    3)arr.splice(0,arr.length)


    15,避免事件被覆盖的方法(ie9 以下不支持)

    标签.addEventListener(enventType,fn,flase) false默认冒泡 true 捕获
    function fun(){
    alert("你好")
    }
    eg:btn.addEventListener("click",fun)
    移除事件监听(参数必须一致)
    btn.removeEventListener("click",fun)


    ie-6-10(enventType 加on)
    标签.attachEvent(enventType,fn)
    标签.detachEvent(enventType,fn)

    16,事件冒泡,和事件捕获

    事件冒泡:从里向外执行,遇到相同的事件及执行
    事件捕获:执行顺序与冒泡相反(不推荐使用,因为ie使用attachEvent 没有第三个参数)

    阻止事件冒泡
    e.stopPropagation()
    ie 中阻止事件传播 cancelBubble=true

    17,事件的对象作用:记录当前事件触发时的一些信息

    btn.onclick=function(event){} 
    event.target真正触发事件的元素
    event.type="click"
    event.clinetX/clinetY 
    ie 低版本不兼容
    var tar=e.target||e.srcElement

    18,Json 串的2方法

    1)object-->string  JSON.stringify()
    2)  string--> obj  JSON.parse()

  • 相关阅读:
    idea + springboot 的java后台服务器通过小米推送
    python编程之禅
    温故而知新-MySQL高级编程
    温故而知新-mysql的一些语法show,describe,explain,fulltext
    温故而知新-PHP文件操作函数
    温故而知新-正则单词和strlen
    php使用tcpdf实现在线PDF功能
    温故而知新-array_walk和sizeof和array_count_values()和extract()
    温故而知新-strtok函数
    mysql中的blob和text区别
  • 原文地址:https://www.cnblogs.com/jc535201285/p/6258823.html
Copyright © 2011-2022 走看看