学习笔记 JavaScript基础语法（全）

JavaScript

文章目录

JavaScript
- 第一章——初始JavaScript
- - 1.1 浏览器执行 JS 简介
  - 1.2 JS的组成
  - - 1.2.1 ECMAScript
    - 1.2.2 DOM ——文档对象模型
    - 1.2.3 BOM ——浏览器对象模型
  - 1.3 JS的写法
  - - 1.3.1 行内式写法
    - 1.3.2 内嵌式写法
    - 1.3.3 外部js文件
  - 1.4 注释
  - 1.5 变量
  - - 1.5.1 变量声明
    - 1.5.2 变量赋值
    - 1.5.3 声明多个变量
  - 1.6 输入与输出
  - - 1.6.1 格式化输出
    - 1.6.2 输入
- 第二章——数据类型
- - 2.1 简单数据类型：
  - - 2.1.1 数字类型
    - 2.1.2 转义字符
    - 2.1.3 字符串类型
  - 2.2 获取数据类型 typeof
- 第三章——操作符
- - 3.1 算数运算符
  - 3.2 递增和递减运算符
  - 3.3 比较运算符
  - 3.4 = 符号
  - 3.5 逻辑运算符
- 第四章——流程控制
- - 4.1 if语句
  - - 1. 语法结构
    - 2. if else语句（双分支语句）
    - 3. if else if 语句 ( 多分支语句 )
  - 4.2 三元表达式
  - - 1. 语法结构
  - 4.3 分支流程控制switch 语句
  - - 1. 语法结构
    - 2. 语法说明
- 第五章——循环结构
- - 5.1 for循环
  - - 5.1.1 语法结构
  - 5.2 while 循环
  - - 5.2.1 语法结构
  - 5.3 do while 循环
  - - 5.3.1 语法结构
  - 5.4 continue与break
- 第六章——数组
- - 6.1 数组创建
  - - 6.1.1 new创建
    - 6.1.2 利用数组字面量创建数组
  - 6.2 数组索引与切片
  - - 6.2.1 索引
    - 6.2.2 获取数组长度
  - 6.3 数组相关操作
  - - 6.3.1 数组新增元素
    - - 1. 通过修改 length长度新增数组元素
      - 2. 直接通过索引进行新增元素
- 第七章——函数
- - 7.1 函数使用
  - - 7.1.1 声明函数
    - 7.1.2 调用函数
  - 7.2 函数参数
  - - 7.2.1 形参和实参
    - 7.2.2 函数形参和实参个数不匹配问题
  - 7.3 函数返回值
  - 7.4 arguments使用
  - - 7.4.1 arguments属性
  - 7.5 匿名函数
  - - 表达式写法
- 第八章——作用域
- - 8.1 全局作用域
  - 8.2 局部作用域
  - 8.3 块级作用域
  - 8.4 JavaScript预解析
- 第九章——面向对象
- - 9.1 对象基本结构
  - 9.2 对象的调用
  - 9.3 对象创建
  - - 9.3.1 直接创建
    - 9.3.2 使用 new Object创建对象
    - 9.3.3 使用构造函数创建对象
  - 9.4 遍历对象属性
  - - 9.4.1. 语法结构
    - 9.4.2 代码示例
- 第十章——常见内置对象
- - 10.1 对象定义
  - 10.2 一些内置对象模块
  - - 10.2.1 Math
    - 10.2.2 Date
    - - 1. 获取当前时间
      - 2. 日期格式化相关函数
    - 10.2.3——数组对象 Array
    - - 1. 创建数组对象
      - 2. 判断是否为数组对象
      - 3.添加删除数组元素的方法
      - 4 .数组排序
      - 5. 查找数组中特定元素的索引
      - 6. 数组转换为字符串
      - 7. 数组其他补充操作
    - 10.2.4 字符串对象
    - - 1. 返回字符位置
      - 2. 根据索引返回字符串具体值
      - 3. 字符串操作方法
      - 4. replace()方法
      - 5. split()方法
      - 6. 转换大小写
- 第十一章——简单类型与复杂类型
- - 11.1 简单类型与复杂类型概念
  - 11.2 栈和堆
  - 11.3 简单类型的内存分配
  - 11.4 复杂类型的内存分配
  - 11.5 简单类型传参：
  - 11.6 复杂类型传参

第一章——初始JavaScript

1.1 浏览器执行 JS 简介

浏览器分成两部分：渲染引擎和 JS 引擎

渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
JS 引擎：也称为 JS 解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8

1.2 JS的组成

在这里插入图片描述

1.2.1 ECMAScript

ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

1.2.2 DOM ——文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

1.2.3 BOM ——浏览器对象模型

BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

1.3 JS的写法

行内式写法
内嵌 JS
外部 JS 文件

1.3.1 行内式写法

<input type="button" value="点我试试" onclick="alert('Hello World')" />

可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
可读性差，在html中编写JS大量代码时，不方便阅读；
引号易错，引号多层嵌套匹配时，非常容易弄混；
特殊情况下使用

1.3.2 内嵌式写法

<script>
    alert('Hello  World~!');
 </script>

l可以将多行JS代码写到

1.3.3 外部js文件

<script src="demo.js"></script>

src为js文件的路径
这样可以单独开一个js文件，将所有JavaScript代码放在外部的一个js文件中

1.4 注释

单行注释：//
多行注释：/注释内容/

1.5 变量

1.5.1 变量声明

var a; var b;

这样就声明了一个变量a

1.5.2 变量赋值

a=20;b="hello world";

a，b可以被赋值为任意数据类型的值

1.5.3 声明多个变量

同时声明多个变量时，只需要写一个 var，多个变量名之间使用英文逗号隔开。

var a = 10,  b = 'yy', c = 2;

1.6 输入与输出

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

**注意：**alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

1.6.1 格式化输出

alert(“提示”：+变量)

alert('结果是'+result)

// 1. 先弹出第一个输入框，提示用户输入第一个值 
 var num1 = prompt('请输入第一个值：');
// 2. 再弹出第二个框，提示用户输入第二个值 
 var num2 = prompt('请输入第二个值：');
// 3. 将输入的值转换为数字型后，把这两个值相加，并将结果赋给新的变量  
 var result = parseFloat(num1) + parseFloat(num2);
// 4. 弹出结果
 alert('结果是:' + result);

1.6.2 输入

prompt输入的变量类型均为字符串类型

第二章——数据类型

JS 把数据类型分为两类：

简单数据类型（Number,String,Boolean,Undefined,Null）
复杂数据类型（object)

2.1 简单数据类型：

在这里插入图片描述

在JS中八进制前面加0，十六进制前面加 0x

2.1.1 数字类型

数字类型的三个特殊值

值	说明
Infinity	代表无穷大，大于任何数值
-Infinity	代表无穷小，小于任何数值
NaN	Not a number，代表一个非数值

alert(Infinity);  // Infinity
alert(-Infinity); // -Infinity
alert(NaN);       // NaN

判断是否为数字——isNaN()

var a = 21;
var b = isNaN(a);
console.log(isNaN(a))//false
var c = "hello";
console.log(isNaN(c));  // true ，"hello"是一个非数字

2.1.2 转义字符

转义符	说明
\n	换行
\\	斜杠\
\’	单引号
\"	双引号
\t	tab 缩进
\b	空格，b 是 blank 的意思

2.1.3 字符串类型

获取字符串长度 string.length

var a='hello world'
console.log(a.length)//11

字符串拼接 使用 + 号

var a='hello world '
var b='yeye for the first'
console.log(a+b)//hello world yeye for the first

2.2 获取数据类型 typeof

var num = 24;
console.log(typeof num) // 结果 number

不同类型返回值
在这里插入图片描述

第三章——操作符

3.1 算数运算符

在这里插入图片描述

3.2 递增和递减运算符

如果需要反复给数字变量添加或减去1，可以使用递**增（++）和递减（–）**运算符来完成。

前置自增：++a 先自加，后返回值
后置自增：a++ 先返回原值，后自增

3.3 比较运算符

在这里插入图片描述

3.4 = 符号

在这里插入图片描述

console.log(18 == '18');//true
console.log(18 === '18');//false

js里面的==号会发生一个自动转型

3.5 逻辑运算符

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。

第四章——流程控制

4.1 if语句

1. 语法结构

// 条件成立执行代码，否则什么也不做
if (条件表达式) {
    // 条件成立执行的代码语句
}

2. if else语句（双分支语句）

// 条件成立  执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
    // [如果] 条件成立执行的代码
} else {
    // [否则] 执行的代码
}

3. if else if 语句 ( 多分支语句 )

// 适合于检查多重条件。
if (条件表达式1) {
    语句1；
} else if (条件表达式2)  {
    语句2；
} else if (条件表达式3)  {
   语句3；
 ....
} else {
    // 上述条件都不成立执行此处代码
}

4.2 三元表达式

1. 语法结构

表达式1 ? 表达式2 : 表达式3;

如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
简单理解：就类似于 if else （双分支）的简写

var time = prompt('请输入一个数字');
// 三元表达式 表达式 ？ 表达式1 ：表达式2 
var result = (time < 10 ?  time+'比10小' : time+'不比10小'); // 把返回值赋值给一个变量
alert(result);

4.3 分支流程控制switch 语句

1. 语法结构

switch( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

2. 语法说明

switch ：开关转换， case ：小例子选项
关键字 switch 后面括号内可以是表达式或值，通常是一个变量
关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
switch 表达式的值会与结构中的 case 的值做比较
如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束
如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码

第五章——循环结构

5.1 for循环

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句

5.1.1 语法结构

for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}

初始化变量：通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。

5.2 while 循环

while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。

5.2.1 语法结构

while (条件表达式) {
    // 循环体代码 
}

说明

①先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码

②执行循环体代码

③循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束

5.3 do while 循环

5.3.1 语法结构

do… while 循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

5.4 continue与break

continue：立即跳出本次循环，继续下一次循环
break：break 关键字用于立即跳出整个循环（循环结束）

第六章——数组

6.1 数组创建

6.1.1 new创建

var 数组名 = new Array() ；
var arr = new Array();   // 创建一个新的空数组

注意 Array () ，A 要大写

6.1.2 利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
var  数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var  数组名 = ['小白','小黑','大黄','瑞奇'];

类似python中的列表
数组的字面量是方括号 [ ]
数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

6.2 数组索引与切片

6.2.1 索引

**索引 (下标) ：**用来访问数组元素的序号（数组下标从 0 开始）。

// 定义数组
var arr = [1,2,3];
// 获取数组中的第2个元素
alert(arr[1]);//弹出2

6.2.2 获取数组长度

var arr=[1,2,3]
console.log(arr.length)//输出3

6.3 数组相关操作

6.3.1 数组新增元素

1. 通过修改 length长度新增数组元素

var arr = ['red', 'green', 'blue', 'pink'];
console.log(arr);//['red', 'green', 'blue', 'pink']
arr.length = 7;
arr[4]='black'
console.log(arr)//['red', 'green', 'blue', 'pink', 'black', empty × 2]

在这里插入图片描述

可以通过修改 length 长度来实现数组扩容的目的
length 属性是可读写的

2. 直接通过索引进行新增元素

var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);

在这里插入图片描述

第七章——函数

7.1 函数使用

7.1.1 声明函数

// 声明函数
function 函数名() {
    //函数体代码
}

function 是声明函数的关键字,必须小写

7.1.2 调用函数

// 调用函数
函数名();  // 通过调用函数名来执行函数体代码

调用的时候千万不要忘记添加小括号

7.2 函数参数

7.2.1 形参和实参

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参
参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

// 声明函数
function getSum(num1, num2) {
    console.log(num1 + num2);
}
// 调用函数
getSum(1, 3); // 4
getSum(6, 5); // 11

7.2.2 函数形参和实参个数不匹配问题

在这里插入图片描述

function sum(num1, num2) {
    console.log(num1 + num2);
}
sum(100, 200);             // 形参和实参个数相等，输出正确结果
sum(100, 400, 500, 700);   // 实参个数多于形参，只取到形参的个数
sum(200);                  // 实参个数少于形参，多的形参定义为undefined，结果为NaN

注意点：

在JavaScript中，形参的默认值是undefined。
函数可以带参数也可以不带参数
声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
调用函数的时候，函数名括号里面的是实参
多个参数中间用逗号分隔
形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配

7.3 函数返回值

在定义函数的时候，用return语句代表这个函数的返回值，函数内程序一旦执行到return 语句，代表该函数执行结束

// 声明函数
function sum（）{
    ...
    return  918；
}
// 调用函数
a=sum();      // 此时 a的值就等于918，因为 return 语句会把自身后面的值返回给调用者

return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

function add(num1，num2){
    //函数体
    return num1，num2;
}
var resNum = add(8,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值
alert(resNum);          // 6

7.4 arguments使用

不确定有多少个参数传递的时候，可以用 arguments 来获取。
在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

7.4.1 arguments属性

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法

7.5 匿名函数

表达式写法

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

因为函数没有名字，所以也被称为匿名函数
这个fn 里面存储的是一个函数
函数表达式方式原理跟声明变量方式是一致的
函数调用的代码必须写到函数体后面

第八章——作用域

8.1 全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

8.2 局部作用域

作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

8.3 块级作用域

Js中没有块级作用域（在ES6之前）

for(var a=1;a<5;a++)
{
    console.log(a)
}
console.log('局部变量a的值为：'+a)//5

8.4 JavaScript预解析

**预解析：**在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。

console.log(num);  // 结果是多少？
var num = 10;  //undefined

说明声明可以提前，但是赋值不会被提前

代码执行： 从上到下执行JS语句。

预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined，为什么在函数声明之前就可以调用函数。

fn();
function fn() {
    console.log('打印');
}
//输出了打印

因为声明可以被提前，所以调用这个函数依然可以直接输出结果

第九章——面向对象

9.1 对象基本结构

var star = {
    name : 'yeye',
    age : 24,
    sex : '女',
    sayHi : function(){
        alert('hello world');
    }
};

说明：

用花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。
{ } 里面采取键值对的形式表示
键：相当于属性名
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

9.2 对象的调用

对象里面的属性调用 : 对象.属性名，这个小点 . 就理解为“ 的 ”
对象里面属性的另一种调用方式 : 对象[‘属性名’]**，**注意方括号里面的属性必须加引号，我们后面会用
对象里面的方法调用：对象.方法名() **，**注意这个方法名字后面一定加括号

//star为一个对象  sayHI为对象里面的一个函数
console.log(star.name)     // 调用名字属性
console.log(star['name'])  // 调用名字属性
star.sayHi();              // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

9.3 对象创建

9.3.1 直接创建

var idle = {
    name : 'yeye',
    age : 24,
    sex : '女',
    sayHi : function(){
        alert('for the first place');
    }
};

9.3.2 使用 new Object创建对象

var andy = new Object();
andy.name = 'yeye';
andy.age = 24;
andy.sex = '女';
andy.sayHi = function(){
    alert('hello');
}
console.log(andy.name)//yeye
/*
先使用new Object创建一个对象，然后对其属性进行赋值
*/

Object() ：第一个字母大写
new Object() ：需要 new 关键字
使用的格式：对象.属性 = 值;

9.3.3 使用构造函数创建对象

//这个Person其实就相当于一个类（class）
function Person(name, age, sex) {
     this.name = name;
     this.age = age;
     this.sex = sex;
     this.sayHi = function() {
      alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
    }
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);

构造函数 ：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

在 js 中，使用构造函数要时要注意以下两点：

构造函数用于创建某一类对象，其首字母要大写
构造函数要和 new 一起使用才有意义

使用构造函数注意点：
- 构造函数约定首字母大写。
- 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
- 构造函数中不需要 return 返回结果。
- 当我们创建对象的时候，必须用 new 来调用构造函数。

9.4 遍历对象属性

9.4.1. 语法结构

for (变量 in 对象名字) {
    console.log(key)//key为属性名
    console.log(对象名[key])//输出值
    // 在此执行代码
}

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

9.4.2 代码示例

var andy = new Object();
andy.name = 'yeye';
andy.age = 24;
andy.sex = '女';
andy.sayHi = function(){
    alert('hello');
}
/*
先使用new Object创建一个对象，然后对其属性进行赋值
*/
for(var key in andy)
{
    console.log(key+':'+andy[key])
}

第十章——常见内置对象

10.1 对象定义

JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象
前面两种对象是JS 基础内容，属于 ECMAScript；第三个浏览器对象属于JS 独有， JS API 中讲
内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
内置对象最大的优点就是帮助我们快速开发
JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

10.2 一些内置对象模块

10.2.1 Math

Math.PI		 // 圆周率
Math.floor() 	 // 向下取整
Math.ceil()            // 向上取整
Math.round()           // 四舍五入版 就近取整   注意 -3.5   结果是  -3 
Math.abs()		 // 绝对值
Math.max()/Math.min()	 // 求最大和最小值 
Math.random()//随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1

10.2.2 Date

Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
Date 实例用来处理日期和时间

1. 获取当前时间

如果Date()不写参数，就返回当前时间

var now = new Date();
console.log(now);//Sat Jan 14 2023 19:57:15 GMT+0800 (中国标准时间)

如果Date()里面写参数，就返回括号里面输入的时间

var now = new Date('2022-2-13');
console.log(now);//Sun Feb 13 2022 00:00:00 GMT+0800 (中国标准时间)

2. 日期格式化相关函数

在这里插入图片描述

getMonth（）方法可以返回表示月份的数字。返回值是0代表一月，11代表12月

getDay()方法返回一周里的某一天。返回值0代表星期天，一代表星期一，六代表星期六

var now = new Date();
console.log(now.getFullYear()+'-'+(now.getMonth()+1)+'-'+now.getDate()+' '+now.getHours()+':'+now.getMinutes());

在这里插入图片描述

10.2.3——数组对象 Array

1. 创建数组对象

new Array()

var a =new Array;
a[0]='hello'
a[1]='world'
console.log(a)//['hello', 'world']

2. 判断是否为数组对象

instanceof 运算符，可以判断一个对象是否属于某种类型
Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var a =new Array;
a[0]='hello'
a[1]='world'
console.log(a instanceof Array)//true

3.添加删除数组元素的方法

方法名	说明	返回值
push(添加元素)	末尾追加一个或多个元素	并返回新的长度
pop()	删除数组最后一个元素，把数组长度减1	返回它删除的元素的值
unshift(参数)	向数组的开头添加一个或更多元素，注意修改原数组	并返回新的长度
shift()	删除数组的第一个元素，数组长度减1无参数，修改原数组	并返回第一个元素的值
splice(开始删除元素索引，删除元素个数)	删除数组特定下标元素

//push 追加元素
var a =new Array;
a[0]='hello'
a[1]='world'
a[2]='yeye'
console.log(a);//['hello', 'world', 'yeye']
a.push('haha')
console.log(a)//['hello', 'world', 'yeye', 'haha']

4 .数组排序

在这里插入图片描述

sort方法能够接受一个函数

var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {
    return b - a;      // 降序
    // return a - b;   // 升序
});
console.log(arr);

这个参数函数的返回值决定了数组的排序。返回值大于0会变换两个参数的位置，返回值小于0不会变换两个参数的位置。
返回值大于0则为升序，返回值小于0则为降序
如果不加参数，则默认为升序

5. 查找数组中特定元素的索引

在这里插入图片描述

var arr = [1, 64, 9, 6,6];
console.log(arr.indexOf(1));//0
console.log(arr.indexOf(9));//2
console.log(arr.lastIndexOf(6))//4

6. 数组转换为字符串

在这里插入图片描述

toString

var arr = [1, 64, 9, 6,6];
b=arr.toString()
console.log(b)
console.log(typeof b)

在这里插入图片描述

jion

var arr = [1, 64, 9, 6,6];
b=arr.join('+')
console.log(b)
console.log(typeof b)

在这里插入图片描述

7. 数组其他补充操作

在这里插入图片描述

concat()

var arr = [1, 64, 9, 6,6];
var HII=[25,58,66,44]
a=arr.concat(HII)
console.log(a)

在这里插入图片描述

slice()

var arr = [1, 64, 9, 6,6];
var HII=[25,58,66,44]
a=arr.slice(2,4)
console.log(a)//[9, 6]

10.2.4 字符串对象

字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。

1. 返回字符位置

在这里插入图片描述

2. 根据索引返回字符串具体值

在这里插入图片描述

3. 字符串操作方法

在这里插入图片描述

4. replace()方法

replace(被替换的字符串，要替换为的字符串)；

var a='hello '
var b='world'
var c=a+b
console.log(c)
console.log(c.replace(c[0],b[0]))

在这里插入图片描述

注意字符串c本身是不会改变，字符串方法都是不会改变它本身的

5. split()方法

split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。

var a='he,llo '
var b='w,or,ld'
var c=a+b
console.log(c.split(','))// ['he', 'llo w', 'or', 'ld']

在这里插入图片描述

6. 转换大小写

toUpperCase() //转换大写
toLowerCase() //转换小写

var a='hello '
var b='world'
var c=a+b
var d=c.toUpperCase()
console.log(c.toUpperCase())//HELLO WORLD
console.log(d.toLocaleLowerCase())//hello world

第十一章——简单类型与复杂类型

11.1 简单类型与复杂类型概念

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型

string ，number，boolean，undefined，null

引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型

通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

11.2 栈和堆

堆栈空间分配区别：

1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；

简单数据类型存放到栈里面

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

复杂数据类型存放到堆里面

在这里插入图片描述

11.3 简单类型的内存分配

值类型（简单数据类型）： string ，number，boolean，undefined，null
值类型变量的数据直接存放在变量（栈空间）中

在这里插入图片描述

11.4 复杂类型的内存分配

引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

在这里插入图片描述

11.5 简单类型传参：

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。
形参和实参是独立的

11.6 复杂类型传参

函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

function Person(name)
{
    this.name = name;
}
function f1(x) 
{ // x = p   
    x.name = "yeye"; 
}
var p = new Person("瑶瑶");
console.log(p.name);    // 瑶瑶  
f1(p);
console.log(p.name);    // yeye

在这里插入图片描述

可以看到p.name属性的值已经被改变了

视频教程：https://www.bilibili.com/video/BV1Sy4y1C7ha/?share_source=copy_web&vd_source=03653b285aec67f0157f73840202808d
对应文档（PDF+markdown格式）：https://download.csdn.net/download/weixin_63676550/87386435