JavaScript基础语法

时间：2021-01-11 01:01:46


JavaScript基础语法

 

目录

​​1.初识JavaScript​​

​​1.1背景知识​​

​​1.2JS的三种书写方式​​

​​行内式​​

​​内嵌式​​

​​外部式​​

​​2.语法简介​​

​​2.1变量的使用​​

​​变量创建方法​​

​​动态类型​​

​​2.2基本数据类型 ​​

​​2.3数组​​

​​js数组创建方式​​

​​遍历方式​​

​​添加元素:尾插​​

​​编辑删除元素:splice​​

​​2.4函数​​

​​格式​​

​​函数表达式​​

​​作用域​​

​​2.5对象​​

​​使用 字面量 创建对象 [常用]​​

​​使用 new Object 创建对象​​

​​使用 构造函数 创建对象 ​​

​​new关键字的理解​​

1.初识JavaScript

1.1背景知识

JavaScript基础语法

JavaScript简称js,是世界上最流行的编程语言之一.

是一个脚本语言, 通过解释器运行

主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行

JS和html和css的关系

html: 网页的结构

css:网页的表皮

JS:网页的灵魂

JS最初只是为了进行前端页面的开发,后来又被赋予其他的功能,可以用来开发桌面程序,手机app,服务器程序

它和Java编程语言还是有不少关系的,比如在chrome里专门有一个模块.JS引擎,就相当于JVM能识别并运行.class文件一样,能够解释执行JS代码.后来这部分代码被独立出来,封装成独立的程序了(V8引擎),此时JS的适用范围广了.

JS代码具体是如何运行的呢?

程序员编写的代码是保存在文件中的,存储在硬盘上,双击.html文件浏览器就会读取文件,把文件内容加载到内存中,浏览器会解析代码,翻译成二进制让计算机识别(解释器的工作),得到的二进制指令会被CPU加载并执行

JavaScript基础语法

这一系列的加载翻译执行的过程都是由浏览器执行的

浏览器分为渲染引擎+JS引擎

渲染引擎:解析html+css,俗称为"内核" 

JS引擎:也就是JS解释器.典型的就是V8引擎

JavaScript的组成

ECMAScript(简称 ES): JavaScript 语法

DOM: 页面文档对象模型, 对页面中的元素进行操作

BOM: 浏览器对象模型, 对浏览器窗口进行操作

我们主要学习前ES,还有DOM的常用API

 我们尝试写第一个JS程序

<body>
    <script>
    alert("你好!");
    </script>
</body>

JavaScript基础语法

JavaScript 代码可以嵌入到 HTML 的 script 标签中

1.2JS的三种书写方式

行内式

直接嵌入到html元素内部

<input type="button" value="点击" onclick="alert('hello!')">

注意:JS 中字符串常量可以使用单引号表示, 也可以 使用双引号表示. HTML 中推荐使用双引号, JS 中推荐使用单引号. 

JavaScript基础语法

内嵌式

写到script标签中

<body>
    <script>
    alert("你好!");
    </script>
</body>

外部式

写到单独的.js文件中

JavaScript基础语法

 引入.js文件

JavaScript基础语法

 执行

JavaScript基础语法

注意:

script 标签中间不能写代码. 必须空着(写了代码也不会执行).外部式适合代码多的情况

alert能够弹窗,从而让用户看到程序的输出,但是也有不好的地方,有些对话框一弹出来,就会阻止界面的其他部分,也操作不了页面的其它部分,叫做模态对话框

JS中的console.log就可以在控制台进行打印日志,类似于Java中的println一样,也是一种有用的调试手段

 

JavaScript基础语法

JavaScript基础语法

 输入输出

alert:弹出一个对话框输出结果

prompt:弹出一个输入框输入

还有,html,css,js的注释方式是不相同的

html:<!-- 注释内容 -->

css:/*注释内容*/

js://  注释内容   /*注释内容*/

2.语法简介

2.1变量的使用

js定义变量不用写类型,但是不意味着没有类型,而是变量的类型是通过初始化操作的值来确定的

变量创建方法

var 变量名 = 值;

var 是 JS 中的关键字, 表示这是一个变量.

= 在 JS 中表示 "赋值", 相当于把数据放到内存的盒子中.

= 两侧建议有一个空格 每个语句最后带有一个 ;

初始化的值如果是字符串, 那么就要使用单引号或者双引号引起来

变量定义还可以写 let 变量名 = 值;

var属于老式的写法,let是新式写法

看一个例子: 

<body>
    <script>
        var name = prompt("姓名:");
        var age = prompt("年龄:");
        var score = prompt("分数");
        alert("姓名是:"+ name + "\n" + "年龄是:" + age + "\n" + "分数是:" + score + "\n" );
    </script>
</body>

+ 表示字符串拼接, 也就是把两个字符串首尾相接变成一个字符串.

\n 表示换行

JavaScript基础语法

动态类型

JS是动态类型语言,一个变量在程序中,类型可以发生改变,就是动态类型语言(JS,python,PHP...)

运行过程中变量不能发生类型改变就是静态类型(C,java,C++,GO...)

动态类型的特点

1.js的变量类型是程序运行过程中才确定的,运行到=才会确定类型

2.随着程序运行,变量类型可能会发生改变

2.2基本数据类型 

js中内置的几种基本数据类型:

number: 数字.JS 中不区分整数和浮点数, 统一都使用 "数字类型" 来表示

Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.

-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.

NaN: 表示当前的结果不是一个数字.(not a number)

boolean: true 真, false 假.

Boolean 参与运算时当做 1 和 0 来看待

string: 字符串类型.字符串字面值需要使用引号引起来,单引号双引号均可

如果字符串中本来就有引号怎么办?

JavaScript基础语法


有些字符不方便输入,就需要用到转义字符

\n :换行

\\ : \

\' : '

\" : "

\t : 空格

JavaScript基础语法

JavaScript基础语法

undefined: 只有唯一的值 undefined. 表示未定义的值.

null: 只有唯一的值 null. 表示空值.

注意:

null 和 undefined 都表示取值非法的情况, 但是侧重点不同.

null 表示当前的值为空. (相当于有一个空的盒子)  undefined 则表示当前的变量未定义. (相当于连盒子都没有)

js中的运算符和Java中的大多比较类似

== 比较相等(会进行隐式类型转换)

JavaScript基础语法

 

JavaScript基础语法

此处出发了隐式类型转换,js中针对不同的类型进行比较/运算,会尝试将不同的转换成相同的类型 

JavaScript基础语法

 

JavaScript基础语法


这里将true转换成了1

=== 比较相等(不会进行隐式类型转换)

JavaScript基础语法

像Java这种不太支持隐式类型转换的语言称为强类型语言

JS这种支持隐式类型转换的语言称为弱类型语言

我们看一下各种语言的分类

JavaScript基础语法

C++由于要和C兼容,因为C支持隐式类型转换,所以C++也得支持,业界的共识是强类型比弱类型好,类型强说明类型间的区分度就高.编译器能做的检查工作就多,代码就不容易出错 

2.3数组

js数组创建方式

1.使用 new 关键字创建

2.使用字面量方式创建 [常用]

let arr = new Array();

        let arr2 = [];

        let arr3 = [1,'hello',true,[]];

 js数组中元素类型不要求统一,可以是任意类型,不仅仅js如此,动态类型的语言都是如此.那么底层是如何做到存储这些不同的类型的变量呢?

站在c语言的视角,每个js变量都有一个地址(唯一的身份标识),数组存储的其实是对应的身份标识,身份标识是统一格式的内容,在底层用一个c的数组来存储这些身份标识,在js层面就相当于保存了不同类型的变量

操作数组:访问下标

let arr = ['微机原理','Javaee','程序设计基础'];
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[2]);
        console.log(arr);

控制台打印:

JavaScript基础语法

如果我们打印arr[100]是什么效果?

console.log('-------------------');
        console.log(arr[100]);

JavaScript基础语法

显示未定义.此时我们给100赋值

JavaScript基础语法

 

JavaScript基础语法

我们可以看到.赋值成功了,中间empty x 97代表着中间还有97个位置是空的

我们再来看个奇怪的下标

JavaScript基础语法

JavaScript基础语法

看到这里,你会发现,js的数组不是传统的数组了(只能按照下标取元素).它是带有键值对性质的数组

就像是Map+数组,很多动态类型的语言都是如此,,不过python数组没有这么灵活.在计算机中灵活就意味着容易出错,因此js的更高版本引入了专门的map来表示键值对.

遍历方式

//1.
        for (let i = 0;i<arr.length;i++){
            console.log(arr[i]);
        }
        //2.
        for(let i in arr){
            //此处的i是数组下标
            console.log(arr[i]);
        }
        //3.
        for(let elem of arr){
            //此处elem是数组元素
            console.log(elem);
        }

JavaScript基础语法

添加元素:尾插

JavaScript基础语法

JavaScript基础语法

删除元素:splice

这个方法相当于一个万能方法,可以用来插入,修改,删除....

splice(startIndex,count,变长参数...)

函数意思是:将变长参数的内容,替换到前面指定的区间,从start开始替换count个

如果后面没有变长参数,就相当于删除操作

如果变长参数和前面指定的区间个数一样,那就是替换

如果变长参数比前面区间个数长,就是新增元素

 删除:

JavaScript基础语法

JavaScript基础语法

 

 新增:

JavaScript基础语法

JavaScript基础语法

替换:

JavaScript基础语法

JavaScript基础语法

2.4函数

格式

创建函数/函数声明/函数定义

function 函数名(形参列表) {    

函数体    

return 返回值;

} 

函数调用

函数名(实参列表)           // 不考虑返回值

返回值 = 函数名(实参列表)   // 考虑返回值

我们先来写一个函数

function add(x,y){
            return x+y;
        }

开头有函数关键字,function,函数名add,形参列表(x,y).

我们看到,形参列表参数没有类型,也就是什么类型的都可以,只要传入的变量能够在函数内部正常工作即可

也没有返回值类型,像java中的public static.....都没有

另外,函数形参和实参的个数可以不匹配,但是实际开发要求匹配.当实参和形参个数不匹配的时候,是不会报错的,会尽可能去执行

如果实参个数比形参个数多,那么多出来的不参与函数运算

JavaScript基础语法

我们可以看到,并没有将30进行运算

 

JavaScript基础语法

如果实参个数比形参个数少, 则此时多出来的形参值为 undefined

JavaScript基础语法

 

NaN:not a number 

JavaScript基础语法

对于js这样的动态类型语言,是不需要重载这样的语法的,我们看下面这个函数

function add(){
            let result = 0;
            for(let elem of arguments){
                result+=elem;
            }
            return result;
        }

        console.log(add(10));
        console.log(add(10,20));
        console.log(add(10,20,30));
        console.log(add(10,20,30,40));

JavaScript基础语法

 

函数表达式

指把一个匿名函数赋值给一个变量,然后就可以通过这个变量来调用函数了.

js中可以像普通变量一样,将函数赋值给一个变量,同时也可以将函数作为另一个函数的参数,或者把函数做为另一个函数的返回值,java是做不到的,这个特性称为"一等公民"

JavaScript基础语法

还是相同的结果,add变量的类型,就叫做function类型,对于function类型的变量是可以调用的

 

JavaScript基础语法

作用域

指某个标识符名字在代码中的有效范围.

全局作用域: 在整个 script 标签中, 或者单独的 js 文件中生效.

局部作用域/函数作用域: 在函数内部生效.

看个例子:

let num = 1;
        function test1(){
            let num = 2;

            function test2(){
                let num = 3;
                console.log('test2:  '+ num);
            }
            test2();

            console.log('test1:  '+num);
        }
        test1();
        console.log('golbal: '+ num);
        </script>

js会先找当前作用域,如果当前没有,就会往上层作用域找,一直往上层直到全局作用域(从内到外依次进行查找)如果还没找到就会报错/undefined ,这个语法类似于java中的变量捕获

JavaScript基础语法

2.5对象

js不是面向对象语言,但是存在对象的概念,所以这里的对象和jjava中的对象差异是很大的

在 JS 中, 字符串, 数值, 数组, 函数都是对象.

每个对象中包含若干的属性和方法. 属性: 事物的特征. 方法: 事物的行为

使用 字面量 创建对象 [常用]

let a = {}; // 创建了一个空的对象

        let b = {
            name:'zhangsan',
            age:18,
            scoer:59,
            sayHello: function() {
                console.log("hello");
            }
        };

使用 { } 创建对象

属性和方法使用键值对的形式来组织

键值对之间使用 , 分割.最后一个属性后面的 , 可有可无

键和值之间使用 : 分割

方法的值是一个匿名函数

 使用对象的属性和方法

JavaScript基础语法

JavaScript基础语法

使用 new Object 创建对象

let b = new Object();

        b.name = 'zhangsan';
        b.age = 18;
        b['score'] = 90;
        b.sayHello = function () {
         console.log("hello");
        }

        // 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的"
        console.log(b.name);
        // 2. 使用 [ ] 访问属性, 此时属性需要加上引号
        console.log(b['score']);
        // 3. 调用方法, 别忘记加上 ()
        b.sayHello();

JavaScript基础语法

注意

使用 { } 创建的对象也可以随时使用 b.name = "zhangsan"; 这样的方式来新增属性. 

使用 构造函数 创建对象 

前面的创建对象方式只能创建一个对象. 而使用构造函数可以很方便 的创建 多个对象

使用构造函数可以把相同的属性和方法的创建提取出来, 简化开发过程.

基本语法

function 构造函数名(形参) {
    this.属性 = 值;
    this.方法 = function...
}

var obj = new 构造函数名(实参);

注意:

this 关键字来表示当前正在构建的对象.

构造函数的函数名首字母一般是大写的.

构造函数的函数名可以是名词.

构造函数不需要 return

创建对象的时候必须使用 new 关键字

 看一个例子

function Dog(name, type, sound) {
            this.name = name;
            this.type = type;
            this.wang = function () {
                console.log(sound); // 别忘了作用域的链式访问规则
            }        
        }
        let dabai = new Dog('dabai','柴犬','汪');
        let erbai = new Dog('erbai','哈士奇','汪汪汪');

        console.log(dabai);
        dabai.wang();

JavaScript基础语法

new关键字的理解

new 的执行过程: 先在内存中创建一个空的对象, this 指向刚才创建的空对象(将上一步的对象作为 this 的上下文) ,然后 执行构造函数的代码, 给对象创建属性和方法 ,最后 返回这个对象 (构造函数本身不需要 return, 由 new 代劳了)

标签：

相关文章