Javascript 基础知识的必会知识点

子曰：温故而知新，可以为师矣。 《论语》-- 孔子

JavaScript 是一种基于对象和事件驱动的客户端脚本语言，完整的 Javascript 是由 ECMAScript（语法）、Browser Objects（DOM、BOM）（特性组成的）。

一、变量声明与赋值

• ECMAScript 的变量是松散类型，可以用来保存任何类型的数据。每个变量仅仅是一个用于保存值的占位符而已。

<script>
    // 声明的同时赋值
    var age = 18;
</script>

二、数据类型

ECMAScript 中有 5 种简单的数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number 和 String。还有一种复杂数据类型：Object。

1. typeof

• 功能：检测变量类型。
• 语法：typeof 变量 或 typeof(变量)
• 返回值：返回类型是 String 类型，但是返回的值可能是 string，number，boolean，object，undefined，function。

 <script>
    var name = "marry",age = 10;
    console.log(typeof name); // string 字符串
    console.log(typeof age);// number
 </script>

2. undefined

• undefined 类型只有一个值，即特殊的 undefined。
• 一般而言，不存在需要显示地把一个变量设置为 undefined 值的情况。

 <script>
      var address;
      console.log(typeof address);//undefined
 </script>

3. null

• null 值表示一个空对象指针。
• 如果定义的变量准备在将来用于保存对象，那么最好将改变量初始化为 null
  而不是其他值。
• undefined 值是派生自 null 值的，所以 undefined == null 的返回结果是 true。

 <script>
    var settings = null;
 </script>

4. Number

• 表示整数和浮点数。
• NaN：即非数值（Not a Number）是一个特殊的数值。
• 任何涉及 NaN 的操作（例如 NaN/10）都会返回 NaN。
• NaN 与任何值都不相等，包括 NaN 本身。
• isNaN(n)：检测 n 是否是 “非数值”。返回值：boolean。 isNaN() 对接收到的数值，先尝试转换为数值，再检测是否为非数值。

 <script>
    var age = 10;
    console.log(age-"abc");//NaN
    console.log(isNaN(age)); // true
    
    var id="16";
    console.log(isNaN(id));// false
 </script>

5. 数值转换

• 有三个函数可以把非数值转换为数值：Number()、parseInt()、parseFloat()。
• Number() 可以用于任何数据类型。
• parseInt() 和 parseFloat() 则专门用于把字符串转换成数值。
• parseInt()：会忽略字符串前面的空格，知道找到第一个非空个字符。转换空字符串返回 NaN。这个函数提供的第二个参数，转换时使用的基数（即多少进制）。
• parseFloat()：从第一个字符开始解析每个字符，直至遇见一个无效的浮点数字符为止。
• 除了第一个小数点有效外，parseFloat() 与 parseInt() 的第二个区别在于它始终会忽略前导0

<script>
    console.log(typeof id);// string
    id = Number(id);
    console.log(typeof id);// number

    var name_01 = "abc";
    name_01 = Number(name_01);
    console.log(name_01); // NaN

    var topValue = parseInt("28px")
    console.log(topValue);//28

    var abc="abc58"
    console.log(parseInt(abc))//NaN

    var abc="abc58"
    console.log(parseInt(abc))//NaN

    console.log(parseInt("Oxf",16))//NaN

    var d = parseFloat("12.34px")
    console.log(d)//12.34
    var e = parseInt("0123")
    console.log(e)//123
    
</script>

6. String

• String 类型用于表示由零或多个16位Unicode字符组成的字符序列，即字符串。字符串可以由双引号或者单引号表示。

<script>

    var msg = 'hello world'

    //在不知道要转换的值是不是null或者undefined的情况下，
    //还可以使用String()函数，它可以将任何类型的值转换为字符串

    var idstr = "79899"
    console.log(idstr.toString())//79899
    console.log(typeof idstr)// string
    console.log(String(idstr))//79899

    var m;
    console.log(String(m))
</script>

7. Boolean

• 用于表示真假的类型，即 true 表示真，false 表示假。
• 除 0 之外的所有数字，转换为布尔型都为 true，除 " " 之外的所有字符，转换为布尔型都为 true。
• null 和 undefined 转换为布尔型为 false。

<script>
    var  isStudent = true;
    var  isChile = false;
    console.log(typeof  isStudent);// boolean
    console.log(isStudent.toString()) // true

    var x = 1;
    var y =0;
    console.log(Boolean(x));//true
    console.log(Boolean(y));//false

    var strings = "welcome"
    console.log(Boolean(strings));

    var z;
    console.log(Boolean(z));//false
    var timer = null;
    console.log(Boolean(timer));//false
</script>

三、表达式与操作符

• 将不同类型的数据（如常量、变量、函数等），用运算符号按一定的规则连接起来的、有意义的式子称为表达式。

1. 算数操作符

<script>
    var num1 = 10;
    var num2 = "c";
    var num3 = "5";
    console.log(num1+num2); //10c
    console.log(num1-num2);//NaN
    console.log(num1-num3);//5 隐式类型转换，自动把字符串转换成字符串

    var num4 = 10;
    console.log(num4++);//10
    console.log(num4);//11
    console.log(++num4);//12
    console.log(num4);//12

    var num5 = 10;
    console.log(num5--);//10
    console.log(num5);//9
    console.log(--num5);//8
    console.log(num5);//8

</script>

2. 赋值操作符

<script>
   var a = 10;
   console.log(a+=5);//15
   console.log(a%=4);//3

   var string = "hello";
   console.log(string +=" world");// hello world

</script>

3. 比较操作符

<script>
 // == :相等，只比较值是否相等
    // ===:全等，比较值的同时比较数据类型是否相等
    // !=:不相等，比较值是否不相等
    // !==:不全等，比较值的同时比较数据类型是否不相等
    // 以上返回值都是 boolean 类型
    var x = 10;
    var y = "10";
    var z = x==y;
    var m = x===y;
    var n = x!=y;
    var q = x!==y;
    console.log(z); // true
    console.log(m); // false
    console.log(n); // false
    console.log(q);// true

    console.log(null==undefined); // true
    console.log(null===undefined);// false
    
</script>

4. 三元操作符

    var soce = 85;
    var result = (soce>=60)?"及格":"不及格"
    console.log(result)

5. 逻辑与或非

• 与操作 &&。 只要有一个条件不成立，返回false。在有一个操作数不是布尔值的情况，逻辑与操作就不一定返回值，此时它遵循下列规则：
  • 如果第一操作数隐式类型转换后为 true，则返回第二个操作数。
  • 如果第一个操作数隐式类型转换后为 false，那么返回第一个操作数。
  • 如果有一个操作数是 null，则返回 null。如果有一个操作数是 NaN，则返回 NaN。如果有一个操作数是 undefined，则返回 undefined。
• 或操作 ||。只要有一个条件成立，返回true。说明：
  在有一个操作数不是布尔值的情况，逻辑或操作就不一定返回布尔值，此时它遵循下列规则：
  • 如果第一个操作数隐式类型转换后为 true，则返回第一个操作数。如果第一个操作数隐式类型转换后为 false，则返回第二个操作数。
  • 如果两个操作数是null，则返回null。如果两个操作数是NaN，则返回NaN。如果两个操作数是undefined，则返回undefined。
• 非操作 ！。无论操作数是什么数据类型，逻辑非都会返回一个布尔值。 !! 同时使用两个逻辑非操作符时：第一个逻辑非会基于无论什么操作数返回一个布尔值，第二个逻辑非则对该布尔值求反。

<script>
    
    // 逻辑与
    var num1 = 10,num2 = 20,num3 = 30,str = "welcome",
         bool = true,n = null,m;
    console.log(num1<num2 && num2<num3); // true
    console.log(num1<num2 && num2==num3);// false  所有条件都为true，返回true
    console.log(num2<num3 && num3 > num1 && false);// false

    console.log(str && num3);// 30
    console.log(80 && 55);//55
    console.log("hello" && 65 && "abc");// abc
    console.log(0 && 88);//0
    console.log("" && 0 && 30>20);// ""
    console.log(n && num3);//null
    console.log(55 && true && 33*"abc" && 55);//NaN
    console.log(m && true);// undefined

       // 逻辑或
    console.log(55 > 88 || 33 < 66); //true
    console.log(55 != "55" || 88=="88");// true

    console.log("hello" || 0); // hello
    console.log(99 || 0 || "abc");//99
    console.log("" || 88 || true);//88
    console.log("" || 0 || "abc");//abc
    console.log("" || 0 || null);//null
    console.log(30*"abc" || 55-"def");//NaN


    // 非
    console.log(!false);// true
    console.log(!88);//false
    console.log(!0);//true
    console.log(!"red");//false
    console.log(!NaN);//true
    console.log(!null);//true

    console.log(!!"");//false
    console.log(!!"blue");//true
    
</script>

四、分支语句

1. if 语句

<script>
   var password = prompt("请设置您的密码");
   //判断密码长度，如果不是6位，否则
   if(password.length!=6){
     alert("请输入6位的数字密码")
   }else {
       // 如果密码是非数字，否则是数字
       if(isNaN(password)){
          alert("密码必须要是数字")
       }else  {
          alert("密码设置正确")
       }
   }
</script>

2. switch 语句

<script>
    var week = new Date().getDay();
    console.log(week);//星期五
    var weekstr = "";
    // 多条件的判断 switch
    switch (week) {
        case 0:
            weekstr = "日";
            break;
        case 1:
            weekstr = "一";
            break;
        case 2:
            weekstr = "二";
            break;
        case 3:
            weekstr = "三";
            break;
        case 4:
            weekstr = "四";
            break;
        case 5:
            weekstr = "五";
            break;
        default:
            weekstr = "六";
            break;
    }
    document.write("今天是星期"+weekstr);
</script>

3. 循环语句

<script>
     //循环的初始值  // 循环条件  变量的变化
     for(var i=1;i<=100;i++){
         document.write(i+"<br />");
     }

     //循环输出 99 97 95 ... 3 1
    for(var m=99;m>=1;m-=2){
       console.log(m);
    }

    for (var i=1;i<10;i++){
        // 如果i是5的倍数，退出
        if(i%5==0){
            continue; // 退出本次循环，继续执行下次循环
            //break; // 结束当前循环
        }
        console.log(i);
    }
</script>

五、函数

<script>
    // 声明一个函数
    function myFun() {
      alert("我是一个函数")
    }
    // 调用函数
    myFun();

    // 声明一个带有参数的函数
    function add(num1,num2) {
        alert(num1+'和'+num2+'的和是'+(num1+num2));
        return num1+num2;
    }
    var sum = add(1,3);
    console.log(sum);
    document.write(sum);

    //ECMAScript中的参数在内部用一个数组来表示
    //在函数体内通过arguments对象来访问这个数组参数
    //1. arguments对象只是与数组类似，并不是Array的实例。
    //2. []语法访问它的每一个元素。
    //3. length属性确定传递参数的个数。


     function inner(num1,num2) {
       console.log(arguments.length);//2
       console.log(arguments[0]);//10
       console.log(arguments[2]);//undefined
       arguments[0] = 1;
       console.log(arguments[0]);//1
     }
     inner(10,5);


</script>

六、数组

<script>
 var colors = new Array(3);
 colors[0] = "#f00";
 colors[1] = "#f0f";
 colors[2] = "#123";
 console.log(colors);
 var nums = new Array(1,3,6,9);
 console.log(nums);
 var cols = ["red","yellow","green"];
 console.log(cols);
 var infos = [6,"marry",true,{email:"kk@163.com"}];
 console.log(infos);
 console.log(cols[1]);//读取数组中索引为1的值

  var arr = ["a","b","c"];
  console.log(arr.length);
  arr.length = 3;
  console.log(arr);

  arr[99] = "z";
  console.log(arr.length);//100

    //数组的遍历
  for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
  }

  //push:把它的参数顺序添加到arrayObject的尾部。
  //返回值：把指定的值添加到数组后的新长度。
  var colors = new Array("red","green");
  colors.push("blue");
  console.log(colors);

  var nums = [2,7,8,6];
  var size = nums.unshift(99,66);
  console.log(size);//6

   //pop():删除arrayObject的最后一个元素，
   //返回值：被删除的那个元素
    var n = nums.pop();
    console.log(n);

    //join():用于把数组中的所有元素放入一个字符串
    var nums = [2,4,5];
    var str = console.log(nums.join()); //2,4,5
    console.log(typeof str);

    var words = ["border","left","color"];
    //border-left-color
    var wordstr = words.join();
    console.log(wordstr);
    var wordstr1 = words.join("-");
    console.log(wordstr1);

    //reverse:倒序
    nums.reverse();
    console.log(nums);
    var newStr = ["a","b","c","d"];
    //返回dcba这个字符串
    console.log(newStr.reverse().join())

    var arr = [29,5,24,17,32];
    arr.sort(function (x,y) {
       return b-a;//降序
        // return a-b; 升序
    })
    console.log(arr); //排序

    var arr1 = ["a","b","c"],arr2 = ["d","3",1,3]
    arr3;
    //contact:用于连接两个或多个数组。返回值：数组
    arr3 = arr1.concat(arr2,["m",99,8])

    //slice():从已有的数组中返回选定的元素
    //start:规定从何处开始选取，如果是负数，从数组尾部开始算起
    //end:固定从何处技术选取，是数组片段结束处的数组下标
    //如没指定end，切分的数组包含从start到数组结束的所有元素。
    //如slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。
    //返回值：数组。
    var colors = ["red","green","blue","yellow","orange"];
    var newColors = colors.slice(1);
    console.log(newColors);

    // splice(index,count):删除从 index处开始的0个或多个元素。返回值：含有被删除的元素的数组。
    // count是要删除的项目数量，如果设置为0，则不会删除项目，如果不设置，则删除从index开始的所有值。
    var arr = ["a","b","c","d","e","f"];
    var delArr = arr.splice(2,2);
    console.log(arr);
    console.log(delArr);
    //splice(index,0,item1,...,itemX)
    //在指定位置插入值
    //参数index为起始位置。0：要删除的项数 item1...itemX:要插入的项
    var insertArr = arr.splice(2,0,"m","n");
    console.log(insertArr);
   
    //splice(index,count,item1,...,itemX)
    //在指定位置插入值，且同时删除任意数量的项
    //参数：Index：起始位置  count：要删除的项数 item1..itemX:要插入的项 返回值：从原始数组中删除的项(如果没有删除任何项，则返回空数组)
    var replaceArr = arr.splice(1,2,"x","y","z");
    console.log(replaceArr);
    
    //indexOf(searchValue,startIndex)
    //从数组的开头(位置0)开始向后查找。
    //参数：searchValue：必需，要查找的项 startIndexOf(可选)起点位置的索引
    //返回值：number，查找的项在数组中的位置，没有找到的情况下返回-1。
    var nums = [1,2,3,4,1,3];
    var pos = nums.indexOf(3);
    console.log(pos);
    var pos1 = nums.lastIndexOf(1);//从末尾查找
    console.log(pos1);
    
</script>

七、String

<script>
    var str = "hello world"
    console.log(str[0]);//h
    console.log(str.charAt(0))//h
    console.log(str.charCodeAt(0));//104 字符编码

    console.log(str.indexOf(0));// -1 没出现过
    console.log(str.indexOf("e"));//1
    console.log(str.lastIndexOf("l"));//8

    console.log(str.slice(1,2));//e
    console.log(str.slice(-3));//rld 9+(-3)=6
    console.log(str.substr(2));// ll world
    console.log(str.substr(-3,3));//rld
    console.log(str.substr(0,2));//he

    var str1 = "welcome-to-beijing";
    console.log(str1.split("-"));//["welcome", "to", "beijing"]

    // 替换
    var tel = '010-629890,400-293094';
    console.log(tel.replace(','," "));
  
    var str = "hello world";
    console.log(str.toUpperCase());//HELLO WORLD
    console.log(str.charAt(6).toUpperCase());//W
    var str2 = "WELCOME";
    console.log(str2.toLowerCase());//welcome

</script>

八、Math

<script>
    var min = Math.min(5,-4,0,9,108,-55);
    var max = Math.max(5,-4,0,9,108,-55);
    console.log(min);
    console.log(max);

    var num= 189.99;
    console.log(Math.ceil(num));//190 向上取整
    console.log(Math.floor(num));//189 取整
    console.log(Math.round(num));//190 四舍五入
    console.log(Math.abs(num));// 189.99 绝对值
    console.log(Math.random());//0到1之间的随机数

    // 求n到m之间的随机整数的公式
    var random = Math.floor(Math.random()*(m-n+1)+n);
</script>

九、Date

<script>
    // 创建一个日期时间对象
    var weeks = ["日","一","二","三","四","五","六"],
    today = new Date(),
    year = today.getFullYear(),
        month = today.getMonth(),
        date = today.getDate(),
        week = today.getDay(),
        hours = today.getHours(),
        minutes = today.getMinutes(),
        seconds = today.getSeconds(),
        times = today.getTime();
    time = year+'年'+month+'月'+date+'日'+hours+'时'
    +minutes+'分'+seconds+'秒 星期'+weeks[week];
    console.log("现在是："+time);
    console.log(times);

    var today = new Date();
    today.setFullYear(2017);
    console.log(today.getFullYear());

    var year = today.getFullYear();
    var month = today.getMonth();
    var day = today.getDate();
    // 创建了一个目标日期对象
    var temp = new Date(year,month,day+50);

</script>

十、错误处理

<script>
   try {
       //如果内部的代码抛出错误，
       //则代码直接跳入catch块运行，
       //且把错误对象赋值给catch括号内的变量
       var x = null;
       console.log(x.foo);
   }catch (e) {
       console.log(e);
   }finally {
       //做一些清理工作
       //finally块是一定会执行的
   }
</script>

写在文末

纸上得来终觉浅，绝知此事要躬行。 《冬夜读书示子聿》-- 陆游

码字不易，如果本篇文章对您哪怕有一点点帮助，请不要吝啬您的点赞，我将持续带来更多优质文章。