JavaScript -- 筑基

发表于 | 分类于

本片博客记录了我JavaScript筑基阶段的学习内容,JavaScript不是Java,但是我下意识的把它和java对比学习,有些地方比较有趣,有些地方从java角度看,简直匪夷所思,不过现在总体感觉下来,还算不错(不涉及ES5 ES6)

我会从如下几个方便展开

  • 变量&数据类型
  • 表达式和语句
  • 函数
  • 作用域
  • 预解析
  • 对象

弱类型数据结构&变量

  • 对习惯了强类型的java粉来说,倒是觉得js的弱类型还不错,不管是Number String Boolean Null Undefined 还是对象, 函数一个var 全部接收

  • js 没有字符类型,也就是说, “” 和 ‘’ 里面都可以放字符串

表达式和语句

  1. 分支结构if(){}
  2. switch语句
  3. 三元运算符
  4. while(){}循环,doWhile()循环
  5. 三元运算符

上面的5条,和java基本完全相同

6 for循环有点差异

1
2
3
4
5
6
7
8
for(var i=0;i<100;i++){
   // do 
}

// 可以写 in 语句
for(var key in Object){
   // do 
}
  1. 隐式转换

就有说和java的不同点

1
2
3
// 隐式转换: 仅限 减  字符串 -  数字,     浏览器会给我们隐式转换成数字
console.log("10"-5);
console.log("5"-10);

函数

常用的函数声明

1
2
3
function(){
    // 函数体
}

函数表达式

1
2
3
var fn=function(){
    // body
}

函数的参数:

下面的代码, 入参是没有类型,这可以对习惯了java的人来说,是一件无法想象的事,对于js,大家都是var,也就省略了,加上反倒是报错了 

1
2
3
function (a,b){
    //body
}

函数的返回值:

直接return就好了

1
2
3
4
function (a,b){
    //body
    return XXX;  
}

可变参数:

我们知道,在java中我们可以通过三个点,表示可变参数,js更方便了,方便到我们在声明函数有可变参数时,三个点都不用写了

我们通过 arguments 可以动态的获取出有几个参数,每个参数具体是谁,如下例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function MyMath() {
        // 给对象添加一个方法---   函数在定义的时候,  入参如果可变,那就不用写了,  就像下面那样,运行时会动态的检测出来参数有几个, 每个参数是谁
        this.getMax=function(){
            var max = arguments[0]
            for(var i=1;i<arguments.length;i++){
               if(max<arguments[i]){
                   max=arguments[i];
               }
            }
            return max;
        }
    }

    var myMath = new MyMath();
    var max = myMath.getMax(1,2,3,4,5);
    console.log(max);

作用域

  1. 全局变量和局部变量

js全局变量局部变量的特性和java一样, 着重提一下,下面几点:

  • 不使用var定义的变量是全局变量
  • 变量在退出作用域后被销毁
  • 全局变量在关闭浏览器后被销毁
  1. 一对 花括号,称为 一个块级作用域
  2. 作用域链(实际就是函数的嵌套)

如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
> 当前函数里如果不存在num,她会去上一级函数里面查找

function f1() {
    var num = 123;
    function f2() {
      var num = 789;
        console.log( num );
    }
    f2();
}
var num = 456;
f1();

输出结果: 789

预解析

  1. 变量提升

如下, 浏览器不会报错而是会把变量提升

1
2
3
4
5
6
7
console.log(a);
var a=1;

//等同于:
var a;
console.log(a);
a=1;

结果 : undefined

  1. 函数提升例一
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
f1();
console.log(c);  // undifined
console.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);  //  9
console.log(b);  //  9
console.log(a);  //  没结果

解释性,脚本,动态类型,基于对象

对象

说起对象,都是对一些属性和行为的封装,js同样是这样,但是js的对象的属性–太自由了,以至于让习惯了java编程风格的人不得不小心,最直观的就是点运算符不能随便用

三种常用的创建对象方法

  1. 对象字面量
1
2
3
4
5
6
7
var o={
    name:"张三",
    age:"12",
    sayHello:function(){
        //do
    }
}
  1. new 关键字
1
2
3
4
5
var person = new Object();

// 点运算符给对象添加属性
person.name="张三";
person.age="23";

点运算符给对象添加属性,难以想象吧!!! , 一个对象都new 出来了, 还可以给他添加属性,添加函数, 没错,js就真的可以

  1. 工厂函数创建对象
1
2
3
4
5
6
7
8
9
10
11
12
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 . 自定义构造函数

1
2
3
4
5
6
7
8
9
10
function Person (name,age){
    this.name=name;
    this.age=age;
    this.sayHello=function(){
        // do
    }
}

// 获取对象
var per = new Person("张三",23);

操作对象的属性方法

  1. 获取属性 例:
1
2
person["name"]
person.name

这里我觉得说一百遍都不过分,点,不能随便用,因为如果对象没有这个属性,我们却 .新属性 那么就会给对象新添加新的属性, 但是上面的Object[“key”] 就不会出现这种情况

堆栈

js中变量,对象 在堆栈的分布情况和Java一样, new 出来的对象全部放在堆 ,简单类型的数据变量全部位于栈

例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 下面代码输出的结果
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); // zs
f1(p);
console.log(p.name); //ls

解释上面代码执行过程,及堆栈空间的分配

  1. 执行 var p = new Person(“zs”,18,1000) –> 在堆中开辟空间存new 出来的Person 在栈开辟空间放p 存我们new的对象的在堆中的地址
  2. 执行: console.log(p.name); // zs – > 得到结果 zs
  3. 执行f1(p); – > 把p里面存放的我们new 的Person的地址拷贝给函数的入参位置的person, 此时person和p都指向Person , 紧接着,person改变了在堆中的Person的name为ls , 然后 在堆中新开辟一片空间存新Person,并且让 栈中的person指向新Person
  4. console.log(p.name); //ls —> 此时,p依然指向Person 而 person指向新Person , 所以结果是 ls

常见的内置对象

Math/Array/Number/String/Boolean

Date

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//  获取年份
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 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

1
2
3
4
5
6
7
indexOf(元素值)   //返回值是索引,没有则返回 -1
join(XXX)  //在数组中的每一个元素之间添加一个  XXX  ,返回字符串
map(function(){}) // 数组中的每一个元素都要执行 function(){}  返回一个新的数组
reverse() ;// 反转
sort(compareFunction) ;// 排序
slice(start,end)  // 在指定的位置截取数组的元素
splice(start,要删除的个数,新添加的字段)  //可以在指定的位置 插入，或者替换指定的位置的元素

json格式的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 这三个类型本来就是基本类型, 也可能是基本包装类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 浏览器对象