JavaScript基本语法

JavaScript基础语法介绍

JavaScript介绍

1.1 JavaScript是什么

是一个运行在浏览器上的编程语言。

1.2JavaScript书写位置

内部式：

<body>
    <script>
        alert('hey')//页面弹出警示框
    </script>
</body>

外部式：

<body>
    <script src="./my.js">
    </script>
</body>

使用外部时，script标签里面不要写内容，否则会被忽略。

1.3JavaScript输入输出语法

输出语法1：

<body>
    <script>
        document.write('hey')
        document.write('<h1> 一级 </h1>')
    </script>
</body>

输出语法2：

<body>
    <script>
        alert('hey')//页面弹出警示框
    </script>
</body>

输出语法3：

<body>
    <script>
        console.log('haha')//控制台输出语法，程序员调试使用
    </script>
</body>

输入语法1：

1	`prompt('请输入')//弹出一个对话框`

prompt输入类型为字符串。

1.4 字面量

比如2000 是数字字面量，’hahaha’是字符串字面量，[]数组字面量，{}对象字面量

变量

2.1 变量是什么

白话：用来装数据的盒子。可以用来存放数据。

2.2 变量的基本使用

(与c语言定义类似)

1.声明变量

1	`let variable //var存在与老版的JavaScript中`

age为变量。

2.变量赋值

1	`variable = 18`

variable为变量，18为字面量。

变量不允许多次定义。

小小的变量使用一下：

<body>
    <script>
        let n=prompt('请输入')
        document.write(n)
    </script>
</body>

2.3 变量命名规则与规范

1. 规则

①不能用关键字。

②只能用下划线、字母、数字、＄组成，且不能用数字开头。

③字母严格区分大小写。

2.规范

①起名要有意义。

②遵守小驼峰命名法。

数组

1.1 声明数组

1	`let arr = [1，2，3]`

1.2 数组的基本使用

1 2	`console.log(arr[0]) //索引 console.log(arr.length) //获取长度`

常量

1.1 基本使用

1	`const G = 9.8`

常量不允许重新赋值，声明的时候必须赋值。

数据类型

js为弱数据类型语言，只有赋值了才知道是什么数据类型。

基本数据类型

number 数字型

string 字符串型

boolean 布尔型

undefined 未定义型

null 空类型

引用数据类型

object 对象

1.数字类型

数字类型可以由+ - * / %各个符号进行运算。

NaN (not a number)：表示计算错误。

NaN是粘性的，任何对NaN的操作都会返回NaN。

2.字符串

通过单引号、双引号或反引号包裹的数据都叫字符串。

字符串拼接：

console.log('12'+'34') //字符串可以用加号拼接
let a='k'
let b='q'
console.log(k+q)

模板字符串：

1	document.write(`大家好，我叫${name},今年${age}岁`) //用反引号,变量用＄{}包裹

3.布尔型 (bollean)

1 2	`let n=true console.log(n)`

4.未定义类型 (undefined)

1 2	`let num console.log(num) //输出undefined`

5.空类型 (null)

1 2	`let obj=null //表示赋值了一个空的内容 console.log(obj)`

如果一个变量里面确定存放的是对象，如果还没准备号对象，可以放个null

6.检测数据类型

1 2	`typeof num //num为变量 typeof(num)`

7.类型转换

隐式转换

+号两边只要有一个是字符串，都会把另外一个转成字符串。

除了+以外的算数运算符，比如- * /等都会把数据转成数字类型。

console.log('数字' + 1) //返回'数字1'
console.log('1' + 1) //返回'11'
console.log('1' - 1) //返回0
console.log(+'123') //返回123

显示转换

通过函数来进行数据转换：

1 2	`Number(str) //转换为数字类型 let num = +prompt('输入') //输入的可以转换为数字类型`

parse系列：

parseInt(num) //只保留数字且只保留整数
parseFloat(num) //保留数字并保留小数
parseInt(12px) //12 
parseFloat(12.86px) //12.86

运算

一元运算符

前置自增

1 2	`let i=1 console.log(++i + 2) //2+2=4`

先自加再使用。

后置自增

1 2	`let i=1 console.log(i++ + 2) //1+2=3 此时i已经为2，但是没有参与运算`

先使用再自加。

1 2	`let i=1 console.log(i++ + ++i + i) //1+3+3=7 第二个i时i为2`

比较运算符

>
<
>=
<=
== //左右两边值是否相等
===	//左右两边是否类型和值都相等
!== //左右两边是否不全等

NaN不等于任何人，包括它自己。

1	`console.log(NaN === NaN) //false`

if语句

1
2
3

if (条件) {
	满足条件执行的代码
}

条件中只有数字0或者空字符会触发false，其余都是true。

三元运算符

可以代替if双分支。

1	`条件 ? 满足条件执行的代码 : 不满足条件执行的代码`

例子：

if(3<5){
	alert('真的')
}
else{
	alert('假的')
}

和

1	`3<5 ? alert('真的') : alert('假的')`

等价。

还可以作赋值操作：

1	`let sum = 3 < 5 ? 3 : 5 //sum=3`

数字补0例子

1
2
3

let num = prompt('请您输入一个数字') //类型为string
num = num < 10 ? 0 + num : num //判断小于10才补0
alert(num)

输入9，输出09

输入11，输出11

数组

查询

1 2	`let arr=[1,2,3] console.log(arr[0])`

修改

1
2
3

let arr=[1,2,3]
arr[0]=3
console.log(arr[0]) //[3,2,3]

增加

push() 添加数组末尾

unshift() 添加数组开头

let arr=[1,2,3]
arr.push(4) //[1,2,3,4]
arr.push(4,5) //[1,2,3,4,5]
arr.unshift(0) //[0,1,2,3]

删除

pop() 弹出最后一个元素

shift() 弹出第一个元素

splice() 切片删除 //arr.plice(起始位置，删除几个)

let arr=[1,2,3]
arr.pop() //[1,2]
console.log(arr.pop()) //3
arr.shift() //[2,3]
console.log(arr.shift) //1
arr.splice(1,1) //[1,3]
arr.splice(1) //[1] 删除索引1后面的所有
arr.splice(1,2) //[1]

函数

1
2
3

function 函数名() {
	函数体
}

调用:

函数名()

例如：

function sayhi{
	console.log('hi')
}

sayhi()

异常处理语句

throw语句

1	`throw expression;`

使用这个语句后就会弹出error：

for(let i=1;i<=5;i++){
    if(i!=4){
        console.log("yes");
    }
    else{
        throw "not 4"; //Uncaught not 4
    }
}

try…catch语句

try{
	...

} catch (error){
	console.error(error)
}

catch块可以用来处理所有try块总产生的异常。

finally块

openMyFile();
try {
  writeMyFile(theData); //This may throw a error
} catch (e) {
  handleError(e); // If we got a error we handle it
} finally {
  closeMyFile(); // always close the resource
}

finally块包含了在 try 和 catch 块完成后、下面接着 try…catch 的语句之前执行的语句。finally块无论是否抛出异常都会执行。如果抛出了一个异常，就算没有异常处理，finally块里的语句也会执行。

循环与迭代

其循环方式与c语言相似，不再一一赘述。

对象

一个对象就是一系列属性的集合，一个属性包含一个名和一个值。一个属性的值可以是函数，这种情况下属性也被称为方法。

对象及其属性：

var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

可以按如下方法访问对象：

1
2
3

myCar["make"] = "Ford";
myCar["model"] = "Mustang";
myCar["year"] = 1969;

创建新对象

使用对象初始化器创建

var obj = {
  property_1: value_1, // property_# 可以是一个标识符...
  2: value_2, // 或一个数字...
  ["property" + 3]: value_3, //  或一个可计算的 key 名...
  // ...,
  "property n": value_n,
}; // 或一个字符串

使用构造函数创建

用构造函数创建分两种：

通过创建一个构造函数来定义对象的类型。(建议首字母大写)
通过 new 创建对象实例。

这里首先定义一个对象类型，并且赋予其make,model,year属性。

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

注意这里是通过this来给对象类型属性值赋值

然后你就可以创建一个新对象啦

1	`var mycar = new Car("Eagle", "Talon TSi", 1993);`

或者你也可以让类中加入一个owner：

function Car(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
}

那么你就可以这样创建：

1 2	`var car1 = new Car("Eagle", "Talon TSi", 1993, rand); var car2 = new Car("Nissan", "300ZX", 1992, ken);`

就可以这样索引读取：

1	`car2.owner.name;`

你也可以为之前定义的对象增加新的属性：

1	`car1.color = "black";`

注意这里只是这个car1增加了新属性，不影响其他car1,car3

使用Object.create方法创建

及使用Object.create()函数创建

var Animal = {
  type: "Invertebrates", // 属性默认值(无脊椎动物)
  displayType: function () { //类里面可以包含函数
    console.log(this.type); //该函数用来显示type的值
  },
};

// 创建一种新的动物——animal1
var animal1 = Object.create(Animal);
animal1.displayType(); // 输出:Invertebrates(因为没有没有给type赋值)

// 创建一种新的动物——Fishes
var fish = Object.create(Animal);
fish.type = "Fishes";
fish.displayType(); // 输出:Fishes

#JS

JavaScript基本语法

https://bayeeaa.github.io/2024/04/18/JavaScript基本语法/

Author

Posted on

April 18, 2024

Licensed under

c++基础数据结构之栈、队列、链表 Previous

如何优雅的将秒换算成-时:分:秒？ Next