JavaScript基础语法

文章目录

• JS的书写形式
• • 1.行内式
  • 2.内嵌式
  • 3.外部式
  • • 注释
• 输入输出
• • 输入prompt
  • 输出: alert
  • 输出:console.log
• 语法概览
• • 变量的使用
  • • 基本用法
  • 基本数据类型
  • • number 数字类型
    • string字符串类型
    • boolean 布尔类型
    • undefined未定义数据类型
    • null空值类型
  • 运算符
• 数组
• • 数组的创建
  • 打印数组
  • 获取数组元素
  • 获取数组长度
  • 新增数组元素
  • • 通过修改length新增
    • 通过下标新增
    • 使用push进行追加元素
  • 删除元素
• 函数
• • 语法规则
  • 关于参数个数
  • 函数表达式
  • 作用域链
• 对象
• • 基本概念
  • 使用 字面量 创建对象[常用]
  • 使用new Object创建对象
  • 使用 构造函数 创建对象
• JavaScript的对象和Java的对象的区别
• • 1. JavaScript没有"类"的概念
  • 2. JavaScript对象不区分"属性" 和"方法"
  • 3. JavaScript对象没有private / public等访问控制机制.
  • 4. JavaScript 对象没有"继承"
  • 5. JavaScript没有"多态"

JS和HTML/CSS类似.都是运行在浏览器上的

在浏览器中,内置一个JS的执行引擎(所谓的引擎,对标了JAVA中的JVM)

对于在浏览器中执行的JS来说,可以视为是分成三部分

1. JS核心语法
2. DOM API"浏览器提供的一组,操作页面元素的API
3. BOM API :浏览器提供的一组,操作浏览器窗口的API

JS的书写形式 1.行内式

直接嵌入到 html 元素内部

按钮

2.内嵌式

写在script标签中

3.外部式

将js代码写入到一个单独的.js文件,在html中使用script来引入

hello.js

alert('hello js');

注意,当前情况下,不可以在script标签中间写代码,必须空着

注释

//这是一个注释

输入输出 输入prompt

输出: alert

弹出一个警示对话框, 输出结果

alert('hello');

输出:console.log

在控制台打印一个日志(供程序员看)

// 向控制台输出日志

console.log("这是一条日志");

语法概览 变量的使用 基本用法

创建变量(变量定义/变量声明/变量初始化)

var 变量名 = 初始值;

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

= 在 JS 中表示 “赋值”, 相当于把数据放到内存的盒子中. = 两侧建议有一个空格

每个语句最后带有一个 ; 结尾. JS 中可以省略 ; 但是建议还是加上.

注意, 此处的 ; 为英文分号. JS 中所有的标点都是英文标点.

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

初始化的值如果是数字, 那么直接赋值即可.

var num = 10; //创建了一个名字为num,数字类型变量
var s = 'hello'; //创建一个名字为s,字符串类型的变量
var arr = []; //创建一个名字为arr,数组类型的变量

无论创造什么类型的变量,都是统一使用val关键字来表示

变量是什么类型取决于初始化值为什么类型

变量使用

var a = 10;
a = 'hello';
console.log(a);

在变量的修改的时候,本来a是一个数字类型,在赋值的时候,可以给它赋一个数字类型,也可以赋一个字符串类型,或者其他任意类型,这种行为称为“动态类型"

基本数据类型

JS 中内置的几种类型

• number: 数字. 不区分整数和小数.
• boolean: true 真, false 假.
• string: 字符串类型.
• undefined: 只有唯一的值 undefined. 表示未定义的值.
• null: 只有唯一的值 null. 表示空值.

number 数字类型

JS 中不区分整数和浮点数, 统一都使用 “数字类型” 来表示

数字进制表示

计算机中都是使用二进制来表示数据, 而人平时都是使用十进制.

因为二进制在使用过程中不太方便(01太多会看花眼).

所以在日常使用二进制数字时往往使用 八进制 和 十六进制 来表示二进制数字.

var a = 07;      // 八进制整数, 以 0 开头
var b = 0xa;     // 十六进制整数, 以 0x 开头
var c = 0b10;    // 二进制整数, 以 0b 开头

注意:

• 一个八进制数字对应三个二进制数字
• 一个十六进制数字对应四个二进制数字. (两个十六进制数字就是一个字节)

特殊的数字值

• Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
• -Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
• NaN: 表示当前的结果不是一个数字.

var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);

注意:

1. 负无穷大 和 无穷小 不是一回事. 无穷小指无限趋近与 0, 值为 1 / Infinity

2. ‘hehe’ + 10 得到的不是 NaN, 而是 ‘hehe10’, 会把数字隐式转成字符串, 再进行字符串拼接.

3. 可以使用 isNaN 函数判定是不是一个非数字.

console.log(isNaN(10));  // false
console.log(isNaN('hehe' - 10));  // true

string字符串类型

基本规则

字符串字面值需要使用引号引起来, 单引号双引号均可

var a = "haha";
var b = 'hehe';
var c = hehe;    // 运行出错

如果字符串中本来已经包含引号咋办?

var msg = "My name is "zhangsan"";    // 出错
var msg = "My name is "zhangsan"";  // 正确, 使用转义字符. " 来表示字符串内部的引号. 
var msg = "My name is 'zhangsan'";    // 正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"';    // 正确, 搭配使用单双引号

求长度

使用 String 的 length 属性即可

var a = 'hehe';
console.log(a.length);
var b = '哈哈';
console.log(b.length);

单位为字符的数量

字符串拼接

使用 + 进行拼接

var a = "my name is ";
var b = "zhangsan";
console.log(a + b);

boolean 布尔类型

表示 “真” 和 “假”

boolean 原本是数学中的概念 (布尔代数).

在计算机中 boolean 意义重大, 往往要搭配条件/循环完成逻辑判断.

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

var b = true;
console.log(b + 1);

这样的操作其实是不科学的. 实际开发中不应该这么写.

undefined未定义数据类型

如果一个变量没有被初始化过, 结果就是 undefined, 是 undefined 类型

var a;
console.log(a)

undefined 和字符串进行相加, 结果进行字符串拼接

console.log(a + "10");  // undefined10

undefined 和数字进行相加, 结果为 NaN

console.log(a + 10);

null空值类型

null 表示当前的变量是一个 “空值”.

var b = null;
console.log(b + 10);    // 10
console.log(b + "10");  // null10

注意:

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

null 表示当前的值为空. (相当于有一个空的盒子)

undefined 表示当前的变量未定义. (相当于连盒子都没有

运算符

总结一些和Java意思不一样的运算符

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

比较两个对象,有三个维度的比较:

1. 比较身份(是不是同一个对象)
2. 比较值(对象存储的 数据 是否相等)
3. 比较类型 (两个对象是否是同一个类型)

 var a = 10;
var s = '10';
console.log(a == s);
console.log(a === s);

/也不一样

console.log(1 / 2);

&& 和 || 返回的是其中的一个表达式

c = a||b

如果a的值为真(非0) ,此时c的值就是表达式a的值

如果a的值为假(为0),此时c的值就是表达式b的值

c= a && b

如果a的值为假,此时c的值就是表达式a的值

如果a的值为真,此时c的值就是表达式b的值

数组 数组的创建

第一种创建方法:

let arr = new Array();

一般第一种方法用的不算很多

第二种创建方法:

let arr = [];
arr = [1, 2, 3, 4];

第三种创建方法:

let arr = [1,2,'hello',true,undefinde];

JavaScript中的数组可以放任意类型的数据.

打印数组

可以直接使用console.log打印

let arr = [1, 2, 3, 'hello', true, undefined];
console.log(arr);

获取数组元素

可直接根据下标获取数组元素,从0开始

let arr = [1, 2, 'hello', true, undefined];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
console.log(arr[4]);

注意:在java中,数组下标的范围是0 - length-1,如果不在范围内就会报出空指针异常,但是JavaScript不一样,如果下标超出范围读取元素, 则结果为 undefined

let arr = [1, 2, 'hello'];
console.log(arr[-1]);
console.log(arr[3]);

在JavaScript中,可以直接给数组名直接赋值

let arr = [1, 2, 'hello'];
arr[1] = true;
console.log(arr);

获取数组长度

可以直接使用length属性获取

let arr = [1, 2, 'hello'];
console.log(arr.length);

新增数组元素 通过修改length新增

相当于在末尾新增元素. 新增的元素默认值为 undefined

var arr = [9, 5, 2, 7];
arr.length = 6;
console.log(arr);
console.log(arr[4], arr[5]);

通过下标新增

如果下标超出范围赋值元素, 则会给指定位置插入新元素

let arr = [1, 2, 3];
arr[100] = 10;
console.log(arr);
console.log(arr.length);

使用push进行追加元素 删除元素

使用 splice 方法 针对数组的某个区间进行替换,可以用来删除元素,也可以添加元素

var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果
[9, 5, 7]

函数 语法规则

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
    函数体
    return 返回值; 
}
// 函数调用
函数名(实参列表)           // 不考虑返回值
返回值 = 函数名(实参列表)   // 考虑返回值

给函数指定参数的时候,是不需要写参数类型的

function add(x, y) {
    return x + y; 
}
let result = add(1, 1);
console.log(result);
result = add('hello', 'js');
console.log(result);

result = add('hello', 10);
console.log(result);

关于参数个数

实参和形参之间的个数可以不匹配. 但是实际开发一般要求形参和实参个数要匹配

1. 如果实参个数比形参个数多, 则多出的参数不参与函数运算

function add(x, y) {
    return x + y;
}
let result = add(1, 2, 3, 4);
console.log(result);

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

function add(x, y, z) {
    return x + y + z;
}
let result = add(1, 2);
console.log(result);

函数表达式

let hello = function() {
    console.log('hello');
}
hello();

作用域链

• 函数可以定义在函数内部
• 内层函数可以访问外层函数的局部变量.

内部函数可以访问外部函数的变量. 采取的是链式查找的方式. 从内到外依次进行查找.

var num = 10;
function hello() {
    var num = 20;
function hello2() {
     console.log(num);
}
      hello2();
}
hello();

对象 基本概念

对象是指一个具体的事物.

“电脑” 不是对象, 而是一个泛指的类别. 而 “我的联想笔记本” 就是一个对象.

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

每个对象中包含若干的属性和方法.

• 属性: 事物的特征.
• 方法: 事物的行为

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

在js中,所有的对象都是一个类型 object ,在js中,直接通过{}的方式创建对象

let student = {
    naem: '张三',
    age: 18,
    height: 180,
    eat: function() {
    console.log('吃东西');
    },
    sleep: function() {
          console.log('睡觉');
    }
};
console.log(student.naem);
console.log(student.age);
student.eat();

使用 { } 创建对象

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

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

键和值之间使用 : 分割.

方法的值是一个匿名函数

使用new Object创建对象

let student = new Object();
student.name = '张三';
student.age = 18;
student.height = 180;
student.eat = function() {
    console.log('吃东西');
}
student.sleep = function() {
    console.log('睡觉');
}

console.log(student.name);
console.log(student.age);
console.log(student.height);
student.sleep();

注意, 使用 { } 创建的对象也可以随时使用 student.name = "张三"; 这样的方式来新增属性.

使用 构造函数 创建对象

基本语法

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

注意:

• 在构造函数内部使用 this 关键字来表示当前正在构建的对象.
• 构造函数的函数名首字母一般是大写的.
• 构造函数的函数名可以是名词.
• 构造函数不需要 return
• 创建对象的时候必须使用 new 关键字.

使用构造方法创建猫咪对象

function Cat(name, type, sound) {
    this.name = name;
    this.type = type;
    this.miao = function () {
        console.log(sound); // 别忘了作用域的链式访问规则
   }
}
var mimi = new Cat('咪咪', '中华田园喵', '喵');
var xiaohei = new Cat('小黑', '波斯喵', '猫呜');
var ciqiu = new Cat('刺球', '金渐层', '咕噜噜');
console.log(mimi);
mimi.miao();

理解 new 关键字

new 的执行过程:

1. 先在内存中创建一个空的对象 { }

2. this 指向刚才的空对象(将上一步的对象作为 this 的上下文)

3. 执行构造函数的代码, 给对象创建属性和方法

4. 返回这个对象 (构造函数本身不需要 return, 由 new 代劳了)

JavaScript的对象和Java的对象的区别 1. JavaScript没有"类"的概念

对象其实就是 “属性” + “方法” .

类相当于把一些具有共性的对象的属性和方法单独提取了出来, 相当于一个 “月饼模子”

在 JavaScript 中的 “构造函数” 也能起到类似的效果.

而且即使不是用构造函数, 也可以随时的通过 { } 的方式指定出一些对象

2. JavaScript对象不区分"属性" 和"方法"

JavaScript 中的函数是 “一等公民”, 和普通的变量一样. 存储了函数的变量能够通过 ( ) 来进行调用执行.

3. JavaScript对象没有private / public等访问控制机制.

对象中的属性都可以被外界随意访问.

4. JavaScript 对象没有"继承"

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

JavaScript 中使用 “原型” 机制实现类似的效果.

5. JavaScript没有"多态"

多态的本质在于 “程序猿不必关注具体的类型, 就能使用其中的某个方法”.

C++ / Java 等静态类型的语言对于类型的约束和校验比较严格. 因此通过 子类继承父类, 并重写父类的方

法的方式 来实现多态的效果.

但是在 JavaScript 中本身就支持动态类型, 程序猿在使用对象的某个方法的时候本身也不需要对对象的

类型做出明确区分. 因此并不需要在语法层面上支持多态.