JavaScript基础
1、JS 代码的位置
1、写在到html文件中
必须将代码放到script
标签中
<html>
<head>
<meta charset="utf-8">
<title>JS 基础</title>
<!-- 放到 head 标签内 -->
<script>
alert("Hello World");
</script>
</head>
<body>
<h1>JS 基础</h1>
<!-- 放到 body 标签内 -->
<script>
alert("Hello World");
</script>
</body>
</html>
<!-- 放到最后面 -->
<script>
alert("Hello World");
</script>
2、单独建立js文件
在 js文件中不需要写script
标签,可以直接写JS代码
alert("Hello World");
在要用的html文件中以下列方式引用即可
<html>
<head>
<meta charset="utf-8">
<title>JS 基础</title>
<!-- js 文件的引用,src 中写 js文件 的地址 -->
<script src="test.js"></script>
</head>
<body>
<h1>JS 基础</h1>
</body>
</html>
2、声明关键字
有三种:var
、let
、const
,
1、var
全局作用域,假如如果if中设置了一个变量a,而在if外也有一个变量a,这时会引起冲突和问题,所以大多数时候不要用
2、let 和 const 的区别
1、let声明的变量可以重新赋值
let a = 12;
a = 15;
console.log(a);
2、const声明的变量不能重新赋值
const a = 12;
a = 15;
console.log(a);
而且声明变量时必须有初始值
const a;
3、数据类型
String
、Numbers
、Boolean
、null
、undefined
const name = 'John';
const age = '24';
const rating = 3.5;
const isCool = true;
const x = null;// js 中 null 是对象,只是它是个空的对象
const y = undefined;
let z;
console.log('name: ' + typeof name);
console.log('age: ' + typeof age);
console.log('rating:' + typeof rating);
console.log('isCool:' + typeof isCool);
console.log('x: ' + typeof x);
console.log('y: ' + typeof y);
console.log('z: ' + typeof z);
1、String(字符串)
1、字符串拼接
传统方法:
console.log('My name is ' + name + ' and I am ' + age);
模板字符串:
// 用 反引号 + ${} 的方式
console.log(`My name is ${name} and I am ${age}`);
// 下面是同样的效果
const hello = `My name is ${name} and I am ${age}`;
console.log(hello);
2、常用方法
方法名称 | 方法描述 |
---|---|
toUpperCase() | 字符串大写 |
toLowerCase() | 字符串小写 |
substring(0,5) | 截取0到5的字符 |
slipt(’,’) | 将字符串以逗号分开并存入数组中,如果括号内什么都不写,将把所有字符全部分开 |
2、Arrays(数组)
1、创建数组
// 结构体方式
const number = new Array(1,2,3,4,5);
// 常用方式(一个数组内可以设置多种数据类型)
const fruits = ['str1', 'str2', 1, true];
并且当数组用const声明时,可以继续操作该数组
const fruits = ['str1', 'str2', 1, true];
fruits[4] = 'str3'
console.log(fruits);
2、常用方法
方法名称 | 方法描述 |
---|---|
push(‘mangos’) | 向数组末尾添加元素mangos |
unshift(‘mangos’) | 向数组开头添加元素mangos |
pop() | 删除最后一个元素 |
Array.isArray(‘fruits’) | 判断fruits是否是数组 |
indexOf(‘str2’) | 获得str2元素的索引(下标) |
4、对象
对象实际上就是键值对
1、创建对象
// 对象中可以有数组、其他对象
const person = {
firstName: 'John',
lastName: 'Doe',
age: 30,
hobbies: ['music', 'movies', 'sports'],
address: {
street: '50 main st',
city: 'Boston',
state: 'MA'
}
}
2、解构
// 从 person对象 中取出以下变量
const {firstName, lastName, address: {city}} = person;
console.log(`${firstName}, ${lastName}, ${city}`);
3、给对象添加属性
person.email = 'John@gmail.com';
5、数组对象
1、创建
const todos = [
{
id: 1,
text: 'Take out trash',
inCompleted: true
},
{
id: 2,
text: 'Meeting with boss',
inCompleted: true
},
{
id: 3,
text: 'Dentist appt',
inCompleted: false
}
];
console.log(todos);
2、获得某个对象的值
console.log(todos[1].text);
3. 将数组对象转换为JSON
const todoJSON = JSON.stringify(todos);
console.log(todoJSON);
- 注意:JS支持Lambda表达式写法,但->
要改为=>
!
// 遍历数组
todos.forEach(todo => console.log(todo));
// 筛选数组
const filters = todos.filter(todo => todo.inCompleted === true);
console.log(filters);
// 处理数组
const texts = todos.map(todo => `This is a text: ${todo.text}`);
console.log(texts);
// 联合用法
const datas = todos.filter(todo => todo.inCompleted === true)
.map(todo => `This is a text: ${todo.text}`);
console.log(datas);
6、面向对象编程——对象方式
// 构造方法
function Person(firstName, lastName, dob) {
this.firstName = firstName;
this.lastName = lastName;
// 字符串转化为 Date 类型
this.dob = new Date(dob);
// 定义方法
this.getFullYear = function() {
return this.dob.getFullYear();
}
}
// 创建对象
const person1 = new Person('John', 'Doe', '1989-3-15');
const person2 = new Person('Mary', 'Smith', '1992-5-24');
// 使用方法
console.log(person1.getFullYear());
在构造方法内定义方法时会有个问题
// 打印对象
console.log(person1);
可以看到定义的getFullYear方法
也在方法的属性里面,可能会影响后续对对象数据的操作,所以可以放在prototype(原型)
中
// 构造方法
function Person(firstName, lastName, dob) {
this.firstName = firstName;
this.lastName = lastName;
// 字符串转化为 Date 类型
this.dob = new Date(dob);
}
// 将方法放到 prototype(原型) 中
Person.prototype.getFullYear = function() {
return this.dob.getFullYear();
}
// 创建对象
const person1 = new Person('John', 'Doe', '1989-3-15');
// 使用方法(与之前一样)
console.log(person1.getFullYear());
// 打印对象
console.log(person1);
这样对象的属性内就没有了定义的方法,方法全在prototype
内
7、面向对象编程——Class方式
class Person {
// 构造方法(名字都叫 constructor )
constructor(firstName, lastName, dob) {
this.firstName = firstName;
this.lastName = lastName;
this.dob = new Date(dob);
}
// 方法
getFullYear() {
return this.dob.getFullYear();
}
}
// 创建对象等都与上面的相同
const person1 = new Person('John', 'Doe', '1989-3-15');
console.log(person1.getFullYear());
console.log(person1);
而且这种方式添加的方法,如上面的getFullYear方法
,会自动放到prototype
中。