js基础（一）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43741547/article/details/111805928

js组成部分

核心语法(ECMA)
DOM(文档对象模型)
BOM(浏览器对象模型)

核心语法（ECMA）

命名规则

英文名称
驼峰bigBox
下划线 big_box
匈牙利命名法（变量前加上数据类型）
- i_number 整型
- a_students 数组
- f_login 函数

变量

　　变量是存储值的容器，在javascript中，变量的值可以被修改，不同于其它静态语言。
　　ES5通过var声明变量，ES6通过let、const声明变量（常量也是变量的一种，let和const都是ES6中新增的声明变量的方式）

var声明

/*支持重复声明*/
var a=5;
var a=10;
console.log(a);//输出10

/*变量可以存储任意数据类型*/
var a=5;
var a="123";
console.log(a);//输出123

/*遗漏声明（在非严格模式会认为是var，在严格模式中会报错）*/
a="nihao";
console.log(a);//输出nihao

/*var 变量会提升*/
console.log(a);
var a=5; //打印输出undefined
//变量会提升，但是只提升变量，不提升赋值，所以a的值是undefined

let声明

//不支持重复声明，会报错
let i=10;
let i=5;
console.log(i);//报错显示i已经重复声明了 Identifier 'i' has already been declared

//会被块级作用域{}限制
let i=10;
console.log(i);//打印输出10
{
    let i=5;
    console.log(i);//因为块级作用域不会报错  打印输出5
}

//let变量不会提升
console.log(a);//打印输出报错  Cannot access 'a' before initialization
let a=5;

const声明

//const声明常量，声明的值不可被修改
const a=5;
console.log(a);
a=6;
console.log(a);//会报错  Assignment to constant variable.

//对于复杂数据类型，在不改变引用的情况下，可以被修改

//const声明的变量必须赋值，不然会报错
var a;
console.log(a);//打印输出undefined
let a;
console.log(a);//打印输出undefined
const a;
console.log(a);//会报错 Missing initializer in const declaration

数据类型

每一个值都必须属于某一种数据类型数据类型分为简单数据类型和复杂数据类型，可以通过typeof() 查看数据类型。

简单数据类型
- ES5（undefined、number、null、string、boolean），ES6（新增1个 symbol ）
- undefined 未定义（这些情况会返回undefined：a、访问没有赋值的变量；b、任何被赋值为undefined的变量；c、函数无明确返回值；d、访问对象不存在的属性）
- number 数字（整数、浮点数、负数）
- null 空（null有两个点要注意）
  - ECMA认为undefined 是从null衍生而来的。如果不进行精确比较的话，则相等。（null= =undefined 返回true、null===undefined 返回false）
  - console.log(typeof null); 返回数据类型是object，而null本身是简单数据类型。
- string 字符串
  - 传统字符串拼接：console.log(“我叫”+name+"，今年"+age+“岁”);
  - 字符串模板（ES6中新增的``）：console.log(我叫${name}，今年${age}岁);
- boolean 布尔值
  - 任何数据类型都可以转为boolean值，值有true、false（boolean() 这个方法可以将括号里的内容转换成布尔值）
  - 会返回false的情况：单、双引号的空字符串，0，false，NaN，null，undefined
- symbol
复杂数据类型
- object

数据类型转换

数据类型的转换有两种：显示转换、隐式转换

显示转换

parseInt() 将string转成number，从左往右依次转换直到非数为止,转为整数。

	console.log(parseInt("123abc"));//打印输出123
	console.log(parseInt("abc123"));//打印输出NaN
	console.log(parseInt("123abc456"));//打印输出123
	console.log(parseInt("12.3"));//打印输出12
	console.log(parseInt("12.3abc"));//打印输出12

parseFloat() 转成浮点数，规则如parseInt()

	console.log(parseFloat("1.23"));//打印输出1.23
	console.log(parseFloat("1.23abc"));//打印输出1.23
	console.log(parseFloat("a1.23abc"));//打印输出NaN

Number() 字符串中有非数，则为NaN（只转数字，无论整形还是浮点型，负数也可以）

	console.log(Number("123"));//打印输出123
	console.log(Number("123a"));//打印输出NaN
	console.log(Number("1.23a"));//打印输出NaN
	console.log(Number("1.23"));//打印输出1.23
	//小技巧：
	console.log(typeof("1.23"-0)); //打印输出number

String() 转成字符串

	console.log(typeof(String(123)));  //打印输出string
	//小技巧：
	console.log(typeof(123 + "") );   //打印输出string

Boolean() 转成布尔值

	console.log(Boolean("abc") );//打印输出true
	//小技巧：
	console.log(!"abc");//打印输出false
	console.log(!!"abc");//打印输出true

特殊的

//会将boolean转成number
console.log(1==true);//打印输出true
console.log(2==true);//打印输出false
//会将boolean转成number，3<2是false为0,0<1是true
console.log(1<2<3);//打印输出true
console.log(3<2<1);//打印输出true

隐式转换

进行比较时string转换成number

console.log("5">4);//打印输出true
console.log("sfsdf">4);//打印输出false

进行判断时，转成boolean值

if(条件){执行.....}

进行计算的时候

//string转成numbe
console.log("5"*4) //打印输出20
//与非数计算得NaN
console.log("abc"-1);//打印输出NaN
//""隐式转换成0
console.log(5-"");//打印输出5
//true为1，false为0
console.log(5-true);//打印输出4  
console.log(5-false);//打印输出5
//undefined转换成NaN
console.log(5-undefined);打印输出NaN
//null为0
console.log(5-null);打印输出5

运算符

运算符有赋值运算符、一元运算符、逻辑运算符、算数运算符、关系运算符、三目运算符，运算符也有优先级，可以用()降低差异。

1>、赋值运算符

（=、+=、-=、*=、/=）

let a=1,b=2;
a+=b;
console.log(a);打印输出3

2>、一元运算符

i++ 先赋值，后自增
++i 先自增，后赋值

let i=0;
let j=i++;
console.log(j,i);//打印输出0、1

let i=5;
console.log(i++ +10);//打印输出15
console.log(i);//打印输出6

3>、逻辑运算符

非：非真即假，非假即真（取反 !“123”）
或：n选1，n里面有一个真就是真（有真为真 ||）
与：同时满足（有假为假 &&）

4>、算数运算符

指数：2**3（2的3次方）

5>、关系运算符

（= =、===、<、>、<=、>=）

6>、三目运算符

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

let number=5;
number<10?console.log(`${number}<10`):console.log(`${number}>10`);//打印输出5<10

流程控制

1>、顺序结构

2>、选择结构

单分支 if、双分支 if else

//获取用户输入的一个数(3位数)，123——321
const readline = require("readline-sync");
console.log("请输入一个数");
let y = readline.question();
if (y>99 && y<1000) {
    // console.log(y.split('').reverse());
 let a=parseInt(y/100);
    let b=parseInt((y/10)%10);
    let c=parseInt(y%10);
    console.log(`${c}${b}${a}`);
} else {
    console.log("输入错误");
}

多分支 if else if

//1、输入成绩score，>=90 A，>=70 B，>=60 C，D
const readline = require("readline-sync");
console.log("请输入你的成绩");
let score = readline.question()-0;
if(score>=90){
    console.log(`您的成绩等级为A`)
}else if(score>=70){
    console.log(`您的成绩等级为B`);
}else if(score>=60){
    console.log(`您的成绩等级为C`);
}else{
    console.log(`您的成绩等级为D`);
}

switch

//1、用户输入月份，打印输出对应月份的季节
const readline = require("readline-sync");
console.log("请输入月份");
let month = readline.question()-0;
switch(month){
    case 1:
    case 2:
    case 3:console.log(`${month}月是春天`);break;
    case 4:
    case 5:
    case 6:console.log(`${month}月是夏天`);break;
    case 7:
    case 8:
    case 9:console.log(`${month}月是秋天`);break;
    case 10:
    case 11:
    case 12:console.log(`${month}月是冬天`);break;
    default: console.log("你能输入正确的月份吗？");
}

3>、循环结构

for循环

// 练习一：
1+2+...+100的和
let sum=0;
for(let i=1;i<=100;i++){
    sum+=i;
}

while循环
- （前测试语句）满足条件进入循环

//1、 打印输出1+2+3+...+100的和
let sum=0,i=1;
while(i<=100){
    sum+=i;
    i++;
}

do while循环
- (后测试语句) 先进入循环再进行测试

// 打印九九乘法表
let num=1;
do{
    num++;
}while(false);
console.log(num);

注意
- 打断循环（break退出循环、continue退出本次循环）
- 循环的嵌套

// 打印九九乘法表
for (i = 1; i <=9; i++) {
    let str="";
    for (j = 1; j<=i; j++) {
        str+=`${i}*${j}=${i*j} `;
    }
    console.log(str);
}