js基础

最新推荐文章于 2023-11-03 10:06:08 发布

QuellanAn

最新推荐文章于 2023-11-03 10:06:08 发布

阅读量364

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/zlf520520/article/details/52313495

JavaScript 数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

    var length = 16;                                  // Number 通过数字字面量赋值 
   
 var points = x * 10;                              // Number 通过表达式字面量赋值
   
 var lastName = "Johnson";                         // String 通过字符串字面量赋值
   
 var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值 
   
    var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

JavaScript 对大小写敏感。

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时，请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样，变量 myVariable 与 MyVariable 也是不同的。

JavaScript 语句标识符

JavaScript 语句通常以一个语句标识符为开始，并执行该语句。

语句标识符是保留关键字不能作为变量名使用。

下表列出了 JavaScript 语句标识符 (关键字) ：

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do ... while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if ... else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：

      var person="Hege";
     
 var person = "Hege";

JavaScript 变量

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript 数据类型

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

实例

      var x;               // x 为 undefined
     
 var x = 5;           // 现在 x 为数字 
     
      var x = "John";      // 现在 x 为字符串

JavaScript 数组

下面的代码创建名为 cars 的数组：

      var cars=new Array();
     
 cars[0]="Saab";
     
 cars[1]="Volvo";
     
 cars[2]="BMW";

或者 (condensed array):

      var cars=new Array("Saab","Volvo","BMW");
    

或者 (literal array):

JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

      var person={firstname:"John", lastname:"Doe", id:5566};
    

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行：

      var person={
     
 firstname : "John",
     
 lastname  : "Doe",
     
 id        :  5566
     
 };

对象属性有两种寻址方式：

实例

      name=person.lastname; 
     
      name=person["lastname"];

源代码：

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

var person=

{

firstname : "John",

lastname : "Doe",

id : 5566

};

document.write(person.lastname + "<br>");

document.write(person["lastname"] + "<br>");

</script>

</body>

</html>

对象方法

对象的方法定义了一个函数，并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。

该实例访问了 person 对象的 fullName() 方法:

源代码：

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<p>创建和使用对象方法。</p>

<p>对象方法作为一个函数定义存储在对象属性中。</p>

var person = {

firstName: "John",

lastName : "Doe",

id : 5566,

fullName : function()

{

return this.firstName + " " + this.lastName;

}

};

document.getElementById("demo").innerHTML = person.fullName();

</script>

</body>

访问对象方法

你可以使用以下语法创建对象方法：

 
     methodName : function() { code lines }
    

你可以使用以下语法访问对象方法：

 
     objectName.methodName()
    

通常 fullName() 是作为 person 对象的一个方法， fullName 是作为一个属性。

有多种方式可以创建，使用和修改 JavaScript 对象。

同样也有多种方式用来创建，使用和修改属性和方法。

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量

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

JavaScript 变量的生存期

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

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

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

向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

这条语句：

      carname="Volvo";
    

将声明一个全局变量 carname，即使它在函数内执行。

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

单引号:

      <
     some-HTML-element some-event=
     '
     some JavaScript
     '>
    

双引号:

      <
     some-HTML-element some-event=
     "
     some JavaScript
     ">
    

在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码):

实例

      <button onclick='getElementById("demo").innerHTML=Date()'>现在的时间是??</button>
    

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

字符串属性

属性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

字符串方法

Method	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

JavaScript Break 和 Continue 语句

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

typeof 操作符

你可以使用 typeof 操作符来检测变量的数据类型。

Null

在 JavaScript 中 null 表示 "什么都没有"。

null是一个只有一个值的特殊类型。表示一个空对象引用。

	用 typeof 检测 null 返回是object。

你可以设置为 null 来清空对象:

var person = null ;

Undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。

typeof 一个没有值的变量会返回 undefined。

Undefined 和 Null 的区别

typeof undefined             
           // undefined
 typeofnull// object
 null === undefined           
           // false
            null == undefined            
            // true
           

什么是正则表达式？

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符，或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

语法

            /
           pattern/
           modifiers;
          

实例：

            var patt = /w3cschool/i
          

实例解析：

/w3cschool/i 是一个正则表达式。

w3cschool 是一个模式 (用于检索)。

i 是一个修饰符 (搜索不区分大小写)。

使用字符串方法

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

search() 方法使用正则表达式

实例

使用正则表达式搜索 "w3cschool" 字符串，且不区分大小写：

 
     var str = 
     "Visit w3cschool";
     
     var n = str.search(/w3cschool/i);

输出结果为：

6

search() 方法使用字符串

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：

实例

检索字符串中 "w3cschool" 的子串：

var str = 
     "Visit w3cschool!"; 
     
      var n = str.search(
      "w3cschool");
     

replace() 方法使用正则表达式

实例

使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 w3cschool :

 
     var str = 
     "Visit Microsoft!";
     
     var res = str.replace(/microsoft/i, 
     "w3cschool");

结果输出为:

      Visit w3cschool!
    

replace() 方法使用字符串

replace() 方法将接收字符串作为参数：

 
     var str = 
     "Visit Microsoft!";
     
     var res = str.replace(
     "Microsoft", 
     "w3cschool");

你注意到了吗？

	正则表达式参数可用在以上方法中 (替代字符串参数)。正则表达式使得搜索功能更加强大(如实例中不区分大小写)。

使用 RegExp 对象

在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

使用 test()

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

以下实例用于搜索字符串中的字符 "e"：

实例

 
     var patt = /e/;
     
 patt.test(
     "The best things in life are free!");

字符串中含有 "e"，所以该实例输出为：

      true
    

使用 exec()

exec() 方法是一个正则表达式方法。

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

以下实例用于搜索字符串中的字母 "e":

Example 1

      /e/.exec(
     "The best things in life are free!");
    

字符串中含有 "e"，所以该实例输出为:

e

JavaScript 变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

JavaScript 初始化不会提升

JavaScript 只有声明的变量会提升，初始化的不会。

以下两个实例结果结果不相同：

实例 1

 
       var x = 5; // 初始化 x
 var y = 7; // 初始化 y
 
 elem = document.getElementById("demo"); // 查找元素 
 elem.innerHTML = x + " " + y;           // 显示 x 和 y

实例 2

var x = 5; // 初始化 x
 
 elem = document.getElementById("demo"); // 查找元素 
 elem.innerHTML = x + " " + y;           // 显示 x 和 y
 
 
        var y = 
        7; 
        // 初始化 y
       

两个示例的结果不同。

空格与运算符

通常运算符 ( = + - * / ) 前后需要添加空格:

实例:

 
     var x = y + z;
     
     var values = [
     "Volvo", 
     "Saab", 
     "Fiat"];

代码缩进

通常使用 4 个空格符号来缩进代码块：

函数:

 
     function toCelsius(fahrenheit) {
     
     return (
     5 / 
     9) * (fahrenheit - 
     32);
     
 }

	不推荐使用 TAB 键来缩进，因为不同编辑器 TAB 键的解析不一样。

命名规则

一般很多代码语言的命名规则都是类似的，例如:

变量和函数为驼峰法（ camelCase）
全局变量为大写 (UPPERCASE )
常量 (如 PI) 为大写 (UPPERCASE )

变量命名你是否使用这几种规则： hyp-hens, camelCase, 或 under_scores ?

HTML 和 CSS 的横杆(-)字符:

HTML5 属性可以以 data- (如：data-quantity, data-price) 作为前缀。

CSS 使用 - 来连接属性名 (font-size)。

	- 通常在 JavaScript 中被认为是减法，所以不允许使用。

下划线:

很多程序员比较喜欢使用下划线(如：date_of_birth), 特别是在 SQL 数据库中。

PHP 语言通常都使用下划线。

帕斯卡拼写法(PascalCase):

帕斯卡拼写法(PascalCase) 在 C 语言中语言较多。

驼峰法：

JavaScript 中通常推荐使用驼峰法，jQuery 及其他 JavaScript 库都使用驼峰法。

	变量名不要以 $ 作为开始标记，会与很多 JavaScript 库冲突。