• Web ----- JavaScript 一 语言基础(一)


    一.JavaScript概述

    一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:

    • 核心(ECMAScript) 
    • 文档对象模型(DOM) Document object model (整合js,css,html)
    • 浏览器对象模型(BOM) Broswer object model(整合js和浏览器)

    简单地说,ECMAScript 描述了JavaScript语言本身的相关内容。

    JavaScript 是脚本语言
    JavaScript 是一种轻量级的编程语言。

    JavaScript 是可插入 HTML 页面的编程代码。

    JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

    JavaScript 很容易学习。

    二.JavaScript的引入方式

      Script标签内写代码

    <script>
      // 在这里写你的JS代码
    </script>

      引入额外的JS文件

    <script src="myscript.js"></script>

    三 .JavaScript语言规范

      注释

    // 这是单行注释
    
    /*
    这是
    多行注释
    */

      结束符

    JavaScript中的语句要以分号(;)为结束符。

    四.JavaScript语言基础

      1.var 声明变量 : 

        命名规则:不能以数字开头,可以用下划线,$,数字,字母

      变量名区分大小写

    var age = 18 ;
    var sex = "男" ;

        const 声明常量.一旦声明,值不可变

    const PI = 3.1415 ;
    
    PI   // 3.1415
    
    PI = 3  //  报错 TypeError: "PI" is read-only

    五.JavaScript数据类型

      1.数字(Number)   

        JavaScript不区分整型和浮点型,就只有一种数字类型。

    var a = 3.14 ;
    var b = 3 ;
    var c = 3e2 ;  // 300
    var d = 3e-2 ;  // 0.03
    // 还有一种NaN,表示不是一个数字(Not a Number

      常用方法 :

      

    // 字符串类型转 Number类型
    
    parseInt('123') ; // 返回123
    parseInt("abc") ; // 返回NaN  ,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
    parseInt('1.11') ; // 返回1.11

      2.字符串(String)

    var s1 = 'hello' ;
    var s2 = 'world' ;
    var s = s1+s2 ;
    console.log(s)

      常用方法:

        

    var s1 = 'hello' ;
    var s2 = 'world';
    var s = s1+s2 ;
    console.log(s.length)

        .trim()   移除空白

         .trimLeft()  移除左边的空白

        .trimRight()  移除右边的空白

    var a = ' Hello World ';
    console.log(a.trim()) ;  //去除左右两边,不去中间
    console.log(a.trimLeft()) ; //去除左边
    console.log(a.trimRight()) ;  //去除右边

        .charAt(n)  返回第N个字符

     var a = ' Hello World ';
     console.log(a.charAt(3));  

        .indexOf(substring, start)   子序列位置

    var a = ' Hello World ';
    console.log(a.indexOf('ll'));   //查看某个字符或字符组在字符串中出现的位置(索引)

        .substring(from, to)  根据索引获取子序列  

    var a = ' Hello World ';
    console.log(a.substring(5,6))
    console.log(a.substring(5,3))  
    // 字符串中索引为五的元素,n,m开始到结束位置,顾头不顾尾 console.log(a.substring(5)) // 索引5开始,一直到最后 console.log(a.substring(5,8)) // 索引5-8

        .slice(start, end)  切片.此方法比上面的.substring()更好用

          可以负数倒着取,substring不可以

    var a = ' Hello World ';
    console.log(a.slice(3,-1));
    console.log(a.slice(-5,-1));
    两者的相同点:
    如果start等于end,返回空字符串
    如果stop参数省略,则取到字符串末
    如果某个参数超过string的长度,这个参数会被替换为string的长度
    
    substirng()的特点:
    如果 start > stop ,start和stop将被交换
    如果参数是负数或者不是数字,将会被0替换
    
    silce()的特点:
    如果 start > stop 不会交换两者
    如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
    如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
    string.slice(start, stop)和string.substring(start, stop)

        .toLowerCase()  小写

        .toUpperCase()   大写

    var a = ' Hello World ';
    console.log(a.toLowerCase());
    console.log(a.toUpperCase());

        .split()   切割,得到列表

     var a = ' Hello World ';
     console.log(a.split(' '));

      

    //像python的格式化输出
    
    var name = "q1mi", time = "today";
    `Hello ${name}, how are you ${time}?`
    补充

      

      3.Boolean(布尔值)

        区别于Python,true和false都是小写。

        ""(空字符串)、0、null、undefined、NaN都是false。

    var a = true;
    var b = false;

      

      4. null 和 undefined

        null :表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;

        undefined : 声明未定义

    var x;  // 此时x是undefined

      null表示变量的值是空,undefined则表示只声明了变量,但还没有赋值。

     

      5.对象(Object)

      JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许

        自定义对象。

      JavaScript 提供多个内建对象,比如 String、Date、Array 等等。

      对象只是带有属性和方法的特殊数据类型。

      数组 : 使用单独的变量名来存储一系列的值。类似于Python中的列表。

    var a = [123, "ABC"];
    console.log(a[1]);  // 输出"ABC"

      常用方法:

        .length       数组大小(长度)

        .slice(start, end)   切片

        .push(ele)     尾部追加元素

    var lst = [11,'abc',22,'33',55];
    lst.push(66);
    console.log(lst);

        .pop()            获取尾部元素

    var lst = [11,'abc',22,'33',55];     
    console.log(lst.pop());

        .unshift(ele)       头部插入元素

        .shift()        头部移除元素

    var lst = [11,'abc',22,'33',55];
    lst.unshift(0);
    console.log(lst);
    lst.shift();
    console.log(lst);

        .reverse()     反转

    var lst = [11,'abc',22,'33',55];
    lst.reverse();
    console.log(lst);

        .join(seq)        将数组元素连接成字符串

        .concat(val, ...)     连接数组   把元素追加到后面

    var lst = [11,'abc',22,'33',55];
    console.log(lst.join("__"))

    console.log(lst.concat('__',"aaa"));

        .sort()              排序

    var num = [55,22,44,88,2,3];
    console.log(num.sort());  //结果 [2, 22, 3, 44, 55, 88]
    var s = ['e','w','a','p','l'];
    console.log(s.sort());
    // 按unicode编码顺序排位
     /*关于sort()需要注意:
    如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。
    如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
    若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
    若 a 等于 b,则返回 0。
    若 a 大于 b,则返回一个大于 0 的值*/
    
    
    function sortNumber(a,b){
        return a - b
    }
    var arr1 = [11, 100, 22, 55, 33, 44]
    arr1.sort(sortNumber)
    注意

        .splice()      删除元素,并向数组添加新元素.

        splice(index,howmany,item1,.....,itemX)

        index (必须):从什么位置开始删  howmany(必须):删除多少 items(可选):要添加的元素

    // 从哪里开始删除就从哪开始添加
    var
    lst = [11,'abc',22,'33',55]; lst.splice(1,2,'ABC',22222,33333); console.log(lst) // 结果:[11, "ABC", 22222, 33333, "33", 55]

        .map()        返回一个数组元素调用函数处理后的值的新数组

        .forEach()                 将数组的每个元素传递给回调函数

        forEach(function(currentValue, index, arr), thisValue)

        map(function(currentValue,index,arr), thisValue)

        function(必须) :函数,数组中每个元素都会执行这个函数

          currentValue (必须):当前元素的值

          index (可选):当前索引          arr(可选) : 当前元素属于的数组对象

        thisValue (可选): 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
        如果省略了 thisValue ,"this" 的值为 "undefined"

        

      

     var lst = [11,'abc',22,'33',55];
     console.log( lst);
     console.log(typeof"abc") ; // "string"
     console.log(typeof null) ; // "object"
     console.log(typeof true) ;  // "boolean"
     console.log(typeof 123) ; // "number"

    typeof是一个一元运算符(就像++,--,!,- 等一元运算符),不是一个函数,也不是一个语句。

    六.运算符

      1.算数运算符

    + - * / % ++ --

      2.比较运算符

    > ,  >=  ,  <   ,  <=  ,
    !=   ,==   ,  ===   ,   !==

    1 == “1” // true
    1 === "1" // false //判断类型和值是否都相等

      3.逻辑运算符

    && || !
    1&&0   // 0
    1 || 0  // 1
    ! 0  // true
    ! 1  // false

      4.赋值运算符

    = += -= *= /=

    七.流程控制

    1. if   else

    var a = 10;
    if (a > 5){
      console.log("yes");
    }
    else {
      console.log("no");
    }

    2. if     else if     else 

    var a = 10;
    if (a > 5){
      console.log("a > 5");
    }else if (a < 5) {
      console.log("a < 5");
    }else {
      console.log("a = 5");
    }

    3.switch

            var  c= 3 ;
            switch (c) {
                case 1:
                    console.log('这是1');
                    break;
                case 2:
                    console.log('这是2');
                    break;
                case 3:
                    console.log('这是3');
                    break;
                default:
                    console.log('都不是')
            }

    switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。

     

    4.for

    for (var i=0;i<10;i++) {
      console.log(i);
    }

    5.while

    var i = 0;
    while (i < 10) {
      console.log(i);
      i++;
    }

    6.三元运算符

    var a = 1;
    var b = 2;
    var c = a > b ? a : b

     

       

          

     

  • 相关阅读:
    【秒懂音视频开发】03_重识音频
    【秒懂音视频开发】02_重识声音
    【秒懂音视频开发】01_移动通信技术的发展
    [mysql]错误解决之"Failed to start MySQL Server"
    Ubuntu 将Python从默认的2.7升级到3.* 版本
    宝塔面板后台设置免费SSL证书Let's Encrypt(三)
    Let's Encrypt 证书申请及配置(二)
    快速签发 Let's Encrypt 证书指南(一)
    DJANGO中多种重定向方法使用
    反解法|逆向思维
  • 原文地址:https://www.cnblogs.com/beihan/p/9588792.html
Copyright © 2020-2023  润新知