javaScript 语法基础

javaScript 基础


文章目录


前言

ECMAScript:ECMAScript 规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。是js组成部分之一(1.ECMAScript;2 DOM ——文档对象模型;3 BOM ——浏览器对象模型 )


补充:vscode注释快捷键

1.单行注释
// 用来注释单行文字( 快捷键 ctrl + / )

2. 多行注释的注释方式如下:
/* */ 用来注释多行文字( 默认快捷键 alt + shift + a )
快捷键修改为: ctrl + shift + /
vscode  首选项按钮  键盘快捷方式  查找 原来的快捷键  修改为新的快捷键  回车确认

3. JavaScript 输入输出语句
在这里插入图片描述

一、变量

本质:变量是程序在内存中申请的一块用来存放数据的空间。

1 变量的使用(声明变量 -赋值)

2 变量语法扩展

一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。

var age = 18;
age = 81; // 最后的结果就是81因为18 被覆盖掉了 。

2.1 同时声明多个变量

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

var age = 10, name = 'zs', sex = 2; 

2.2 声明变量特殊情况

在这里插入图片描述

3 变量命名规范

 1.由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name
 2.严格区分大小写。var app;var App; 是两个变量
 3.不能 以数字开头。 18age 是错误的
 4. 不能 是关键字、保留字。例如:varforwhile
 5. 变量名必须有意义。 MMD BBD nl → age
 6. 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myFirstName

4 变量小结

在这里插入图片描述

二、数据类型

1 为什么需要数据类型

在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。

2 变量的数据类型

变量是用来存储值的所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的
内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会
被自动确定。
在这里插入图片描述

3 数据类型的分类(简单& 复杂)

简单数据类型

在这里插入图片描述

1 Number

JavaScript 数字类型既可以用来保存整数值,也可以保存小数(浮点数)。

1.1 数字型进制

在这里插入图片描述

1.2 数字型范围 (MAX_VALUE & MIN_VALUE)

在这里插入图片描述

1.3 数字型三个特殊值(Infinity; -Infinity ;NaN )

在这里插入图片描述

1.4 isNaN() [是否为非数字的类型]

用来判断一个变量是否为非数字的类型,返回 true 或者 false
在这里插入图片描述

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false ,21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName)); // true ,"andy"是一个非数字
2 字符串型 String
2.1 字符串转义符(转义符\ 开头的)

在这里插入图片描述

2.2字符串长度

字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符
串的长度

var strMsg = "我是帅气多金的程序猿!";
alert(strMsg.length); // 显示 11
2.3字符串拼接

多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112 
+ 号总结口诀:数值相加 ,字符相连
3 Boolean (true 和 false )

布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。
布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。

console.log(true + 1); // 2
console.log(false + 1); // 1
4 Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时,注意结果)

var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

一个声明变量给 null 值,里面存的值为空(讲解对象时,我们继续研究null)

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1

3.1 获取检测变量的数据类型(typeof )

typeof 可用来获取检测变量的数据类型

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

在这里插入图片描述

3.2 字面量

字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
在这里插入图片描述

3.3 数据类型转换

在这里插入图片描述

3.3.1 转换为字符串

在这里插入图片描述
toString() 和 String() 使用方式不一样。
三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式, 这一种方式也称之为隐式转换。

3.3.2 转换为数字型(重点)parseint() & parseFloat()

在这里插入图片描述
注意 parseInt 和 parseFloat 单词的大小写,这2个是重点
隐式转换是我们在进行算数运算的时候,JS 自动转换了数据类型

3.3.3 转换为布尔型 Boolean()
 代表空、否定的值会被转换为 false ,如 ''、0、NaN、null、undefined 
 其余值都会被转换为 true
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

三、操作符

  运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。

## JavaScript中常用的运算符有

1 算数运算符(+ - * / %)

概念:算术运算使用的符号,用于执行两个变量或值的算术运算。
在这里插入图片描述

1.1 浮点数的精度问题(不直接判断两个浮点数是否相等)

浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。

var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100); // 结果不是 7, 而是:7.000000000000001

所以:不要直接判断两个浮点数是否相等 !

1.2 表达式和返回值

 表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
 简单理解:是由数字、运算符、变量等组成的式子
 表达式最终都会有一个结果,返回给我们,我们成为返回值

2 递增和递减运算符(++ & --)

在这里插入图片描述

2.1 前置递增运算符 (先自加,后返回值)

++num 前置递增,就是自加1,类似于 num = num + 1,但是 ++num 写起来更简单。
使用口诀:先自加,后返回值

var num = 10;
alert(++num + 10); // 21

2.2 后置递增运算符 (先返回原值,后自加)

num++ 后置递增,就是自加1,类似于 num = num + 1 ,但是 num++ 写起来更简单。
使用口诀:先返回原值,后自加

var num = 10;
alert(10 + num++); // 20

2.3 前置递增和后置递增小结

在这里插入图片描述

3 比较运算符

概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true / false)作为比较运算的结果。

在这里插入图片描述

3.1 = 小结

在这里插入图片描述

console.log(18 == '18');
console.log(18 === '18');

4 逻辑运算符 (布尔值运算)

概念:逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发中经常用于多个条件的判断
### 4.1

4 .1 逻辑与&& (满足全部条件为真)

在这里插入图片描述

4.2 逻辑或 || (满足1个条件即为真)

在这里插入图片描述

4.3 逻辑非 !(取反)

逻辑非(!)也叫作取反符,用来取一个布尔值相反的值,如 true 的相反值是 false

var isOk = !true;
console.log(isOk); // false

4.4 短路运算(逻辑中断)

短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

4.4.1 逻辑与

在这里插入图片描述

console.log( 123 && 456 ); // 456
console.log( 0 && 456 ); // 0
console.log( 123 && 456&& 789 ); // 789
4.4.2 逻辑或

在这里插入图片描述

console.log( 123 || 456 ); // 123
console.log( 0 || 456 ); // 456
console.log( 123 || 456 || 789 ); // 123

5 赋值运算符

概念:用来把数据赋值给变量的运算符。
在这里插入图片描述

var age = 10;
age += 5; // 相当于 age = age + 5;
age -= 5; // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

6 运算符优先级

在这里插入图片描述
一元运算符里面的逻辑非优先级很高,逻辑与比逻辑或优先级高

四、 流程控制(顺序、分支,循环)

在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
在这里插入图片描述

1 顺序流程控制

顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行,
程序中大多数的代码都是这样执行的。
在这里插入图片描述

2 分支流程控制 if 语句

在这里插入图片描述

2.1 if 语句

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

语句可以理解为一个行为,循环语句和分支语句就是典型的语句。一个程序由很多个语句组成,一般情况下,会分割成一个一个的语句。

2.1.1 执行流程

在这里插入图片描述

2.2 if else语句(双分支语句)

语法结构

// 条件成立 执行 if 里面代码,否则执行else 里面的代码
if (条件表达式) {
 // [如果] 条件成立执行的代码
} else {
 // [否则] 执行的代码
}
2.2 .1 执行流程

在这里插入图片描述

2.3 if else if 语句(多分支语句)

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

在这里插入图片描述

3 三元表达式

 三元表达式也能做一些简单的条件选择。 有三元运算符组成的式子称为三元表达式

在这里插入图片描述

4 分支流程控制 switch 语句

switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值
的选项时,就可以使用 switch。

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

4.1 语法结构

在这里插入图片描述

4.2 switch 语句和 if else if 语句的区别

在这里插入图片描述

五、 循环(for , while do…while )

循环的目的
在实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句

在这里插入图片描述

5.1 for 循环

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

在这里插入图片描述

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

}

5.1.1 执行过程:

在这里插入图片描述

5.1.2 断点调试:

在这里插入图片描述

5.1.3 for 循环作用

1.for 循环重复相同的代码
2.重复不相同的代码
3.循环重复不相同的代码
4.重复某些相同操作

5.1.4 双重 for 循环

很多情况下,单层 for 循环并不能满足我们的需求,比如我们要打印一个 5 行 5 列的图形、打印一个倒
直角三角形等,此时就可以通过循环嵌套来实现。
在这里插入图片描述

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
  for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
   需执行的代码;
   }
}

打印五行五列星星

var star = '';
for (var j = 1; j <= 3; j++) {
for (var i = 1; i <= 3; i++) {
star += '☆'
}
// 每次满 5个星星 就 加一次换行
star += '\n'
}
console.log(star);

5.2 while 循环

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

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

执行思路:
① 先执行条件表达式,如果结果为 true,则执行循环体代码;如果为 false,则退出循环,执行后面代码
② 执行循环体代码
③ 循环体代码执行完毕后,程序会继续判断执行条件表达式,如条件仍为true,则会继续执行循环体,直到循
环条件为 false 时,整个循环过程才会结束

在这里插入图片描述

5.3 do while 循环

do… while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块,然后对条件表达式进行判断,如
果条件为真,就会重复执行循环体,否则退出循环。
do… while 语句的语法结构如下:
在这里插入图片描述

5.4 循环小结

在这里插入图片描述

5.5 关键字continue break

5.5 .1 continue 关键字 (跳出本次循环)

continue 关键字用于立即跳出本次循环,继续下一次循环(本次循环体中 continue 之后的代码就会少执行
一次)。
在这里插入图片描述

5.5 .2 break 关键字 (循环结束)

break 关键字用于立即跳出整个循环(循环结束)。

六、 数组

数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一
种将一组数据存储在单个变量名下的优雅方式。

6.1 数组的创建方式

在这里插入图片描述

6.1.1 利用 new 创建数组

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

在这里插入图片描述

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

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

在这里插入图片描述

6.1.3 数组元素的类型

数组中可以存放任意类型的数据,例如字符串,数字,布尔值等。

var arrStus = ['小白',12,true,28.9];

6.2 获取数组元素

6.2.1 数组的索引

在这里插入图片描述

6.3 遍历数组 (循环)

遍历: 就是把数组中的每个元素从头到尾都访问一次(类似我们每天早上学生的点名)。
我们可以通过 for 循环索引遍历数组中的每一项

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
 console.log(arrStus[i]);
}

6.3.1 数组的长度 (数组名.length)

在这里插入图片描述

6.4 数组中新增元素

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

在这里插入图片描述

6.4.2 通过修改数组索引新增数组元素

在这里插入图片描述

6.5 数组排序(冒泡排序)

在这里插入图片描述

var arr = [5, 4, 3, 2, 1];
 for (var i = 0; i < arr.length - 1; i++) {
 for (var j = 0; j < arr.length - i - 1; j++) {
 if (arr[j] > arr[j + 1]) {
 var temp = arr[j];
 arr[j] = arr[j + 1];
 arr[j + 1] = temp;
 }
 }
 }
console.log(arr);

七 、 函数

函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

7.1 函数的使用 (声明 & 调用)

7.1.1 声明函数

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

在这里插入图片描述

7.1.2 调用函数

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

在这里插入图片描述

7.1.3 函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口

在这里插入图片描述

7.2 函数的参数 (形参和实参)

在这里插入图片描述

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数,用逗号分隔
 // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...); 

7.2.1 函数参数的传递过程

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

在这里插入图片描述

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

在这里插入图片描述

7.4 小结

在这里插入图片描述

7.5 函数的返回值 return

有的时候,我们会希望函数将值返回给调用者,此时通过使用 return 语句就可以实现。
return 语句的语法格式如下:

// 声明函数
function 函数名(){
 ...
 return 需要返回的值;
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值

在这里插入图片描述
有的时候,我们会希望函数将值返回给调用者,此时通过使用 return 语句就可以实现。
在这里插入图片描述

7.5.1 函数没有 return 返回 undefined

在这里插入图片描述

7.6 break ,continue ,return 的区别

在这里插入图片描述

7.7 arguments的使用(存储所有实参)

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

在这里插入图片描述

7.8 函数的两种声明方式

7.8.1 函数表达式方式(匿名函数)

利用函数表达式方式的写法如下:

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

7.8.2 自定义函数方式(命名函数)

利用函数关键字 function 自定义函数方式。

// 声明定义方式
function fn() {...}
// 调用
fn(); 

在这里插入图片描述

7.9 作用域

通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

在这里插入图片描述

7.9.1 全局作用域 & 局部作用域

全局作用域: 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。
局部作用域: 作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。

7.9.2 JS 没有块级作用域

在这里插入图片描述

if(true){
int num = 123;
system.out.print(num); // 123
}
system.out.print(num); // 报错
7.9.3 变量的作用域

在JavaScript中,根据作用域的不同,变量可以分为两种:全局变量 ,局部变量

7.9.3 .1 全局变量

在这里插入图片描述

7.9.3.2 局部变量

在这里插入图片描述

7.9.3.3 全局变量和局部变量的区别

在这里插入图片描述

7.9.4 作用域链

作用域链:采取就近原则的方式来查找变量最终的值。
在这里插入图片描述
案例 1: 结果是几?

function f1() {
var num = 123;
function f2() {
console.log( num );
}
f2();
}
var num = 456;
f1();

7.10 预解析

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的
时候分为两步:预解析和代码执行。
在这里插入图片描述

7.10.1 变量预解析和函数预解析

在这里插入图片描述

 函数提升: 函数的声明会被提升到当前作用域的最上面,但是不会调用函数。

八、 对象

对象是由属性和方法组成的。
在这里插入图片描述

8.1 创建对象的三种方式

在这里插入图片描述

8.1.1 利用字面量创建对象

对象字面量:就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法。
{ } 里面采取键值对的形式表示

 键:相当于属性名
 值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)

8.1.2 利用字面量创建对象

var star = {
name : 'pink',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};

8.1.2.1 对象的调用

在这里插入图片描述

8.1.2.2 变量、属性、函数、方法总结

在这里插入图片描述

8.1.3 利用new Object创建对象

跟我们前面学的 new Array() 原理一致

var andy = new Obect();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
alert('大家好啊~');
}

在这里插入图片描述

8.1.4 利用构造函数创建对象

构造函数 :是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 运算符一起
使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。
在 js 中,使用构造函数要时要注意以下两点:
在这里插入图片描述
构造函数创建对象示例:

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);
8.1.4.1 构造函数创建对象注意点

在这里插入图片描述
在这里插入图片描述

8.1.4.2 new关键字执行四件事情

在这里插入图片描述

8.2 遍历对象属性(for…in 语句)

for…in 语句用于对数组或者对象的属性进行循环操作。

for (变量 in 对象名字) {
// 在此执行代码
}

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

for (var k in obj) {
console.log(k); // 这里的 k 是属性名
console.log(obj[k]); // 这里的 obj[k] 是属性值
}

8.3 小结

在这里插入图片描述

九、 内置对象

JavaScript 提供了多个内置对象:Math、 Date 、Array、String等
在这里插入图片描述

9.1 查文档 MDN

MDN: https://developer.mozilla.org/zh-CN/

在这里插入图片描述

在这里插入图片描述

9.2 Math 对象

Math 对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值
等)可以使用 Math 中的成员。

Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值
注意:上面的方法必须带括号

9.2.1 随机数方法 random()

random() 方法可以随机返回一个小数,其取值范围是 [0,1),左闭右开 0 <= x < 1

得到一个两数之间的随机整数,包括两个数在内:

 return Math.floor(Math.random() * (max - min + 1)) + min;
}

9.3 日期对象

Date 对象和 Math 对象不一样,他是一个构造函数,所以我们需要实例化后才能使用

Date 实例用来处理日期和时间

9.3.1 Date()方法的使用

9.3.1.1 获取当前时间必须实例化
var now = new Date();
console.log(now);
9.3.1.2 Date() 构造函数的参数

如果括号里面有时间,就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’,可以写成new Date(‘2019-5-1’)
或者 new Date(‘2019/5/1’)
在这里插入图片描述

9.3.1.3 日期格式化

我们想要 2019-8-8 8:8:8 格式的日期,要怎么办?
需要获取日期指定的部分,所以我们要手动的得到这种格式。

在这里插入图片描述

9.3.1.4 获取日期的总的毫秒形式

Date 对象是基于1970年1月1日(世界标准时间)起的毫秒数
为什么计算机起始时间从1970年开始?
我们经常利用总的毫秒数来计算时间,因为它更精确

// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())
console.log(date.getTime())
// 2. 简单写可以这么做
var now = + new Date();
// 3. HTML5中提供的方法,有兼容性问题
var now = Date.now();

9.4 数组对象

9.4.1 组对象的创建

在这里插入图片描述

9.4.2 检测是否为数组 instanceof & Array.isArray()

在这里插入图片描述

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

9.4.3 添,删数组元素的push() pop() shift()

在这里插入图片描述
案例: 筛选数组
要求把数组中工资超过2000的删除,剩余的放到新数组里面

var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
 if (arr[i] < 2000) {
 newArr.push(arr[i]);
 }
}
console.log(newArr);

9.4.4 数组排序 sort() reverse()

在这里插入图片描述

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

9.4.5 数组索引方法 indexOf()

在这里插入图片描述
案例: 数组去重(重点案例)
在这里插入图片描述

 function unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }

9.4.6 数组转换为字符串 toString() join(‘分隔符’)

在这里插入图片描述

9.4.7 其它查询 splice()

在这里插入图片描述

9.5 字符串对象

为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。

9.5.1 基本包装类型

基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。

在这里插入图片描述

9.5.2 字符串的不可变

指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。

在这里插入图片描述

9.5.3 根据字符返回位置 indexOf()

字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。
在这里插入图片描述
案例:返回字符位置
在这里插入图片描述

 var str = "oabcoefoxyozzopp";
        var index = str.indexOf('o');
        var num = 0;
        // console.log(index);
        while (index !== -1) {
            console.log(index);
            num++;
            index = str.indexOf('o', index + 1);
        }
        console.log('o出现的次数是: ' + num);

9.5.4 根据位置返回字符(重点)charAt(index)

在这里插入图片描述
案例:返回字符位置
在这里插入图片描述

    var str = 'abcoefoxyozzopp';
        var o = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i); // chars 是 字符串的每一个字符
            if (o[chars]) { // o[chars] 得到的是属性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);
        // 2. 遍历对象
        var max = 0;
        var ch = '';
        for (var k in o) {
            // k 得到是 属性名
            // o[k] 得到的是属性值
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符是' + ch);
    </script>

9.5.5 字符串操作方法(重点)

在这里插入图片描述

9.5.6 replace()方法

replace() 方法用于在字符串中用一些字符替换另一些字符。
其使用格式如下:

replace(被替换的字符串, 要替换为的字符串);

9.5.7 split()方法

split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。
例如下面代码:

var str = 'a,b,c,d';
console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]

9.5.8 其它查阅

在这里插入图片描述

十、 简单类型& 复杂类型

简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型。
在这里插入图片描述

10.1 堆和栈

在这里插入图片描述

10.2 简单类型的内存分配

在这里插入图片描述

10.3 复杂类型的内存分配

引用类型(复杂数据类型):通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等
引用类型变量(栈空间)里存放的是地址,真正的对象实例存放在堆空间中
在这里插入图片描述

10.4 简单类型传参

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

function fn(a) {
 a++;
 console.log(a);
}
var x = 10;
fn(x);
console.log(x)

10.5 复杂类型传参

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

function Person(name) {
 this.name = name;
}
function f1(x) { // x = p
 console.log(x.name); // 2. 这个输出什么 ?
 x.name = "张学友";
 console.log(x.name); // 3. 这个输出什么 ?
}
var p = new Person("刘德华");
console.log(p.name); // 1. 这个输出什么 ?
f1(p);
console.log(p.name); // 4. 这个输出什么 ? 

十一、补充:命名规范以及语法格式

1. 标识符命名规范

在这里插入图片描述

2. 操作符规范

// 操作符的左右两侧各保留一个空格
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 直接退出整个 for 循环,跳到整个for循环下面的语句
}
console.log('我正在吃第' + i + '个包子呢');
}

3. 单行注释规范

for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 单行注释前面注意有个空格
}
console.log('我正在吃第' + i + '个包子呢');
}

4. 其他规范

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值