JavaScript(基础语法)

首先,搞清楚一点,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>

在这里插入图片描述

注意:

  1. 负无穷大 和 无穷小 不是一回事. 无穷小指无限趋近与 0, 值为 1 / Infinity
  2. ‘hehe’ + 10 得到的不是 NaN, 而是 ‘hehe10’, 会把数字隐式转成字符串, 再进行字符串拼接.
  3. 可以使用 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>

在这里插入图片描述

评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

粉色的志明

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值