JavaScript 笔记 之 基础语法

runoob | | 访问(39)

  JavaScript 对大小写是敏感的。JavaScript 使用 Unicode 字符集。Unicode 覆盖了所有的字符,包含标点等字符

  一、JavaScript 字面量

  1、数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)

3.14
1001
123e5

  2、字符串(String)字面量 可以使用单引号或双引号:

"John Doe"
'John Doe'

  3、表达式字面量 用于计算:

5 + 6
5 * 10

  4、数组(Array)字面量 定义一个数组:

[40, 100, 1, 5, 25, 10]

  5、对象(Object)字面量 定义一个对象:

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

  6、函数(Function)字面量 定义一个函数:

function myFunction(a, b) { return a * b;}

  二、JavaScript 变量

  JavaScript 使用关键字 var 来定义变量,使用等号来为变量赋值:

var x, length
x = 5
length = 6

  变量可以通过变量名访问。在指令式语言中,变量通常是可变的。字面量是一个恒定的值。

  变量是一个名称。字面量是一个值。

Value = undefined

  在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined。

  在执行过以下语句后,变量 carname 的值将是 undefined:

var carname;

  如果重新声明 JavaScript 变量,该变量的值不会丢失:

  在以下两条语句执行后,变量 carname 的值依然是 "Volvo":

var carname="Volvo";
var carname;

  局部 JavaScript 变量

  在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕,本地变量就会被删除。

  全局 JavaScript 变量

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

  JavaScript 变量的生存期

  JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

  向未声明的 JavaScript 变量分配值

  如果您把值赋给尚未声明的变量,该变量将被自动作为 window 的一个属性。

  这条语句:

carname="Volvo";

  将声明 window 的一个属性 carname。非严格模式下给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明,可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义

  HTML 中的全局变量

  在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

// 此处可使用 window.carName
function myFunction() { carName = "Volvo"; }

  三、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 通过对象字面量赋值

  值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。

  引用数据类型:对象(Object)、数组(Array)、函数(Function)。

  注:Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。

  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):

var cars=["Saab","Volvo","BMW"];

  JavaScript 对象

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

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

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

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

  Undefined 和 Null

  Undefined 这个值表示变量不含有值。

  可以通过将变量的值设置为 null 来清空变量。

cars=null;
person=null;

  声明变量类型

  当您声明新变量时,可以使用关键词 "new" 来声明其类型:

var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;

  JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。

  四、JavaScript 字符串

  在字符串中可以使用转义字符转义的特殊字符:

代码	输出
\'	单引号
\"	双引号
\\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

  字符串可以是对象

  通常, JavaScript 字符串是原始值,可以使用字符创建: var firstName = "John"

  但我们也可以使用 new 关键字将字符串定义为一个对象: var firstName = new String("John")

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object

  不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用:

var x = "John";              
var y = new String("John");
(x === y) // 结果为 false,因为 x 是字符串,y 是对象

  注:=== 为绝对相等,即数据类型与值都必须相等

  字符串属性

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

  字符串方法

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

  五、JavaScript typeof, null, 和 undefined

  typeof 操作符

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

typeof "John"                 // 返回 string 
typeof 3.14                   // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object

  在JavaScript中,数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。

  在 JavaScript 中 null 表示 "什么都没有"。null是一个只有一个值的特殊类型。表示一个空对象引用。用 typeof 检测 null 返回是object。

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

var person = null;// 值为 null(空), 但类型为对象

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

var person = undefined;// 值为 undefined, 类型为 undefined

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

var person;// 值为 undefined(空), 类型是undefined

  任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined.

  undefined 和 null 的区别

  ull 和 undefined 的值相等,但类型不等:

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

  六、JavaScript 错误 - throw、try 和 catch

var txt=""; 
function message() 
{ 
    try { 
        adddlert("Welcome guest!"); 
    } catch(err) { 
        txt="本页有一个错误。\n\n"; 
        txt+="错误描述:" + err.message + "\n\n"; 
        txt+="点击确定继续。\n\n"; 
        alert(txt); 
    } 
}

  Throw 语句

  throw 语句允许我们创建自定义错误。正确的技术术语是:创建或抛出异常(exception)。如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;
    }
}

  七、JavaScript 变量提升

  JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。

  以下两个实例将获得相同的结果:

// 实例 1
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x
var x; // 声明 x
// 实例 2
var x; // 声明 x
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x

  要理解以上实例就需要理解 "hoisting(变量提升)"。

  变量提升:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

  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

  实例 2 的 y 输出了 undefined,这是因为变量声明 (var y) 提升了,但是初始化(y = 7) 并不会提升,所以 y 变量是一个未定义的变量。