JavaScript 基础学习笔记

最新推荐文章于 2022-06-22 09:44:40 发布

Q大浪淘沙

最新推荐文章于 2022-06-22 09:44:40 发布

阅读量1k

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_46252893/article/details/122042901

版权

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中。

Q大浪淘沙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 基础学习笔记

JavaScript基础1、JS 代码的位置1、写在到html文件中必须将代码放到script标签中<html> <head> <meta charset="utf-8"> <title>JS 基础</title>  <script> alert("Hello World"); </script>
复制链接

扫一扫