zoukankan      html  css  js  c++  java
  • 前端JavaScript

    js是一种轻量级的脚本语言,它可以部署在多种环境,最常见的部署环境就是浏览器。

    所谓的脚本语言,指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序的操作方法

     

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

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

    JavaScript 引入的两种方式:

    1.直接在style 中 的script 标签中写

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

    2.导入外部JavaScript的文件

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

    JavaScript的语言规范:

    1.注释:

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

    2.JavaScript中的语句要以;号结束

    3.变量声明: 在Javascrip中使用新变量前要进行声明.

    1. JavaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头。
    2. 声明变量使用 var 变量名; 的格式来进行声明
    var name = "Alex";
    var age = 18;

     还可以这么写:

    <script>
    console.log('你好');
        var name;
        name='xiaohong';
        console.log(name)
    </script>

      注意:

      变量名是区分大小写的。

      推荐使用驼峰式命名规则。 比如passWord

    JavaScript 中的数据类型

    查看类型的方法为typeof

      var name;
        name='xiaohong';
        console.log(typeof name)

    JavaScript拥有动态类型

    1.数字类型number

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

    常用方法:

    parseInt将字符串中的数字转换为整数,如果字符串不是以数字开头的,将返回NAN,注意将小数部分取整。

    var a1 = parseInt('123er56');
        console.log(a1)
    
    //结果为
    123
    parseInt("123")  // 返回123  把字符串的数字转换为数字
    parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
    parseFloat("123.456")  // 返回123.456
    隐式转换:就是系统默认的不需要加声明就可以自动转换
     console.log(1+true); 
        console.log(1+false);
        console.log(1+null);
        console.log(1+undefined);
    
    //结果为
    2
    1
    1
    NaN
    
    

    由此说明: true等于1. false=0 null 是一个空,不能单纯作为0处理  undefined也等于NAN



    2.字符串:string

    注意不区分空字符,只要用引号,引起来,就是字符串

    字符串拼接的方法 推荐使用'+'

    obj.length  注意length后面没有括号:返回字符串的长度.

    obj.trim() 移除字符串左右两边的空格,但是不能移除字符串中间的空格

    obj.trimLeft() 移除字符串左边的空格

    obj.trimRight() 移除字符串右边的空格

    obj.charAt(index)  通过索引查找对应的元素. 不可以用负值,负值会返回空字符串

    obj.concat(value, ...): 字符串的拼接,不推荐使用这个用+号

    obj.indexOf(字符串中的元素, startindex: 通过元素找元素的索引,如果有多个只显示最左边的那个. 如果找不到则返回-1, indexstart 可以省略,如果省略表示从头开始查找

    如果不省略则从indexstart处开始查找,但是得到的结果还是和从开头找的结果一样,如果 startindex 是负数,则 startindex 被当作零。如果它比最大的字符位置索引还大,结果为-1找不到。

     obj.substring(from, to) :和python中的字符串切片一样前包后不包, 但是不能用负数来表示, to可以不写

    name;
    "sticker, china"
    var name11=name.substring(2,5);
    undefined
    name11;
    "ick"

    obj.slice(start, end): 返回一个新的字符串。包括字符串 stringObject 从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。可以接受负数,to可以不写.

    obj.toLowerCase(): 字符串变为小写.

    obj.toUpperCase():字符串变为大写.

    obj.split(separator,howmany):用于把一个字符串分割成一个列表(数组)。separator 字符串或正则表达式,从separator处切开,但是不包含separator自身,howmany 用于指定你需要列表中有几个符合条件的字符,当不填时会全部显示显示.

    我以空字符来分割的

    结果:

    (11) ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
    范例二:
    var n2=n.split('',2);

    结果

    ["h", "e"]

    3.布尔类型boolean

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

    var a = true;
    var b = false;

    注意: 返回false的情况:

    1. " " 即:空字符串
    2. 0
    3. -0
    4. undefined
    5. false
    6. null
    7. NaN

    其他的的都返回True ,包括空数组和对象

    比较运算符

    比较运算符在逻辑语句中使用,以测定变量或值是否相等。

     注意: '=' 是赋值

    == 是等于 仅判断值是否相等,不管类型的事

    ===是强等于  比较值和类型是否都相等.

    逻辑运算符

    逻辑运算符用于测定变量或值之间的逻辑。

    ++递增

    有两种a++ 和++a

    当a++或++a,单独成行的时候,a在原来的基础上相当于加了一,

    var a = 10;
        a++;
        console.log(a)
    
    //结果等于
    11

    a++  先运算再加1 区别是 a++必须遇到+号才加一(单独一行不算)

    ++a 先加1在运算 ++a,不需要遇到+号就能加一

    var a = 10;
    var b = 10;
    
    var result = a++ + a ; //结果等于21,思路: a++本身等于10,当它经过+后变为11,然后加上a就是21
    var response = b++ + ++b; //结果等于22,思路分析,b++本身等于10经过+后,变为11,而++b不需要经过+号就能变为11
    
    

    三元表达式

    JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

    语法

    var name=(condition)?value1:value2 
    当condition为true时,执行value1的结果,否则执行value2的结果。
    例子:
    var a = 22;
    var age = a > 5 ? 'a大于5':'a小于5';
    alert(age)

     高阶的多个数的比较

     var a = 22;
        var b = 12;
        var c = 52;
        var maxNum = a > b ? a > c ? a : c : b > c ? b : c;
        alert(maxNum)
    
    //书写顺序
    //第一 a>b?a:b   先比较ab
    //第二 a>b?a>c?a:c :b //然后c再和a比
    //第三步 a>b?a>c?a:c:b>c?b:c //然后c再和b比
    //更好的理解的写法,他俩都和第三个数比
    a > b ? (a > c ? a : c ): (b > c ? b : c)
     

    4.数组

    类似于Python中的列表。

    obj.length 返回数组中的元素个数

    obj.push(ele):数组尾部添加一个或多个元素

    obj.unshift(ele):向数组的开头添加一个或更多元素,并返回新的长度。

    var a=[1,2,5,6,8];
      a.unshift('1');
      console.log(a)

    结果:

    ["1", 1, 2, 5, 6, 8]

    obj.pop(): 删除数组的最后一个元素。

    obj.shift()删除数组的第一个元素。

    obj.slice()返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

    obj.reverse()反转

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

    obj.concat(val, ...):连接数组

    遍历数组中的元素:

    var a=[1,2,5,6,8];
      for (var i=0;i<a.length;i++){
          console.log(a[i]);
      }

    5.对象

    对象是大括号定义的无序的数据集合,有键值构成,键值之间用冒号隔开,大括号末尾要使用分号结束

    相当于python中的字典

    注意:

    1. 属性可以不加引号,但是一般都加
    2. 最后一个键值对后边不加逗号

    对象取属性值的方法有两种:第一种点运算符,第二种,中括号

    var a = {"name": "Alex", "age": 18};
    console.log(a.name); //第一种
    console.log(a["age"]);//第二种

    点运算符和中括号运算符的区别?

    1. 点运算符不可以点一个数字,[ ] 可以。
    2. 点运算符不可以通过字符串变量,访问一个对象的属性。
    3. 点运算符可以将js中的关键字,作为对象的属性名添加,而中括号不可以。
     var obj = {
            'hero':'钢铁侠'
        };
        var str = 'hero';
        console.log(obj.str);
        console.log(obj[str])
    
        //第一个结果为undefined
        // 第二个结果为钢铁侠

    遍历对象中的内容:

    var a = {"name": "Alex", "age": 18};
    for (var i in a){
    
      console.log(i, a[i]);
    }

    6.null和undefined

    • undefined表示的是当声明的变量未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
    • undefined是全局对象的一个属性。也就是说,它是全局作用域的一个变量。undefined的最初值就是原始数据类型undefined。一个没有被赋值的变量的类型是undefined。如果方法或者是语句中操作的变量没有被赋值,则会返回undefined,一个函数如果没有返回值,就会返回一个undefined值。
    • null表示值不存在

    undefined表示没有声明和赋值变量,就使用该变量。

    null声明了变量并且变量值是null。相当于python中的None

     var a;
        a = null;
        console.log(typeof a)
    
    //输入的结果为 object

    出现underfine的情况有两种:

    1、变量没赋初始值

    2. 变量没有声明。

    3、函数没有返回值

    第一种情况:
    <script>
       var a;
       alert(a);//这里没有初始化值,会出现undefined
    </script>
    
    第二种情况
    console.log(typeof a1) //没有声明和赋值
    
    第三种情况:
    <script>
       var a='1';
       function k(){
       }
       a=k();//这里函数没有返回值,会出现undefined
    </script>

    类型查询

    typeof "abc"  // "string"
    typeof null  // "object"
    typeof true  // "boolean"
    typeof 123 // "number"

    流程控制

    if

    注意当if后边的括号内是负性内容(表示否定的词)的时候,不可以进入分支内容负性内容包括:null,""(空的字符串), undefined,false,0,NAN

    if (undefined){
            console.log('nihoa')
        }

    if-else

     var a = parseInt(prompt('请输入您的年龄'));
        if (a > 18) {
            alert('你可以去网吧了')
        } else {
            alert('你不可以去网吧,赶紧回家写作业')
        }

    复制代码

    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");
    }

    复制代码

     switch

    语句用于基于不同条件执行不同动作,效率比if else要高点额很多

    var x;
        var d = new Date().getDay();
        switch (d) {
            case 0 :
                x = '今天休息';
                break;
            case 1 :
                x = '今天休息';
                break;
                if (d > 1) {
                    x = '今天要上班';
                    break;
                }
        }
        alert(x)
    
    

    循环

    任何循环语句:都有4个条件

    1. 初始化变量。例如 var i =0
    2. 循环条件,例如i<10
    3. 循环体,例如console.log(i)
    4. 迭代条件。i++

    for

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

    for  in

    var person = [1, 3, 4, 5, 6];
        for (var k in person) {
            console.log(k)
        }

    while

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

    break 和 continue

    它们的用法和python的一样

    
    

    内置对象和方法

    
    

    JavaScript中的所有事物都是对象:字符串、数字、数组、日期,等等。在JavaScript中,对象是拥有属性和方法的数据。

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

    创建对象:

    通过 JavaScript,您能够定义并创建自己的对象。
    var person=new Object();  // 创建一个person对象
    person.name="Alex";  // person对象的name属性
    person.age=18;  // person对象的age属性
    
    

    Date对象

    创建Date对象
    //方法1:不指定参数
    var d1 = new Date();
    console.log(d1.toLocaleString());
    //方法2:参数为日期字符串
    var d2 = new Date("2004/3/20 11:12");
    console.log(d2.toLocaleString());
    var d3 = new Date("04/03/20 11:12");
    console.log(d3.toLocaleString());
    //方法3:参数为毫秒数
    var d3 = new Date(5000);
    console.log(d3.toLocaleString());
    console.log(d3.toUTCString());
    
    //方法4:参数为年月日小时分钟秒毫秒
    var d4 = new Date(2004,2,20,11,12,0,300);
    console.log(d4.toLocaleString());  //毫秒并不直接显示
    
    Date对象的方法:
    
    
    var d = new Date(); 
    //getDate()                 获取日
    //getDay ()                 获取星期几 从星期天开始
    //getMonth ()               获取月(0-11)
    //getFullYear ()            获取完整年份
    //getYear ()                获取年
    //getHours ()               获取小时
    //getMinutes ()             获取分钟
    //getSeconds ()             获取秒
    //getMilliseconds ()        获取毫秒
    //getTime ()                返回累计毫秒数(从1970/1/1午夜)

    json对象

    var str1 = '{"name": "Alex", "age": 18}'; var obj1 = {"name": "Alex", "age": 18};

    // 对象转换成JSON字符串 var str = JSON.stringify(obj1); 注意Json需要大写

    // JSON字符串转换成对象 var obj = JSON.parse(str1);

    regexp 对象

    RegExp 是正则表达式的缩写。

    // 创建RegExp对象方式
    var reg1 = new RegExp("pattern", [flags]);
    pattern:正则表达式的文本
    [flags]: 匹配模式,这个参数可选 该标志有以下值的任意组合
    g :全局匹配;找到所有匹配,而不是在第一个匹配后停止
    i :忽略大小写
    m :多行; 将开始和结束字符(^和$)视为在多行上工作(也就是,分别匹配每一行的开始和结束(由 或 分割),而不只是只匹配整个输入字符串的最开始和最末尾处。
    u: Unicode; 将模式视为Unicode序列点的序列.
    y粘性匹配; 仅匹配目标字符串中此正则表达式的lastIndex属性指示的索引(并且不尝试从任何后续的索引匹配)。

    RegExp 对象的方法

    RegExp 对象有 3 个方法:

    test():检索字符串中的指定值。返回值是 true 或 false。

    1 var part2=new RegExp('e');
    2 undefined
    3 part2.test("The best things in life are free");
    4 结果true

    exec() :检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null,检索字符串中指定的值。返回找到的值,并确定其位置。

    var part2=new RegExp('e');
    part2.exec("The best things in life are free");
    结果;["e", index: 2, input: "The best things in life are free"]
    RegExpObject.compile(regexp,modifier):用于在脚本执行过程中编译正则表达式,也可用于改变和重新编译正则表达式。regexp 正则表达式。modifier规定匹配的类型。"g" 用于全局匹配,"i" 用于区分大小写,"gi" 用于全局区分大小写的匹配。

    String对象与正则结合的4个方法
    
    
    ar s2 = "hello world";
    
    s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容
    s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置
    s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割
    s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换
    
    

    其中

    s2.match(/o/g)下边式子的缩写,这样就不用新定义的对象了
    var s2="hello, world";
    var n = new RegExp("o","g");
    console.log(s2.match(n ));
    //RegExp对象
    
    //创建正则对象方式1
    // 参数1 正则表达式
    // 参数2 验证模式:g(global)和i(忽略大小写)
    
    // 用户名只能是英文字母、数字和_,并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。
    
    // 创建RegExp对象方式
    var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$", "g");
    
    // 匹配响应的字符串
    var s1 = "bc123";
    
    //RegExp对象的test方法,测试一个字符串是否符合对应的正则规则,返回值是true或false。
    reg1.test(s1);  // true
    
    // 创建方式2
    // /填写正则表达式/匹配模式
    var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;
    
    reg2.test(s1);  // true
    
    
    
    // String对象与正则结合的4个方法
    var s2 = "hello world";
    
    s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容
    s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置
    s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割
    s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换
    
    // 关于匹配模式:g和i的简单示例
    var s1 = "name:Alex age:18";
    
    s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
    s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
    s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不区分大小写
    
    RegExp对象

    实例

    在字符串中全局搜索 "man",并用 "person" 替换。然后通过 compile() 方法,改变正则表达式,用 "person" 替换 "man" 

    var str='Every man in the world! Every woman on earth!';
    patt=/man/g;
    str2=str.replace(patt,"person");
    console.log(str2);

    结果:

    "Every person in the world! Every woperson on earth!"
    match对象
    abs(x)      返回数的绝对值。
    exp(x)      返回 e 的指数。
    floor(x)    对数进行下舍入。
    log(x)      返回数的自然对数(底为e)。
    max(x,y)    返回 x 和 y 中的最高值。
    min(x,y)    返回 x 和 y 中的最低值。
    pow(x,y)    返回 x 的 y 次幂。
    random()    返回 0 ~ 1 之间的随机数。
    round(x)    把数四舍五入为最接近的整数。
    sin(x)      返回数的正弦。
    sqrt(x)     返回数的平方根。
    tan(x)      返回角的正切。
  • 相关阅读:
    C语言使用正则表达式
    linux 有名管道(FIFO)
    sendto() 向广播地址发包返回errno 13, Permission denied错误
    NSUserDefaults(数据存储)
    iOS开发UI篇—UIScrollView控件实现图片缩放功能
    李洪强iOS开发之-环信02_iOS SDK 介绍及导入
    李洪强iOS开发之-环信01_iOS SDK 前的准备工作
    iOS开发UI篇—UIScrollView控件介绍
    iOS开发UI篇—iOS开发中三种简单的动画设置
    iOS开发UI篇—IOS开发中Xcode的一些使用技巧
  • 原文地址:https://www.cnblogs.com/sticker0726/p/8118436.html
Copyright © 2011-2022 走看看