zoukankan      html  css  js  c++  java
  • JavaScript入门

    JS基础

    JS引入方式

    script标签内写代码

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

    引入额外的JS文件

    <script sec="文件路径"></script>
    

    JS语言规范

    注释

    //单行注释
    
    /*
    多行注释
    */
    

    结束符

    JS的语句以分号;为结束符

    语言基础

    变量声明

    1. Javascript的变量名可以用_,数字,字母,$组成,能以数字开头
    2. 声明变量使用var 变量名;的格式声明

    注意:
    变量名区分大小写

    JS推荐使用驼峰命名规则

    保留字不可用于做变量名

    ES6新增let命令,以及const用来声明常量,具体百度

    abstract
    boolean
    byte
    char
    class
    const
    debugger
    double
    enum
    export
    extends
    final
    float
    goto
    implements
    import
    int
    interface
    long
    native
    package
    private
    protected
    public
    short
    static
    super
    synchronized
    throws
    transient
    volatile
    
    保留字列表
    

    JS数据类型

    JS拥有动态类型

    var x; // 此时x是undefined var x = 1; // 此时x是数字 var x = "Alex" // 此时x是字符串
    

    数字Number

    不区分整形和浮点型

    var a=12.34;
    var b=20;
    var c=15e2;//1500
    

    parse方法(相当于py中的强转)

    parseInt("123") // 返回123
    parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
    parseFloat("123.456") // 返回123.456
     
    

    字符串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(delimiter, limit) 分割

    补充

    ES6中新增了模板字符串。用反引号`标识,用来定义多行字符串,或者在字符串中嵌入变量

    // 普通字符串
    
    `这是普通字符串!`
    // 多行文本
    
    `这是多行的
    文本`
    // 字符串中嵌入变量
    
    var name = "cxw",
     time = "today";
    `Hello ${name}, how are you ${time}?`
    

    布尔值boolean

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

    null与undefined

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

    null表示变量的值是空(null可以手动清空一个变量的值,使得该变量变为object类型,值为null),undefined则表示只声明了变量,但还没有赋值。

    对象Object

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

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

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

    数组array

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

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

    常用方法:

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

    forEach()

    语法:

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

    参数:参数描述function(currentValue, index, arr)

    参数 描述
    currentValue 必需。当前元素
    index 可选。当前元素的索引值。
    arr 可选。当前元素所属的数组对象。

    thisValue可选。传递给函数的值一般用 "this" 值。如果这个参数为空, "undefined" 会传递给 "this" 值

    var arr=[11,22,33,44];
    arr1.forEach(function(value,index,arr){
        console.log(value,index,arr)
    })
    

    splice()新增元素

    语法:

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

    参数:

    参数 描述
    index 必需。规定从何处添加/删除元素。 该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
    howmany 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。 如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
    item1, ..., itemX 可选。要添加到数组的新元素

    运算符

    算术运算符

    + - * / % ++ --
    var x=10;
    var res1=x++;
    var res2=++x;
    res1;
    res2;
    这里由于的x++和++x在出现赋值运算式,x++会先赋值再进行自增1运算,而++x会先进行自增运算再赋值!
    

    比较运算符

    > >= < <= != == === !==
    
    
    1 == “1” // true 弱等于 1 === "1" // false 强等于
    //上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型),所以当你用两个等号进行比较时,JS内部会自动先将
    //数值类型的1转换成字符串类型的1再进行比较,所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误
     
    

    逻辑运算符

    &&(and) ||(or) !(not)
    

    赋值运算符

    = += -= *= /=
    

    流程控制

    //if...else略
    //if...else if...else略
    //while略
    
    //switch:
    
    var day = new Date().getDay(); 
    switch (day) {
       case 0: 
       console.log("Sunday"); 
       break; 
      case 1: 
      console.log("Monday");
       break; 
    default:
     console.log("...") }
    
    //switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。
    
    
    //三元运算符
    var c = a > b ? a : b
    //这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用;
    

    函数

    函数的定义

    //普通函数定义
    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中返回值只能有一个,若有多个,只返回最后一个
    }
    //匿名函数
    var sum=function(a,b){
        return a+b
    }
    //立即执行函数
    (function(a,b){
        return a+b
    })(1,2);
    //最后一个小括号就是传入的实参
    
    
    

    函数的作用域和生存周期

    局部变量

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

    全局变量:

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

    变量生存周期:

    JavaScript变量的生命期从它们被声明的时间开始。

    局部变量会在函数运行以后被删除。

    全局变量会在页面关闭后被删除。

    作用域

    首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。与python作用域关系查找一模一样!

  • 相关阅读:
    javascript运算符
    javascript字符串转数字
    javascript的变量声明和数据类型
    javascript的历史和入门
    CSS中定位
    CSS中盒子模型
    CSS操作表格的边框和表格的属性示例代码
    常用的CSS样式示例代码
    CSS伪类选择器
    CSS选择器
  • 原文地址:https://www.cnblogs.com/Sheppard/p/11673297.html
Copyright © 2011-2022 走看看