首先,搞清楚一点,Java 跟 JavaScript一点关系都没有
html(素颜)+css(化妆)+JavaScript(行为)俗称前端三剑客

JavaScript的组成

ECMAScript(简称 ES): JavaScript 语法

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

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

这里我们主要讲一些语法知识,也是在html文件里面敲的,工具VsCode,在body标签下写script标签
注释:有单行注释 // ; 有多行注释 /* */,使用Ctrl + /切换注释,多行注释不能嵌套…

输入输出

输入:prompt
弹出一个一个输入框

<body>
    <script>
    prompt("请输入密码:");
    </script>
</body>

在这里插入图片描述

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

<script>
   alert("hello world!");
    </script>

在这里插入图片描述

输出:console.log
在控制台打印一个日志(供程序员看的),这是咱们在开发中最常用的一种输出方式

 <script>
   console.log("hello world!");
    </script>

进去之后按F12,打开开发者工具,里面就可以看到(当然,每个人的电脑设置可能不一样,但大多数都是F12)

在这里插入图片描述

同时,如果js代码中,出现了一些语法错误,或者运行时错误,也会在控制台中显示出来
比如,我们console 少些一个 e

<script>
   consol.log("hello world!");
    </script>

在这里插入图片描述

JS的基础语法

跟java还是有很多地方不一样的

变量

定义一个变量:
var 变量名 = 初始值;

var 是JS的关键字,表示这是一个变量,末尾的分号可以省略,但是不建议省略

 <script>
        var num = 10; //创建了一个名为 num 的,数字类型的变量
        var s = 'hello';//创建了一个名为 s 的,字符串类型的变量
        var arr = [];//创建了一个名为 arr,数组类型的变量
        console.log(num);
        console.log(s);
        console.log(arr);
    </script>

不管创建的变量是啥类型,都统一用var这个关键字来表示,至于变量具体是啥类型,取决于初始化的值是啥类型…(JS不区分整形和浮点型,字符串可以用单引号也可以用双引号)

在这里插入图片描述

JavaScript 中还支持使用 let 定义变量. 用法和 var 基本类似
区别大体记住let有块级作用域的约束:

  <script>
{
      
      
    let a = 10;
}
console.log(a);
</script>

在这里插入图片描述

 <script>
{
      
      
    var a = 10;
}
console.log(a);
    </script>

在这里插入图片描述

var包含全局

动态类型

先看一下这个代码:

<script>
       var a = 10; //数字
       a = "hello"; //字符串
       console.log(a); 
    </script>

在这里插入图片描述

此时,我们发现,输出的是hello,说明了,随着程序的运行,变量的类型可能会发生改变,这种就称为"动态类型"(运行时),但是像我们c,c++,java,go…这样的语言不支持这种运行时类型发生改变,这种行为就是"静态类型"

基本数据类型

有这几种:

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

number 数字类型

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

数字进制表示:
计算机中都是使用二进制来表示数据, 而人平时都是使用十进制.
因为二进制在使用过程中不太方便(01太多会看花眼).
所以在日常使用二进制数字时往往使用八进制和十六进制来表示二进制数字

<script>
      var a = 07; // 八进制整数, 以 0 开头
var b = 0xa; // 十六进制整数, 以 0x 开头
var c = 0b10; // 二进制整数, 以 0b 开头
console.log(a);
console.log(b);
console.log(c);
    </script>

在这里插入图片描述

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

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

  <script>
     var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hello' - 10);
//字符串拼接
console.log('hello' + 10);
    </script>

在这里插入图片描述

注意:

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

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

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

 <script>
  console.log(isNaN(10)); // false
console.log(isNaN('hello' - 10)); // true
    </script>

在这里插入图片描述

String 字符串类型

单引号双引号均可,但不能没有
如果字符串中已经包含了引号,就需要我们转义
不转义:

 <script>
var str = "Thank you,"dabaifan"";
    </script>

在这里插入图片描述

转义:

 <script>
var str = "Thank you,\"dabaifan\""; //用 \" 来表示转义 " 
console.log(str);
    </script>

在这里插入图片描述

如果是单引号包裹双引号或者双引号包裹单引号,不需要转义

<script>
var str1 = "Thank you,'dabaifan'";
var str2 = 'Thank you,"dabaifan"';
console.log(str1);
console.log(str2);
    </script>

在这里插入图片描述

求长度:

 <script>
var a = "hello boy";
console.log(a.length);
var b = "哒哒哒";
console.log(b.length);
    </script>

单位为字符的数量
在这里插入图片描述

字符串拼接:

使用 + 进行拼接

 <script>
var a = "hello boy,";

var b = "thank you";
console.log(a + b);
    </script>

在这里插入图片描述

boolean 布尔类型

表示 “真” 和 “假”

在JS中 ,布尔类型会被当成 1 和 0 来处理

  <script>
var a = true;
var b = false;
var c = 1;
console.log(a + c);
console.log(b + c);
    </script>

在这里插入图片描述

这种设定方式是不科学的,发生了"隐式类型转换",开发中不建议这么写…

如果一个编程语言,越支持"隐式类型转换",认为类型越弱(C,JS,PHP)
如果一个编程语言,越不支持"隐式类型转换",认为类型越强(Java,Go,Python)
强类型,意味着类型之间的差异越大,界限更明确, 弱类型意味着类型之间的差异不大,界限是更模糊的…

注意:
静态类型/动态类型 VS 强类型/弱类型是不相关的概念(正交)

undefined 未定义的数据类型

如果一个变量没有被初始化过,结果就是undefined,是undefined 类型…(非法的)

<script>
var a;
console.log(a);
    </script>

在这里插入图片描述

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

<script>
var a;
console.log(a + "10");
    </script>

在这里插入图片描述

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

<script>
var a;
console.log(a + 10);
    </script>

在这里插入图片描述

null 空值类型

null 表示当前的一个变量是一个"空值":

<script>
var a = null;
console.log(a + 10);
console.log(a + "10");
    </script>

在这里插入图片描述

注意:
null 和 undefined 都表示取值非法的情况, 但是侧重点不同.
null 表示当前的值为空. (相当于有一个空的盒子)
undefined 表示当前的变量未定义(相当于盒子都没有)

运算符

和java类似,其实大多数语言都类似

算数运算符

+

-

*

/

%

注意:

<script>
console.log(1 / 2);
    </script>

在这里插入图片描述

<script>
       console.log(1 + 2);
       console.log(1 - 2);
       console.log(1 * 2);
       console.log(1 / 2);
       console.log(1 % 2);  //取余
   </script>

在这里插入图片描述

赋值运算符 & 复合赋值运算符

=

+=

-=

*=

/=

%=

 <script>
       var a = 10;
       var b = 20;
       console.log(a = b);
       a = 10;
       console.log(a += b);
       a = 10;
       console.log(a -= b);
       a = 10;
       console.log(a *= b);
       a = 10;
       console.log(a /= b);  
       a = 10;
       console.log(a %= b); 
   </script>

在这里插入图片描述

自增自减运算符

++:自增1

--:自减1

 <script>
       var a = 10;
       var b = 20;
      console.log(a++);
      a = 10;
      console.log(++a);
      console.log(b--);
      b = 20;
      console.log(--b);
   </script>

在这里插入图片描述

比较运算符

<

>

<=

>=

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

!=

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

!==

 <script>
var a = 10;
var b = "10";
console.log(a == b); //发生隐式类型转换
console.log(a === b); //不发生隐式类型转换
    </script>

谈到比较两个对象,有三个维度的比较:
1:比较身份(是不是同一个对象)
2:比较值(对象里存储的数据是否相等)
3:比较类型(两个对象是否是同一类型)

逻辑运算符

用于计算多个 boolean 表达式的值

&& 与:一假则假
|| 或:一真则真
! 非

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

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

位运算

& 按位与
| 按位或
~ 按位取反
^ 按位异或

移位运算

<<左移
>> 有符号右移(算术右移)
>>> 无符号右移(逻辑右移)

条件语句

if 语句

条件表达式为 true, 则执行 if 的 { } 中的代码

// 形式1
if (条件) {
语句
}

// 形式2
if (条件) {
语句1
} else {
语句2
}

// 形式3
if (条件1) {
语句1
} else if (条件2) {
语句2
} else if .... {
语句...
} else {
语句N
}

三元表达式

是 if else 的简化写法
条件 ? 表达式1 : 表达式2;
条件为真, 返回表达式1 的值. 条件为假, 返回表达式2 的值

switch

更适合多分支的场景

switch (表达式) {
case 值1:
语句1;
break;
case 值2:
语句2:
break;
default:
语句N;
}

循环语句

重复执行某些语句

while循环

while (条件) {
循环体;
}

执行过程:
先执行条件语句
条件为 true, 执行循环体代码.
条件为 false, 直接结束循环

continue

结束这次循环

break

结束整个循环

for 循环

for (表达式1; 表达式2; 表达式3) {
循环体
}

表达式1: 用于初始化循环变量.
表达式2: 循环条件
表达式3: 更新循环变量.
执行过程:
先执行表达式1, 初始化循环变量
再执行表达式2, 判定循环条件
如果条件为 false, 结束循环
如果条件为 true, 则执行循环体代码.
执行表达式3 更新循环变量

数组

创建数组

使用 new 关键字创建

 <script>
var arr = new Array();
    </script>

使用字面量方式创建(常用)

<script>
var arr = [];
var arr2 = [1,2,'hello',true,'哈哈'];
console.log(arr);
console.log(arr2);
    </script>

在这里插入图片描述

注意
JS的数组不要求元素是相同的类型…

获取数组元素

使用下标的方法访问数组元素(下标从0开始)

 <script>
var arr = [1,2,'hello',true,'哈哈'];
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[4]);
arr[0] = 0;
console.log(arr); //打印数组
    </script>

在这里插入图片描述

注意:如果下标超出范围读取元素,则结果为undefined…

 <script>
var arr = [1,2,'hello',true,'哈哈'];
console.log(arr[5]);
console.log(arr[-1]); 
    </script>

在这里插入图片描述

注意: 不要给数组名直接赋值, 此时数组中的所有元素都没了

 <script>
var arr = [1,2,3,4,5];
console.log(arr);
arr = 100;
console.log(arr);
    </script>

相当于本来 arr 是一个数组, 重新赋值后变成数字了

新增数组元素

通过修改 length 新增

<script>
var arr = [9, 5, 2, 7];
console.log(arr);
arr.length = 10;
console.log(arr);
console.log(arr[4], arr[5]);
    </script>

在这里插入图片描述

空属性就是,中间元素任然是 undefined

通过下标新增

<script>
var arr = [];
arr[2] = 10;
console.log(arr);
    </script>

在这里插入图片描述

此时这个数组的 [0] 和 [1] 都是 undefined

注意下面这样的操作

  <script>
var arr = [1,2,3,4,5];
arr[-1] = 10;
console.log(arr);
console.log(arr.length);
    </script>

在这里插入图片描述

此时这里的 -1 就不算是下标了,更像是一个"属性",并没有影响到数组的长度

 <script>
var arr = [1,2,3,4,5];
arr['hello'] = 10;
console.log(arr);
console.log(arr['hello']);
console.log(arr.length);
    </script>

在这里插入图片描述

JS中的数组,不是一个正经的数组,他除了能接数组的活,还能接 map的活(键值对),就像是一个"对象",在JS中,可以在运行时,给对象新增属性
arr[‘hello’] 就是在给 arr 这个对象,新增了一个属性,属性的名字是 hello,属性的值是 10…

使用 push 进行追加元素

<scipt>
var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] % 2 != 0) {
newArr.push(arr[i]);
}
}
console.log(newArr);
    </script>

在这里插入图片描述

删除数组中的元素

使用 splice 方法删除元素

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

在这里插入图片描述

函数

语法格式

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

函数定义并不会执行函数体内容, 必须要调用才会执行. 调用几次就会执行几次

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

let res = add(10,20);
console.log(res);

res = add('hello,','world');
console.log(res);

res = add('hello',20);
console.log(res);
    </script>

在这里插入图片描述

传入的实参类型是可以任意的,只要能够支持函数内部的逻辑,函数参数的个数,一般在写代码的时候,都是需要调用的时候传入的实参,个数和形参匹配,但是,JS并没有在语法上做出这样的限制,如果实参和形参个数不一样,也不是完全不行…

<script>
function add(a,b,c,d,e){
      
      
    return a + b + c + d + e;
}

var res = add(10,20);
console.log(res);

res = add(10,20,30);
console.log(res);

res = add(10,20,30,40);
console.log(res);
    </script>

在这里插入图片描述

上面没被传参传到的形参,就是undefined,所以最后返回的就是数字+undefined,结果就是NaN

想要得到想要的结果,我们需要加一些约束条件:

 <script>
function add(a,b,c,d,e){
      
      
    a = a || 0;
    b = b || 0;
    c = c || 0;
    d = d || 0;
    e = e || 0;
    return a + b + c + d + e;
}

var res = add(10,20);
console.log(res);

res = add(10,20,30);
console.log(res);

res = add(10,20,30,40);
console.log(res);
    </script>
</body>

在这里插入图片描述

这样写,就不会出错了,但是实际开发中不推荐,因为太"灵活了",如果哪出错了,你都不一定发现得了…

函数表达式

在 JS 中,函数就是 “一等功民”(函数,就像一个普通变量一样,可以被赋值给其他变量,也可以作为另一个函数的参数,还可以作为另一个函数的返回值…相比于普通变量多了一个功能,可以被调用)

所谓的函数表达式,就是把一个函数赋值给一个变量:

<script>
function hello(){
      
      
    console.log("hello");
}
let f = hello;  
f();
</script>

hello是一个函数名,hello后面没有(),说明这个操作,不是函数调用,而是一个单纯的函数赋值,f 就是function类型的变量)

在这里插入图片描述

还可以合并一下:

<script>
let f = function hello(){
      
      
    console.log("hello");
}
f();
console.log(typeof(f));
    </script>

在这里插入图片描述

在进一步,就可以把hello给省略了,此时就可以完全依赖 f 来找到该函数:

<script>
let f = function (){
      
      
    console.log("hello world!");
}
f();
console.log(typeof(f));
    </script>

在这里插入图片描述

作用域

某个标识符名字在代码中的有效范围.
在 ES6 标准之前, 作用域主要分成两个
全局作用域: 在整个 script 标签中, 或者单独的 js 文件中生效.
局部作用域/函数作用域: 在函数内部生效.

<script>
let ret = 10;
function hello2(){
      
      
    function hello(){
      
      
        console.log(ret);
    }
    hello();
}
hello2();
    </script>

在这里插入图片描述

JS中的作用域,是支持"逐级向上"查找的,当前在 hello 函数里,尝试打印 ret,但是在里面没找到 ret 变量,就往上找,到了 hello2 这里,也没找到 ret 变量,于是在往上找,找到了全局作用域,找到了(如果全局都没找到,就报错了)

作用域链

背景:
函数可以定义在函数内部.
内层函数可以访问外层函数的局部变量.
内部函数可以访问外部函数的变量. 采取的是链式查找的方式. 从内到外依次进行查找.

 <script>
let ret = 10;
function hello2(){
      
      
    let ret = 20;
    function hello(){
      
      
        console.log(ret);
    }
    hello();
}
hello2();
    </script>

在这里插入图片描述

存在多个同名的变量,从内到外,先找到谁就是谁…

对象

就是一些属性和方法的集合,在JS中,对象是不依托于类的,在JS中所有对象,都是一个类型…Object…

使用字面量创建对象 {}

<script>
let animal = {
      
      
    name: "金毛",
    age: 2,
    height: 50,
    weight: 100,

    eat: function(){
      
      
        console.log("吃鸡肉");
    },

    run: function(){
      
      
        console.log("跑步");
    },
};

console.log(animal.name);
console.log(animal.age);
animal.eat();
animal.run();
    </script>

每个属性和方法,其实都是通过"键值对"这样的方式来表达的…
{} 表示这是个对象…
键值对之间,使用, 来分割…
键和值之间,使用: 来分割…

在这里插入图片描述

使用 new Object 创建对象

  <script>
var student = new Object(); // 和创建数组类似
student.name = "孙悟空";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
      
      
console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();
    </script>

在这里插入图片描述

注意, 使用 { } 创建的对象也可以随时使用 student.name = “孙悟空”; 这样的方式来新增属性.

使用构造函数创建对象

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

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

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

 <script>
function Dog(name, color, action) {
      
      
this.name = name;
this.color = color;
this.f = function () {
      
      
console.log(action); 
}
}
var dog1 = new Dog("xiaohei","black","run");
var dog2 = new Dog("xiaobai","white","swim");
var dog3 = new Dog("xiaofen","pink","sleep");
console.log(dog2);
dog2.f();

console.log(dog1);
dog1.f();

console.log(dog3);
dog3.f();
    </script>

在这里插入图片描述

JavaScript(基础语法)

JavaScript的组成

输入输出

JS的基础语法

变量

动态类型

基本数据类型

number 数字类型

String 字符串类型

boolean 布尔类型

undefined 未定义的数据类型

null 空值类型

运算符

算数运算符

赋值运算符 & 复合赋值运算符

自增自减运算符

比较运算符

逻辑运算符

位运算

移位运算

条件语句

if 语句

三元表达式

switch

循环语句

while循环

continue

break

for 循环

数组

创建数组

获取数组元素

新增数组元素

通过修改 length 新增

通过下标新增

使用 push 进行追加元素

删除数组中的元素

函数

语法格式

函数表达式

作用域

作用域链

对象

使用字面量创建对象 {}

使用 new Object 创建对象

使用 构造函数 创建对象

猜你喜欢

使用构造函数创建对象