• 前端学习笔记——js入门(一)


    一、Javascript简介

    • JS是一门轻量级、基于面向对象的、即时编译的解释型语言。

    语法特点:
    严格区分大小写
    每一行的代码应该以分号结尾,但有时可以省略
    JS代码从上往下依次执行

    • JS大多是依赖于浏览器运行的,JS代码引入网页的三种方式:

    行内式,在HTML标签的属性中书写,不推荐
    内部引入式,在script标签中直接书写
    外部引入式,在.js文件中书写,并通过script标签的src属性引入
    由于JS代码运行会阻塞页面渲染,建议将script标签卸载body标签的末尾

    • 输出语句:打印需要的值,可用于调试代码
      页面输出:document.write(),会重置页面,不推荐
      弹窗输出:confirm(),会阻碍代码运行和页面渲染,不推荐
      控制台输出:console.log(),推荐使用

    二、JS中的数据类型

    1.四基(基本数据类型)两空(空指针类型)一对象

    • 四基:number(数值类型)、boolean(布尔类型)、string(字符串类型)、symbol(符号类型)
    • 两空:null(空对象)、undefined(未定义的空值)
    • 一对象:object(在js中,“万物皆对象”)

    2.创建变量

    • 声明变量
      语法:var 变量名
      JS的变量拥有动态数据类型,用var关键字来声明,此时该变量的值没有人为设定,即没有值,默认为undefined。通过给变量赋值可以使变量变化为任意数据类型:
    var a    //undefind 
    var a = 10   //number
    var a = '10'   //string
    var a =  false//boolean
    
    • 1
    • 2
    • 3
    • 4
    • 字面量:数据的直接形式,如:10,‘10’,‘hello world’。
    • 使用 typeof 运算符,可以直接获取变量的数据类型,返回的结果通过字符串类型进行保存。
    • JS中变量的数据类型可以相互转化

    其他类型转化为Number:
    Number()
    parseInt()
    parseFloat()

    其他类型转化为String
    String()
    toString()
    +''

    其他类型转化为Boolean
    Boolean()

    三、JS中的基本运算

    1.JS中的运算符

    • 表达式:JS语句的基本构成单位
    • 算术运算符:+-*/%**(乘方)
      加减乘除,乘方。与许多编程语言不同的是,JS中的除法运算符/是数学意义上的除法而不是整除
    • 赋值运算符:=
      将右边表达式的值赋给左边的变量
    • 单目运算符:+-++--typeof
    • 比较运算符:><<=>=!======!==
      ==:当两边的表达式数据类型不同时,先进行隐式转换将数据类型统一,然后比较值
      ===:不进行隐式转换,直接比较两个表达式的值
    • 逻辑运算符:&&||!
      &&:逻辑与,“一假即假,全真才真”,属于短路与,一旦前面的表达式为假,将不再判断后面的表达式的值。
      ||:逻辑或,“一真即真,全假才假”,属于短路或,一旦前面的表达式为真,将不再判断后面的表达式的值。
      不论是短路与还是短路或,返回的都是最后一个参与运算的表达式的值!
         var a=10||0 //10
         var a=0||false //false
         var a=10||1 //10
         var a=10&&0 //0
         var a=10&&1 //1
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 条件运算符:表达式1 ? 表达式2 : 表达式3
      当表达式1为真,返回表达式2的值,否则返回表达式三的值。

    四、流程控制语句

    1.条件语句

    语法一:if(表达式) 语句;
    语法二:if(表达式) 语句;else 语句;
    语法三:if(表达式) 语句;else if(表达式) 语句;else 语句;

    如果表达式的值为真,运行if后的语句(块语句),否则跳过f后的语句执行之后第一个else后的语句

    2.分支语句

    语法:switch(表达式){
    case 表达式:语句;break;
    case 表达式:语句;break;

    default:语句;}

    将switch后的表达式与case后的表达式进行匹配,如果全等,就执行匹配到的case后的语句,执行到break关键字后停止执行,结束switch语句;如果所有case语句后的表达式都不能与switch后的表达式匹配,则执行default后的语句;如果没有break关键字,当匹配到case后,后续的case无需再次匹配,直接执行后面的表达式。

    3、循环语句

    • while循环

    语法:
    while(表达式){
    语句;
    }

    判断表达式的值,如果为真,执行语句,执行完后并没有结束,而是再次判断表达式的值,知道表达式的值为假,否则会一直循环执行。
    为了避免死循环,在使用循环语句时,必须指定循环结束的条件,需要设置循环控制变量,并在每次循环结束时更新循环控制变量。

    • do…while循环

    语法:
    do{
    语句;
    }while(表达式);

    与while类似,但会先执行循环体中的语句,然后判断while后表达式的值,如果为真则一直循环执行,直到表达式的值为假才会结束循环。
    **与while循环的区别在于,当一开始条件就不成立,while不会进入循环体,而do…while却会执行一次循环体里的代码。

    • for循环

    语法:
    for(表达式1;表达式2;表达式3){
    语句;
    }

    表达式1只会在进入for循环时执行一次,通常用来对循环控制变量进行初始化。表达式2会在每次循环前计算一次,如果结果为真,则执行语句,否则结束整个循环。表达式三会在每次循环结束时计算一次,通常同来更新循环控制变量。
    三个表达式可以省略:for(;;){语句}。省略表达式1对整个循环没有影响,可以正常执行;省略表达式2会陷入死循环,一般不省略;省略表达式3,如果循环体中没有更新循环控制变量,则会陷入死循环。

    • break与continue关键字
      break:结束当前循环,不再执行break之后的循环体语句
      continue:跳过本次循环,进行下一次循环前的判断。

    五、对象

    1.object对象

    • 在JS中,万物皆对象,数组、函数、字符串甚至一个数字都可以说是一个对象,这些都可以说是广义的对象。
      这里说的object对象是指狭义的对象,即由{}包裹的对象,对象是变量的容器。对象中的变量称为属性,以key:value这样的键值对方式存在,对象中的属性名是唯一的,如果给同一个属性赋值,会覆盖原本的值。对象中可以保存函数,这些函数称为方法。对象中可以存储不同类型的任何数据
    • 创建对象

    通过字面量

    var obj = {
         name:'张三',
         age:19,
         sex:'女'
         }
    
    • 1
    • 2
    • 3
    • 4
    • 5

    通过构造函数,创建空对象

    var obj =new Object();
    
    • 1
    • 访问对象中的数据
      直接访问对象整体:obj
      访问对象中的属性:obj.name或obj[‘name’]
      如果访问对象中不存在的属性,会返回undefined;
    • 值存储和地址存储
      基本数据类型存储在栈空间,引用数据类型存储在堆空间,如果将一个对象赋值给一个变量,实际上是将对象在堆空间的存储地址赋值给了变量。一个空对象{}在堆空间也有存储地址,不等于null

    2.Array数组

    • 创建数组
      字面量:var arr = [1,2,‘a’]
      构造函数:var arr = new Array();
    • 访问数据
      通过下标值:arr[1];下标从零开始计算。
      返回数组长度:arr.length;
      在数组末尾添加一个元素:arr.push(‘b’);只有数组对象能调用该方法。
      删除并返回最后一个元素:arr.pop();t同样只有数组对象能调用该方法。

    3.Function函数

    • 函数:封装好的可以反复调用的可以实现特定功能的代码块。

    • 创建和声明一个函数
      function func(参数列表){
      语句;
      }
      参数可以有任意个,参数为零时成为无参函数,否则都是有参函数,函数声明后,需要调用才会执行函数体中的语句:
      func ();

    • 函数的返回值
      函数也是一个表达式,默认返回只是undefined,如果想要指定函数返回值,可以使用return关键字将数据返回并结束函数的执行。

    • 函数的存储类型
      函数也是一个对象,属于引用数据类型,函数名实际上保存的是函数保存的地址,可以将函数名赋值给一个变量。

    • 函数的参数传递
      值传递:实参是基本数据类型,传递给形参的是一个数值,形参改变不影响实参的值。
      引用传递:实参是引用数据类型,传递给形参的是一个地址,形参和实参访问的实际上是同一个对象,形参改变会影响到实参的值。(本质上还是值传递)
      函数声明和创建时的参数称为形参,调用时的参数称为实参

    • 作用域:对应的变量和函数可以被调用的区域,在ES6之前,JS中只有两种作用域:全局作用域,函数作用域
      作用域链:将多个作用域进行关联,形成一个隐式的链条,通过这个链条可以访问到上级作用域。
      函数外的作用域是全局作用域,其中的变量称为全局变量;函数内的作用于是函数作用域,其中的变量称为局部变量。

    • 函数调用时,隐式地传入了两个参数:this、arguments.
      this指向一个对象,根据调用的情况指向不同的对象。
      arguments接收函数调用时传入的所有实参,即使实参数量多于形参,是一个类数组。

  • 相关阅读:
    华为云云耀云服务器L实例评测 | 实例使用教学之简单使用:通过 Docker 容器化技术在华为云云耀云服务器快速构建网站
    Android 通用首页代码示例
    【宜居星球改造计划】Python 实现
    U盘启动盘 制作Linux Ubuntu CentOS系统启动盘 系统安装
    LeetCode每日一题(324. Wiggle Sort II)
    [附源码]SSM计算机毕业设计火车售票系统论文JAVA
    Docker常用命令
    hive limit分页查询、row_number()分页查询
    Java 开发5年了想转项目经理有可能吗?有pmp证书
    自媒体赚钱必备的5款工具,教你如何快速变现
  • 原文地址:https://blog.csdn.net/zero_zero_seven/article/details/126284336