安心学习，重学前端之（js基础篇（1））

时间 2019-12-05

原文原文链接

前言

感受最近IT圈子有点嗨啊，996.icu大火，也是咱们it从业者的心声，活着!=活着。其实不管是在公司，仍是回家，技术都融入了我本身的生活吧，只是资本家的操做，不予评论，安心作技术。
话扯远了，言归正传，这个文档，是一个分享本身从新学习前端的笔记，这些原本是纸质版的笔记，如今贴出来，分享给你们，篇幅较长
计划：
- 首先是js篇，主要结合红宝书和一系列文档和本身的理解，会写到封装ajax，后续看时间。
- 而后是es6，主要结合阮一峰老师的es6指南，和深刻理解es6两本书来写
- 其次是typescript,主要结合官方文档和本身的理解来写
为何要写这些东西，我也不知道，主要是感受，写东西能让本身安下心来。
框架篇能够参考楼主以前的博文，vue,react，都比较的基础，传送门[github.com/whylisa/vue…]
话很少说，开始学习，若有错误欢迎指出！ stepbystep。
js系列传送门[github.com/whylisa/jav…]

JavaScript入门

JavaScript书写位置

第一种 : 写在script标签中

<script> alert('Hello World!'); </script>
复制代码

第二种 : 引入一个js文件

<script src="main.js"></script>
复制代码

注意：javascript

script 能够放在不少地方,,可是咱们通常规范些在body里面,放在 html 下面; . 使用src 引入的标签不能再在标签内写js代码里

注释

注释代码不会被执行，仅仅起到一个提示的做用。注释能够对复杂的代码进行解释，方便后期的维护和开发。html

单行注释 :前端

// 这是单行注释， 单行注释只能写一行代码
// 快捷键： ctrl + / 
复制代码

多行注释 :vue

/* 这是多行注释，在多行注释中能够 换行 sublime Text : 快捷键 ctrl + shift + / vscode : 选中多行直接注释,便可,可是这种多行注释 若是须要得本身手写 /* 复制代码

在写代码的时候，须要写注释，这是一个良好的习惯,java
你们初学,必定多写注释 ! 把理解的知识再写一遍,效果会更好!!react

输出语句 (5种)

alert : 警告框git

//alert会弹出一个警告框
alert("hello world");
复制代码

confirm : 确认框es6

//confirm弹出一个肯定框
confirm("我帅吗？");
复制代码

prompt : 输入框github

//prompt:弹出一个输入框，能够输入值
prompt("请输入你的真是年龄");
复制代码

document.write : 网页中写入内容ajax

//能够识别标签
document.write("hello world");
document.write("<h1>hello world</h1>");
复制代码

控制台输出
```
//F12打开控制台，在console中能够看到打印的信息
console.log("hello word");
复制代码
```
总结：alert、comfirm、prompt 三个用户体验太差，只有在学习的时候会用到。console.log常常用来打印日志，项目调试的时候很是有用。

变量

变量 : 能够变化的量

变量的做用 : 存储数据

声明 : 用 var 来声明

如何使用变量

直接声明变量

// var 来声明变量的
// age : 变量名
// 结构 : var + 变量名 ; 
 var age;
 console.log
复制代码

先声明,后赋值

var name;  // 声明一个变量 name
name = 'why'; // 一个等号 是赋值,,后面的值赋值给前面的
 console.log
复制代码

同时声明+赋值

var name = 'why' 
 console.log
复制代码

同时声明多个变量并赋值

var age = 10,name= 'zs' 
// 至关于
var age = 10;
var name = 'zs';
复制代码

不声明变量，直接赋值(不会报错，可是不推荐)

// 没有用 var 修饰的无论代码在哪里都是全局的
// 不推荐 
height=100;
console.log(height);
复制代码

不声明变量，也不赋值变量，直接使用（会报错）

// weight is not defined 要知道是没有定义,,估计是变量名写错了
 console.log(heightt);
复制代码

结论：

变量须要声明以后，才能使用，养成一个良好的编程习惯。
javascript代码一旦报错了，后面的代码就再也不执行了。

变量的命名规则和规范

规则 : ( 必须遵照的,不遵照会报错 )
- 由字母、数字、下划线、$符号组成 ;
- 不能以数字开头
- 区分大小写
- 不能是关键字和保留字 (不用死记 , 慢慢就见多了)
```
//关键字：对于js来讲有特殊意义的一些单词
  //保留字：js保留了一些单词，这些单词如今不用，可是之后要用。
复制代码
```
规范 : (建议遵照的不遵照不会报错)
- 变量名必须有意义
- 遵照驼峰命名法。首字母小写,后面单词的首字母须要大写!
  
  myName, userPassword

下面哪些变量名不合法

a	    
1
age18
18age
2b
name
$name
_sex
&sex
theworld
a b
class 复制代码

变量的demo

交换两个变量的值

var temp = a;
        a = b;
        b = temp;
复制代码

不使用临时变量，交换两个数值变量的值

// a b
var a = a+b; // 33 21
    b = a-b; // 33 12
    a = a-b; // 21 12
复制代码

数据类型

javascript中数据类型分为简单数据类型和复杂数据类型，今天只学简单数据类型 ( 5个 )

number、string、boolean、undefined、null

数值字符串布尔声明未赋值空类型

number-数字类型

数字： 11 255 333 1024

进制

在javascript中表示一个数字，除了有咱们经常使用的十进制11, 22,33等，还可使用八进制、十六进制表示等。

十进制

//咱们最经常使用的进制，进行算术运算的时候，八进制和十六进制最终都要转换成二进制,计算机只识别二进制
//逢10进1
var num = 9;
var num = 29;
复制代码

八进制

// 0开头的数字， 逢8进1
var num1 = 010;
var num2 = 0121;

// 八进制 0-7 逢八进一 , 10
var ba = 0321; 
// 12 = 2*8^0 + 1*8^1 = 10
// 321 = 1*8^0 + 2*8^1 + 3*8^2 = 1+16+ 192 = 209
console.log(ba);
复制代码

十六进制

// 0x开头的数字，逢16进1， 数字范围1-9A-F
var num = 0xA;
var num = 0x12;
复制代码

tips : 关于二进制，计算机在只认识二进制，因此全部的代码最终都会转换成二进制数据。

浮点数

浮点数就是小数,，好比0.1

浮点数

var num = 0.1;
复制代码

科学计数法

//当一次数字很大的时候，能够用科学计数法来表示
var num = 5e+5;  //5乘以10的5次方
var num = 3e-3;//3乘以10的-3次方

复制代码

浮点数精度丢失问题

//在进行浮点数运算的时候，可能会出现精度丢失的问题
0.1 + 0.2 = 0.30000000000000004;
0.2 + 0.2 = 0.4;
//尽可能少用浮点数进行运算，不要让浮点数进行比较。

解决办法 : 根据小数点后面的位数量 乘以对应的整数;
0.1 + 0.2  ==> (0.1*10+0.2*10) / 10 = 0.3
0.01 + 0.02 呢?
复制代码

数值范围

最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity    1/0
无穷小：-Infinity
复制代码

字符串类型

字符串类型，使用双引号 " 或者 ' 包裹起来的字符

//双引号和单引号必须成对出现
var str = 'hello world';
var str = "hello world";

var num1 = 12;
var num2 = '12';
能够经过颜色
复制代码

字符串长度

每个字符串都有一个length属性，能够获取到字符串中字符串的个数

var str = "akdjflksjdflk";
console.log(str.length);
复制代码

转义字符

思考，如何打印?

引号能够嵌套,可是只能相互嵌套,不能嵌套本身 (单双号相互嵌套)

经过转义符

// 你们好,我姓"熏",我叫孙悟空
//选择"好看"的外表，还\是'有趣'的灵魂
复制代码

字符串拼接

+号具备字符串拼接功能，它能将两个字符串拼接成一个字符串。
+号同时具备算术加法的功能，它能将两个数字进行相加
若是+号两边有一个是字符串，那么就是拼串的功能，若是都是数字，那么就是算数的功能。

// 第一种状况 : 字符串 + 字符串
var a = "hello";
var b = "world";
console.log(a + b);//字符串拼接功能

// 第二种状况 : 数值 + 数值
var a = 100;
var b = 100;
console.log(a + b);//加法

// 第三种状况 : 字符串 + 数值
var a = 'abc';
var b = 100;
console.log(a + b);//字符串拼接功能
复制代码

思考练习 :

'我是'
var name = 'why';
拼接成一句话 : 我是why
console.log ( '我是'+name)  仍是  console.log ( '我是name');
复制代码

布尔类型

布尔类型：true 和 false

//布尔类型只有两个值
true:表示真
false:表示假
复制代码

注意：

1. 区分大小写，不要写成True或者是False了

2. 'true' 和 true , 前者是字符串类型

undefined和null

他们都属于获取非正常值的类型

undefined表示一个没有赋值的变量
null表示一个空的值, ( 例如 : 获取一个元素,id写错了,获取不到,返回一个null)

字面量赋值与变量赋值

字面量赋值，字面量也叫直接量，一眼可以识别是什么类型的变量，好比11, "abc", true, false, undefined, null等都是字面量，能够直接会使用。
变量赋值：浏览器必需要通过声明以后，才认识变量，若是没有声明，直接使用变量是会报错的。

操做符

变量能够存储数据，咱们还须要学习操做符来操做这些数据

一、算术运算符

二、赋值运算符

三、一元运算符

四、逻辑运算符

五、比较运算符

算术运算符

//快速的说出如下的结果？
console.log(123 + 123);
console.log("123" + 123);
console.log(123 - 123);
console.log(123 - "123");
console.log(12 * "12");
console.log(12 / 12);
console.log(10 % 2);
复制代码

注意 :

整除 => 余数==0 例如: 能被7整除 : i%7==0

赋值运算符

赋值运算符有： = , +=, -=, *=, /=, %=

var num = 10;
num += 1;   //num = num + 1;
num -= 1;   //num = num - 1;
num *= 2;   //num = num * 2;
num /= 2;   //num = num / 2;
num % = 2;  //num = num % 2;
复制代码

一元运算符

一元运算符：只有一个操做数的运算符

二元运算符：有两个操做数的运算符，好比算术运算符、赋值运算符

自增运算符：++

先自增： ++i
后自增：i++

异同点 :
1. 相同点 : 代码执行以后, 数值都会 + 1
2. 不一样点 : 就是在自增的时候使用就会出现不一样

//先自增：
var num = 1;
console.log(++num); //先自增：表示先加1，后返回值

//后自增：
var num = 1;
console.log(num++);// 后自增：表示先返回值，后+1
复制代码

自减运算符：--

先自减：--i
后自减：i--

demo：

//1. 思考思考
var num = 5;
console.log(num++);
console.log(++num);

//2. 猜猜看
var a = 1; var b = ++a + ++a; console.log(b);    
var a = 1; var b = a++ + ++a; console.log(b);    
var a = 1; var b = a++ + a++; console.log(b);    
var a = 1; var b = ++a + a++; console.log(b);  
复制代码

逻辑运算符

&&：与运算符，表示且，只有当两个操做数都为true的时候，结果才是true
||：或运算符，表示或，只要有其中一个操做数是true,结果就是true
!：非运算符，取反

console.log( true && true );
console.log( false && true );
console.log( true && false );
console.log( false && false );

console.log( true || true );
console.log( false || true );
console.log( true || false );
console.log( false || false );

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

总结 : 
&&  翻译 : 一个为真,且,,另一个也为真  => 才为真
1. 二者都为true,才为true
2. 前者为true,,决定权在后者

||  翻译 : 一个为真,或者另一个为真 => 真
1. 二者有一个为true,结果就为true
2. 前者为false,,决定权在后者

复制代码

比较运算符

比较运算符也叫关系运算符， < > >= <= == != === !==，关系运算符的 结果是布尔类型

var a = 5;
var b = 6;
console.log(a > b);//大于
console.log(a < b);//小于
console.log(a >= b);//大于等于
console.log(a <= b);//小于等于

console.log(a == b); //相等，只比较值，不比较类型
console.log(a === b); //全等，比较类型和值
console.log(a != b); // 不等， 只判断值，不判断类型
console.log(a !== b); // 不全等 判断值，且判断类型

注意 : 
 数字类型比较和字符串比较是由区别的 
 1. 数字比较 : 24>3;   比较数字大小
 2. 字符串比较 : '24' < '3'   比较首字母大小
 3. 字符串和数字混合比较 : 比较数字内容大小
复制代码

运算符优先级

()的优先级最高
一元运算符(++, --, !)
算术运算符（先*/%, 后+-）
比较运算符 (先> < >= <=，后== === != !==)
逻辑运算符（先&&后||）

不用死记，若是不肯定的时候，使用()增长优先级

//猜猜看
var result = ((4 >= 6) || ("人" != "狗")) && !(((12 * 2) == 144) && true);
console.log(result);

复制代码

类型转换

为何要进行类型转换???

服务器拿回来的数据,有多是字符串,好比age='18', 
 var age = '18';
 console.log(age+1);
复制代码

查看变量的类型

typeof关键字能够查看数据的类型

var num = 11;
console.log(typeof num);
num = "abc";
console.log(typeof num);
复制代码

**小技巧：在控制台能够根据颜色来判断数据的类型哦(^__^) **

转换成数值 -number

1 Number()

console.log(Number('55'));
Number()能够把任意值转换成数值类型，可是若是字符串中有不是数字的字符，返回NaN
复制代码

2 parseInt() 和 parseFloat()

- parseInt()  把整数或者小数都转化为整数;
- parseFloat() 把整数转化整数,把小数转化为小数
var num1 = parseInt("12");  // 12
var num1 = parseInt("12.3"); //12
var num1 = parseFloat("12"); //12
var num1 = parseFloat("12.3");//12.3

var num1 = parseInt("12.3abc");  // 返回12，若是第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123");   // 返回NaN，若是第一个字符不是数字或者符号就返回NaN


复制代码

3 算术运算 (最经常使用)

var str = '500';
console.log(+str);		// 取正
console.log(-str);		// 取负
console.log(str - 0);  +0呢???拼接
复制代码

转换成字符串类型 - string

1. String ( )

var num = 5;
num = String(num);
console.log(num);
复制代码

2. toString ( )

var num = 5;
console.log(num.toString());// 把数值5变成字符串5
//未来全部的数据都会有toString()方法，除了null和undefined
复制代码

3. 拼串，(最经常使用)

var num = 5;
num = num + "";
console.log(num);
复制代码

转换成布尔类型

全部的值均可以转换成布尔类型

其中 0, "", undefined，null， NaN，这几个值会转换成false，其余值都会转换成true

这个表明的五大基本类型

// 没有值 => false
// 有值 => true
// number string undefined null 
// 0 '' 

注意 : 
   1. 'false' 它是字符串 
   2.  NaN  => false 
复制代码

Boolean()

console.log(Boolean(1));
console.log(Boolean(0));
复制代码

var a = "abc";
console.log(!!a);
复制代码

NaN

NaN: not a number, 表示一个非数字

在js中，NaN用来表示一个非数字的特殊值，当发现没法进行运算时，js不会报错，而是会返回一个NaN

NaN的注意事项：

NaN的类型是number类型的，表示一个非数字
NaN不等于任何值，包括NaN自己
经过isNaN()能够判断是不是一个数字，返回false的时候，表示是一个数字。

var num = +'abc'
 console.log(num);  //NAN

// 判断是否是文字
var a = 123;
var b = '123';
// Nan 不是数字 
// true 不是文字
// false 不是否是文字 = 是文字
console.log(isNaN(c));
复制代码