JavaScript 编程

2.1 数字和字符串

2.1.1 数值

整数
浮点数
十六进制数,二进制数和八进制数
2.1.2 全局方法

toString()
var x = 13;
alert(x.toString());
alert(x.toString(16));
(11).toString();

toFixed()
x.toFixed(0); // "13"
x.toFixed(3); // "13.000"
toExponential()
var num = 666;
num.toExponential(4); // "6.6600e+2"
num.toExponential(6); // "6.660000e+2"

2.1.3 Number 对象

Number.isNaN()
当试图把一些非数值当做数值处理,却无法得到数值时,返回值就是 NaN
示例

Number.isNaN(3); //false
Number.isNaN(0 / 0); // true
Number.isInteger()
Number.parseFloat() 和 Number.parseInt()

解析的字符串首字符如果是一个数字,函数会持续解析到数字结束

Number.parseFloat("21.4"); // 21.4
Number.parseInt("12px",10); // 12

无穷大
表示无穷的关键字 Infinity -Infinity
isFinite() 会把参数转换为数值,如果结果是 NaN,正无穷大或负无穷大,函数返回 false
2.1.4 Number() 函数

该函数会尽可能返回一个对等的数值,如果失败,返回 NaN
2.1.5 布尔值

如果布尔值被用作计算,true 为 1, false 为 0
JS 里被当做 false 的值
布尔值 false
未定义 undefined
null
0
NaN
“”
非操作符
2.1.6 null(空) 和 undefined(未定义)

undefined 不是关键字,是未定义的全局变量
2.2 操作字符串

2.2.1 字符串

 
length 属性
转义序列
字符串方法
concat
indexOf
lastIndexOf
repeat var inStr = “a b”; var outStr = inStr.repeat(3)
replace
split
substr string1.substr(4, 11); string1.substr(4);
toLowerCase
toUpperCase
2.2.2 模板字符串

var name = "aa";
var course = "bb";
var myString = `hell ${name}, welcome ${course}`;

2.3 数组

2.3.1 数组

JS 的数组能够存放任何数据类型
创建新数组
数组也是一个对象 var myArray = new Array(); var myArray = [];
初始化数组

var myArray = ['111', '22'];
myArray[20] = "333e";
myArray.length

数组的方法

concat
join 把数组的全部元素连接在一起形成一个字符串 var longDay = myArray.join(“-”);
toString 相当于 myArray.join(“,”);
indexOf 没有找到返回-1
lastIndexOf
slice 可以为负数
sort 把数组元素按字母顺序排列
splice myArray.splice(2, 1, “heheda”); 指向索引为 2 的元素,删除 1 个元素,插入一个新元素,返回被删除的元素

2.3.2 如何遍历数组

使用 forEach()
接受一个函数作为参数,并将函数依次应用与数组中的每个元素

var myArray = [1, 2, 3, 4];
function cube(x) {
    console.log(x*x*x);
}
myArray.forEach(cube);
forEach 不返回任何值
使用 map()
和 forEach 的区别在于 map 会返回和最初数组相同大小的新数组

var myArray = [1, 2, 3, 4];
fucntion cube(x) {
    return (x*x*x);
}
var newArray = myArray.map(cube);
使用 for-of 访问数组
var myArray = [2,3,4,5];
functionn cube(x) {
    console.log(x*x*x);
}
for (var y of myArray) {
    cube(y);
}

2.3.3 三点表示法

组合多个数组

var array2 = [1, 2, ...array1, 3];
用参数的数组来调用函数
var myArray = [1, 2, 3];
alert(Math.min(...myArray));

收集数据

var [a, b, ...c] = [1, 2, 3, 4, 5];

2.4 用 JavaScript 处理事件

mousedown 和 mouseup 在 click 前触发
ctrlKey shiftKey altKey metaKey

2.4.1 事件的类型

一些常见事件
鼠标事件

onclick
oncontextmenu 鼠标右键弹出菜单
ondblclick
onmousedown
onmouseenter 鼠标移动到一个元素上时
onmouseleave
onmousemove 鼠标在一个元素上移动时
onmouseover 鼠标移动到一个元素或其子元素时

键盘事件

onkeydown 按下按键
onkeypress 按下并放开按键
onkeyup 释放按键
DOM 对象事件
onerror 加载一个外部文件出现错误时
onload
onresize
onscroll 滚动了元素的滚动条

表单事件

onblur 元素失去焦点时
onchange
onfocus
onreset 重置表单
onselect
onsubmit

2.4.2 事件处理器

内联事件处理器

<a href="http://www.baidu.com" οnclick="alert('hello')">baidu</a>
作为 DOM 对象的属性的事件处理器
// <a href="xxx" id="a1">aa</a>
var myLink = document.getElementById('a1');
myLink.onclick = function() {
    alert("hello");
}
使用 addEventListener()
var myLink = document.getElementById('a1');
function sayHello() {
    alert("hello");
}
myLink.addEventListener('click', sayHello);
myLink.removeEventListener('click', sayHello);
添加多个监听器
使用 addEventListener 可以对一个事件添加多个函数

2.4.3 event 对象

myInputField = document.getElementById('a');
function myFunction(e) {
    var kc = e.keyCode;
    if (kc == 27) {
        alert("xx");
    }
}
myInputField.addEventListener('keydown', myFunction);
event 对象会自动传递给事件处理器
e.keyCode 表示按下了哪个键,27 表示 Escape
阻止默认行为
var myLink = document.getElementById('a');
function refuseAccess(e) {
    alert("wrong");
    e.preventDefault();
}
myLink.addEventListener('click', refuseAccess);
事件冒泡和捕获
嵌套元素时,各层元素都有事件监听器时,执行顺序为冒泡
addEventListener 的第三个参数默认为 false,对于嵌套元素,从内向外执行,像冒泡一样.
关闭冒泡和捕获
function myFunction(e) {
    var kc = e.keyCode;
    e.stopPropagation();
    if (kc == 27) {
        alert("1");
    }
}

2.5 程序控制

2.5.1 条件语句

和 C 差不多
if() 语句
比较操作符
= 值和类型都相等
测试相等性
if 进阶
测试多个条件
switch 语句
逻辑操作符
2.5.2 循环和控制结构

 
while
do…while
for
用 break 跳出循环
用 for…in 在对象集里循环
var days = [1, 2, 3, 4];
for (i in days) {
    alert(i);
}

2.5.3 设置和使用定时器

这两个方法都是 window 对象的方法

setTimeout()
function hide(elementId) {
    document.getElementById(elementId).style.display='none';
}
window.onload = function() {
    setTimtout("hide('id1')", 3000);
}
var timer1 = setTimeout("hide('id1')", 3000);
clearTimeout(timer1);
setInterval()
var timer1 = setInterval("updateClock()", 1000);
clearInterval(timer1);

转载于：www.iqilun.com