JS外部引用其他文件(建议)
<script src="myScript1.js"></script>
JS输出显示方式
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出,仅用于测试。
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
Undefined
在 JavaScript 中,没有值的变量,其值是 undefined。typeof 也返回 undefined。
任何变量或者对象均可通过设置值为 undefined 进行清空。其类型也将是 undefined。
Null
在 JavaScript 中,null 是 "nothing"。它被看做不存在的事物。
不幸的是,在 JavaScript 中,null 的数据类型是对象。
可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。
可以通过设置值为 null 清空对象。
typeof
typeof 运算符可返回以下两种类型之一:function,object
typeof 运算符把对象、数组或 null 返回 object。
typeof 运算符不会把函数返回 object。
请注意:
- NaN 的数据类型是数值
- 数组的数据类型是对象
- 日期的数据类型是对象
- null 的数据类型是对象
- 未定义变量的数据类型是 undefined
- 尚未赋值的变量的数据类型也是 undefined
您无法使用 typeof 去判断 JavaScript 对象是否是数组(或日期)。
constructor 属性返回所有 JavaScript 变量的构造器函数。
JavaScript 改变 HTML 内容
document.getElementById("demo").innerHTML = "Hello JavaScript";
改变 <img> 标签的 src 属性(source)来改变一张 HTML 图像
document.getElementById('myImage').src='/i/eg_bulbon.gif';
JavaScript 改变 HTML 样式 (CSS)
document.getElementById("demo").style.fontSize = "25px";
JavaScript 隐藏 HTML 元素
document.getElementById("demo").style.display="none";
JavaScript 能够显示 HTML 元素
document.getElementById("demo").style.display="block";
字符串函数
length 属性返回字符串的长度
indexOf(str) 和 lastIndexOf(str),如果没有找到则返回-1, 返回字符串中指定文本首次(最后)出现的索引。
indexOf(str,index) ,表示从index开始搜索。
search() 方法搜索特定值的字符串,并返回匹配的位置。
search() 方法无法设置第二个开始位置参数。indexOf() 方法无法设置更强大的搜索值(正则表达式)
提取部分字符串
- slice(start, end),提取字符串的某个部分并在新字符串中返回被提取的部分。如果某个参数为负,则从字符串的结尾开始计数。
如果省略第二个参数,则该方法将裁剪字符串的剩余部分,负值位置不适用 Internet Explorer 8 及其更早版本
- substring(start, end)
- substr(start, length),从start开始,截取length长度。
- replace(str,str2) 用str2替换在字符串str值,不会改变调用它的字符串,它返回的是新字符串。同时,对大小写敏感,str2支持正则表达式。
- toUpperCase()
- concat(str1,str2),连接两个或多个字符串,字符串不能更改,只能替换。
- trim() 方法删除字符串两端的空白符.不适用 Internet Explorer 8 及其更早版本
- ==str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''))
提取字符串字符
这是两个提取字符串字符的安全方法:
- charAt(position) 方法返回字符串中指定下标(位置)的字符串
- charCodeAt(position) 方法返回字符串中指定索引的字符 unicode 编码,
- 如果找不到字符,[ ] 返回 undefined,而 charAt() 返回空字符串。
- split(str) 根据str,将字符串转换为数组
JS数值方法:
toString() 以字符串返回数值。
toExponential() 返回字符串值,它包含已被四舍五入并使用指数计数法的数字。该参数是可选的。如果您没有设置它,JavaScript 不会对数字进行舍入。
1 var x = 9.656; 2 x.toExponential(2); // 返回 9.66e+0 3 x.toExponential(4); // 返回 9.6560e+0 4 x.toExponential(6); // 返回 9.656000e+0
toFixed() 返回字符串值,它包含了指定位数小数的数字
1 var x = 9.656; 2 x.toFixed(0); // 返回 10 3 x.toFixed(2); // 返回 9.66 4 x.toFixed(4); // 返回 9.6560 5 x.toFixed(6); // 返回 9.656000
toPrecision() 返回字符串值,它包含了指定长度的数字
1 var x = 9.656; 2 x.toPrecision(); // 返回 9.656 3 x.toPrecision(2); // 返回 9.7 4 x.toPrecision(4); // 返回 9.656
valueOf() 以数值返回数值,一般不在代码中使用。
把变量转换为数值
- Number() 方法,返回数字,由其参数转换而来。如果无法转换数字,则返回 NaN
- parseInt() 方法,解析其参数并返回浮点数。
- parseFloat() 方法,解析其参数并返回整数。
这些方法并非数字方法,而是全局 JavaScript 方法。所有数字方法可用于任意类型的数字(字面量、变量或表达式)
溢出时返回 POSITIVE_INFINITY;var x = 1 / 0;(正无穷)
溢出时返回 NEGATIVE_INFINITY;var x = -1 / 0;(负无穷)
Infinity (或 -Infinity)是 JavaScript 在计算数时超出最大可能数范围时返回的值。
数组方法
遍历数组的最安全方法是使用 "for" 循环:
也可以使用 Array.foreach() 函数
list.forEach(myFunction);
向数组添加新元素的最佳方法是使用 push() 方法
list.push("Lemon");
也可以使用 length 属性向数组添加新元素
list[list.length] = "Lemon";
没有必要使用 JavaScript 的内建数组构造器 new Array()。new 关键词只会使代码复杂化。它还会产生某些不可预期的结果。请使用 [ ] 取而代之!
识别数组:
方案1:ECMAScript 5 定义了新方法 Array.isArray();(ECMAScript 5 不支持老的浏览器);
Array.isArray(list);
方案2:创建您自己的 isArray() 函数以解决此问题:
1 function isArray(x) { 2 return x.constructor.toString().indexOf("Array") > -1; 3 }
方案3:假如对象由给定的构造器创建,则 instanceof 运算符返回 true
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits instanceof Array // 返回 true
数组方法
toString() 把数组转换为数组值(逗号分隔)的字符串。
join() 方法也可将所有数组元素结合为一个字符串。它的行为类似 toString(),但是您还可以规定分隔符,list.join(" * ")
Popping 和 Pushing
在处理数组时,删除元素和添加新元素是很简单的。
Popping 和 Pushing 指的是:
从数组弹出项目,或向数组推入项目。
pop() 方法从数组中删除最后一个元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.pop();
pop() 方法返回“被弹出”的值
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.pop(); // x 的值是 "Mango"
push() 方法(在数组结尾处)向数组添加一个新的元素
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Kiwi"); // 向 fruits 添加一个新元素
push() 方法返回新数组的长度
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.push("Kiwi"); // x 的值是 5
位移元素
位移与弹出等同,但处理首个元素而不是最后一个。
shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引。shift() 方法返回被“位移出”的字符串
unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素,unshift() 方法返回新数组的长度。
删除元素
既然 JavaScript 数组属于对象,其中的元素就可以使用 JavaScript delete 运算符来删除;
使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。
拼接数组
splice() 方法可用于向数组添加新项
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi");
第一个参数(2)定义了应添加新元素的位置(拼接)。
第二个参数(0)定义应删除多少元素。
其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组。
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 2, "Lemon", "Kiwi");
使用 splice() 来删除元素
通过聪明的参数设定,您能够使用 splice() 在数组中不留“空洞”的情况下移除元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(0, 1); // 删除 fruits 中的第一个元素
裁剪数组
slice() 方法用数组的某个片段切出新数组。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(3);//返回Apple,Mango
slice() 可接受两个参数,比如 (1, 3)。
该方法会从开始参数选取元素,直到结束参数(不包括)为止。
slice() 方法创建新数组。它不会从源数组中删除任何元素。
合并(连接)数组
concat() 方法通过合并(连接)现有数组来创建一个新数组。
concat() 方法不会更改现有数组。它总是返回一个新数组。
concat() 方法可以使用任意数量的数组参数
var myChildren = arr1.concat(arr2, arr3); var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);
数组排序
sort() 方法以字母顺序对数组进行排序。
如果数字按照字符串来排序,则 "25" 大于 "100",因为 "2" 大于 "1"。
正因如此,sort() 方法在对数值排序时会产生不正确的结果。
我们通过一个比值函数来修正此问题:
var points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return a - b});
function myArrayMax(arr) { return Math.max.apply(null, arr); }
Math.min.apply([1, 2, 3]) 等于 Math.min(1, 2, 3)。
通过比较函数来对比属性值
cars.sort(function(a, b){return a.year - b.year});
反转数组
reverse() 方法反转数组中的元素。
您可以使用它以降序对数组进行排序
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); // 对 fruits 中的元素进行排序 fruits.reverse(); // 反转元素顺序
数组迭代
Array.forEach() 方法为每个数组元素调用一次函数(回调函数)
map() 方法通过对每个数组元素执行函数来创建新数组。map() 方法不会对没有值的数组元素执行函数。map() 方法不会更改原始数组
filter() 方法创建一个包含通过测试的数组元素的新数组。
var numbers = [45, 4, 9, 16, 25]; var over18 = numbers.filter(myFunction); function myFunction(value, index, array) { return value > 18; }
reduce() 方法在每个数组元素上运行函数,以生成(减少它)单个值。reduce() 方法在数组中从左到右工作。reduce() 方法不会减少原始数组。
Array.reduceRight();
every() 方法检查所有数组值是否通过测试。
some() 方法检查某些数组值是否通过了测试。
indexOf() 方法在数组中搜索元素值并返回其位置。
Array.lastIndexOf() 与 Array.indexOf() 类似,但是从数组结尾开始搜索。
find() 方法返回通过测试函数的第一个数组元素的值。
所有浏览器都支持 上述方法,除了 Internet Explorer 8 或更早的版本。
findIndex() 方法返回通过测试函数的第一个数组元素的索引。