前端攻城狮---js之语法基础(1)

js其实就是javaScript,至于它的前身今世，咱在这就不多说，直接直奔主题。

javaScript

javaSctipt主要分为三部分

a 语言核心 ECMAscript 如变量数组函数对象...
b DOM 文档模型对象
c BOM 浏览器模型对象

我们先来了解一下第一部分吧

首先使用js也和css样式一样，有三种使用方式。行内式，内嵌式，外链式(项目中推荐)。

常用方法和语句

在讲具体的知识之前，我们有必要先来了解一下js相关的预备知识。

prompt

弹出一个输入框，输入内容，我们也可以去设置默认的内容。

alert

弹框，同样的我们也可以去设置弹框的内容。

console.log()

扫描二维码关注公众号，回复： 2999015 查看本文章

控制台输入日志，便于开发及找错误的地方。

字面量

什么是字面量？字面量表示如何表达这个值，一般除了表达式，等号右边的都可以认为是字面量。

字面量分为数字字面量，字符串字面量，对象字面量，函数字面量。

数字字面量

    console.log(123); // 0
    console.log(-123); // 0
    console.log(0); // 0
    console.log(010);//8
    console.log(0xa4);//168
    console.log(12.3);//12.3
    console.log(Infinity); // Infinity
    console.log(-Infinity); // -Infinity
    console.log(1.5e12345678998765432121235664);//Infinity
    console.log(12/0);//Infinity
    console.log(NaN);//NaN
    console.log(0/0);//NaN
    console.log("abc"*2);//NaN

首先默认输出的都是10进制，我们看第4行和第5行，都把8进制的值和16进制的值输出成10进制。

此外我们还看到了两个值，NaN，Infinity。NaN表示无法用数字来表示的数。Infinity表示无穷大。

字符串字面量

    console.log("");
    console.log("今天学了js 好激动");
    console.log("12");
    console.log(12);
    console.log("恰\t似\n一江春水\n向东流");
    console.log("a\'bc\"");
    console.log("c:\\\\Users");

我们来了解一下\ 它是转义字符，从字面上来看就是转变字符原本的意义，\n 后面n本来就是一个字符，但是前面加了\就表示回车，像我们js默认把""表示用来包裹字符串，但是如果说我们需要显示"，它就只是一个普普通通的",那么就只要在前加上\，就可转义输出"。

对象字面量/函数字面量

就是输出一个对象，和函数那么什么是对象，什么是函数，之后的文章中会做出解释。

变量

变量的定义

js中要如何去定义变量？通过var去定义变量，赋值就通过=。

var a; a = 111;

那么变量名在取名时，有没有什么注意事项呢？下面我们来讲解一下变量名的规则。

组成部分: _ $ 字母数字
第一个字符不能为数字
区分大小写比如 a 和 A 是不同的变量名
不能是js的关键字和保留字

var a;
var _;
var $;
var o0_00;
var a123;
var var;// 错误因为var是js所定义的，不能使用
var ~=aa;

下面我们来看看变量的赋值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	
	<script type="text/javascript">
	    var a = 10, b = 20, c = 30;
	    console.log(a+b+c);//输出60
	    var d;
	    console.log(d); // 不会报错 而是undefined 表示变量定义 但没有赋值，默认会赋上underfined
	    console.log(e);//此处报错，e is not defined 因为没有定义e的变量
	</script>
</body>
</html>

变量声明提升

变量声明提升是什么？变量怎么就被提升了？变量如何提升了？带着这些疑问我们来看看下面的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	
	<script type="text/javascript">
	    console.log(a); // undefined
	    var a  = 10;
	    console.log(a); // 10
	</script>
</body>
</html>

它的输出就在右边的，一个是underfined,一个是10。为什么呢？为什么没有报错呢？按照代码是逐行编译，第一个应该为报错，因为没有去定义a这个变量。然后上述代码真正的执行步骤是

<script type="text/javascript">
	    var a;
	    console.log(a); // undefined
	    a  = 10;
	    console.log(a); // 10
	</script>

这就是变量声明提升，所有的参数都会被提前声明，因为所有未被赋值的参数默认都会赋上underfined，所有第一个输出回事underfined,第二个输出是10。

数据类型

基本类型：

string number boolean underfined

复杂数据类型：

object

前面说的NaN,Infinity也是属于number,用于判断数据类型的方法 typeof("nihao");

变量的数据类型

变量的类型有什么来决定？

变量的类型由储存的数据类型来决定，也就是说由值决定。

数据类型转换主要有两种

数字转字符串

数字转字符串只需要将数字+一个字符串即可，哪怕是空字符串。

console.log(typeof (23+"")); console.log(typeof (23+"10"));

字符串转数字

有三种方法可以将字符串转变为数字。Number();parseInt();parseFloat();

三者的区别就是parseInt（）;是将字符串转为整型，parseFloat（）;是将字符中转为浮点型，Number（）;也是将字符串转为数据，不过整型的转整型，浮点型的就转成浮点型。

接下来我们来看看转换时的一些注意事项。

console.log(parseInt("100")); // 100
console.log(parseInt("-100")); // 100
console.log(parseInt("100.99")); // 100
console.log(parseInt("100xixixi")); // 100
console.log(parseInt("xixixi100")); // NaN
console.log(parseInt("abcdee")); // NaN
console.log(parseInt("中文")); // NaN
console.log(parseInt("NaN")); // NaN

console.log(parseInt("Infinity")); // NaN

console.log(parseInt("010FFF")); // 10没写第二个参数进制时，默认按十进制解析
console.log(parseInt("10",8));此时的10表示8进制，去转成10进制的数字

可以总结一下几点：1.可以看到纯中文转数字得到的是NaN。2.若前面是数字后面是字符串转数字，则会将前面的数字转成功。3.若前面是字符串后面是数字，则转成NaN。

console.log(parseFloat("456.78")); // 数字456.78
console.log(parseFloat("456.78.89")); // 数字456.78
console.log(parseFloat(".7889aaaa")); // 数字0.7889
console.log(parseFloat(".78e3")); // 数字780
console.log(parseFloat(".78e3a")); // 数字780
console.log(parseFloat("a.78e3")); // NaN
console.log(parseFloat("aahhh")); // NaN

同样的和上述总结一样。

prompt之前说了，是弹出一个输入框，我们可以获取到输入的值，不过获取来的是一个字符串，此时我们就需要将字符串转变为数字。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
	     var age =  parseInt(prompt("请你输入你的年龄",18));
	     age = age + 1; // 
	     console.log(age); // 
	</script>
</body>
</html>

运算符

数学运算符

数字运算符主要有+ - * / %(取模运算符)。

console.log("2"-1); // 1 在运算时，会将纯数字的字符串转为数字
console.log("4aahh"*4); // NaN
console.log(4*""); // 0 空字符串隐式转换为0
console.log(NaN+3);// NaN
console.log(undefined+4); // NaN
console.log(false-10); // -10 false--->0
console.log(Infinity-23); //NaN
console.log(Infinity+23); //NaN

以上是一些特殊的使用场景。

比较运算符

比较运算符主要有：> < >= <= == === != !==

==和===的区别就是前者是值相同，后者是值和类型都要相同。

console.log(8>7); // true
console.log(8<10); // true
console.log(8==7); // false
console.log(8>=7); // true
console.log(8<=7); // false
console.log(8===7); // false
console.log(8!=7); // true
console.log(8!==7); // true

console.log(1=="1"); //true == 只要两个值内容一样即可
console.log(1==="1"); //false === 全等于两个值内容一样并且类型也要一样
console.log(1!="1"); //false != 对==的否定
console.log(1!=="1"); //true !== 对===的否定

console.log(0==""); // true “”会转义成0
console.log(NaN == undefined); // false
console.log(0 == null); // false

console.log(NaN==NaN);// false
console.log(Infinity==Infinity);// true
console.log(Infinity===Infinity);

以上是一些常见的和特殊的使用场景。

逻辑运算符

逻辑运算符主要有：&& || !

&&就是于运算符，两个都为真则为真，一假或都假则为假。

true&&true true
true&&false false
false&&true false
false&&false false

||就是或云算法，一真都真则为真，都假则为假

true&&true true
true&&false true
false&&true true

false&&false false

!表示非运算法，取反即可。

接下来我们看一些例子吧，当有非boolean的类型的值去做比较时，结果又是怎么样的。

console.log(34&&null); // null
console.log(34&null); // null
console.log(-10&&null); // null
console.log(0&&null); // 0
console.log(0&null); // 0
console.log("welcome"&&true); // true
console.log("welcome"||true); // welcome
var a = 3,b =4;
console.log(a||b); //3
a = 0;
console.log(a&&b); // 0

1.我们可以看到非0的数字和字符串表示的是true。

2.&&若前面的条件为true，则会输出后面的条件的结果。

3.||若前面的条件为true，则会输出前面条件的结果。

4.&& ||表示短路运算符，& |表示非短路运算符，有什么区别呢短路运算符更加安全，就拿&&来说若前面的条件是false则后面的条件就不执行，&就不一样前后两个条件都回去执行。

赋值运算符

赋值运算符主要有 =，+=， -=， *= ，/= ，++ ，--

我们主要来了解+= 和 ++的相关知识点，其他的可类推。

如a++；表示a = a+1; b+=1； b = b+1；但两者在使用时，到底有什么区别呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
	    var a = 2, b;
	    b = ++a; //a = a+1; b = a;
	    console.log(a);//3 
            console.log(b); //3
      	    var A = 2,B;
      	    B = A++;// b = a; a = a+1;
      	    console.log(A);//3
      	    console.log(B)//2
	</script>
</body>
</html>

在使用中就有区别了，大家可以看看后面的注释以及结果，给你个眼神自行体会哈。

三目运算符

xx==xx?xx:xx 是这样的表达形式

如var a = 2；var b=a==1？0:1;

最后的b的结果会是0，为什么呢 b的取值依据是a是否等于1，若a等于1则b=0，若不等于则a=1

运算的先后顺序

++ -- ! >数学运算符>比较运算符>逻辑运算符>赋值运算符

下面附上一个demo来验证一下吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
        var a = 4;
        var b= 1*(2+4)&&++a||5>6&&7<8||!6;
        console.log(a+" "+b); // 20
	</script>
</body>
</html>

我们来化解一下b的运算过程吧

b = 1*(2+4)&&++a||5>6&&7<8||!6; 因为要先算++ -- ！

b = 1*(2+4)&&5||5>6&&7<8||false; 接着再算数字运算符

b = 6&&5||5>6&&7<8||false; 再算比较运算符

b = 6&&5||false&&true||false;再算逻辑运算符，&&的优先级高于||

b = 5||false||false;

b = 5;