JavaScript学习笔记-速成版

最新推荐文章于 2022-10-21 09:09:57 发布

小雷的酸菜

最新推荐文章于 2022-10-21 09:09:57 发布

阅读量522

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/cy2lyf/article/details/127034384

版权

这篇博客涵盖了JavaScript的基础语法和函数面向对象的概念。从JS常用指令、变量、数据类型到字符串、数组、对象的操作，再到循环和高阶数组方法，深入讲解了JS核心。此外，还介绍了函数的使用，包括结构体函数和类创建对象，以及DOM操作和事件监听，是JS学习者的速成教程。

摘要由CSDN通过智能技术生成

8.高阶数组方法 (forEach、map、filter)

一.JS基础语法

1.JS常用指令

JS代码可以写在body结束标签前，或写在单独的JS文件中 (<script src="main.js"></script>)，在JS文件中不用写<script>标签

alert()：页面弹窗：不宜用来调试和输出 (建议用浏览器开发者工具console)

console.log：在控制台输出日志

console.error：在控制台输出错误信号

console.war：在控制台输出警告信号

2.JS中的变量

var：如果在函数外部，作用域为全局，如果在函数内部，作用域为整个函数块；允许在同一作用域重复声明；

let：作用域为当前所处代码块，可以是全局，也可以是整个函数块，或者是if while switch等用()限定的代码块；不允许在同一作用域重复声明

const：声明只读变量，必须赋初值，不可重新赋值；对于原始值类型 (underfined、null、true/false、number、string)，值就保存在变量指向的那个内存地址（栈中），因此const声明的的原始值类型变量等同于常量（canstant）；对于对象类型（object，array，function等），变量指向的内存地址其实是保存了一个指向实际数据的指针，所 const 只保证指针不可修改，至于指针指向的数据结构无法保证其不被修改’

3.js中的数据类型

原始值类型：数据直接分配给内存。string、number、boolean、null、underfined、symbol

引用数据(对象)类型：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）

// var一般用于声明全局变量; let声明的变量可重新赋值; const声明的变量必须赋初值，且不可重新赋值(对于原始值类型相当于常量)

// 原始值类型：String、Numbers、Boolean、null、underfined、symbol

const name = 'Allen';               // 分号可以不写
const age = 19;
const rating = 3.5;                 // JS中没有浮点数，只有number
const isCool = true;
const x = null;
let y;                              // 变量不赋初值，类型就为underfined

console.log(typeof name);
console.log(typeof age);
console.log(typeof rating);
console.log(typeof isCool);
console.log(typeof x);
console.log(typeof y);

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

运行结果：

string
number
number
boolean
object
undefined
undefined

4.字符串操作

const name = 'John';
const age = 21;

// 字符串拼接 (Concatention)
console.log('My name is '+name+' and I am '+age);
// 模板字符串 (推荐)
console.log(`My name is ${name} and I am ${age}`);      // 必须使用反引号,键盘esc下面那个

// 字符串的方法和属性（属性没有括号，方法有括号）
const s = 'hello world!';
console.log(s.length)                           // 长度是属性，没有括号
console.log(s.toUpperCase())                    // 转为大写是方法，要加括号，方法是函数对象
console.log(s.toLowerCase())
console.log(s.substring(2, 5))                  // 字符串切片，索引从0开始，左闭右开
console.log(s.substring(5).toUpperCase())       // 不写开始索引默认从n到末尾

// 字符串分割
const x = 'Hello,MY name is xiaoming,Hello JavaScript'
console.log(x.split(','))

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>..

运行结果：

My name is John and I am 21
My name is John and I am 21
12
HELLO WORLD!
hello world!
llo
 WORLD!
[ 'Hello', 'MY name is xiaoming', 'Hello JavaScript' ]

5.数组Array

// 数组可包含多个变量值
// 通过数组结构创建数组
const numbers = new Array(1, 2, 3, 'a');
console.log(numbers)

// 第二种方式 (同一个数组可以存储不同类型的值)，不能初始化空数组
const a = ['hello', 1, true, null]
console.log(a)
console.log(a[1])

// 向数组中添加或删除元素
a[4] = 'new1'
a.push(