在 HTML 中,JavaScript 代码必须位于 标签之间.
而 script 标签可放于head或body的任意地方或者进行外部引用.
输出的四种方式
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
仅用于测试 - 使用 innerHTML 写入 HTML 元素
document.getElementById(id).innerHTML = ;
- 使用 console.log() 写入浏览器控制台
语句规范
以分号结尾;运算符左右加空格;代码控制在80字符内,最好在运算符后折行;
var x,y,z; x = 7; y = 2; z = x + y;
var
关键词 创建一个新变量,变量存储数据值
xyz 是变量的命名 记标识符,创建多个变量用逗号隔开即可
标识符对大小写十分敏感,曾有三种用于多个单词连接而成一个标识符的写法
1.a-b(均为小写) 2.a_b(均为小写)3.ab(每个单词首字母大写)
而我们更推荐ab(只b单词的首字母大写)
此外标识符的命名也有限制:
- 首字符必须是字母、下划线(-)或美元符号($),但更推荐以字母开头
- 名称包含字母、数字、下划线或美元符号
- 保留字(比如 JavaScript 的关键词)无法用作变量名称
= 号
用于为变量赋值
作用域
关键词:let 和 const
全局作用域
全局(在函数之外)声明的变量拥有全局作用域,可以在JavaScript 程序中的任何位置访问
函数作用域
(函数内)声明的变量拥有函数作用域,只能在它们被声明的函数内访问
块作用域
let
关键词
{ let x = 10; } // 此处不可以使用 x //在块 {} 内声明的变量无法从块外访问
var x = 10; // 此处 x 为 10 { let x = 6; // 此处 x 为 6 } // 此处 x 为 10
var let 混合使用,块中重新声明的变量不会重新声明块外的变量
作用域
JavaScript-------JavaScript 环境
HTML------window
关键词:var与let
var定义的全局变量 属于 window 对象
let 定义的全局变量 不属于 window 对象
重新声明
只能 var 覆盖 var或在不同作用域内通过 let 重新声明
关键词 const
通过 const 定义的变量与 let 变量类似,但不能重新赋值
const 变量必须在声明时赋值
const PI = 3.14159265359;
它没有定义常量值,它定义了对值的常量引用。
eg:
// 创建 const 对象: const car = {type:"porsche", model:"911", color:"Black"}; // 您可以更改属性: car.color = "White"; // 您可以添加属性: car.owner = "Bill"; //但无法重新为常量对象赋值 car = {type:"Volvo", model:"XC60", color:"White"}; // ERROR
重新声明 只允许在不同作用域或块中重新声明
运算符的优先级
从左向右计算
*和%高于+和-
数据类型
数值
JavaScript 只有一种数值类型,小数点可有可无
精度
整数(不使用指数或科学计数法)会被精确到 15 位
小数的最大数是 17 位,但是浮点的算数并不总是 100% 精准
var x = 0.2 + 0.1; // x 将是 0.30000000000000004 var x = (0.2 * 10 + 0.1 * 10) / 10; // x 将是 0.3
超大或超小的数值可以用科学计数法来写:
var y = 123e5; // 12300000 var z = 123e-5; // 0.00123
布尔值:true和false
toString() 方法
把数输出为十六进制、八进制或二进制
var myNumber = 128; myNumber.toString(16); // 返回 80 myNumber.toString(8); // 返回 200 myNumber.toString(2); // 返回 10000000
以字符串返回数值,所有数字方法可用于任意类型的数字(字面量、变量或表达式)
var x = 123; x.toString(); // 从变量 x 返回 123 (123).toString(); // 从文本 123 返回 123 (100 + 23).toString(); // 从表达式 100 + 23 返回 123
toExponential() 返回字符串值,它包含已被四舍五入并使用指数计数法的数字。
参数定义小数点后的字符数
toFixed() 返回字符串值,它包含了指定位数小数的数字
toPrecision() 返回字符串值,它包含了指定长度的数字
valueOf() 以数值返回数值valueOf() 方法
Number() 可用于把 JavaScript 变量转换为数值
parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字
parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字
数值属性
MAX_VALUE | 返回 JavaScript 中可能的最大数。 |
MIN_VALUE | 返回 JavaScript 中可能的最小数。 |
NEGATIVE_INFINITY | 表示负的无穷大(溢出返回)。 |
NaN | 表示非数字值(“Not-a-Number”)。 |
POSITIVE_INFINITY | 表示无穷大(溢出返回)。 |
字符串
被单或双引号包围.
特殊字符
’ | ’ | 单引号 |
" | " | 双引号 |
\ | \ | 反斜杠 |
\作用于字符串,不会让代码折行,最好加在运算符后面
方法:
length 属性返回字符串的长度
搜素方法
indexOf() 方法返回字符串中指定文本首次出现的索引(位置)
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引
如果未找到文本, indexOf() 和 lastIndexOf() 均返回 -1,两种方法都接受作为检索起始位置的第二个参数
search() 方法搜索特定值的字符串,并返回匹配的位置,并且无法设置第二个开始位置参数
match() 方法根据正则表达式在字符串中搜索匹配项,并将匹配项作为 Array 对象返回
let text = "The rain in SPAIN stays mainly in the plain"; text.match(/ain/g) // 返回数组 [ain,ain,ain]
如果字符串包含指定值,includes() 方法返回 true
如果字符串以指定值开头,则 startsWith() 方法返回 true,否则返回 false
如果字符串以指定值结尾,则 endsWith() 方法返回 true,否则返回 false
三种提取部分字符串的方法:
- slice(start, end)
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分
该方法设置两个参数:起始索引(开始位置),终止索引(结束位置) - substring(start, end)
substring() 类似于 slice()
不同之处在于 substring() 无法接受负的索引 - substr(start, length)
substr() 类似于 slice()
不同之处在于第二个参数规定被提取部分的长度
replace() 方法用另一个值替换在字符串中指定的值
toLowerCase() 把字符串转换为小写
concat() 连接两个或多个字符串
trim() 方法删除字符串两端的空白符
charAt() 方法返回字符串中指定下标(位置)的字符串
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码
split()
split() 将字符串转换为数组
数值和字符串相加
JavaScript 的加法和级联(concatenation)都使用 + 运算符。
数字用加法。字符串用级联。
数+数=数
字符串+字符串=字符串
数+字符串=字符串
数+数+字符串=数+字符串=字符串
字符串+数+数+数=字符串
NaN 属于 JavaScript 保留词,指示某个数不是合法数。
尝试用一个非数字字符串进行除法会得到 NaN(Not a Number)
var x = 100 / "Apple"; // x 将是 NaN(Not a Number) isNaN(x); // 返回 true,因为 x 不是数 var y= 100 / "10"; // y 将是 10 var m = NaN,n = "5"; var k = m + n; // k 将是 NaN5 var z = NaN,x = 5; var k = z + x; // k 将是 NaN typeof NaN; // 返回 "number" typeof Infinity; // 返回 "number"
Infinity (或 -Infinity)是 JavaScript 在计算数时超出最大可能数范围时返回
一个数除以 0(零)也会生成 Infinity
字符串模板
使用反引号 (``)
插值
模板字面量提供了一种将变量和表达式插入字符串的简单方法
${...}
数组
JavaScript 数组用方括号书写,数组的项目由逗号分隔
var cars = ["Porsche", "Volvo", "BMW"]; var cars = new Array("Saab", "Volvo", "BMW"); var name = cars[0]; //访问 cars 中的首个元素的值 cars[0] = "Opel"; //修改 cars 中的首个元素 document.getElementById("demo").innerHTML = cars; //引用数组名来访问完整数组 cars.push("LH"); //添加一个新元素 cars[cars.length] = "LH";//添加一个新元素 cars[3] = "LH"; //添加一个新元素
数组是特殊类型的对象,您可以在相同数组中存放不同类型的变量(函数,数组都可以)
遍历数组
for循环
var fruits, text, fLen, i; fruits = ["Banana", "Orange", "Apple", "Mango"]; fLen = fruits.length; text = "<ul>"; for (i = 0; i < fLen; i++) { text += "<li>" + fruits[i] + "</li>"; }
Array.foreach() 函数
var fruits, text; fruits = ["Banana", "Orange", "Apple", "Mango"]; text = "<ul>"; fruits.forEach(myFunction); text += "</ul>"; function myFunction(value) { text += "<li>" + value + "</li>"; }
很多编程元素支持命名索引的数组。
具有命名索引的数组被称为关联数组(或散列)。
JavaScript 不支持命名索引的数组。
在 JavaScript 中,数组只能使用数字索引
对象
JavaScript 对象用花括号来书写。
对象属性是 name:value 对,由逗号分隔。
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
this 关键词
访问对象
objectName.propertyName //访问对象属性 objectName["propertyName"] //访问对象属性 objectName.methodName() //访问对象方法 name = person.fullName(); //访问对象方法
typeof 运算符
typeof 运算符返回 变量或表达式 的类型:
- string
- number
- boolean
- undefined
- function(函数)
- object(对象、数组或 null)
论 Undefined 和 Null 的区别
Undefined 与 null 的值相等,但类型不相等:
typeof undefined // undefined typeof null // object null === undefined // false 类型不等 null == undefined // true 值相等