# JS 入门

# 一、JS 的三种写法和输入输出

# 1. JS 的三种写法

行内式 js 直接写到元素的内部 (写到 body 标签里)

<input type="button" value="唐伯虎" onclick="alert('秋香姐')">

内嵌式的 js (写到 script 标签内)

alert('我是编程语言，来控制电脑网页弹出你好');

外部式的 js (写到 head 标签内)

外部 js 引入

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

alert('你好呀，我是高级程序语言 JavaScript')

# 2. JS 的输入输出

prompt('请输入您的年龄');           
// 输入框

alert('计算的结果是');             
// alert 弹出输出的警示框  展示给用户的

console.log('我是程序员能看到的');  
// console 控制台输出 给程序员测试用的

# 二、JS 变量

1.变量：用于存放数据的容器或盒子，我们通过变量名获取数据，甚至数据可以修改。

var age;              // 1. 声明了一个 age 的变量
age = 18;             // 2. 赋值  把值存入这个变量中
console.log(age);     // 3. 输出结果   
var myname = 'andy';  // 4. 变量的初始化
console.log(myname);

2.更新变量

var myname = 'andy';
console.log(myname);
myname = 'dlaraba'
console.log(myname);

3.声明多个变量

var age = 18;
var address = '北京';
var gz = '28000'; 
var age = 18,
    address = '北京',
    gz = '28000';

4.声明变量的特殊情况

⑴ 只声明不赋值结果是？
程序也不知道里面存的是啥，所以结果是 undefined 未定义的。

var sex;
console.log(sex);         // undefined

⑵ 不声明也不赋值直接使用某个变量会报错的

console.log(tel);         // 报错

⑶ 不声明直接赋值使用

qq = 110;
console.log(qq);         // 输出结果

5.变换两个变量的值：

⑴ 我们需要一个临时变量帮助我们
⑵ 把 apple1 给我们的临时变量 temp
⑶ 把 apple2 给我们的 apple1
⑷ 把临时变量里面的值给 apple2

var temp;                   
// 声明了一个临时变量为空

var apple1 = '青苹果';
var apple2 = '红苹果';
temp = apple1;              
// 把右边给左边

apple1 = apple2;
apple2 = temp;
console.log(apple1);
console.log(apple2);

# 三、基本数据类型

# 1. 数字型 Number

（1）八进制 0 ~ 7 数字前面加 0 表示八进制

var num1 = 010;
console.log(num1);              
// 0... 八进制

（2）十六进制 0 ~ 9 a ~ f 数字前面加 0x 表示十六进制

var num3 = 0x9;
console.log(num3);              
// 0x... 十六进制

（3）数字型的最大值

console.log(Number.MAX_VALUE);     
// 最大值

（4）数字型的最小值

console.log(Number.MIN_VALUE);    
// 最小值

（5）无穷大

console.log(Number.MAX_VALUE * 2);  
// Infinity 无穷大

（6）无穷小

console.log(-Number.MAX_VALUE * 2);  
// -Infinity 无穷小

（7）非数字

console.log('andy' - 100);     
// NaN

（8）isNaN( )

这个方法用来判断非数字并且返回一个值。

如果是数字返回的是 false，如果不是数字返回的是 true。

console.log(isNaN(13));        
// false
console.log(isNaN('andy'));    
// true

# 2. 字符串型 String

（1）只要是加了引号 ' ' 或 " " 的都属于字符串型

var str = '我是一个"白富美"的程序媛'
console.log(str);

字符串转义字符：
都用 \ 开头但是 \ 要写到引号里面

字符	描述
n	换行符，n 是 newline 的意思
\	斜杠 \
'	单引号 ' '
"	双引号 " "
t	tab 缩进
b	空格，b 是 blank 的意思

（2）检测获取字符串的长度 length

var str = 'my name is andy';
    console.log(str.length);  // 17

（3）字符串的拼接 + (+号口诀：数值相加，字符相连)

console.log(12 + 12);          // 24
console.log('12' + 12);        // '1212'
console.log(0.1 + 0.2);        
// 0.30000000000000004    
// 计算机在存储数据的时候把十进制转换为二进制存储的，
// 在这个过程中会有一些误差，0.1 + 0.2 != 0.3 就是误差导致

（4）字符串的拼接加强

var age = 20;
console.log('andy' + age + '岁了');    
// andy 20 岁了

# 3. 布尔型 Boolean

var flag = true;                
// flag 布尔型
var flag1 = false;              
// flag1 布尔型
console.log(flag + 1);      
// true 参与加法运算当 1 来看。 输出结果是 2
console.log(flag1 + 1);     
// false 参与加法运算当 0 来看。 输出结果是 1

# 4. undefined

如果一个变量只声明未赋值就是 undefined 未定义的数据类型

var str;
console.log(str);            
// undefined
var variable = undefined;
console.log(variable + 'andy');     
// undefinedandy
console.log(variable + 1);          
// NaN    undefined和数字相加 最后结果是 NaN

# 5. null 空值

var space = null;
    console.log(space + 'andy');      // nullandy
    console.log(space + 1);           // 1

# 四、typeof 和数据类型的相互转换

# 1、获取变量数据类型 typeof

var num = 10;
console.log(typeof num);            
// number

prompt 取过来的值是字符串型的

var age = prompt('请输入您的年龄：');
console.log(age);                   
//  等于输入的年龄
console.log(typeof age);            
// string

# 2、基本数据类型的相互转换

# 1. 转换为字符串型

（1）把数字型转换为字符串型，变量 .toString( )

var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);

（2）我们利用 String(变量)

console.log(String(num));

（3）利用 + 拼接字符串的方法实现转换效果隐式转换

console.log(num + '');

# 2. 转换为数字型

（1）parseInt(变量) 可以把字符串型的转换为数字型得到的是整数

console.log(parseInt('3.14'));       // 3 取整

（2）parseFloat(变量) 可以把字符型的转换为数字型得到的是小数浮点数

console.log(parseFloat('3.14'));      // 3.14

（3）利用 Number(变量)

var str = '123';
console.log(Number(str));
console.log(Number('12'));

（4）利用了算数运算 + - * / 隐式转换

console.log('12' - 0);            // 12
console.log('123' - '120');       // 3
console.log('123' * 1);           // 123

# 3. 转换为布尔型

代表空、否定的值会被转换为false，如' '、0、NaN、null、undefined
其余值都会被转换为 true

// false
console.log(Boolean(''));            // false
console.log(Boolean(0));             // false
console.log(Boolean(NaN));           // false
console.log(Boolean(null));          // false
console.log(Boolean(undefined));     // false


// true
console.log(Boolean('123'));         // true
console.log(Boolean('你好吗'));       // true
console.log(Boolean('Hello'));       // true

# 五、运算符

# 1. 算术运算符： +、-、*、/、%

console.log(1 / 1);              // 1

（1）% 取余（取模）

console.log(5 % 3);              // 2

（2）浮点数算数运算里面还有问题

console.log(0.07 * 100);        // 7.000000000000001

（3）我们不能直接拿着浮点数来进行相比较是否相等

var num = 0.1 + 0.2;
console.log(num == 0.3);     // false

# 2. 前置递增运算符：++a

（1）想要一个变量自己加1 ， num = num + 1 比较麻烦

++num;

（2）前置递增运算符 ++ 写在变量的前面

var age = 10;
++age;                  // 类似于 age = age + 1;
console.log(age);       // 11

（3）先加1 后返回值

var p = 10;
console.log(++p + 10);   // 21

# 3. 后置递增运算符：a++

（1）前置递增和后置递增如果单独使用效果是一样的
（2）后置递增看口诀：先返回原值后自加1

var age = 10;
console.log(age++ + 10);          // 20
console.log(age);                 // 11

# 4. 比较运算符： >、<、>=、<=、==、!=、===(全等)、!==(全不等)

（1）程序里面的等于符号是 == 默认转换数据类型会把字符串型的转换为数字型只要求值相等就可以

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

（2）程序里面有全等(一模一样), 要求两侧的值还有数据类型完全一致才可以 true

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

# 5. 逻辑运算符： &&(与)、||(或)、!(非)

（1）逻辑运算

① 逻辑与 && and：两侧都为 true，只要有一侧为 false 结果就是 false

console.log(3 > 5 && 3 > 2);    // false
console.log(3 < 5 && 3 > 2);    // true

② 逻辑或 | | or：两侧都为 false 结果才是 false，只要有一侧true 结果就是true

console.log(3 > 5 || 3 > 2);   // true
console.log(3 > 5 || 3 < 2);   // false

③ 逻辑非 ! not

console.log(!true);           // false
console.log(!false);          // true

（2）短路运算（逻辑中断逻辑与）：

① 如果表达式1 结果为真则返回表达式2

console.log(123 && 456);       // 456

② 如果表达式1 结果为假则返回表达式1

console.log(0 && 456);                // 0
console.log(0 && 1 + 2 && 456);       
// 0
// 如果有空的或者否定的为假 
//【 0 '' null undefined NaN 】， 其余是真的

（3）短路运算（逻辑中断逻辑或）： ① 如果表达式1 结果为真则返回表达式1

console.log(123 || 456);                 // 123
console.log(123 || 456 || 456 + 123);    // 123

② 如果表达式1 结果为假则返回表达式2

console.log(0 || 456|| 456 + 123);        
// 456
// 逻辑中断很重要 它会影响程序运行的结果
var num = 0;
console.log(123 || num++);          
// 输出的是123, num++根本就没有运行
console.log(num);                   
// 所以结果是num=0;

# 6. 赋值运算符： = 、 -= 、 += 、 *= 、 /= 、 %=

var age = 2;
age *= 3;
console.log(age);     // 2 * 3 = 6

# 7.运算符的优先级

优先级	符号	描述
1	( )	小括号
2	++ -- !	一元运算符
3	先 * / %，再 + -	算数运算符
4	>、>=、<、<=	关系运算符
5	==、!=、===、!==	相等运算符
6	先 &&(与)、再 (或)	逻辑运算符
7	=	赋值运算符
8	,	逗号运算符

# 六、if 和 switch 循环语句

# 1. if 语句：

（1）if 分支语句：

① if 的语法结构 if（如果的意思）

if (条件表达式) {
    执行语句
}

② 执行思路：如果 if 里面的条件表达式结果为真 true，则执行大括号里面的执行语句。
如果 if 里面的条件表达式结果为假 false，则不执行大括号里面的语句，执行if 语句后面的代码。

③ 代码体验

if (3 < 5) {
    alert('沙漠骆驼');
}

# 2. if else if 双分支语句：

① 语法结构 if（如果） else（否则）

if (条件表达式) {
        执行语句1
    } else {
        执行语句2
}

② 执行思路如果表达式结果为真那么执行语句1 否则执行语句2

③ 代码验证

var age = prompt('请输入您的年龄：');
if (age >= 18) {
    alert('我想带你去网吧偷耳机');
} else {
    alert('回家做作业去');
}

④ if里面的语句1 和 lese 里面的语句2 最终只能有一个语句执行 2选1

⑤ else 后面直接跟花括号

# 3. if else if 多分支语句：

① if else if 多分支语句多选一

② 语法规范

③ 必须用从大到小的顺序来写

var score = prompt('请输入您的成绩：');
if ( score >= 90 ) {
    alert('您的成绩是A');
} else if (score >=80) {
    alert('您的成绩是B');
} else if (score >=70) {
    alert('您的成绩是C');
} else if (score >=60) {
    alert('您的成绩是D');
} else  {
    alert('您的成绩是E');
}

# 4. 三元表达式

由三元运算符组成的式子称为三元表达式 (可以理解为简化版的多分支语句 if else if)
一元表达式： ++num 二元表达式：3+5 三元表达式：？：
语法结构

条件表达式 ？ 表达式1 ： 表达式2

执行思路

    // 如果条件表达式结果为真，则返回表达式1的值; 
    // 如果条件表达式结果为假，则返回表达式2的值。

代码体验

var num = 10;
var result = num > 5 ? '是的' : '不是的';
    console.log(result);                     //

# 5. switch 语句

switch语句也是多分支语句也可以实现多选一
语法结构 switch（转换、开关的意思） case（小例子或者选项的意思）
执行思路：利用表达式的值和case后面的选项值相匹配，如果匹配上，就执行该case里面的语句；
如果都没有匹配上，则执行default里面的语句。

switch (2) {
    case 1:
        console.log('这是1');              // 
        break;
    case 2:
        console.log('这是2');              // 
        break;
    case 3:
        console.log('这是3');              // 
        break;
    default:
        console.log('没有匹配结果');        // 
}

注意事项：

//   1. 开发里面 表达式通常写成变量
//   2. num和 case里面的值相匹配的时候 全等 必须是值和数据类型一致才可以 num === 1;
//   3. break 如果当前的case 里面没有break 则不会退出switch 是继续执行下一个case

# 七、for 和 while 循环语句

# 1、for 循环语句

# 1. for 循环语句

① for重复执行某些代码，通常跟技术有关系

② for语法结构

for （初始化变量; 条件表达式; 操作表达式） {
    循环体
}

for (var i = 1; i <= 10; i++) {
    console.log(i);                 // 
}

③ 初始化变量：用var生命的普通变量，通常用于作为计数器使用

④ 条件表达式：用来决定每一次循环是否继续执行就是终止的条件

⑤ 操作表达式：每次循环最后执行的代码通常用于计数器变量进行更新（递增或递减）

# 2. 双重 for 循环：

双重for循环语法结构

for （外层的初始化变量; 外层的条件表达式; 外层的操作表达式）{
    for （里层的初始化变量; 里层的条件表达式; 里层的操作表达式）{
        执行语句
    }
}

for (var i = 1; i <= 3; i++) {
    console.log('这是外层循环第' + i + '次');          // 
    for (var j = 1; j <= 3; j++) {
        console.log('这是里层循环的第' + j + '次');    // 
    }
}

# 2、while 循环语句

# 1. while 语句

① while 循环语句结构 while（当...的时候）

while （条件表达式） {
    循环体
}

② 执行思路：当条件表达式结果为true 则执行循环体，否则退出循环

var num = 1;
while (num <= 100) {
    console.log('hello');           // 
    num++;
}

# 2. do while 循环语句

① do while 循环语法结构

do {
    循环体
} while (条件表达式)

② 执行思路：跟while不同在于do while 先执行一次循环体再判断条件如果表达式结果为真，则继续执行循环体，否则退出循环

③ 代码验证：

var i = 1;
do {
    console.log('how are you?');            // 
    i++;
} while (i <= 100)

④ do while 循环体至少执行一次

# 八、continue 和 break 关键字

# 1、continue 关键字

用于立即跳出本次循环，继续下一次循环(本次循环体中 continue 之后的代码就会少执行一次)

for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        continue;  // 只要遇见continue就退出本次循环 直接跳到 i++
    }
    console.log('我正在吃第' + i + '个包子');      // 
}

# 2、break 关键字

直接退出整个 for 循环

// 一共买了5个包子，吃到第三个发现里面有虫子，后面的就不想吃了
for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break;
    }
    console.log('我正在吃第' + i + '个包子');        // 
}

# 九、数组、遍历数组

# 1. 数组(Array)

数组：就是一组数据的集合存储在单个变量下的优雅方式。

（1）数组的创建方式：
① 利用 new 创建数组
② 利用数组字面量创建数组(常用)

① 利用 new 创建数组

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

② 利用数组字面量创建数组(常用)

var arr = [];                      // 创建了一个空的数组
var arr1 = [1, 2, 'andy', true];   // 给值称为数组的初始化

（2）[ ] 中括号里面的称为数组元素

（3）获取数组元素格式：数组名[索引号] 索引号从0开始

console.log(arr1);
console.log(arr1[2]);     // andy 
console.log(arr1[3]);     // true

# 2. 遍历数组

遍历数组：就是把数组的元素从头到尾访问一次。

var arr = ['red', 'green', 'blue'];
    for (var i = 0; i < arr.length; i++) {
        onsole.log(arr[i]);
    }
//  1. 索引号从0开始，所以i必须从0开始  
//  2. 输出的时候 arr[i] i 计数器当索引号来用
//  3. 数组长度：   数组名.length

# 十、数组相关的的方法

# 1. 数组新增元素

（1）新增数组元素修改length长度

var arr = ['red','green','blue'];
console.log(arr.length);
arr.length = 5;
console.log(arr);      // ['red', 'green', 'blue', 空属性 ×2]  只有三个元素 剩下的两个就会是 undefined
console.log(arr[3]);   // undefined
console.log(arr[4]);   // undefined

（2）新增数组元素修改索引号追加数组元素

var arr1 = ['red','green','blue'];
arr1[3] = 'pink';    
console.log(arr1);    // ['red', 'green', 'blue', 'pink']
arr1[0] = 'yellow';   // 这里是替换数组元素
console.log(arr1);    // ['yellow', 'green', 'blue', 'pink']
// 不要直接给数组名赋值 否则里面的数组元素都没有了

# 2. 筛选数组的方法

将数组 [ 2, 0, 6, 1, 77, 0, 52, 25, 7 ] 中大于等于10的元素选出来，放入新数组

（1）方法1 借助一个临时变量 j，存放新数组的长度借助一个临时变量 j，存放新数组的长度

var arr = [2,0,6,1,77,0,52,25,7];
var newArr = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        newArr[j] = arr[i];
        j++;
    }
}
console.log(newArr);                  // [77, 52, 25]

（2）方法2 (常用) 直接使用新数组的长度 newArr[newArr.length]

var arr = [2,0,6,1,77,0,52,25,7];
var newArr = [];
for (var i = 0; i < arr.length;i++) {
    if (arr[i] >= 10) {                  // 如果去掉 0，其他的放入新数组的话 if 语句是：  arr[i] != 0
        newArr[newArr.length] = arr[i];
               
    }
}
console.log(newArr);                     // [77, 52, 25]

# 3. 反转数组

var arr = ['red','green','blue','pink','yellow'];
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {    // arr.length - 1 = 4
    newArr[newArr.length] = arr[i]
}
console.log(newArr);                         //  ['yellow', 'pink', 'blue', 'green', 'red']

← 目录 JS 进阶 →