本片博客记录了我JavaScript筑基阶段的学习内容,JavaScript不是Java,但是我下意识的把它和java对比学习,有些地方比较有趣,有些地方从java角度看,简直匪夷所思,不过现在总体感觉下来,还算不错(不涉及ES5 ES6)
我会从如下几个方便展开
- 变量&数据类型
- 表达式和语句
- 函数
- 作用域
- 预解析
- 对象
弱类型数据结构&变量
对习惯了强类型的java粉来说,倒是觉得js的弱类型还不错,不管是Number String Boolean Null Undefined 还是对象, 函数一个var 全部接收
js 没有字符类型,也就是说, "" 和 '' 里面都可以放字符串
表达式和语句
- 分支结构
if(){} switch语句三元运算符while(){}循环,doWhile()循环- 三元运算符
上面的5条,和java基本完全相同
6 for循环有点差异
for(var i=0;i<100;i++){ // do }// 可以写 in 语句for(var key in Object){ // do } - 隐式转换
就有说和java的不同点
// 隐式转换: 仅限 减 字符串 - 数字, 浏览器会给我们隐式转换成数字console.log("10"-5);console.log("5"-10); 函数
常用的函数声明
function(){ // 函数体} 函数表达式
var fn=function(){ // body} 函数的参数:
下面的代码, 入参是没有类型,这可以对习惯了java的人来说,是一件无法想象的事,对于js,大家都是var,也就省略了,加上反倒是报错了
function (a,b){ //body} 函数的返回值:
直接return就好了
function (a,b){ //body return XXX; } 可变参数:
我们知道,在java中我们可以通过三个点,表示可变参数,js更方便了,方便到我们在声明函数有可变参数时,三个点都不用写了
我们通过 arguments 可以动态的获取出有几个参数,每个参数具体是谁,如下例:
function MyMath() { // 给对象添加一个方法--- 函数在定义的时候, 入参如果可变,那就不用写了, 就像下面那样,运行时会动态的检测出来参数有几个, 每个参数是谁 this.getMax=function(){ var max = arguments[0] for(var i=1;i 作用域
- 全局变量和局部变量
js全局变量局部变量的特性和java一样, 着重提一下,下面几点:
- 不使用var定义的变量是全局变量
- 变量在退出作用域后被销毁
- 全局变量在关闭浏览器后被销毁
- 一对 花括号,称为 一个块级作用域
- 作用域链(实际就是函数的嵌套)
如下代码:
> 当前函数里如果不存在num,她会去上一级函数里面查找function f1() { var num = 123; function f2() { var num = 789; console.log( num ); } f2();}var num = 456;f1(); 输出结果: 789
预解析
- 变量提升
如下, 浏览器不会报错而是会把变量提升
console.log(a);var a=1;//等同于:var a;console.log(a);a=1;
结果 : undefined
- 函数提升例一
var num = 10;fun();function fun() { console.log(num); // undefined var num = 20;}// 等同于var num;num=10;function fun() { var num; console.log(num); // undefined num = 20;}fun(); 结果: undefined
2.1 函数提升例2
f1();console.log(c); // undifinedconsole.log(b); //console.log(a);function f1() { var a = b = c = 9; console.log(a); //9 console.log(b); //9 console.log(c); //9 }// 等同于function f1() { var a = b = c = 9; // b c 没有被var修饰,是全局变量,但是在想让倒数2-3行不报错就得提前执行f1() console.log(a); //9 console.log(b); //9 console.log(c); //9 }f1();console.log(c); // 9console.log(b); // 9console.log(a); // 没结果 解释性,脚本,动态类型,基于对象
对象
说起对象,都是对一些属性和行为的封装,js同样是这样,但是js的对象的属性--太自由了,以至于让习惯了java编程风格的人不得不小心,最直观的就是点运算符不能随便用
三种常用的创建对象方法
- 对象字面量
var o={ name:"张三", age:"12", sayHello:function(){ //do }} - new 关键字
var person = new Object();// 点运算符给对象添加属性person.name="张三";person.age="23";
点运算符给对象添加属性,难以想象吧!!! , 一个对象都new 出来了, 还可以给他添加属性,添加函数, 没错,js就真的可以
- 工厂函数创建对象
function createPerson(name,age){ var obj new Onject(); obj.name=name; obj.age=age; obj.sayHi=function(){ //do } return obj;}// 获取对象var p = createPerson("张三",23); 4 . 自定义构造函数
function Person (name,age){ this.name=name; this.age=age; this.sayHello=function(){ // do }}// 获取对象var per = new Person("张三",23); 操作对象的属性方法
- 获取属性 例:
person["name"]person.name
这里我觉得说一百遍都不过分,点,不能随便用,因为如果对象没有这个属性,我们却 .新属性 那么就会给对象新添加新的属性, 但是上面的Object["key"] 就不会出现这种情况
堆栈
js中变量,对象 在堆栈的分布情况和Java一样, new 出来的对象全部放在堆 ,简单类型的数据变量全部位于栈
例:
// 下面代码输出的结果function Person(name,age,salary) { this.name = name; this.age = age; this.salary = salary;}function f1(person) { person.name = "ls"; person = new Person("aa",18,10);}var p = new Person("zs",18,1000);console.log(p.name); // zsf1(p);console.log(p.name); //ls 解释上面代码执行过程,及堆栈空间的分配
- 执行 var p = new Person("zs",18,1000) --> 在堆中开辟空间存new 出来的Person 在栈开辟空间放p 存我们new的对象的在堆中的地址
- 执行: console.log(p.name); // zs -- > 得到结果 zs
- 执行f1(p); -- > 把p里面存放的我们new 的Person的地址拷贝给函数的入参位置的person, 此时person和p都指向Person , 紧接着,person改变了在堆中的Person的name为ls , 然后 在堆中新开辟一片空间存新Person,并且让 栈中的person指向新Person
- console.log(p.name); //ls ---> 此时,p依然指向Person 而 person指向新Person , 所以结果是 ls
常见的内置对象
Math/Array/Number/String/Boolean
Date
// 获取年份console.log(new Date().getFullYear());// 获取月份console.log(new Date().getMonth()+1); // 从零开始的 0-11// 获取日期console.log(new Date().getDate());// 获取小时console.log(new Date().getHours());// 获取分钟console.log(new Date().getMinutes());// 获取秒console.log(new Date().getSeconds());// 获取星期console.log(new Date().getDay());
不可变的String
var str = 'abc'; str = 'hello'; // 当重新给str赋值的时候，常量'abc'不会被修改，依然在内存中 // 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变 // 由于字符串的不可变，在大量拼接字符串的时候会有效率问题 length 长度 chatAt(索引) //返回指定位置的字符 超出返回空 concat(string1,string2....) //把多个字符串拼接起来 str.indexOf//(要找的字符串,开始检索的位置) 在str中,在指定的位置查找我们指定的字符串 replace(str1,str2) // 使用 str2 替换str1 slice(4,6) //从索引为4的位置开始提取, 到6的前一个结束,没有6 split(切面标记) //根据标记切割字符串,返回切割后的字符串的数组 substr(5,5)//从5开始,截取五个(长度) 第二个参数可以不写 subString(5,6) //从5开始 到六的前一个结束, 返回截取后的字符串 toLocalLowerCase() // 转小写 toLowerCase() // 转小写 trim() //去掉字符串两边的空格 indexOf(str) //找出str在字符串中第一次出现的位置
Array
indexOf(元素值) //返回值是索引,没有则返回 -1 join(XXX) //在数组中的每一个元素之间添加一个 XXX ,返回字符串 map(function(){}) // 数组中的每一个元素都要执行 function(){} 返回一个新的数组 reverse() ;// 反转 sort(compareFunction) ;// 排序 slice(start,end) // 在指定的位置截取数组的元素 splice(start,要删除的个数,新添加的字段) //可以在指定的位置 插入，或者替换指定的位置的元素 json格式的数据
var json={ "name":"小明", "age":"21" }; // js是动态类型的语言, 只要我 点一下, 对象就有了点后的 属性或者方法 json.adsaodsoifd; // 此时对象添加属性 adsaodsoifd 只不过我没有给他赋值--- 打印结果是 undifined // 遍历 console.log(json.age); console.log(json["age"]); console.log(json["age","name"]); // 做不到全部输出!!! 输出的是name值, 也就是最后一个值 // for-in 循环遍历 for(var key in json){ console.log(key); // 输出 key值 console.log(json.key); // undefined 对象中没有这个属性,不能随便点!!! 这是在新添加属性 console.log(json[key]); // 取出 key 对应的值 } 基本包装类型
基本包装类型 string number boolean 这三个类型本来就是基本类型, 也可能是基本包装类型
var str ="hello"; str= str.replace("ll","KK"); // 此时这里的str调用了方法，那么他就提升为了 基本包装类型，转而成为一个对象 console.log(str); // 缺陷 -- // true&&对象 为 后面的对象 // 对象&&true 为 后面的 true var flag = new Boolean(false); var result = flag && true; console.log(result); var num =10; // 基本类型 num2=Number("10"); // 基本类型---这里仅仅是类型转换,并没有new 也没有调用方法属性,就不是基本包装类型 到此入门接近尾声了,但是js的学习还有很长一段路,
- ES5 ES6新特性
- js操作 DOM--- Document Object Model 文档对象模型
- js操作 BOM--- Browser Object Model 浏览器对象