【前端】JavaScript —— JS的基本语法之数组, 函数....

最新推荐文章于 2024-09-16 20:08:29 发布

Gujiu！！

最新推荐文章于 2024-09-16 20:08:29 发布

阅读量564

点赞数 9

分类专栏： JavaEE 文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/m0_58592142/article/details/127668363

版权

JavaEE 专栏收录该内容

49 篇文章 2 订阅

订阅专栏

JavaEE传送门

JavaEE

【前端】CSS(3) —— CSS的盒模型与弹性布局

【前端】JavaScript —— JS的组成与基本语法

条件语句

if 语句

条件表达式为 true, 则执行 if 的 { } 中的代码

// 形式1
if (条件) {
    语句
}

// 形式2
if (条件) {
    语句1
} else {
    语句2 }

// 形式3
if (条件1) {
    语句1
} else if (条件2) {
    语句2   
} else if .... {
    语句...
} else {
    语句N
}

三元表达式

条件 ? 表达式1 : 表达式2

条件为真, 返回表达式1 的值. 条件为假, 返回表达式2 的值.

注意, 三元表达式的优先级是比较低的

switch

switch (表达式) {
    case 值1:
        语句1;
        break;
    case 值2:
        语句2:
        break;
    default:
        语句N; 
}

循环语句

while 循环

while (条件) {
    循环体; 
}

for 循环

for (表达式1; 表达式2; 表达式3) {
 循环体
}

数组

创建数组

使用 new 关键字创建

//这样可以成功的创建出一个空的数组, 但是一般不会这么写
let arr = new Array();

使用字面量方式创建 [常用]

//更简单的写法, [ ] 就表示一个空的数组
let arr = [];
//也可以在创建数组的时候, 同时指定初始值
var arr2 = [1, 2, 'haha', false];

和 java 不同, js 的数组长度是可以动态变化的, js 的数组更接近于 Java 的 ArrayList
js 的数组允许里面存在不同类型的元素 (也是要归咎于动态类型,其他的动态类型的语言, 也都是类似的设定)

访问数组元素

访问数组元素, 通过取下标的方式来进行操作, 从下标 0 开始计数

获取数组长度

arr.length

使用下标的时候, 最典型的场景就是, 下标访问越界. (在 Java 中下标访问越界, 就会抛出 ArrayIndexOutOfRangeException 异常)

但 JS 中没有这个问题.

let arr = ['小Gujiu', '中GuJiu', '大GUJIU'];
console.log(arr[3]);
//输出 undefined

为什么会这样呢 ? 因为我们实际上是在 arr[3] 处新增了一个数组元素.

如果我们直接给 arr[3] 赋值

虽然数组上本来没有下标为 3 的位置, 但是这个操作就会触发一个插入的行为, 就把新元素放到了对应下标的位置上了

整体就变成了长度为 4 的数组

如果我们进行 arr[100] = ’ ’ 的赋值操作, 就会把下标为 100 的元素给插入进去, 整个数组长度变成了 101, 中间部分都是 undefined

我们不仅仅可以使用常规下标, 我们看下面这个例子:

let arr = ['小Gujiu', '中GuJiu', '大GUJIU'];
arr[-1] = '迷你gujiu';
arr['gujiu'] = '鸪鸠'
console.log(arr);

在这里插入图片描述

把其当成数组元素, 不如当成键值对, JS 的数组不仅仅是个数组, 还能起到 map 这样的效果

在我们获取 [‘gujiu’] 的时候, 有两种写法:
console.log(arr['gujiu']);
console.log(arr.gujiu);
把数组视为一个对象 .js 的对象和 Java 的对象不同, JS 的对象是可以在运行是随意的新增属性的
arr[‘gujiu’] 相当于 arr.gujiu. (gujiu 就是 JS 这个数组对象的成员了)

# 注意事项 #

对于 JS 数组来说, [ ] 里是非负整数的时候, 此时才把这个操作视为是 “操作下标” 如果是其他类型的值, 都认为是数组的自定义属性
这个东西越灵活, 反而就越容易出问题. 虽然数组有能力表示键值对, 并不建议这样使用. JS 里有专门的 map 类型表示键值对 (ES6 标准里引入的特性)
(PHP 的数组也是和 JS 类似, 也是有上述这些奇怪的用法)

数组新增元素

有很多种方式, 最常用的就是使用 push 方法, 进行尾插 (类似于使用 ArrayList , 最常用的是 add 方法)

let newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] % 2 != 0) {
        newArr.push(arr[i]);
   }
}
console.log(newArr);

删除数组中的元素

newArr.pop();//删除最尾端元素

JS 的数组也支持中间位置的插入和删除

splice 既可以进行中间位置的插入, 也可以进行中间位置的删除, 还可以进行元素的替换

newArr.splice(2, 0, 'hello')

第一个参数, 表示你要取数组的起始下标
第二个参数, 表示你要取数组的长度. 0 就表示不对数组原来的内容做出调整
第三个参数, 表示要替换到数组指定范围的新的值

函数

函数就是方法, 方法就是函数

语法格式

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {//这里不必写返回值类型 (动态类型),形参列表, 每个形参的类型也不必显式写出
    函数体
    return 返回值; 
}

// 函数调用
函数名(实参列表)           // 不考虑返回值
返回值 = 函数名(实参列表)   // 考虑返回值

正因为 JS 是动态类型, 调用函数, 传参的时候, 同一个函数就允许传不同的类型, 只要说传的这些类型, 在函数内部能够正常使用即可.

比如：

function add(x, y) {
    return x + y;
}
console.log(add(1, 2));
console.log(add('hello', 'world'));

像 JS 这样的动态类型的语言, 相当于自带了 “泛型” 机制, 也不需要函数重载这样的语法.

# 注意 #

JS 的函数, 同样是一个函数, 就能支持不同个数的参数
JS 并不强制要求, 形参和实参个数匹配 (虽然通常不会这么做

我们在此处可以通过判断 a = a || 0; 操作

这时又有一个问题, 如果我们不确定实参的个数, 我们难道要写无数个形参吗？

这时, 我们就要使用一个内置变量 arguments 这个是数组. 数组里放了调用函数时候所有的实参

function add() {
    let ret = 0;
    //arguments 这个数组就包含了调用 add 方法的所有实参的值
    for (let i = 0; i < arguments.length; i++) {
       ret += arguments[i];
    }
    return ret;
}

# 注意 # splice 这个方法可以支持多个变长的参数, 就是通过 arguments 完成的.

函数表达式

在 JS 中, 函数是可以像普通的变量一样进行赋值的, 还可以作为另一个函数的参数或者可以作为另一个函数的参数. (函数在 JS 中是 “一等公民”, 函数和普通变量一模一样)

let add = function() {
    let ret = 0;
    for (let i = 0; i < arguments.length; i++) {
        ret += arguments[i];
    }
    return ret;
}

函数作用域

JS 中, 代码中尝试访问一个变量, 会首先查找当前的代码块, 如果当前代码块中没有, 就会继续往上级代码块中查找, 一直查找到全局的作用域.

# 注意 #

全局作用域: <script> 标签这一级
一个 html 里可以有多个 script 标签, 此时这些标签的全局作用域是同一个.

比如：我们看这样一段代码

在查找 num 的时候,

会先在蓝色大括号寻找
之后在粉色大括号寻找
之后在黄色大括号中寻找
最后在 script 标签中寻找

JS 把上述作用域, 查找规则, 称为 “作用域链”

对象

JS 的对象类似于 Java 的对象, 但是功能更加简化. JS 的对象, 是使用 { } 来表示的

let student = {
    // 对象中可以有属性
    name: 'Gujiu',
    age: 18,
    gender: 'female',
    // 也可以有方法
    sleep: function() {
        console.log('Gujiu睡大觉');
    }
}

定义好对象就可以使用 . 来进行访问成员操作.

student.name;
student.sleep();

在 JS 中创建一个对象, 不需要先创建一个类

构造函数

使用构造函数来代替了 Java 中的类, 起到了 “对象图纸” 这样的效果

// JS 写构造函数, 习惯 首字母大写, 要写成小写也不是不行
function Student(name, age, gender, sleepMsg) {
    // 构造函数, 会用到 this 同时不必写 return 语句
    // 这里的 this 就表示即将构造出来的对象
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.sleep = function() {
        console.log(sleepMsg);
    }
}
let student = new Student('Gujiu', 18, 'female', 'Gujiu睡大觉');