0

0

JS基础前端知识点总结

小云云

小云云

发布时间:2018-02-28 13:04:21

|

1524人浏览过

|

来源于php中文网

原创

1.javascript概述(了解)

1.什么是javascript

javascript简称为js,是一种运行于js解释器/引擎中的脚本语言
js的运行环境:
1.独立安装的js解释器(node)
2.嵌入在浏览器内核中的js解释器

2.js的发展史

1.1992年Nombas公司为自己开发了一款脚本语言SciptEase
2.1995年Netscape(网景)开发了一款脚本语言LiveScrpt,后来更名javascript
3.1996年Microsoft在IE3.0版本中克隆javascript,JScript
4.1997年,javascript提交给ECMA(欧洲计算机制造商联合会)。定义ECMAScript,简称ES5,ES6

3.js组成部分

1.核心(ECMAScript)
2.DOM (Document object model)文档对象模型
3.BOM (Browser object model)浏览器对象模型

4.js的特点

1.语法类似于c,java
2.无需编译,由js解释器直接运行
3.弱类型语言
4.面向对象的

2.JavaScript的基础语法

1.使用javascript

立即学习前端免费学习笔记(深入)”;

1.搭建运行环境
  1.独立安装的JS解释器-NodeJS
    1.在命令行界面:输入node
  console.log("你好,世界");
  在控制台打印输出
  说明:js是可以独立在js解释器中运行
2.使用浏览器内核中嵌的js解释器
  浏览器内核负责页面内容的渲染,由两部分组成:
     内容排版引擎-解析:HTML/CSS
     脚本解释引擎-解析:javascript
 1.直接在Console(控制台)中输入脚本并运行
 2.将js脚本嵌入在HTML页面中执行
   1.html元素的事件中执行js脚本
      事件-onclick-鼠标单击时要执行的操作
   2.在
      
 3.js调试,F12查看错误,出错时不影响其它代码块,后续代码继续执行。
   
      
    3.通过语法规范
  1.语句:可执行的最小单元
          必须以;结束
      严格区分大小
      所有的符号必须是英文
      2.注释:
    // :单行注释
    /**/:多行注释

3.变量和常量

1.变量声明

1.声明变量
  var 变量名;
2.为变量赋值
  变量名=值;
3.声明变量是直接赋值
  var 变量名=值;
  ex:
  var uname="张无忌";
  var age=20;
 注意:
   1.允许在一条语句中声明多个变量,用逗号隔开变量名。
     var uname="韩梅梅",uage=20;
   2.如果声明变量,但未赋值,则值默认为undefined
   3.声明变量时可以不适用var,但不推荐
     uname="tom";

2.变量名的规范

1.不允许以数字开头
2.不允许使用关键词和保留关键字
3.最好见名知意
  var uname; var uage;
4.允许包含字母,数字,下划线(_),$
  var $name="Tom";
5.尽量使用小驼峰命名法
  var userName;
  var uname;
  var _uname;//下划线
  var user_name;//下划线
  var UserName;//大驼峰命名法

4.变量的使用

1.声明变量未赋值,值默认为undefined
2.使用未声明过的变量 报错
3.赋值操作
  变量名出现在=的左边,一律是赋值操作
    var uname="林妹妹";
4.取值操作
  变量只要没出现在=的左边,一律是取值操作
    var uage=30;
console.log(uage);
var num1=uage;

5.常量

1.什么是常量
  在程序中,一经声明就不允许被修改的数据就是常量。
2.语法
  const 常量名=值;
  常量名在程序中,通常采用大写形式。
  const PI=3.1415926;

5.1数据类型

1.数据类型的作用

规定了数据在内存中所占的空间
10.1 64位 8个字节
bit:位
8bit=1byte字节
1024byte=1KB 
1024KB=1MB
1024MB=1G 
1024G=1T

2.数据类型详解

1.数据类型分两大类
  原始类型(基本类型)
  引用类型
  1.原始类型
    1.Number 类型
  数字类型
  作用:可以表示32位的整数,也可以表示64位的浮点数(小数)
  整数:
     1.十进制
       10 
     2.八进制
       由0-7八个数字组成,逢八进一
       八进制中以0开始
       var num=010;
     3.十六进制
       由0-9和A-f组成,逢十六进一
          A:10
      B:11
      C:12
      D:13
      E:14
      F:15
       十六进制中以0X开始
      浮点数:又称小数
    小数点计数法:12.58  
    指数计数法:3.4e3(3.4*10的3次方)
2.String类型
  字符串类型
  作用:表示一系列的文本字符数据,如:姓名,性别,住址...
  字符串中的每个字符,都是由Unicode码的字符,标点和数字组成。
  Unicode码:每个字符在计算机中都有一个唯一的编码表示该字符,
  该码就是unicode码(他是十六进制)
     1.查找一个字符的unicode码:
     "李".charCodeAt();
     //10进制输出

     "李".charCodeAt().toString(2);
     //二进制输出

     "李".charCodeAt().toString(16);
     //十六进制

       李的unicode码是:674e
     2.如何将674e转换为汉字?
        用\u
       ex:
        var str="\u674e";
    console.log(str);//结果是“李”

    汉字的Unicode码的范围:
    \u4e00~\u9fa5
     3.特殊字符需要转义字符
       \n: 换行
       \t: 制表符(缩进)
       \": "
       \': '
       \\: \
3.Boolean类型
  布尔类型
  作用:在程序中表示真或假的结果
  取值:
     true或false
  var isBig=true;
  var isRun=false;
  在参与到数学运算时,true可以当成1做运算,false可以当做0做运算。
  var res=25+true; //结果为26
    4.Undefined类型
  作用:表示使用的数据不存在
  Undefined类型只有一个值,即undefined当声明的变量未赋值(未初始化)时,
  该变量的默认值就是undefined.
5.Null类型
  null用于表示不存在的对象。
      Null类型只有一个值,即null,如果函数或方法要返回的是对象,
      找不到该对象,返回的就是null。

5.2数据类型的转换

1.隐式(自动)转换
  不同类型的数据在计算过程中自动进行转换
  1.数字+字符串:数字转换为字符串
    var num=15;
var str="Hello";
var res=num+str; //结果:15Hello
  2.数字+布尔:将布尔转换为数字true=1,false=0
    var num1=10;
var isSun=true;
var res1=num1+isSun;//结果:11
  3.字符串+布尔:将布尔转换为字符串
    var str1="Hello";
var isSun1=true;
var res2=str1+isSun1;//结果:Hellotrue
  4.布尔+布尔:将布尔转换为数字
    true=1,false=0;
    var isSun2=true;
var isSun3=flase;
var res=isSun2+isSun3;//结果1
2.强制转换 -转换函数
  1.toString()
    将任意类型的数据转换为字符串
语法:
  var num=变量.toString();
  ex:
  var num=15;
  var str=num.toString();
  console.log(typeof(str));
  2.parseInt()
    将任意类型的数据转换为整数
如果转换不成功,结果为NaN(Not a Number)
语法:var result=parseInt(数据);
  3.parseFloat()
    将任意类型的数据转换为小数
如果转换不成功,结果为NaN
语法:var result=parseFloat(数据);
  4.Number()
    将任意类型数据转为Number类型
注意:如果包含非法字符,则返回NaN
语法:var result=Number(数据);

6.运行符和表达式

1.什么是表达式

由运算符连接操作数所组成的式子就是表达式。
ex:
  15+20
  var x=y=40
任何一个表达式都会有结果。

2.运算符

1.算术运算符
  +,-,*,/,%,++,--

  5%2=1;
  ++:自增运算,只做+1操作
  ++在前:先自增,再运算;
  ++在后:先运算,再自增;
  ex:
    var num=5;
console.log(num++);//打印5,变为6
console.log(++num);//变为7,打印7

ex:
    var num=5;
             5   (6)6   6(7)    (8)8
    var res=num+ ++num +num++ + ++num +num++ +num;  
  8(9)   9
结果:42
2.关系运算符(比较)
  >,<,>=,<=,==,===(全等),!=,!==(不全等)
  关系运算的结果:boolean类型(true,false)
  问题:
    1. 5 > "10" 结果:false
   关系运算符两端,只要有一个是number的话,另外一个会隐式转换为number类型,再进行比较。
2."5">"1 0" 结果:true
  "5".charCodeAt(); //53
  "1".charCodeAt(); //49
  "张三丰" > "张无忌" 结果:false
    19977  >   26080
3."3a" > 10 结果:false
  Number("3a")--->NaN
  注意:
    NaN与任何一个数据做比较运算时,结果都是false.
    console.log("3a">10); false
    console.log("3a"==10); false
    console.log("3a"<10); false
    isNaN()函数:
       语法:isNaN(数据);
       作用:判断指定数据是否为非数字,如果不是数字,返回值为true,是数字的话返回的值为false
       console.log(isNaN("3")); //false
       console.log(isNaN("3a")); //ture 

       console.log("3a"!=10);//true
3.逻辑运算符
  !,&&,||

  !:取反
  &&:并且,关联的两个条件都为true,整个表达式的结果为true
  ||:或者,关联的两个条件,只要有一个条件为true,整个表达式的结果就为true

  短路逻辑:
     短路逻辑&&:
     当第一个条件为false时,整体表达式的结果就为false,不需要判断第二个条件
     如果第一个条件为true,会继续判断或执行第二个条件
 短路逻辑||:
     当第一个条件为true时,就不再执行后续表达式,整体结果为true。
     当第一个条件为false时,继续执行第二个条件或操作。

4.位运算符
  <<,>>,&,|,^

  右移是把数变小,左移是把数变大
  &:按位与,判断奇偶性
     任意数字与1做按位与,结果为1,则为奇数,结果为0,则为偶数。
     var num=323;
 var result=num & 1
 console.log(result); //结果为1
  |:按位或,对小数取整
     将任意小数与0做按位或,结果则取整数部分。

  ^:按位异或,用于交换两个数字
      二进制位数,逐位比较,不同则为1,相同则为0
   a=a^b;
   b=b^a;
   a=a^b;
5.赋值运算符和扩展赋值运算符
  1.赋值运算 =
    var uname="TOM";
  2.扩展赋值运算符
    +=,-=,*=,/=,%=,^=...
a=a+1 a+=1;a++;++a
a=a^b
a^=b
6.条件(三目)运算符
  单目(一目)运算符,只需要一个操作数或表达式
  ex: a++,b--,!isRun
  双目(二元)运算符,需要两个操作数或表达式
   +,-,*,/,%,>,<,>=,<=,==,!=,===,!==,&&,||,&,|,^
  三目(三元)运算符,需要三个操作数或表达式
     条件表达式?表达式1:表达式2;
        先判断条件表达式的值,
    如果条件为true,则执行表达式1的操作
    如果条件为false,则执行表达式2的操作
  ex:成绩大于60及格,否则,输出不及格

7.函数-function

1.什么是函数

函数,function,也称为方法(method)
函数是一段预定义好,并可以被反复执行的代码块。
   预定义:提前定义好,并非马上执行。
   代码块:可以包含多条可执行的语句
   反复执行:允许被多次调用
函数-功能
   parseInt();
   parseFloat();
   Number();
   console.log();
   alert();
   document.write();

2.定义和使用函数

1.普通函数的声明和调用(无参数无返回值)
  1.声明
    function 函数名(){
   //函数体
     若干可执行的语句
  
}
  2.调用函数
    在任意javascript合法的位置处通过 函数名(); 对函数进行调用。
 

2.带参函数的声明和调用
  1.声明
    function 函数名(参数列表){
   //函数体
}
参数列表:可以声明0或多个参数,多个参数间用逗号隔开
声明函数时,声明的参数,称之为“形参”
 2.调用
   函数名(参数值列表);
   注意:调用函数时,传递的参数数值,称之为“实参”。
         尽量按照声明函数的格式进行调用
3.带返回值函数声明和调用
  1.声明
    function 函数名(参数){
   //函数体
   return 值;
   //return关键字,程序碰到return关键词,就立马跳出并且把值带出去
}
注意:最多只能返回一个值
  2.调用
    允许使用一个变量接收函数的返回值
    var result=函数名(实参);

8.作用域

1.什么是作用域
  作用域表示的是变量或函数的可访问范围。
  JS中的作用域分两种:
     1.函数作用域
   只在函数范围内有效
 2.全局作用域
   代码的任何位置都有效

2.函数作用域中变量

 又称为局部变量,只在声明的函数中有效
 ex:
   function test(){
     var num=10;
   }

3.全局作用域中的变量

 又称为全局变量,一经声明,任何位置都能用
 1.不在function中声明的变量,为全局变量
 2.声明变量不使用var,无论任何位置声明,都是全局变量(不推荐)

 注意:
   全局变量和局部变量冲突时,优先使用局部变量。
 3.变量的声明提前
   1.什么是声明提前
     在JS程序正式执行之前,function声明的函数,
     会将所有var声明的变量,都预读(声明)到所在作用域的顶部,但赋值还是保留在原位。

9.按值传递

1.什么是按值传递

原始(基本)类型的数据(number,string,bool),在做参数传递时,
都是按照“值传递”的方式进行传参的。
值传递:真正传递参数时,实际上传递的是值的副本(复制出来一个值),
而不是原始值。

2.函数的作用域

1.分为两种
  1.局部函数
    在某个function中声明的函数。
  2.全局函数
    在最外层(
                

相关专题

更多
云朵浏览器入口合集
云朵浏览器入口合集

本专题整合了云朵浏览器入口合集,阅读专题下面的文章了解更多详细地址。

0

2026.01.20

Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

20

2026.01.20

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

62

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

87

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

39

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

10

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

13

2026.01.19

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

19

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

160

2026.01.18

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号