javascript入门教程

Posted 2020-11-12 learninpro

 

 

这篇我就不铺垫和废话了，我们开始正式进入JS核心语法的学习…

首先我们从基础入手...

一. 基础语法

1.1 区分大小写

JS语法规定变量名是区分大小写的

比如： 变量名 learninpro 和变量名 learnInPro 是两个不同的变量。

 

1.2 标识符

JS中标识符指的是变量、函数、属性等的名称。

标识符的规则：

1. 第一个字符必须为字母(a-zA-Z)，下划线(_) 或 美元符($)。

1. 其他字符可以为字母(a-zA-Z)、下划线(_)、美元符($)或数字(0-9)。

1. 约定俗成一般标识符为驼峰写法。比如声明一个变量 var learnInPro = ‘xxx‘;

2. 不能把关键字，保留字，true，false，null作为标识符。

关键字是一组在ECMAScript中有特殊用途的单词，比如if、this、new 等等一大堆。

保留字跟关键字差不多，指的是ECMAScript觉得将来有可能成为关键字的词，这主要是为了如果以后需要新增关键字的时候，将保留字变成关键字就不会造成之前开发的页面和程序有报错的问题。

对于关键字和保留字，我的意见是大家可以简单看下都有哪些，但其实不需要知道的很清楚，在命名标识符的时候，只要不去使用那些简单单词就不会命中他们。即使真的命中了也会有报错，改个名字就好了…

 

1.3 js中的注释

// 单行注释

/*
  这是一个
  多行注释
*/

/**
 * 也有人喜欢写成这样
 * 可能是因为看的更清楚吧
 * 想用哪种 看自己的喜好
 */

 

1.4 变量

 

 

1.4.1 变量声明

JS中使用： 关键字var + 空格 + 标识符 的方式去声明一个变量，比如： var abc;

另外声明的变量会有个默认值叫做undefined；

var abc;

console.log(abc);   // undefined

 

 

1.4.2 变量赋值

var abc = ‘LearnInPro‘;

这句话的意思是声明了一个变量abc，并把LearnInPro这个字符串赋给变量abc

var abc;

console.log(abc);   // undefined

abc = ‘LearnInPro‘;

console.log(abc);   // LearnInPro

var a = ‘LearnInPro‘;
// 或
var b;
b = ‘LearnInPro‘;
// 这两种都是推荐写法，先声明再赋值

c = ‘LearnInPro‘;    
// 如果强行不声明变量就赋值，也不会报错，但强烈不推荐，无论怎样一定要先声明

 

 

1.4.3 局部变量 与 全局变量

function test(){
    var a = ‘LearnInPro‘;
}

test();

console.log(a); // 报错

这里会报错，函数会创建一个局部作用域，里面的变量只能在这个局部作用域或者他的子作用域里访问。

function test() {
    var a = ‘LearnInPro‘
    function inner () {
        console.log(a);
    }
    inner();
}

test();

在这个例子中inner函数的作用域在test作用域的内部，所以可以访问到test作用域中的变量a

var a;

function test() {
    var a;
    function inner() {
        // a = ‘LearnInPro‘;
        var a = ‘LearnInPro‘;
    }
    inner();
    console.log(a); 
    // 如果inner函数中的声明了a变量，这里会打印undefined
    // 如果未声明（注释掉inner中的第二行，打开第一行），这里会打印LearnInPro
}

test();

console.log(a); // undefined

变量赋值首先会寻找当前作用域下有没有这个变量。如果没有则向外层作用域寻找，直到找到最近的作用域里声明的变量并赋值给他。

 

1.5 数据类型

6种原始数据类型 + 1种复杂数据类型

 

原始数据类型：

• Undefined类型
• Null类型
• Boolean类型 比如true false
• Number类型 比如12345
• String类型 比如"xxx"
  • Symbol类型（es6） Symbol()

复杂数据类型

• Object类型

在开始将具体的数据类型之前，我们先看下如何去判断一个变量的数据类型呢？

这里我们需要用到typeof操作符来判断

比如

    var a = 1; 
　　console.log(typeof a) // "number"

    var a = "1";
　　console.log(typeof a) // "string"

 

 

1.5.1 Undefined类型

Undefined类型只有一个值 就是特殊的 undefined。

undefined在英文里是未阐明的、未限定的意思。在使用var声明变量，但未对变量进行赋值时，这个变量的值就是 undefined。

var a;
console.log(a === undefined);    // true
console.log(typeof a)  // "undefined"

 

 

1.5.2 Null类型

Null类型也是只有一个值 就是null。

null值表示一个空的对象指针,一般一个变量如果未来我们是打算让他去存储一个对象数据的话，那么默认可以将它赋值成null。

var a = null;
console.log(typeof a)  // "Object"

用typeof来判断数据类型的时候会发现，a的数据类型竟然是Object。由于null是空对象，所以我们可以理解为空对象也是对象，所以typeof会把他判断成Object。

另外

console.log(null == undefined);  // true
console.log(null === undefined);  // false

在JS中判断两个变量是否相等有两组操作符。

==、!= —— 相等和不相等操作符，在判断时，如果两边变量的数据类型不同，则会尝试进行类型转换后再去比较。

===、!== —— 全等和不全等操作符，在判断时，直接比较。

比如：

console.log(1 == ‘1‘)  // true    
console.log(1 === ‘1‘)  // false

由于字符串1和数字1是不同的数据类型 所以不全等 但在进行完类型转换后是相等的。

至于相等操作符进行的类型转换规则，我们在后面单独介绍，这里我们只要知道，=== 是必须数据类型和值都需要一样才会相等，而 == 则是数据类型不一样也有可能相等。这里我们先简单了解下就好，后面我们会具体展开来说这个知识点。

所以，这里我们会发现null和undefined相等但不全等。这是因为在js底层实现上null是派生自undefined的，所以经过类型转换后他们是相等的，这个我们不需要过多纠结，记住就好。

 

 

1.5.3 Boolean类型

这个类型有两个值: true 和 false

但是其他任何数据类型的值都可以使用Boolean()函数将其转换成Boolean类型的true或者false。

接下来我们看下实际的转换规则

Boolean	true	false
String	非空字符串	空字符串(“”)
Number	非零数字	0 和 NaN
Object	任何对象	—
Null	—	null
Undefined	—	Undefined

 

 

1.5.4 Number类型

数字类型，值为所有的数字和一个特殊值 NaN(非数值) 这个后面我们详细再说他

我们现在看下数字有哪些表示方式。

var a = 12;        // 整数
console.log(‘a:‘, a)  // 12

var b = 070;    // 8进制
console.log(‘b:‘, b);     // 56

var c = 0x10;     // 16进制
console.log(‘c:‘, c);     // 16

关于8和16进制知道有这么回事儿就行 一般用不到也不推荐在代码里用

var d = 1.1;    // 小数，又叫浮点数
console.log(‘d:‘, d);    // 1.1

var e = 1.1e2;     // 科学计数法
console.log(‘e:‘, e);    // 110

范围
在js中数字取值的范围是 [-1.7976xxxxe308 ~ -5e-324, 0, 5e-324 ~ 1.7976xxxxe308]

这个也是，大家了解一下就好了，一般用不上。

可以使用Number()函数将其他类型的值转换成数字类型

 

Number()的转换规则

Boolean类型中 true -> 1， false -> 0
Null类型中 null -> 0
Undefined类型中 undefined -> NaN
String字符串类型中

• 空字符串"" -> 0
• 如果包含的是纯数字，则转化成数字 比如‘1.1‘ -> 1.1, ‘001.1‘ -> 1.1
• 如果为有效16进制格式则转化为10进制输出 如 ‘0xf‘ -> 15
• 其他不符合上述格式的转化为NaN 如 ‘asdf‘ -> NaN, ‘a1.1‘ -> NaN, ‘1.1a‘ -> NaN, ‘a0xf‘ -> NaN

对于Object来说有些麻烦，我们这里先简单提前了解下Object对象类型，简单来说他是一组数据和功能的集合

比如我们简单定义一个object：

var obj = {a: 1, b: ‘aaa‘};

console.log(obj.a, obj.b);  // 1 ‘aaa‘

通过 obj.a、obj.b 来访问他包含的值。这里咱们先简单了解下后面我们会详细讲解。

那么在Number()来转化对象的时候会先尝试使用对象的 valueOf 方法没有的话会用 toString 方法，并将其返回值用Number()转化。

我们来看个例子:

    var obj = {
        valueOf: function(){
            return 1;
        }
    }

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

    var obj2 = {
        valueOf: function(){
            //return ‘asdf‘;
        }    // 所有函数都会有返回值 不写return则默认返回undefined 而Number(undefined)会得到NaN
    }

    console.log(Number(obj2));  // NaN

我们这里注意一个问题，就是在Number数据类型中 NaN 和 NaN 是不相等的。

所以

console.log(NaN == NaN) // false

那么我们怎么去判断一个变量时NaN呢？我们需要使用isNaN这个方法

console.log(isNaN(NaN)) // true

最后一点关于Number类型的知识是

数字运算

    1 + 2 * 3 = 7 先乘除后加减    
    (1 + 2) * 3 = 9
    4 % 5 -> 4 取余操作
    更多的一些操作需要借助Math对象里的方法 比如
    Math.power(2, 3) -> 2的3次方等
    以后会帮大家总结

最后在Number类型中，有个比较重要的点

浮点数运算的精度问题

我们来看一个例子

console.log(0.1 + 0.2)  // 结果是0.30000000000000004，而不是3

其实对于浮点数的四则运算，几乎所有的编程语言都会有类似精度误差的问题。首先计算机需要先把0.1和0.2转化为二进制，这个时候计算机发现0.1和0.2转化为的二进制是无限循环的。由于JS采用的是IEEE754双精度浮点数二进制储存格式，最多可以支持52位。经过截取转化成10进制后，结果就变成了0.30000000000000004。

那么如何解决呢？

方法也很简单，就是将浮点数转化成整数计算，举个例子：

对于0.1 + 0.02 我们需要转化成 ( 10 + 2 ) / 1e2

对于0.1 * 0.02 我们则转化成 1 * 2 / 1e3

 

 

1.5.5 String类型

String类型比较简单就是用单引号或者双引号包裹起来的一种数据类型，俗称字符串。

    var a = ‘learnInPro‘;
    console.log(a);

第一个知识点 字符串拼接使用+，比如：

    var a = ‘learn‘;
    var b = ‘In‘;
    var c = a + b + ‘Pro‘;
    console.log(c); // learnInPro

另外我们知道在Number中 + 是一种运算符 所以这里不要搞混

我们举几个例子：

    console.log(1 + 2)  // 3
    console.log(‘1‘ + ‘2‘)  // ‘12‘
    console.log(1 + ‘2‘)    // ‘12‘

在字符串中包含一些特殊的字符叫做转义字符，他们在字符串中有一些特殊用途他们都是以’\\’开头
我们来看个demo：

console.log(‘learn\\nInPro‘);    
/**
 * learn
 * InPro
 */

console.log(‘learn\\‘InPro‘);    // learn‘InPro
console.log("learn\\"InPro");    // learn"InPro
console.log("learn\\\\InPro");    // learn\\InPro

String类型可以通过String()方法将其他类型转化成String类型，这个规则比较简单，我们来看下demo：

    console.log( String(true) );    // "true"
    console.log( String(10) );      // "10"
    console.log( String(null) );    // "null"
    console.log( String(undefined) );   // "undefined"
    console.log( String({a: 1}) );    // "[object Object]"

 

 

1.5.6 Symbol类型

Symbol类型是ES6引入了一种新的原始数据类型，表示一个独一无二的值。

var s = Symbol();

console.log(typeof s);  // "symbol"

Symbol类型表示一个独一无二的值，两个Symbol是不相等的。

var s1 = Symbol();
var s2 = Symbol();

console.log(s1 === s2) // false

由于每一个 Symbol 值都是不相等的，用于对象的属性名，就能保证不会出现同名的属性。能防止某一个属性被不小心改写或覆盖。

var s = Symbol();

var obj = {
  [s]: ‘learnInPro!‘
};

console.log(obj[s]);    // learnInPro!

Symbol类型是ES6新引入的类型，这里我们简单了解下就好，在以后有机会讲ES6的时候再深入讲解。

 

 

这篇文章里讲解了JS的一些基本语法，还有6种原始数据类型，在下一章里面我们再继续把另外一种复杂数据类型Object和一些相关知识点讲完。

额…另外就是如果你在学习前端的过程中有任何问题想要咨询欢迎关注LearnInPro的公众号，在上面向我提问。??

?