JavaScript 基础语法

目录

一、了解JavaScript

二、和 HTML 的结合方式

三、语法

alert  

console.log    输出控制台

var / let  定义变量

number 数字类型：

String 字符串：

boolean 类型

undefine 无定义的

null 空

==和===

&& 和 ||

四、数组

1. 创建数组

2. 获取数组元素

3. 使用 push 进行追加元素

4. splice 元素替换

五、函数

1. 语法格式

2. 关于参数

3. arguments 函数表达式

六、作用域

七、对象

1. 基础格式

2. 构造函数

其他注意的地方：

JS 的对象和 Java 的对象的区别

---

 

---

 

 

一、了解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 中的 与 和 或 返回的是第一个表达式 或者 第二个表达式~~

let a = 10;
b = a||0;
//当左侧表达式(a) 为真，就把a的值赋给b
//当左侧表达式(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>
        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 的执行过程)

1.  现在内存中创建一个空的对象 { }
2.  this 指向刚才的空对象（将上一步的对象作为 this 的上下文)
3.  执行构造函数的代码，给对象创建属性和方法
4.  返回这个对象（构造函数本身不需要 return，由 new 代劳了)

 

JS 的对象和 Java 的对象的区别

1. js 没有类的概念

js的对象就是 属性+方法

2. js 对象不区分“属性” 和“方法”

js 函数和普通变量一样 ，我们从创建对象的时候能发现都是   “ ，”隔开       “：”指示

3. js 没有继承

继承的本质就是“让两个对象建立关联” 或者说是“让一个对象能够使用另一个对象的 属性/方法”

而 js 使用 “原型” 机制可以实现类似的效果