Web|后端同学也要知道的JS基础总结

不甩锅的码农

已于 2022-02-08 22:35:07 修改

阅读量1.3k

点赞数 2

分类专栏： Web&JavaWeb 文章标签： javascript JS基础总结前端 js

于 2017-04-30 23:52:16 首次发布

本文链接：https://blog.csdn.net/BiLaHePan/article/details/71037344

版权

Web&JavaWeb 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

（3） typeof 和 instanceof 作用

（4）JavaScript中的“==”与“===”

（5）JavaScript 中判断变量是否可用

（10）JavaScript 变量的作用域

（11）String 的常用方法

（12）Array 对象使用

1 JS 概述和JS作用及组成

JavaScript (以下简称 JS) 是一种在浏览器端执行的脚本语言。
JS 是动态语言：在运行时确定数据类型。

（1）Javascript 的作用

HTML只是描述网页长相的标记语言，没有计算、判断能力，如果所有计算、判断（比如判断文本框是否为空、判断两次密码是否输入一致）都放到服务器端执行的话，网页页面会非常慢、用起来也很难用，对服务器的压力也很大，因此要求能在浏览器中执行一些简单的运算、判断。
JavaScript 就是一种在浏览器端执行的脚本语言。
可以直接嵌入HTML页面，一般写成单独的 JS 文件有利于结构和行为的分离。
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如 Windows、Linux、Mac、Android、iOS等）。

（2）JavaScript 基本组成

Dom(文档对象模型)
(由著名的 w3c 制定。封装好的一些函数库在 HTML 和 XML 中都是用 Dom。
Dom(Document Object Model)

2 JS 语法特点和使用方法

（1）语法特点

a. 大小写敏感：JavaScript 严格区分大小写。(n与N是两个不同的变量。)
b. 弱类型语言，声明变量用 var:var num=10; num=true; 都可以。
c. 字符串可以用单引号:var msg=‘坚持’。
d. 每句话后面分号:语句结束后可以不加分号，建议加分号，好处是一方面可以放心的做 JS 压缩（压缩多余空白），另一方面提高代码可读性。
e. JS 的注释，与 C#、Java 的相同（//单行注释(推荐)、/*多行注释 */
f.语法特点，很多语法与 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 文件的好处是多页面也可以共享、减小网络流量。

（3）注意

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

3 JS 基础语法

（1） JavaScript 变量声明

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

（2）JavaScript数据类型

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

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

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

（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）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）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）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）类型转换

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

（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）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）JavaScript 变量的作用域

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

（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）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,键值对做参数,可以体现一个参数多个值
键值对是可以作为参数进行传递。