不忘初心,
牢记使命。

前端基础知识----JavaScript

2021-04-07 大聪明 0评论 204 0喜欢

python前端基础知识----JavaScript

组成

ECMAScript 5.1 2011年 ---- ES5

一个完整的JavaScript由3个部分组成:

  • 核心(ECMAScript)
  • 文档对象模型(DOM)Document Object Model,整合js,css,html 。
  • 浏览器对象模型(BOM) Browser Object Model,真个和js和浏览器。

js引入

方式1:

<script>
    // js代码
    alert('澳门皇家赌场上线了!!!')
</script>

方式2:

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

注释

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

结束符

以分号为结束,和缩进无关系。

JavaScript语言基础

在谷歌浏览器的Console里做js代码测试

  1. ### 变量名

    可以使用_,数字,字母,$组成,不能以数字开头。

  2. ### 声明变量使用 var 变量名。

    var a = 10;
    

    注意:

    ​ 区分大小写

    ​ 驼峰命名规则,首字母大写

    ​ 保留字不行

  3. ### 基础数据类型

    #### 动态类型

    var x; //此时x的值为undefined
    x = 1; // 此时为数字
    x = 'nihao'; //此时为字符串
    

    #### 数值(Number)

    ​ 不区分整形和浮点型

    var x = 1;
    typeof(x); //number类型
    

    #### 字符串(String)

    var c = 'alexsb';
    typeof(c); //'string'
    var c2 = 'alc';
    c1 = c + c2;  //alexsbalc  拼接
    

    ​ 常用方法

    | 方法 | 说明 |
    | ------------------------------------------------------------ | ------------------ |
    | .length #不加括号的是属性 | 返回长度 |
    | .trim() #得到一个新值 | 移除空白 |
    | .trimLeft() | 移除左边的空白 |
    | .trimRight() | 移除右边的空白 |
    | .charAt(n) #n类似索引,从0开始,超过最大值返回''空字符串 | 返回第n个字符 |
    | .concat(value, ...) #s1='hello';s.concat('xx');得到helloxx | 拼接 |
    | .indexOf(substring, start) #这个start是从索引几开始找,没有返回-1 | 子序列位置 |
    | .substring(from, to) #不支持负数,所以一般都不用它,了解一下就行了 | 根据索引获取子序列 |
    | .slice(start, end) #var s1='helloworld';s1.slice(0,-5)看结果,就用它 | 切片 |
    | .toLowerCase() #全部变小写 | 小写 |
    | .toUpperCase() #全部变大写 | 大写 |
    | .split(delimiter, limit)#分隔,s1.splite(' '),后面还可以加参数s1.split(' ',2),返回切割后的元素个数 | 分割 |

    var a = 'hello'
    undefined
    a
    "hello"
    a.length
    5
    var b = '    hello'
    undefined
    b
    "    hello"
    b.trim()
    "hello"
    a.charAt(3)
    "l"
    a.concat(b.trim())
    "hellohello"
    a.indexOf('e')
    1
    a.indexOf('1')
    -1
    a.indexOf('l')
    2
    a.indexOf('l', 2)
    2
    a.slice(2,4)
    "ll"
    a.toUpperCase()
    "HELLO"
    a.toLowerCase()
    "hello"
    a.split('e')
    (2) ["h", "llo"]0: "h"1: "llo"length: 2
    

    #### 类型转换

    parseInt('123');  // 整型的123
    parseInt('123abc');  // 不报错,也转成整型的123
    parseInt('abc123'); // NaN number类型
    parseFloat("123.456");
    

    #### 布尔值

    var a = true;
    var b = false;
    ""(空字符串)、0、null、undefined、NaN都是false。
    

    #### 对象类型(object)

    JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。
    var s = new String('world');
    undefined
    typeof(s)
    "object"
    
  4. ### 复杂数据类型或者引用数据类型

    #### 数组Array

    创建数组:
    var a = [11, 22, 33];
    undefined
    a
    (3) [11, 22, 33]
    var b = new Array([22, 33]);
    undefined
    b
    [Array(2)]
    typeof a
    "object"
    typeof b
    "object"
    

    #### 数组常用方法和属性

    | 方法 | 说明 |
    | ------------------------------------------------------------ | ------------------------------------------ |
    | .length | 数组的大小 |
    | .push(ele) | 尾部追加元素 |
    | .pop() | 获取尾部的元素 |
    | .unshift(ele) | 头部插入元素 |
    | .shift() | 头部移除元素 |
    | .slice(start, end) | 切片 |
    | .reverse() #在原数组上改的 | 反转 |
    | .join(seq)#a1.join('+'),seq是连接符 | 将数组元素连接成字符串 |
    | .concat(val, ...) #连个数组合并,得到一个新数组,原数组不变 | 连接数组 |
    | .sort() | 排序 |
    | .forEach() #讲了函数再说 | 将数组的每个元素传递给回调函数 |
    | .splice() #参数:1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素) | 删除元素,并向数组添加新元素。 |
    | .map() #讲了函数再说 | 返回一个数组元素调用函数处理后的值的新数组 |

    1.索引取值
        a
        (3) [11, 22, 33]
        a[1];
        22
    2. .length
     a.length;
     3
    3. 尾部追加元素
     a.push('a');
     (4) [11, 22, 33, 'a']
    4. 尾部删除
     a.pop();
    5. 头部插入
     a.unshift('aa');
     (5) ['aa', 11, 22, 33, 'a']
    6. 头部删除
     a.shift();
     (4) ['aa', 11, 22, 33]
    7. .sort()排序
     把元素转换成字符串,然后按ASCII码大小排序
    

    #### 自定义对象

    var a = {'name':'li', 'age':22};
    undefined
    a
    {name: "li", age: 22}
    a["age"]
    22
    // for 循环遍历自定义对象
    for (var i in a){
        console.log(a[i]);
    }
    VM1550:2 li
    VM1550:2 22
    
  5. ### 运算符

    #### 算术运算符

    + - * / % ++ --  i++,是i自加1,i--是i自减1   i++的这个加1操作优先级低,先执行逻辑,然后再自加1,而++i,这个加1操作优先级高,先自加1,然后再执行代码后面的逻辑
    

    #### 比较运算符

    // = < <= != == === !==
    // == 弱等于(不比较数据类型) === 强等于 比较数据类型
    var a = 10
    undefined
    var b = '10'
    undefined
    a == b
    true
    a === b
    false
    a != b
    false
    a !== b
    true
    

    #### 逻辑运算符

    && || !  #and,or,非(取反)!null返回true
    

    #### 赋值运算符

    = += -= *= /=  #n += 1其实就是n = n + 1
    
  6. ### 流程控制

    #### if-else

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

    #### 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切换

    var a = 10;
    switch(a){
        case 9:
            console.log('good');
        break;
        case 10:
            console.log('perfact');
        break;
    }
    // perfact
    

    #### for循环

    for (var i=0;i<10;i++) {  //就这么个写法,声明一个变量,变量小于10,变量每次循环自增1,for(;;){console.log(i)};这种写法就是个死循环,会一直循环,直到你的浏览器崩了,就不工作了,回头可以拿别人的电脑试试~~
      console.log(i);
    }循环数组:var l2 = ['aa','bb','dd','cc']方式1for (var i in l2){   console.log(i,l2[i]);}方式2for (var i=0;i<l2.length;i++){  console.log(i,l2[i])}循环自定义对象:var d = {aa:'xxx',bb:'ss',name:'小明'};for (var i in d){    console.log(i,d[i],d.i)  #注意循环自定义对象的时候,打印键对应的值,只能是对象[键]来取值,不能使用对象.键来取值。}
    

    #### while循环

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

    #### 三元运算符

    var a = 1;
    var b = 2;
    var c = a > b ? a : b //如果a>b这个条件成立,就把冒号前面的值给c,否则把冒号后面的值给c   //python中的:a = x if x>y else y
    
  7. ### 函数

    #### 函数的定义

    // 普通函数定义
    function f1() {
      console.log("Hello world!");
    }
    
    // 带参数的函数
    function f2(a, b) {
      console.log(arguments);  // 内置的arguments对象
      console.log(arguments.length);
      console.log(a, b);
    }
    
    // 带返回值的函数
    function sum(a, b){
      return a + b;  //在js中,如果你想返回多个值是不行的,比如return a ,b;只能给你返回最后一个值,如果就想返回多个值,你可以用数组包裹起来 return [a,b];
    }
    sum(1, 2);  // 调用函数  sum(1,2,3,4,5)参数给多了,也不会报错,还是执行前两个参数的和,sum(1),少参数或者没参数也不报错,不过返回值就会是NAN
    
    // 匿名函数方式,多和其他函数配合使用,后面我们就会用到了
    var sum = function(a, b){  //在es6中,使用var,可能会飘黄,是因为在es6中,建议你使用let来定义变量,不过不影响你使用
      return a + b;  
    }
    sum(1, 2);
    
    // 立即执行函数,页面加载到这里,这个函数就直接执行了,不需要被调用执行
    (function(a, b){
      return a + b;
    })(1, 2);  //python中写可以这么写:ret=(lambda x,y:x+y)(10,20) 然后print(ret)
    

    #### 函数的局部变量和全局变量

    • 局部变量

      在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。

    • 全局变量

      在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

    • 变量的生存周期

      • JavaScript变量的生命期从它们被声明的时间开始。
      • 局部变量会在函数运行以后被删除。
      • 全局变量会在页面关闭后被删除。

    #### 作用域

    首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。

  8. ### 面向对象

    #### 类

    在ES5中没有类的概念,只有个构造函数,命名的首字母要大写,实例化的时候使用new关键字进行实例化

    function Person(name){
        this.name = name;
    }
    undefined
    var p = new Person('laowang');
    undefined
    p.name
    "laowang"
    // 封装方法prototype
    Person.prototype.sum = function(a, b){return a + b;}
    ƒ (a, b){return a + b;}
    p.sum(3, 5);
    8
    

    #### Data对象

    //方法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");  #月/日/年(可以写成04/03/2020)
    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());  //毫秒并不直接显示
    

    #### JSON对象

    var str1 = '{"name": "chao", "age": 18}';
    var obj1 = {"name": "chao", "age": 18};
    // JSON字符串转换成对象
    var obj = JSON.parse(str1); 
    // 对象转换成JSON字符串
    var str = JSON.stringify(obj1);
    

    #### RegExp对象

    正则对象

    ```js
    //RegExp对象

    //创建正则对象方式1
    // 参数1 正则表达式(不能有空格)
    // 参数2 匹配模式:常用g(全局匹配;找到所有匹配,而不是在第一个匹配后停止)和i(忽略大小写)

    // 用户名只能是英文字母、数字和_,并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。

    // 创建RegExp对象方式(逗号后面不要加空格),假如匹配用户名是只能字母开头后面是字母加数字加下划线的5到11位的
    var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); //注意,写规则的时候,里面千万不能有空格,不然匹配不出来你想要的内容,除非你想要的内容本身就想要空格,比如最后这个{5,11},里面不能有空格

    // 匹配响应的字符串
    var s1 = "bc123";

    //RegExp对象的test方法,测试一个字符串是否符合对应的正则规则,返回值是true或false。
    reg1.test(s1); // true

    // 创建方式2,简写的方式
    // /填写正则表达式/匹配模式(逗号后面不要加空格)
    var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

    reg2.test(s1); // true

    注意,此处有坑:如果你直接写一个reg2.test(),test里面啥也不传,直接执行,会返回一个true,用其他的正则规则,可能会返回false,是因为,test里面什么也不传,默认传的是一个undefined,并且给你变成字符串undefined,所以能够匹配undefined的规则,就能返回true,不然返回false
    // String对象与正则结合的4个方法
    var s2 = "hello world";

    s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正则 的内容 ,/o/g后面这个g的意思是匹配所有的o,
    s2.search(/h/g); // 0 查找字符串中符合正则表达式的内容位置,返回第一个配到的元素的索引位置,加不加g效果相同
    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" 不区分大小写

// 注意事项1:
// 如果regExpObject带有全局标志g,test()函数不是从字符串的开头开始查找,而是从属性regExpObject.lastIndex所指定的索引处开始查找。
// 该属性值默认为0,所以第一次仍然是从字符串的开头查找。
// 当找到一个匹配时,test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 当再次执行test()函数时,将会从该索引位置处开始查找,从而找到下一个匹配。
// 因此,当我们使用test()函数执行了一次匹配之后,如果想要重新使用test()函数从头开始查找,则需要手动将regExpObject.lastIndex的值重置为 0。
// 如果test()函数再也找不到可以匹配的文本时,该函数会自动把regExpObject.lastIndex属性重置为 0。

var reg3 = /foo/g;
// 此时 regex.lastIndex=0
reg3.test('foo'); // 返回true
// 此时 regex.lastIndex=3
reg3.test('xxxfoo'); // 还是返回true
// 所以我们在使用test()方法校验一个字符串是否完全匹配时,一定要加上^和$符号,把匹配规则写的确定一些,尽量不用上面这种的写法/xxx/。

// 注意事项2(说出来你可能不信系列):
// 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test(undefined),然后将这个undefined又转为字符串"undefined",去进行匹配了, 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true


   #### Math对象

   ```js
   Math.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)      返回角的正切。

回到顶部

发表评论 取消回复

电子邮件地址不会被公开。

请输入正确格式的qq邮箱
请输入以http或https开头的URL,格式如:https://libo_sober.top