Javascript基础语法

1. 初识JS

JS的组成

JS 初体验

JS 有3种书写位置，分别为行内、内嵌和外部

1. 行内式 JS

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

效果图：

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

2. 内嵌JS

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

• 可以将多行JS代码写到<script>标签中
• 内嵌JS是学习时常用的方式

3. 外部JS文件

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

• 利于THTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
• 引用外部JS文件的script标签中间不可以写代码
• 适用于JS代码量比较大的情况

2. JS 注释

1. 单行注释 // ctrl+/
2. 多行注释 /* */ shift+ctrl+/

3. JS输入输出语句

```javascript
<script>
      // 这是一个输入框
      prompt("请输入您的年龄");
      // alert 弹出警示框 输出的 展示给用户的
      alert("计算的结果是");
      // console 控制台输出 给程序员测试用的
      console.log("我是程序员能看到的");
    </script>

效果图：

4. 变量

本质：变量是程序在内存中申请的一块用来存放数据的空间
类似我们酒店的房间，一个房间就可以看作是一个变量

变量的使用

1. 声明变量
2. 赋值

1. 声明变量

// 声明变量
var age; //声明一个名称为age的变量

• var是一个JS关键字，用来声明变量（variable变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
• age是程序员定义的变量名，我们要通过 变量名来访问内存中分配的空间

2. 赋值

age = 10; //给age这个变量赋值为10

• = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
• 变量值是程序员保存到变量空间里的值

变量语法拓展

1. 更新变量

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

2. 同时声明多个变量

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

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

3. 声明变量的特殊情况

4. 变量命名规范

• 由字母、数字、下划线、美元符号组成
• 严格区分大小写
• 不能以数字开头
• 不能是关键字、保留字
• 变量名必须有意义
• 遵循驼峰命名法 首字母小写，后面单词的首字母需要大写 例如：myFirstName
• 推荐翻译网站：有道 爱词霸

5. 数据类型

JS的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的

JS拥有动态类型，意味着相同的变量可用作 不同的类型

var x=6;        //x为数字
var x="Bill";   //x为字符串

数据类型的分类

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

1.数字型（Number）

（1）在JS中，八进制前加 0，十六进制前加 0x
（2）JS中数值的最大和最小值

alert(Number.MAX_VALUE); //最大值
alert(Number.MIN_VALUE); //最小值

（3）数字型的三个特殊值

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

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

（4）is NaN()
is NaN() 这个方法用来判断非数字 并且返回一个值 如果是数字返回的是false
如果不是数字，返回的是true

2 字符串型 String

字符串型可以是引号中的任意文本，其语法为双引号“”和单引号‘’

1. 字符串引号嵌套 （外双内单，外单内双）
2. 字符串转义符
   

3. 字符串长度

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

var strMsg="我是王鹤棣老婆！";
alert(strMsg.length);//显示8

4.字符串拼接

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

//1 字符串"相加"
alert('hello'+''+'world'); // hello world
//2 数值字符串"相加"
alert('100'+'100'); //100100
//3.数值字符串+数值
alert('11'+12); //1112

+号拼接口诀：数值相加，字符相连

• 我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
• 变量是不能添加引号的，因为加引号的变量会变成字符串
• 如果变量两侧都有字符串拼接，口诀“引引加加”删掉数字，变量写中间

5. 布尔型 Boolean

布尔型有两个值：true和false，其中true表示真，false表示假
布尔型和数字型相加时，true的值为1，false的值为0

console.log(true+1); //2
console.log(false+1); //1

6. Undefined 和 Null

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

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

一个声明变量给null值，里面存的值为空

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

获取变量数据类型

1. 获取检测变量的数据类型

typeof

2. 字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值

• 数字字面量：8，9，10
• 字符串字面量：’王鹤棣‘，“虞书欣”
• 布尔字面量：true，false

数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型

1. 转换为字符串

//第一种：变量.toString()

2. 转换为数字型

• 注意parseInt和parseFloat单词的大小写，这两个是重点
• 隐式转换是我们在进行算数运算的时候，JS自动转换了数据类型

console.log(parseInt('3.14')); //3 取整
console.log(parseInt('3.94')); //3 取整
console.log(parseInt('120px')); //120 会去掉这个px单位
console.log(parseInt('rem120px')); // NaN
console.log(parseFloat('3.14')); //3.14
console.log(parseFloat('120px')); //120 会去掉这个px单位
console.log(parseFloat('rem120px')); // NaN

3. 转换为布尔型

• 代表空、否定的值会被转换为false
• 其他值都会被转换为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

6. 标识符、关键字、保留字

1.标识符

指开发人员为变量、属性、函数、参数取的名字
标识符不能是关键字或保留字

2. 关键字

是指JS本身已经使用了的字，不能再用它们充当变量名、方法名
包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、void、while、with等等

3.保留字

实际上就是预留的关键字

7. 运算符

1. 算数运算符

浮点数的精度问题

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

var result = 0.1+0.2; //结果为0.30000000000000004
console.log(0.07*100); //7.000000000000001

不要直接判断两个浮点数是否相等

表达式和返回值

表达式：数字、运算符、变量等组成的式子
表达式最终都会有一个结果，返回给我们，我们称为返回值

2. 递增和递减运算符

前置递增运算符

++sum 先自加1，后返回值

后置递增运算符

sum++ 先返回原值，后自加1

3. 赋值运算符

4. 逻辑运算符

5. 比较运算符

8. 数组

概念：数组是一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的方式
语法：

• new关键字创建数组 -> var 数组名=new Array ();

var arr = new Array();

• 利用数组字面量创建数组 -> var 数组名= [1,2,3,4,5]

var arr[] = [1,2,3,4,5];

9. 函数

概念：封装了一段可被重复调用执行的代码块，通过此代码块可以实现大量代码的重复使用

1. 函数的使用

先声明，后调用

声明

• 自定义函数方式（命名函数） function fn() { …}
• 函数表达式方法（匿名函数） var fn =function() {…}

调用

fn ();

示例：

//声明函数
function getSum(){
var sumNum=0;
for(var i=1;i<=100;i++){
sumNum+=1; }
alert(sumNum);
} 
//调用函数
getSum();

2. 形参和实参

• 声明函数时，函数名称后面的小括号中添加一些参数
• 调用该函数时，同样也需要传递相应的参数，这些参数被称为实参
• 在JS中，形参默认值是undefined

3. break、continue、return

break：结束当前的循环体（如for、while）
continue：跳出本次循环，继续执行下次循环（如for、while）
return：不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码

4. arguments

概念:当我们不确定有多少个参数传递的时候，可以用arguments来获取，在JS中，arguments实际上它是当前函数的一个内置对象，所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参
arguments展示形式是一个伪数组，因此可以遍历，伪数组具有以下特点：

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

示例：

//利用函数求任意个数的最大值
function maxValue(){
var max=arguments[0];
for(var i=0;i<arguments.length;i++)
if(max<arguments[i]){
maax=arguments[i];}
}
return max;
}
console.log(maxValue(2,4,5,9));
console.log(maxValue(12,4,9));

10. 对象

概念：对象是由属性和方法组成的。在JS中，几乎所有的事物都是对象

• 属性：事物的特征，在对象中用属性来表示（常用名词）
• 方法：事物的行为，在对象中用方法来表示（常用动词）

创建对象的三种方式

1.利用字面量创建对象

var star={
name='xby',
age:19,
sex='女’，
sayHi:function(){
alert('大家好');
}
};

2.利用new Object 创建对象

var andy= new Object();
andy.ame='xby';
andy.age:19;
andy.sex='女’，
andy.sayHi:function(){
alert('大家好');
}

3. 利用构造函数创建对象

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,'男')：

对象的调用

console. log(star.name) ;
console. log (star [ 'name ']) ;
star.sayHi ();

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

new关键字

new在执行时会做四件事情：

• 在内存中创建一个新的空对象
• 让this 指向这个新对象
• 执行构造函数里面的代码，给这个信息对象添加属性和方法
• 返回这个新对象（所以构造函数里面不需要return)

内置对象

Javascript中的对象分为3种：自定义对象、内置对象、浏览器对象。
前面两种对象是Js基础内容，厲于ECMAScript；第三个浏览器对象属于我们JS独有的，我们JS AP1讲解

• 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
• 内置对象最大的优点就是帮助我们快速开发。Javascript 提供了多个内置对象：Math、Date、String、Array等

小结

通过这节课的学习，最大的收获是了解到了数组和字符串的一些应用方法

改变原数组：

1. push() 末尾添加元素
2. pop() 删除最后一个元素，返回该元素值
3. shift() 删除第一个元素，返回该元素值
4. unshift() 在数组头部添加元素。返回该数组长度
5. sort() 在数组头部添加元素，返回该数组长度
6. reverse() 数组中元素位置颠倒，返回该数组
7. splice(start,deleteCount?,item1?) 通过删除或替换现有元素或原地添加新元素来修改数组，并以数组形式
   返回被修改内容（没有删除则返回空数组）

不改变原数组：

1. slice (begin？，end？）返回一个新的数组对象，这一对象是一个由begin和end决定的原数组的浅拷贝（包括begin不包括end)
2. concat （） 合并两个或多个数组，不改变现有数组 但返回新数组
3. join （） 将一个数组（or类数组对象） 的所有元素连接成一个字符串，返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符（默认使用，分隔，如果使用“”则所有元素之间都没有任何字符）

字符串

1. charAt （）方法可返回宇符串中指定位置的字符
2. concat （） 方法用于两个or多个字符串
3. indexOf (）方法可返回某个指定字符串值在字符串中首次出现位置
4. includes（）方法用于判断字符串是否包含指定的子字符串
5. match（） 方法可在字符串中检索指定的值，或找到一个或多个正则表达式的匹配，返回数组
6. repeat （） 方法看字符串复制的指定次数
7. replace （） 方法用于在字符串中用一些字符替换另一些宇符。或替换一个正则表达式匹配的子串
8. replaceAll (） 方法替换所有
   9.search （）方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。返回与指定查找的字符串或者正则表达式相匹配的String 对象起始位置
9. slice (start， end）方法提取字符串的某个部分，并以新的字符串返回被提取部分
10. substring（）方法提取字符串中介于两个指定下
    标之间的字符
11. split（）方法把一个字符串分割成字符串数组
12. trim（）方法用于删除宇符串的头尾空白符。空白符包括：空格、制表符 tab、换行符等其他空白符