一、了解JavaScript
JavaScript 是一个万能的语言,甚至你拿来刷题都可以!
网页开发
网页游戏 ---> 比如基于 flash 的一些游戏
服务端开发
开发桌面程序
移动端app开发
but JavaScript的主战场还是 网页的前端开发。
JavaScript 是解释语言
编译语言:C / C++ / Go 先把源代码转换成 二进制的机器指令,直接让CPU执行
解释语言:JS / Shell 有对应的引擎来对代码一行一行的解释,一边解释 一边执行
Python \ Java \ PHP 半编译 半执行
而 当前 “编译” 和 “解释” 的概念也是越来越模糊
二、和 HTML 的结合方式
- 内嵌式,把 JS 代码放到 script标签中
- 内联式,把 JS 代码放到 标签的特殊属性中
- 外部式,把 JS 代码单独放到 .js 文件中
三、语法
alert
弹出一个警示对话框,输出内容(真实项目不建议使用,影响体验)
console.log 输出控制台
注意:不是显示在页面上,而是在控制台里!!
var / let 定义变量
- var 是老式写法,里面有很多 坑!
- let 推荐使用,无脑用就行,var 知道有这个就行!
- JavaScript 不需要显示声明类型,而且变量的类型因为赋值可以随时改变
number 数字类型:
- js 中的数字不区分 整数还是浮点数,统一都是 number
- infinity :表示无穷大,一般就是浮点数 除以0 算出的结果(负无穷大指 无限趋近于0)
- NaN:not a number 比如 console.log("hello"-19); 控制台就会显示 NaN
String 字符串:
- 字符串拼接:和 Java 一样
- 字符串比较:直接使用 == 即可(C语言使用strcmp Java使用equals ,但其他大部分语言都可以直接 == 判断)
boolean 类型
js 是弱类型语言,会隐式的把 ture转换成1 false转换成0
- 弱类型:不同的数据区分度低 , 界限模糊
- 强类型:不同的数据区分度高,界限清晰
undefine 无定义的
let a; console.log(a); //浏览器的控制台会显示 undefine 而不会报错 console.log(a+"2"); //没有定义的变量,拼接的时候会吧undefine 当成字符串 //控制台显示 undefined2
null 空
null 是一个值,访问的变量是存在的,只不过变量的值 是一个空值
==和===
==,会进行隐式类型转换(类型不同,但结果可能是true)
===,不会进行隐式类型转换(类型不同,直接就false)
注意:比较浮点数的时候有风险,浮点数不是精确的,可能会false
&& 和 ||
JS 中的 与 和 或 返回的是第一个表达式 或者 第二个表达式~~
1. let a = 10; 2. b = a||0; 3. //当左侧表达式(a) 为真,就把a的值赋给b 4. //当左侧表达式(a) 为假,就把右侧表达式(0)赋给b
四、数组
1. 创建数组
//使用字面量方式创建(常用) var name1 = ["item1", "item2", "item3"]; //使用new关键字 var name2 = new Array("item1", "item2", "item3");
2. 获取数组元素
var arr = [1, 2, 3, 4, 5]; console.log(arr.length);//输出 5 console.log(arr[4]);//输出 5 console.log(arr[6]);//输出 undefined console.log(arr[-1]);//输出 undefined
3. 使用 push 进行追加元素
push 是把 元素 放到数组的最后
var arr = [1, 2, 3, 4, 5]; arr.push(6); console.log(arr[5]);//输出 6
4. splice 元素替换
- splice(1,2) 代表从 1 下标 删除两个元素
- splice(1,2,"111","222") 代表从 1下标 开始的 两个元素 被替换成 “111”和“222”
- splice(1,1,"111") 代表 在下表为1 的位置 插入一个“111”元素
var arr = [1, 2, 3, 4, 5]; arr.splice(2, 2, "name", 66); for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }//结果为[1,2,"name",66,5]
五、函数
1. 语法格式
//创建函数 function 函数名(形参列表){ 方法体 return 返回值; } //函数调用 函数名(实参列表) //不考虑返回值 返回值 = 函数名(实参列表)//考虑返回值
2. 关于参数
- 实参 > 形参 多出的参数不参与运算
- 形参 > 实参 多出来的形参值,按undefined运算
function sum(a,b,c){ return a+b+c; } console.log(sum(1,2,3));// 6 console.log(sum(1,2));// NaN -->not a number
3. arguments 函数表达式
let add = function(){ let ret = 0; for(let i =0;i<arguments.length;i++){ ret+=arguments[i]; } return ret; } console.log(add(1,2,3));// 6 console.log(add(1,2));// 3 console.log(typeof add);// function
六、作用域
js 是全局作用域,当访问一个变量,会先查找当前的代码块,如果当前代码块没有,则继续向上级代码块寻找,一直查找到全局作用域。这种查找规则称为 “作用域链”。
<script> let a = 2; </script> <script> console.log(a);//控制台输出 2 </script>
七、对象
和Java对象类似,不过功能更加简化
1. 基础格式
let student = { //注意这里的格式 name : "小鸡子", age : 22, gender : "male", sing:function(){ console.log("基尼太美"); }, dance:function(){ console.log("篮球在手中,扭胯!"); } } console.log(student.age);//控制台输出 22 student.dance//控制台输出 篮球在手中,扭胯!
上述对象 只能有一个!但是相似的对象我们想多写几个? 怎么办?
2. 构造函数
- JS写构造函数,习惯上首字母大写
- 构造函数需要用到 this,这里的 this 就表示即将构造出来的对象
function Student(name, age, gender, singMag, danceMag) { this.name = name; this.age = age; this.gender = gender; this.singMag = singMag; this.danceMag = danceMag; this.sing = function () { console.log(singMag); } this.dance = function () { console.log(danceMag); } } let s1 = new Student("蔡徐坤", 22, "男", "基尼太美", "篮球在手中,扭胯!"); let s2 = new Student("凡凡", 25, "男", "大碗宽面", "sexlady");
其他注意的地方:
理解 new 关键字(new 的执行过程)
现在内存中创建一个空的对象 { }
this 指向刚才的空对象(将上一步的对象作为 this 的上下文)
执行构造函数的代码,给对象创建属性和方法
返回这个对象(构造函数本身不需要 return,由 new 代劳了)
JS 的对象和 Java 的对象的区别
1. js 没有类的概念
js的对象就是 属性+方法
2. js 对象不区分“属性” 和“方法”
js 函数和普通变量一样 ,我们从创建对象的时候能发现都是 “ ,”隔开 “:”指示
3. js 没有继承
继承的本质就是“让两个对象建立关联” 或者说是“让一个对象能够使用另一个对象的 属性/方法”
而 js 使用 “原型” 机制可以实现类似的效果