JS基础总结

程序员文章站 2022-05-07 21:53:39

...

JS基础总结

一：JS概述和JS作用和组成：

JavaScript就是一种在浏览器端执行的脚本语言。
JS是动态语言：在运行时确定数据类型。
<1>
Javascript的作用:
HTML只是描述网页长相的标记语言，没有计算、判Js断能力，如果所有计算、判断（比如判断文本框是否为空、判断两次密码是否输入一致）
都放到服务器端执行的话网页的话页面会非常慢、用起来也很难用，对服务器的压力也很大，因此要求能在浏览器中执行一些简单的运算、判断。
JavaScript就是一种在浏览器端执行的脚本语言。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。、
<2>
JavaScript基本组成
Dom(文档对象模型)
(由著名的w3c制定。封装好的一些函数库在html 和 xml中都是用dom。
DOM：Document Object Model)

二：JS语法特点和使用方法：

<1>语法特点
a. 大小写敏感 :JavaScript严格区分大小写。(n与N是两个不同的变量。)
b. 弱类型语言,声明变量用var:var num=10;num=true;可以
c. 字符串可以用单引号:var msg=‘坚持不泄’
d. 每句话后面分号:
虽然如果语句结束后可以不加分号,建议有个好的代码风格,手动加“分号”的好处：1>可以放心的做js压缩（压缩多余空白）2>提高代码可读性.
e. Js的注释，与C#、Java的相同（//单行注释(推荐)、/* 多行注释 */
很多语法与Java语言或C#语言类似。有Java语言或C#语言编程基础的同学学习JavaScript语法会很容易上手。

<2>使用方法
a. 直接写在原网页中:
网页中的JavaScript代码应该放到<script></script>标签中，<script>标签可以放到<head>、<body>等任意位置，并且一个页面可以有不止一对<script> </script>标签。放到<head>中的<script>在body加载之前就已经运行了。写在body中的<script>是随着页面的加载而一个个执行的。
b. 外部导入:
导入外部JavaScript文件：除了可以在页面中声明JavaScript以外，还可以将JavaScript写到单独的js文件中，然后在页面中引入：<script src=“test.js”type=“text/javascript”></script>。
声明到单独的js文件的好处是多页面也可以共享、减小网络流量。
可以将导入外部文件的<script>标签写在文档最后，提高用户体验。

<3>注意：
a. 在<script></script>标签中不要出现’</script>’元素。
Javascript如果遇到错误，有错误的<script></script>中的代码不会执行，但是不会影响后面的而其他<script></script>代码和html的显示。

三：JS基础语法

<1>1 JavaScript变量声明

变量命名规则:以字母、下划线或$开头，中间可以包括字母、数字、下划线或$。（变量命名中多了一个$）
JavaScript中即可以使用双引号声明字符串，也可以使用单引号声明字符串。主要是为了方便和html集成，避免转义符的麻烦。
JavaScript是动态类型，因此：
var i=10;i=‘test’是合法的。
var m,n,x,y=10;是合法的。

<2>2 JavaScript数据类型

Boolean（布尔）、Number（数字）、String（字符串）、Undefined（未定义）、Null（空对象）、Object（对象类型）、Function
引用类型：对象、数组、函数。
原始数据类型：数值、布尔值、null 、字符串
值类型的变量不能动态添加成员。
引用类型的对象可以动态添加成员。
变量是不是对象就看后面有没有new。

-------------
undefined与其他值计算得到的结果不是我们想要的。
一个变量声明了，没有初值那么结果就是undefined.属于未知状态
一个变量赋值为null。表示的是尚未存在的对象.

-------------
.typeof可以做什么?
显示每一个变量的类型。typeof 关键字。
//alert(typeof(t1));二者等价
alert(typeof t1);

<3>3 typeof 和 instanceof 做什么用

<1>typeof可以做什么?
显示每一个变量的类型。typeof  关键字。
//alert(typeof(t1));二者等价
alert(typeof  t1);

<2>Instanceof可以做什么?
instanceof 前面都是引用数据类型，不是基本数据类型。
该关键字，用来判断数据类型。

    <script type="text/javascript">
        var time = new Date();
        alert(time instanceof Date);// true
        alert(time instanceof Object);//true
        //instanceof 前面都是引用数据类型，不是基本数据类型。
        
        var t = 2;
        alert(t instanceof Number);//false 因为前面 t 是基本数据类型。

        var s1 = 'hello';
        var s2 = new String('hello everyone!');
        alert(typeof s1);//string
        alert(typeof s2);//object
    </script>

<4>4 JavaScript中的“==”与“===”

<script type="text/javascript">
        //var n1 = '10';
        //var n2 = new Number(10);

        //alert(n1 == n2);//true;判断值相等
        //alert(n1===n2);//false；既判断值得相等也判断类型的相等
        alert(undefined == null);//true;值都不可用
        alert(undefined===null);//false;z值不相同，类型也不一样。
</script>

特殊情况:
注：switch判断时，是“全等于”，===

<5>5 JavaScript中判断变量是否可用

JavaScript中判断已声明变量、参数是否初始化(可用)的方法：
假设已有变量x：
if (typeof(x) !=’undefined’&& x!=null) 
{
alert("可用");
}
if(x)
{
alert(‘变量可用！’);
}
 else 
{
alert(‘变量不可用！’);
 } //null、undefined、’’、0都认为是false.
当x声明但没有赋值，或x为null，或x为0时，都表示不可用！// if(x),返回false
推荐用最后一种方法。但如果x有可能没有声明，则只能用typeof判断（否则会报错）。
经常会遇到的一个场景：if语句的小括号中直接写一个变量。各种值与Boolean之间的关系。

<6>6 JavaScript转义

JavaScript中字符串同样需要转义符。
想在页面输出：
C:\Users\Administrator\Desktop\代码\logo.png如何做?
常见转义符：
\t、\n、\’、\”、\\
if-else、for、while、do-while、switch、continue、break的用法都非常的简单
for循环：for(var i=0;i<10;i++){ …  }
注：switch判断时，是“全等于”，===
案例:通过switch判断变量n=10是数字还是字符串显示给与用户.

<7>7 类型转换

parseInt(arg)将指定的字符串，转换成整数
parseFloat(arg)将指定的字符串，转换成浮点数
Number(arg)把给定的值(任意类型)转换成数字（可以是整数或浮点数）；转换的是整个值，而不是部分值。如果该字符串不能完全转换为整型，则返回NaN。（Not a Number）
isNaN(arg)，判断arg是否为一个非数字（NaN）,NaN与NaN也不相等。
String(arg)把给定的值(任意类型)转换成字符串；
Boolean(arg)把给定的值(任意类型)转换成 Boolean 型；

<8>8 函数

<1>JavaScript中声明函数的方式：
不需要声明返回值类型、参数类型。函数定义以function开头。
JavaScript中不像C#和java那样要求所有函数都有返回值没有返回值就是undefined。
JavaScript中没有方法重载。
易错：自定义函数名不要和js内置、dom内置方法重名，比如selectAll、focus等函数名不要用。
//不要与系统函数重名。(在单击事件中调用自己定义的focus方法，有问题。与系统的focus()方法重名了)
一般在js中编写大括号都是直接跟在后面。
alert()函数是弹出一个消息窗口。

<2>匿名函数
var f1=function(p1,p2){ return p1+p2; };//将函数赋值给一个变量
匿名函数没法调用,只能赋值给一个变量,由于是赋值语句,后面要加分号
(function(p1,p2){alert(p1+p2);})(20,30);
这种匿名函数的用法在jQuery中的非常多。

<9>9 arguments对象

<!--arguments的使用。arguments实际上是参数数组。-->
  <script type="text/javascript">
      //(1)
      function f() {
          var len = arguments.length;//拿到参数数组的长度
          var sum = 0;
          for (var i = 0; i < len; i++) {
              sum+=arguments[i];
          }
          return sum;
      }
      alert(f(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));//调用使用，传入多个参数

      //(2)
      //看下面的灵活使用功能案例
      function f2() {  //还可以写成这样：function f2(name)
          var len2 = arguments.length;//参数数组的长度
          var sum2 = 0;
          for (var i2 = 1; i2 < len2; i2++)//计算从下表从 1 开始
          {
              sum2 += arguments[i2];
          }
          //拼接输出
          return arguments[0] + sum2;//对应此处改为：return name+sum2;
      }
      //调用方法f2()
      alert(f2("计算结果为:",1,2,3,4,5,6,7,8,9,10));


      //(3)案例三
      //姓名，年龄
      function f3(name, age) {
          if (!age) {
              age = 18;
          }
          alert('名字是:'+name+'\n'+'年龄是:'+age);
      }
      //调用，如果没有传入年龄，把年龄默认设置为 18
      f3('晓明');
      f3('晓明',28);
  </script>

<10>10 JavaScript变量的作用域

默认如果直接在script标签中定义变量，则属于“全局作用域范围”(全局执行环境)，即属于window对象。
全局作用域范围的变量直到网页关闭或浏览器关闭时才释放资源
一个页面中的多个<script>标签中的变量可以互相访问。
JS有垃圾回收机制，会定时对可释放资源的变量回收。将变量设置为null则表示可以被回收了。
注意：在函数内部的for或者while或者if等块中声明的变量，作用域范围也是整个函数之内，
所以为了避免混淆，不如直接在函数内一开始的时候就声明这些变量。var n=10;function ff(){n++;}; ff();alert(n);
变量使用前可以不用var声明，这样的变量会变认为是“全局变量”（不推荐）
结论：JS中没有块级作用域范围。

<11>11 String的常用方法

length属性：获取字符串的字符个数。
charAt(index)方法:获取指定索引位置的字符,索引从0开始
indexOf(‘e’,index)方法：获取指定字符串第一次出现的位置。startIndex表示从第几个开始搜索。
split(‘分隔符’,limit);根据分隔符将一个字符串返回为一个数组。limit表示要返回的数组的最大长度（可自定义）。
substr(startIndex,len)从startIndex开始，截取len个字符。
substring(startIndex,stopIndex)从startIndex开始，截取到stopIndex位置,不包括stopIndex所在的字符。
toUpperCase()转换大写、toLowerCase();转换小写

<12>12 Array对象使用

<1>声明
JavaScript中的Array对象就是数组，首先是一个动态数组，而且是一个像C#、Java中“数组、List、HashMap/Dictionary”等的超强综合体。
数组的使用方式：
var names = new Array();//无需初始化长度，动态
names[0] = “乐乐";
names[1] = “老杨老湿";
names[2] = “杜教授";


<2>使用
循环遍历数组（forin循环）
使用forin循环可以遍历对象的所有属性。forin循环其实遍历的还是key.
数组的其他几种声明方式：
new Array(); 
new Array(5);表示该数组长度是5 
new Array(10,20,30);
var arr = [90,true,100];(推荐。)
JS中的Array是数组还是键值对
字典风格的简化创建方式：
var arr = {“帅”:”shuai”,“哥”:”ge”};//json格式。
Dictionary风格数组的length为0。所以不能用for遍历。
键值对中可以有function,键值对做参数,可以体现一个参数多个值
键值对是可以作为参数进行传递。

上一篇：理解Js中的继承看这篇博客时务必画出子对象实例子对象原型子对象构造函数父对象实例父对象原型父对象构造函数之间的关系

下一篇： js 前端缓存总结

JS基础总结

JS基础总结

一：JS概述和JS作用和组成：

二：JS语法特点和使用方法：

三：JS基础语法

c#在程序中定义和使用自定义事件方法总结

基于JS实现翻书效果的页面切换样式

区块链的基础设施太差？Spacebook有办法

js介绍，入门，js引入，变量，值类型，运算符等知识学习

js实现截图保存图片功能的代码示例

js模态对话框使用方法详解

js 将input框中的输入自动转化成半角大写（税号输入框）

Js apply方法详解

KVM虚拟机技术学习总结

Vue.js组件tab实现选项卡切换