zoukankan      html  css  js  c++  java
  • python 之 前端开发( JavaScript变量、数据类型、内置对象、运算符、流程控制、函数)

    11.4 JavaScript

    11.41 变量

    1、声明变量的语法

    // 1. 先声明后定义
    var name; // 声明变量时无需指定类型,变量name可以接受任意类型
    name= "egon";
    ​
    // 2. 声明立刻定义
    var age = 18;

    2、变量名命名规范

    1、由字母、数字、下划线、$ 组成,但是不能数字开头,也不能纯数字
    2、严格区分大小写
    3、不能包含关键字和保留字(以后升级版本要用的关键字)。
    如:
    abstract、booleanbytechar、class、const、debuggerdouble、enum、export、extends、final、float、goto
    implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
    4、推荐驼峰命名法:有多个有意义的单词组成名称的时候,第一个单词的首字母小写,其余的单词首字母写
    5、匈牙利命名:就是根据数据类型单词的的首字符作为前缀

    3、ES6中let

    ES6之前js没有块级作用域,ES6新增了let命令,用于声明变量(声明的变量属于块级作用域),流程控制语句的{}就是块级作用域。其用法类似于var,但是所声明的变量只在let命令所在的代码块内有效。例如:for循环的计数器就很适合使用let命令

    for(let i=1;i<=5;i++){
        console.log(i);
    }                       //1 2 3 4 5

    4、常量

    ES6新增const用来声明常量。一旦声明,其值就不能改变。

    const PI = 3.1415926;
    PI=3                    //TypeError: "PI" is read-only

    11.42 数据类型

    11.421 数值(Number)

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

    var x = 3;
    var y = 3.1;
    var z = 13e5;
    var m = 13e-5;
    var n = NaN;                    // typeof n结果"number"
    //四舍五入
    var num=1.3456
    num.toFixed(2)                  // "1.35"
    //字符串类型转成数字
    parseInt("123")                // 返回123
    parseInt("ABC")                // 返回NaN  NaN属性是代表非数字值的特殊值,该属性用于指示某个值不是数字。
    console.log(parseInt("18林海峰")); //18  带有自动净化的功能;只保留字符串最开头的数字,后面的中文自动消失
    console.log(parseInt("林海峰18")); // NaN  只去末尾的中文,不会去开头的
    parseInt("123.456")             // 返回123  
    parseFloat("123.456")           // 返回123.456    字符串中的数字转浮点
    var a = parseInt("1.3") + parseInt("2.6"); //a=3    自动带有截断小数的功能:取整,不四舍五入
    var a = parseFloat("1.3") + parseFloat("2.6"); //a=3.9
    //数字类型转成字符串
    var x=10;
    var y='20';
    var z=x+y; // z='1020'
    typeof z; //String
    var m=123;
    var n=String(m)//'123'
    var a=123;
    var b=a.toString()//'123'
    11.422 字符串(String)
    var a = "Hello";
    var b = "world";
    var c = a + b; 
    console.log(c);     // 得到Helloworld

    常用方法:

    方法说明
    .length 返回长度
    .trim() 移除空白
    .trimLeft() 移除左边的空白
    .trimRight() 移除右边的空白
    .charAt(n) 返回第n个字符
    .concat(value, ...) 拼接,拼接字符串通常使用“+”号
    .indexOf(substring, start) 子序列位置
    .substring(from, to) 根据索引获取子序列
    .slice(start, end) 切片
    .toLowerCase() 小写
    .toUpperCase() 大写
    .split(',', 2) 根据逗号分割,但只显示前两个

    substirng()与silce()的区别:

    substirng()的特点:
    如果 start > stop ,start和stop将被交换
    如果参数是负数或者不是数字,将会被0替换
    ​
    silce()的特点:
    如果 start > stop 不会交换两者
    如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
    如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

    补充:

    ES6中引入了模板字符串:模板字符串(template string)是增强版的字符串,用反引号(`)标识,它的用途为

    1、完全可以当做普通字符串使用
    var msg = `my name is egon`
    2、也可以用来定义多行字符串
    var info = `
        name:egon
        age:18
        sex:male
    `
    3、并且可以在字符串中嵌入变量
    var name = "egon";
    var age = 18;
    var msg = `my name is ${name}, my age is ${age}`;       // "my name is egon, my age is 18"

    注意:

    如果模板字符串中需要使用反引号,则在其前面要用反斜杠转义

    11.423 布尔值
    var a = true;
    var b = false;
    //布尔值为false的数据类型
    Boolean('')
    Boolean(0)
    Boolean(null)
    Boolean(undefined)
    Boolean(NaN)
    ​
    //其余数据类型的布尔值均为true
    Boolean([])
    Boolean(123)

    null 和 undefined :

    null:表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null; undefined:表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。 null表示变量的值是空,undefined则表示只声明了变量,但还没有赋值。

    11.43 内置对象

    11.431 数组对象Array

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

    var x = ["egon", "hello"];
    console.log(x[1]);           // 输出"hello"

    常用方法:

    方法说明
    .length 数组的大小
    .push(ele) 尾部追加元素
    .pop() 删除尾部的元素
    .unshift(ele) 头部插入元素
    .shift() 头部移除元素
    .slice(start, end) 切片
    .reverse() 反转
    .join(seq) 将数组元素连接成字符串
    .concat(val, ...) 连接数组
    .sort() 排序
    .forEach() 将数组的每个元素传递给回调函数
    .splice(1,2,"新的值") 删除元素,并向数组添加新元素。
    .map() 返回一个数组元素调用函数处理后的值的新数组

    提供比较函数进行排序,该函数应该具有两个参数 a 和 b,接收传入的a和b,执行函数体代码,然后返回一个值用于说明a和b的大小

    返回值 < 0 :代表a小于b

    返回值 =0 : 代表a等于b

    返回值 > 0 :代表a大于b

    function sortNumber(a,b){
        return a - b
    }
    var arr = [123,9,1211,11]
    arr.sort(sortNumber)                    //[9, 11, 123, 1211]

    遍历数组中的元素:

    var arr = [11, 22, 33, 44];
    for (var i=0;i<arr.length;i++) {
      console.log(arr[i]);                
    }                                   //11 22 33 44

    forEach() :

    语法:forEach( function ( 当前元素, 当前元素索引, 当前元素所属数组arr), thisValue)

    var arr=['aa','bb','cc','dd','ee']
    arr.forEach(function(v,i,arr){
        console.log(v,i,arr);
        console.log(this[0]);
    },"hello")  
    //aa 0  ["aa", "bb", "cc", "dd", "ee"] h
    //bb 1  ["aa", "bb", "cc", "dd", "ee"] h
    //cc 2  ["aa", "bb", "cc", "dd", "ee"] h
    //dd 3  ["aa", "bb", "cc", "dd", "ee"] h
    //ee 4  ["aa", "bb", "cc", "dd", "ee"] h

    splice() :

    语法:splice ( 起始元素索引 , 删除的个数, 添加的新元素)

    var arr=['aa','bb','cc','dd','ee']
    arr.splice(1,3,'xxxx')                  //删除‘bb’,‘cc’,’dd‘这三个值,然后插入’xxxx‘
    arr                                   //["aa", "xxxx", "ee"]

    map() :

    语法:map(function ( 当前元素, 当前元素索引, 当前元素所属数组arr), thisValue)

    //字符串反转
    var str = '12345';
    Array.prototype.map.call(str, function(x) {             //同时利用了call()方法
      return x;
    }).reverse().join('');                                // "54321"
    11.432 Date日期对象

    创建日期对象只有构造函数一种方式,使用new关键字

    //方法1:不指定参数
    var d1 = new Date();
    console.log(d1.toLocaleString());       //  2020/8/9 下午8:24:06
    //方法2:参数为日期字符串
    var d2 = new Date("2018/01/27 11:12:13");
    console.log(d2.toLocaleString());       //  2018/1/27 上午11:12:13
    var d3 = new Date("01/27/18 11:12:13"); //  月/日/年 时分秒
    console.log(d3.toLocaleString());       //  2018/1/27 上午11:12:13
    //方法3:参数为毫秒数
    var d4 = new Date(7000);
    console.log(d4.toLocaleString());       //  1970/1/1 上午8:00:07
    console.log(d4.toUTCString());          //  Thu, 01 Jan 1970 00:00:07 GMT
    //方法4:参数为:年,月,日,时,分,秒,毫秒
    var d5 = new Date(2018,1,27,11,12,13,700);
    console.log(d5.toLocaleString());  //毫秒并不直接显示    //  2018/2/27 上午11:12:13

    常用方法:

    方法含义
    getDate() 根据本地时间返回指定日期对象的月份中的第几天(1-31)
    getMonth() 根据本地时间返回指定日期对象的月份(0-11)
    getFullYear() 根据本地时间返回指定日期对象的年份(四位数年份时返回四位数字)
    getDay() 根据本地时间返回指定日期对象的星期中的第几天(0-6)
    getHours() 根据本地时间返回指定日期对象的小时(0-23)
    getMinutes() 根据本地时间返回指定日期对象的分钟(0-59)
    getSeconds() 根据本地时间返回指定日期对象的秒数(0-59)
    getMilliseconds() 根据本地时间返回指定日期对象的获取毫秒
    getTime() 返回累计毫秒数(从1970/1/1午夜)

    编写代码,将当前日期按“2017-12-27 11:11 星期三”格式输出:

    const WEEKMAP = {
        0: "星期日",
        1: "星期一",
        2: "星期二",
        3: "星期三",
        4: "星期四",
        5: "星期五",
        6: "星期六",
    };
    ​
    function showTime() {
        var d1 = new Date();
        var year = d1.getFullYear();
        var month = d1.getMonth() + 1;
        var day = d1.getDate();
        var hour = d1.getHours();
        var minute = d1.getMinutes() < 10 ? "0"+d1.getMinutes() :d1.getMinutes();
        var week = WEEKMAP[d1.getDay()];    // 0~6的星期
        var dateStr = `
            ${year}-${month}-${day} ${hour}:${minute} ${week}
        `;
        console.log(dateStr)
    }
    ​
    showTime();                         //   2020-8-9 20:37 星期五
    View Code
    11.433 Math对象
    方法含义
    Math.floor() 向下取整,如5.1取整为5
    Math.ceil() 向上取整,如5.1取整为6
    Math.max(a,b) 求a和b中的最大值
    Math.min(a,b) 求a和b中的最小值
    Math.random() 随机数,默认0-1之间的随机数,若想求min~max之间的数,公式为:min+Math.random()*(max-min)
    11.434 JSON对象
    // 对象转成JSON字符串
    var obj2={"name":"egon","age":18};
    str2=JSON.stringify(obj2);                //  "{"name":"egon","age":18}"
    // JSON格式的字符串转成对象
    var str1='{"name":"egon","age":18}';
    var obj1=JSON.parse(str1);
    console.log(obj1.name);                  // 'egon'
    console.log(obj1["name"]);               //  'egon'
    11.435 RegExp对象
    1. 创建正则对象的方式1
    参数1 正则表达式
    参数2 匹配模式:常用g(全局匹配;找到所有匹配,而不是在第一个匹配后停止)和i(忽略大小写)
    var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); //  匹配用户名只能是英文字母、数字和_
    reg1.test("egon_123") // true            //首字母必须是英文字母,长度最短不能少于6位 最长不能超过12位。
    注意:正则放到引号内,{}内的逗号后面不要加空格
    
    2. 创建正则对象的方式2
    var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;         // 不要加引号
    reg2.test("egon_123")                             // true
    
    3. String对象与正则结合的4个方法
    var s1="hello world";
    s1.match(/l/g)                                 // 符合正则的内容["l", "l", "l"]
    s1.search(/h/g)                             // 符合正则的内容的第一个索引0
    s1.split(/ /)                                 // ["hello", "world"],默认全部切割
    s1.replace(/l/g,'L')                          // "heLLo worLd"
    
    4. 匹配模式g与i
    var s2="name:Egon age:18"
    s2.replace(/e/,"赢")                         // "nam赢:Egon age:18"
    s2.replace(/e/g,"赢")                         // "nam赢:Egon ag赢:18"
    s2.replace(/e/gi,"赢")                         //"nam赢:赢gon ag赢:18"

    5.注意1:

    1、如果regExpObject带有全局标志g,test()函数不是从字符串的开头开始查找,而是从属性regExpObject.lastIndex所指定的索引处开始查找。
    2、该属性值默认为0,所以第一次仍然是从字符串的开头查找。
    3、当找到一个匹配时,test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
    4、当再次执行test()函数时,将会从该索引位置处开始查找,从而找到下一个匹配。
    5、因此,当我们使用test()函数执行了一次匹配之后,如果想要重新使用test()函数从头开始查找,则需要手动将regExpObject.lastIndex的值重置为 06、如果test()函数再也找不到可以匹配的文本时,该函数会自动把regExpObject.lastIndex属性重置为 0var reg3 = /egon/g;
    reg3.lastIndex
    0
    reg3.test("egon")    // true,匹配成功
    true
    reg3.lastIndex      // 匹配成功reg3.lasIndex=4
    4
    reg3.test("egon")   // 从4的位置开始匹配,本次匹配失败
    false
    reg3.lastIndex      // 匹配失败,lastIndex归为0
    0
    reg3.test("egon")   // 再次匹配成功
    true
    6.注意2:
    当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 且/undefined/.test()默认返回true。
    var reg4 = /^undefined$/;
    reg4.test();                // 返回true
    reg4.test(undefined);        // 返回true
    reg4.test("undefined");      // 返回true

    11.44 运算符

    //算数运算符:
    + - * / % ++ --
    //比较运算符:
    > >=  < <=  !=  ==  ===  !==
    //逻辑运算符
    && || !
    //赋值运算符
    =  +=  -=  *=  /=    

    11.45 流程控制

    if...else :

    var age=18;
    if(age > 18){
        console.log('too old');
    }
    else if(age == 18){
        console.log('花姑娘,吆西');
    }
    else {
        console.log('too young');
    }                                   // 花姑娘,吆西

    switch :

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

    var day = new Date().getDay();
    switch (day) {
      case 0:
          console.log("星期天,出去浪");
          break;
      case 6:
          console.log("星期六,也出去浪");
          break;
      default:
          console.log("工作日,正常上班")
    }                                       //工作日,正常上班

    while:

    let i=0;
    undefined
    while (i<=3){
        console.log(i);
        i++;
    } 

    三元运算:

    var x=1;
    var y=2;
    var z=x>y?x:y       // 2

    11.46 函数

    1、函数的定义与调用(与python类同)

    // 无参函数
    function f1() {
      console.log("Hello world!");
    };
    f1();
    ​
    // 有参数函数
    function f2(a, b) {
      console.log(arguments);               // 内置的arguments对象
      console.log(arguments.length);
      console.log(arguments[0],arguments[1]);
      console.log(a, b);
    };
    f2(10,20);
    ​
    // 带返回值的函数
    function sum(a, b){
      return a + b;
    }
    sum(1, 2); 
    ​
    // 匿名函数
    var sum = function(a, b){
      return a + b;
    }
    sum(1, 2);
    ​
    // 立即执行函数
    (function(a, b){
      return a + b;
    })(1, 2); 

    注意:

    函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回

  • 相关阅读:
    第3章 对象基础
    [置顶] CSDN博客客户端(非官方)
    javascript 修改对象
    Print2Flash出现"System Error. Code:1722. RPC服务器不可用."错误解决办法
    ConfigHelper 配置文件辅助类
    多个委托方法的顺序执行
    javascript Table
    字符串拼接方式(待商榷)
    CSDN博客客户端(非官方)
    javascript 对象继承
  • 原文地址:https://www.cnblogs.com/mylu/p/11366516.html
Copyright © 2011-2022 走看看