前端基础之JavaScript

ECMAScript & BOM & DOM

Posted by youyue on January 1, 2018

JavaScript数据类型

  • 数字 NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
  • 字符串 ``` 方法 说明 obj.length 返回长度 obj.trim() 移除空白 obj.trimLeft() 移除左边的空白 obj.trimRight() 移除右边的空白 obj.charAt(n) 返回第n个字符 obj.concat(value, …) 拼接 obj.indexOf(substring, start) 子序列位置 obj.substring(from, to) 根据索引获取子序列 obj.slice(start, end) 切片 obj.toLowerCase() 小写 obj.toUpperCase() 大写 obj.split(delimiter, limit) 分割

拼接字符串一般使用“+”

- 布尔值
true false 
- 数组

方法 说明 obj.length 数组的大小 obj.push(ele) 尾部追加元素 obj.pop() 获取尾部的元素 obj.unshift(ele) 头部插入元素 obj.shift() 头部移除元素 obj.slice() 切片 obj.reverse() 反转 obj.join(seq) 将数组元素连接成字符串 obj.concat(val, …) 连接数组 obj.sort() 排序

遍历数组: var a = [10, 20, 30, 40]; for (var i=0;i<a.length;i++) { console.log(i); }



- null和undefined
> undefined表示声明了变量,但是还没有赋值。null声明了变量并且变量是空值。

类型查询:typeof "abc"  //"string"

## 运算符

1.算数运算符:+ - * / % ++ – 2.比较运算符:> >= < <= != == === !== 注意: 1 == “1” // true 1 === “1” // false 3.逻辑运算符:&& || ! 4.赋值运算符:= += -= *= /=


## 流程控制
1.if-else	

var a = 10; if (a > 5){ console.log(“yes”); }else { console.log(“no”); }


2.if-else if-else 

var a = 10; if (a > 5){ console.log(“a > 5”); }else if (a < 5) { console.log(“a < 5”); }else { console.log(“a = 5”); }


3.switch

var day = new Date().getDay(); switch (day) { case 0: console.log(“Sunday”); break; case 1: console.log(“Monday”); break; default: console.log(“…”) }


4.for

for (var i=0;i<10;i++) { console.log(i); }


5.while

var i = 0; while (i < 10) { console.log(i); i++; }


三元运算: 

var a = 1; var b = 2; var c = a > b ? a : b

## 函数

// 普通函数定义 function f1() { console.log(“Hello world!”); }

// 带参数的函数 function f2(a, b) { console.log(arguments); // 内置的arguments对象 console.log(arguments.length); console.log(a, b); }

// 带返回值的函数 function sum(a, b){ return a + b; } sum(1, 2); // 调用函数

// 匿名函数方式 var sum = function(a, b){ return a + b; } sum(1, 2);

// 立即执行函数 (function(a, b){ return a + b; })(1, 2);

### 局部变量和全局变量
###	作用域

## 内置对象和方法
### 自定义对象

类似于python中的字典: var a = {“name”: “Bender”, “age”: 18}; console.log(a.name); console.log(a[“age”]); 遍历对象: var a = {“name”: “Alex”, “age”: 18}; for (var i in a){ console.log(i, a[i]); }



### date对象

var d = new Date(); //getDate() 获取日 //getDay () 获取星期 //getMonth () 获取月(0-11) //getFullYear () 获取完整年份 //getYear () 获取年 //getHours () 获取小时 //getMinutes () 获取分钟 //getSeconds () 获取秒 //getMilliseconds () 获取毫秒 //getTime () 返回累计毫秒数(从1970/1/1午夜)


### JSON对象

var str1 = ‘{“name”: “Alex”, “age”: 18}’; var obj1 = {“name”: “Alex”, “age”: 18}; // JSON字符串转换成对象 var obj = JSON.parse(str1); // 对象转换成JSON字符串 var str = JSON.stringify(obj1);


### RegExp对象

//RegExp对象

//创建正则对象方式1 // 参数1 正则表达式(不能有空格) // 参数2 匹配模式:常用g(全局匹配;找到所有匹配,而不是在第一个匹配后停止)和i(忽略大小写)

// 用户名只能是英文字母、数字和_,并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。

// 创建RegExp对象方式(逗号后面不要加空格) var reg1 = new RegExp(“^[a-zA-Z][a-zA-Z0-9_]{5,11}$”);

// 匹配响应的字符串 var s1 = “bc123”;

//RegExp对象的test方法,测试一个字符串是否符合对应的正则规则,返回值是true或false。 reg1.test(s1); // true

// 创建方式2 // /填写正则表达式/匹配模式(逗号后面不要加空格) var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

reg2.test(s1); // true

// String对象与正则结合的4个方法 var s2 = “hello world”;

s2.match(/o/g); // [“o”, “o”] 查找字符串中 符合正则 的内容 s2.search(/h/g); // 0 查找字符串中符合正则表达式的内容位置 s2.split(/o/g); // [“hell”, “ w”, “rld”] 按照正则表达式对字符串进行切割 s2.replace(/o/g, “s”); // “hells wsrld” 对字符串按照正则进行替换

// 关于匹配模式:g和i的简单示例 var s1 = “name:Alex age:18”;

s1.replace(/a/, “哈哈哈”); // “n哈哈哈me:Alex age:18” s1.replace(/a/g, “哈哈哈”); // “n哈哈哈me:Alex 哈哈哈ge:18” 全局匹配 s1.replace(/a/gi, “哈哈哈”); // “n哈哈哈me:哈哈哈lex 哈哈哈ge:18” 不区分大小写

// 注意事项1: // 如果regExpObject带有全局标志g,test()函数不是从字符串的开头开始查找,而是从属性regExpObject.lastIndex所指定的索引处开始查找。 // 该属性值默认为0,所以第一次仍然是从字符串的开头查找。 // 当找到一个匹配时,test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。 // 当再次执行test()函数时,将会从该索引位置处开始查找,从而找到下一个匹配。 // 因此,当我们使用test()函数执行了一次匹配之后,如果想要重新使用test()函数从头开始查找,则需要手动将regExpObject.lastIndex的值重置为 0。 // 如果test()函数再也找不到可以匹配的文本时,该函数会自动把regExpObject.lastIndex属性重置为 0。

var reg3 = /foo/g; // 此时 regex.lastIndex=0 reg3.test(‘foo’); // 返回true // 此时 regex.lastIndex=3 reg3.test(‘foo’); // 返回false // 所以我们在使用test()方法校验一个字符串是否完全匹配时,不推荐添加全局匹配模式g。

// 注意事项2(说出来你可能不信系列): // 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test(“undefined”), 并且/undefined/.test()默认返回true。 var reg4 = /^undefined$/; reg4.test(); // 返回true reg4.test(undefined); // 返回true reg4.test(“undefined”); // 返回true



### Math对象

abs(x) 返回数的绝对值。 exp(x) 返回 e 的指数。 floor(x) 对数进行下舍入。 log(x) 返回数的自然对数(底为e)。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。 random() 返回 0 ~ 1 之间的随机数。 round(x) 把数四舍五入为最接近的整数。 sin(x) 返回数的正弦。 sqrt(x) 返回数的平方根。 tan(x) 返回角的正切。 ```