JavaScript入门到放弃
2019-06-23 本文已影响0人
wkmx
js基础
- ECMAScript-JavaScript 的核心
BOM 浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口, 比如: 弹出框, 控制浏览器跳转
DOM 文档对象模型
一套操作页面元素的API, DOM 可以把HTML看作是文档树, 通过DOM提供的API可以对书上的节点进行操作
JavaScript
- 行内元素
- 页面嵌入js
- 外部嵌入
<script src="index.js"></script> // js 导入语法
// 导入的语句里写入js不会生效
计算机组成
软件
硬件
- 三大件: CPU, 内存, 硬盘, 主板
- 输入设备: 鼠标, 键盘, 手写板
- 输出设备: 显示器, 打印机, 投影机
1. 关键字
- typeof
typeof typeof(String) - instanceof
date instanceof Date
变量
数据类型
number 类型
var num = 9; // 十进制
var num = 0xA; // 十六进制
浮点数值最高精度是17位数字,
- 数值范围
Number.MAX_VALUE // 最大值
Number.MIN_VALUE // 最小值
Infinity // 无穷大
-Infinity // 无穷小
NaN // Not a number
isNaN // Is not a number // 判断是不是一个数字
string 字符串
- 转移字符
\n
\r
\b 空格
\t 制表符
- 获取长度
msg.length // 获取字符串长度
boolean
- true为1, false为0
undefined, null
- undefined 表示一个声明了没有复制的变量, 变量只声明的时候默认是undefined
- null 表示一个空, 变量的值如果想为null, 必须手动设置
typeof
typeof age; // 获取变量类型, 返回的结果是string类型
类型转换
数据类型的转换
- toString 转换成字符串类型
Number.toString(); // 将数字转换成字符串
Boolean.toString(); // bool 转换成字符窜
- String()
String(null);
String(undefined);
null, undefined 不能转换成字符串, 可以使用String() 转换
- 字符串拼接
Number + ''; //字符串
typeof(Number + '');
转换成数值类型
- Number
Number(String); // 将数值转换成数值类型, 如果是非正常的数字字符串, 会返回 NaN
Number(true); // 返回1, false为0
- parseInt() // int 整数
parseInt(str); //
parseInt(Boolean); // 使用 parseInt 转换 Boolean 类型, 会返回 NaN
parseInt("123abc"); // 返回123, Number("123abc") 返回 NaN, 匹配从头开始的最大整数 ^(\d+)
转换成float
- parseFloat()
parseFloat(true) // NaN
parseFloat("1.23") // 1.23
parseFloat("1.23aaa") // 1.23
parseFloat("aaa1.23") // NaN
parseFloat("1.23.456") // 1.23, 只解析第一个点
取正或者取负
+"123" // 123
-"123" // -123
+true // 1
-true // -1
+false // 0
-false // -0
"123" - 0 // first convert "123" to number
"123abc" + 0 // 如果加号一边是字符串, 使用的是字符串凭借 concat
转换成布尔类型
Boolean(NaN) // false
Boolean(0) // false
Boolean("") // false
Boolean(undefined) // false
Boolean(null) // false
操作符
算术运算符
5/0; // Infinity
5 % 0; // NaN
一元运算符
- ++
关系运算符
10 == "10"; // true 判断的是变量的值是否相等
10 === "10"; // false, 只有值跟类型都相等的时候, 才会相等
运算符优先级
1. () 优先级最高
2. 一元运算符 ++ -- !
3. 算数运算符 先* / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先 && 后 ||
7. 赋值运算符
4 >= 6 || '人' != '阿凡达' &&
表达式
表达式
分支语句
- if
- else if
- else
三元运算符
true ? num1 : num2;
switch 语句
switch (expression) {
case 常量1:
语句;
break;
case 常量2:
语句;
break;
default:
break;
}
switch 语句的判断使用的是 ===
布尔类型的隐式转换
Boolean(123); // 显示类型转换
if (num) {
// true
}
!"str" // 隐式转换
循环结构
while
while (expression) {
// body
}
do while
先执行语句, 后判断条件, 至少运行一次
for 循环
for (初始化表达式1; 条件表达式2; 自增表达式3) {
}
调试
错误
- 语法错误
- 逻辑错误
过去调试JavaScript的方式
- alert()
- console.log()
断点调试
- F11: 往下执行一行
- Watch: 监视变量
数组
数组是一种数据类型, 数组中存储的数据类型可以不一致, 但是不推荐
getattr
var names = ['zs', 'ls', 'ww', 1, true];
names[0] // (索引|下标) 取值
property
- length
method
- append
- join
函数
arguments
我们可以通过 arguments 获取函数调用的时候的实参, arguments 非常向数组, 但不是数组
匿名函数
匿名函数: 没有名称的函数
代码规范
1. 命名规范
2. 变量规范
3. 注释规范
4. 空格规范
5. 换行规范
作用域
- 全局作用域
- 局部作用域
js 中没有块作用域的, 所以可以在块作用域中使用变量
预解析
console.log(num);
var num; // 变量提升
f1(); // 函数提升
function f1() {
}
预解析:
- 变量提升, 把变量的声明提升到当前作用域的最上面, 不包括变量的赋值
- 函数提升, 把函数的声明提升到当前作用域的最上面, 不包括函数的调用
局部作用域也要预解析, 在预解析的过程中, 如果函数和变量的名字相同, 此时函数优先解析
例子
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9; // 等于 var a = 9; // 只有a是局部变量, 其他全都是全局变量, 具有变量提升
console.log(a);
console.log(b);
console.log(c);
}
对象
1. 对象的创建
1. 动态创建
var student = {
name: 'zs',
age: 18,
sayHello: function() {
console.log(this.name + ': hello');
}
}
this 指当前对象, 对象属性访问的方式, student.name, student['name']
2. 构造函数: new Object();
var hero = new Object(); // 创建一个空的对象
3. 工厂方法
function createHero() {
var hero = new Object();
return hero;
}
4. 自定义构造函数
function Hero(name) {
this 动态的给对象增加成员
this 指向了当前对象
this.name = name;
}
new 关键字
- 执行过程
1. 在内存中创建了一个空的对象
2. 让构造函数中的this指向刚刚创建的对象
3. 执行构造函数, 构造函数中设置属性和方法
4. 返回了当前对象
this 关键字
1. 函数中
函数中的 `this` 指向 `window`
2. 方法中
方法中指向的是这个方法所属的对象
3. 构造函数这种
指向构造函数中在内存创建的对象
2. 对象基本操作
对象的访问访问
- obj.name
- obj['name']
遍历对象的成员
for (var key in obj) {
console.log(key, obj[key]); // key, value
}
删除 对象的成员
delete o.a0; // true
3. 简单复杂类型和复杂类型
- 栈区
- 堆
内置对象
MDN
(https://developer.mozilla.org/zh-CN/)[https://developer.mozilla.org/zh-CN/]
1. Math
[0, 1]
- Math.Random(max-min) + min, [min, max]
- Math.floor: 向下取整
- Math.ceil: 向上取整
- Math.round: 四舍五入
Math 不是一个构造函数, 里面提供的是静态成员
2. Date 对象
GMT 格林威治时间, 世界标准时间, GMT+08000 中国标准时间
1. var d = new Date(); // undefined, 获得当前时间对象
d; // Mon Jun 24 2019 11:01:05 GMT+0800 (中国标准时间)
d.valueOf(); // 1561345265813 // 获取时间戳 毫秒单位
2. new Date(时间戳 毫秒值);
3. new Date("日期格式字符串");
4. new Date(1999, 8, 8);
Number(new Date()); // 获取当前时间的毫秒值
+ new Date(); //
static method
- Date.now(); // 浏览器兼容问题
method
-
valueOf(); // 获取毫秒值
-
d.getTime(); // 获取毫秒值 推荐
-
toDateString(); // 获取年月日
-
toTimeString(); // 获取时分秒
-
toLocaleString(); // 根据本地计算机语言 返回时间格式
-
year = date.getFullYear(),
-
month = date.getMonth() + 1,
-
day = date.getDate(),
-
hour = date.getHours(),
-
minute = date.getMinutes(),
-
second = date.getSeconds();
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; // 返回指定格式
3. Array
property
- length
method
- push
- reserver
- sort([int compareFunction(e1, e2)])
- concat() // 拼接数组
- slice() // 截取新的数组
- splice(start, [,deleteCount[, item[, item2]]]) // 删除截取数组
- indexOf(seachElement[, formIndex = 0])
- lastIndexOf() // 查找数组
- join() // 拼接
清空数组
arr = [];
html5
- filter(callback,)
- forEach
sort 默认按字符编码排序
- 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
- 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。
static
- Array.isArray(arr) // 判断一个变量是不是数组
var l = [];
l.toString() // "1,2,3"
l.valueOf() // 打印数组本身
sort
基本包装类型
基本包装类型: 基本类型包装成复杂类型: String, Number, Boolean
var s = new String("")
字符串
特性: 不可变
method
- charAt(Number = 0)
- charCodeAt(Number = 0)
- indexOf(String[, startIndex])
- lastindexOf()
- slice(startIndex[, endIndex]) // 字符串切片
- split([separactor[, limit]])
- trim(); // 去除空格 tab space 换行符
- trimLeft();
- trimRight();
- search(); // 支持正则表达式
str = "hello world"; // "hello world"
str.charAt(0) // "h"
str.charAt(1) // "e"
str.charCodeAt(); // 104 获取字符的编码
