JavaScript基础

1.JS的HelloWorld

　　alert('控制浏览器弹出一个警告框');

　　document.write('向body中输出一个内容');

　　console.log('向控制台输出一个内容');

 

2.JS编写位置

　　可以将JS代码写到

　　　　标签的onclick属性中：<button onclick="alert('你点了我');">点我</button>点击执行

　　　　超链接的href属性中：<a href="javascript:alert('你点了超链接');">点我</a>点击执行，可阻止超链接的默认跳转事件

　　以上两种方式虽然可以，但是他们属于结构与行为耦合，不方便维护，所以不推荐使用

　　写到script标签中也可以，这种方式称为：内嵌式，与之对应的还可以引入外部的js文件：

　　　　<script src="外部js文件路径"></script>

　　这么做的优势是可以在不同的页面中同时引用，推荐使用。

　　PS：script标签一旦用于引入外部文件就不能再在标签中编写代码了，即使编写浏览器也会忽略，如果需要可创建一个新script标签。

 

3.JS的基本语法

　　/**/  多行注释

　　//    单行注释

　　被注释的语句不会执行

　　JS中严格区分大小写；以分号结尾（英文分号）；会自动忽略多个空格和换行；

 

4.字面量和变量

　　字面量：都是一些不可改变的值，都是可以直接使用的，但是一般不会直接使用字面量，例如：1 2 3 4 5，

　　变量：可以保存字面量，而且变量的值可以任意改变，例如：a=1;

　　声明变量：在JS中可以用var关键字来声明一个变量，例如：var a=1;

　　还可以用let和const关键字定义。详细使用说明参考阮一峰的《ECMAScript 6 入门》的let和const命令一章

 

5.标识符

　　在js中所有的可以由我们自主命名的都可以称为是标识符，例如：变量、函数名、属性名都属于标识符，命名规则参考Java

　　PS：JS底层保存的标识符实际上是采用Unicode编码，所以理论上所有的utf-8中含有的内容都可以作为标识符

　　        例如：var 锄禾日当午=789;//但是一般不这么用

 

6.数据类型

　　数据类型指的就是字面量的类型，在JS中一共有七种数据类型：

　　　　String  字符串：文本 ，例：var str = 'hello'; 或 var str = "hello";  　　

　　　　　　　　　　　PS：单双引号不能混着用，但是双引号中可以放单引号，单引号中也可以放双引号，例：'hello."World"!'。

　　　　　　　　　　　Base64转码：btoa()：任意值转为 Base64 编码

　　　　　　　　　　　　　　　　　atob()：Base64 编码转为原来的值

　　　　Number  数值 ：包括整数和f浮点数（小数），例：var num = 1; 或 var num = 0.1;　　

　　　　　　　　　　　JS中可以表示的数字的最大值：Number.MAX_VALUE，最小值：Number.MIN_VALUE，

　　　　　　　　　　　超出这两个范围的值分别被表示为Infinity和-Infinity，表示正无穷大和负无穷大

　　　　　　　　　　  其中NaN是一个特殊值，它是唯一不等于自身的值，且不等于任何值，与任何值的运算结果都是NaN 

　　　　　　　　　　  英文全称是：Not a Number，但是它的类型是Number

　　　　　　　　　　  PS：

　　　　　　　　　　　　JavaScript 内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。

　　　　　　　　　　　　所以，1与1.0是相同的，是同一个数。

　　　　　　　　　　　　　　1 === 1.0 // true

　　　　　　　　　　　　这就是说，JavaScript 语言的底层根本没有整数，所有数字都是小数（64位浮点数）。容易造成混淆的是，

　　　　　　　　　　　　某些运算只有整数才能完成，此时 JavaScript 会自动把64位浮点数，转成32位整数，然后再进行运算。

　　　　　　　　　　　　由于浮点数不是精确的值，所以涉及小数的比较和运算要特别小心。

　　　　　　　　　　　　　　0.1 + 0.2 === 0.3// false

　　　　　　　　　　　　　　0.3 / 0.1　　　　// 2.9999999999999996

　　　　　　　　　　　　　　(0.3 - 0.2) === (0.2 - 0.1)// false

　　　　boolean  布尔值：只有两个：true和false，分别表示真和假

　　　　　　　　　　undefined、null、false、0、NaN、空字符串（''）的值都是false，其他的值都是true

　　　　null  空值

　　　　undefined  未定义

　　　　Object对象：包括了狭义上的对象、数组和函数

　　　　　　狭义上的对象：Object

　　　　　　　　定义：var obj={foo:'Hello',bar:'World'}; 或 var obj={'foo':'Hello','bar':'World'};

　　　　　　　　读取：obj['foo']  或 obj.foo

　　　　　　　　修改：obj['foo'] = 'abc'  或  obj.foo = 'abc'

　　　　　　　　删除：delete obj.p  // true  删除成功，当该属性存在且不能删除时会返回false

　　　　　　　　添加：obj['a'] = '123'  或  obj.a = '123'

　　　　　　　　遍历：for(var key in obj){console.log('key:'+key);　　console.log('value:'+obj[key]);}

　　　　　　　　查看一个对象本身的所有属性：Object.keys(obj);   //['foo', 'bar']

　　　　　　　　属性是否存在：in运算符：　　'foo' in obj; // true　　存在返回true，不存在返回false

　　　　　　　　with语句：with(obj){foo = '123';　　bar = '321'}等同于obj.foo = '123';obj.bar='321'

　　　　　　数组：Array

　　　　　　　　定义：var array = ['a', 'b', 'c'];

　　　　　　　　length属性：array.length //3　　　

　　　　　　　　读取：array[0] //'a' 或 array['0'] //'a'

　　　　　　　　修改：array[0] = 'aaa'  或  array['0'] = 'aaa'

　　　　　　　　删除：delete a[2]; //['aaa', 'b']   或   array.length = 2; //['aaa', 'b']

　　　　　　　　添加：array.push('c');  //['aaa', 'b', 'c']　　

　　　　　　　　遍历：for(var key in array){}，forEach() ，for(var i=0;i<array.length;i++){}

　　　　　　　　属性是否存在：in运算符：'1' in array;// true 或 1 in array;//true　存在返回true，不存在返回false

　　　　　　　　　　　　　　　原理：数组是一个键值为索引的对象，可以console.log(array);看看输出结果

　　　　　　　　数组常用的几个函数：

　　　　　　　　　　（1）push()：该方法可以向数组的末尾添加一个或多个元素，并返回添加后数组的长度。

　　　　　　　　　　　　　　例：array.push("a")或array.push("a","b")

　　　　　　　　　　（2）pop()：该方法可以删除数组的最后一个元素，并返回被删除的元素。例：array.pop()

　　　　　　　　　　（3）unshift()：向数组的开头添加一个或多个元素，并返回数组的长度。

　　　　　　　　　　（4）shift()：删除数组的第一个元素，并返回被删除的元素。

　　　　　　　　其他函数：

　　　　　　　　　　（5）concat()：连接两个或更多数组，并返回结果。

　　　　　　　　　　　　　　例：arr3 = arr1.concat(arr2) 或 arr4 = arr1.concat(arr2,arr3)

　　　　　　　　　　（6）join()：把数组的所有元素融入一个字符串，元素通过指定的分隔父进行分隔，默认为逗号分隔。

　　　　　　　　　　　　　　例：arr = ['a','bc','def']; arr.join();//a,bc,def 

　　　　　　　　　　　　　　或  arr = ['a','bc','def']; arr.join('*');//a*bc*def

　　　　　　　　　　（7）reverse()：颠倒数组中元素的顺序，会改变原数组。例：arr.reverse();//['def','bc','a']

　　　　　　　　　　（8）slice()：接受两个参数，如 (1, 3)。该方法会从开始参数选取元素，直到结束参数（不包括）为止。

　　　　　　　　　　（9）sort()：对数组的元素进行排序。排序顺序可以按字母或数字，也可以升序（向上）或降序（向下）。

　　　　　　　　　　　　　　　　默认情况下，sort() 方法将按字母和升序将值作为字符串进行排序。

　　　　　　　　　　　　　　　　　　var fruits = ["Banana", "Orange", "Apple", "Mango"];

　　　　　　　　　　　　　　　　　　fruits.sort();//Apple,Banana,Mango,Orange

　　　　　　　　　　　　　　　　这适用于字符串（"Apple" 出现在 "Banana" 之前）。但是，如果数字按字符串排序，则 "25"

　　　　　　　　　　　　　　　　大于 "100" ，因为 "2" 大于 "1"。正因为如此，sort() 方法在对数字进行排序时会产生不正确

　　　　　　　　　　　　　　　　的结果。可以通过提供“比较函数”来解决此问题。会改变原数组。

 　　　　　　　　　　　　　　　 例：按升序对数组中的数字进行排序：

　　　　　　　　　　　　　　　　　　　　var points = [40, 100, 1, 5, 25, 10];

　　　　　　　　　　　　　　　　　　　　points.sort(function(a, b){return a-b});

　　　　　　　　　　　　　　　　　　按降序对数组中的数字进行排序：

　　　　　　　　　　　　　　　　　　　　var points = [40, 100, 1, 5, 25, 10];

　　　　　　　　　　　　　　　　　　　　points.sort(function(a, b){return b-a});

　　　　　　　　　　（10）splice()：删除元素，并向数组添加新元素。

　　　　　　　　　　　　　　例：在位置 2，添加新项目，并删除 1 个项目：

　　　　　　　　　　　　　　　　　　var fruits = ["Banana", "Orange", "Apple", "Mango"];

　　　　　　　　　　　　　　　　　　fruits.splice(2, 1, "Lemon", "Kiwi");

　　　　　　　　　　（11）forEach()：方法按顺序为数组中的每个元素调用一次函数。可用于数组的遍历。

　　　　　　　　　　　　......

　　　　　　　　　　　　更多函数参考《JavaScript数组参考手册》

　　　　　　函数：Function

　　　　　　　　声明：function print(msg){console.log(msg);}  或  var print = function(msg){console.log(msg);} 

　　　　　　　　　　　或  var print = new Function('msg', 'console.log(msg)');//构造函数声明

　　　　　　　　　　　如果同一个函数被多次声明，后面的声明就会覆盖前面的声明。

　　　　　　　　　　　如果有同名的参数，则取最后出现的那个值。

　　　　　　　　调用：print('打印数据');

　　　　　　　　关于return：JavaScript 引擎遇到return语句，就直接返回return后面的那个表达式的值，后面即使还有语句，

　　　　　　　　　　　　　　也不会得到执行。也就是说，return语句所带的那个表达式，就是函数的返回值。return语句不是必

　　　　　　　　　　　　　　需的，如果没有的话，该函数就不返回任何值，或者说返回undefined。

　　　　　　　　函数的属性：print.name  //'print'　　print.length //1，返回函数参数的个数，但如有参数设置了默认值则返回0

　　　　　　　　　　　　　　设置参数默认值：function f(a=1, b){}

　　　　　　　　　　　　　　print.toString() //返回函数的源代码 ：function print(msg){console.log(msg);}

　　　　　　　　关于arguments：

　　　　　　　　　　　　　　由于 JavaScript 允许函数有不定数目的参数，所以需要一种机制可以在函数体内部读取所有参数。

　　　　　　　　　　　　　　这就是arguments对象的由来。arguments对象包含了函数运行时的所有参数，arguments[0]就是第

　　　　　　　　　　　　　　一个参数，arguments[1]就是第二个参数，以此类推。这个对象只有在函数体内部，才可以使用。

var f = function (one) {
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
}

f(1, 2, 3)
// 1
// 2
// 3

　　　　　　　　　　　　　　正常模式下，arguments对象可以在运行时修改。

var f = function(a, b) {
    arguments[0] = 3;
    arguments[1] = 2;
    return a + b;
}

f(1, 1) // 5

　　　　　　　　　　　　　　上面代码中，函数f()调用时传入的参数，在函数内部被修改成3和2。严格模式下，arguments对象

　　　　　　　　　　　　　　与函数参数不具有联动关系。也就是说，修改arguments对象不会影响到实际的函数参数。

var f = function(a, b) {
    'use strict'; // 开启严格模式
    arguments[0] = 3;
    arguments[1] = 2;
    return a + b;
}

f(1, 1) // 2

　　　　　　　　　　　　　　上面代码中，函数体内是严格模式，这时修改arguments对象，不会影响到真实参数a和b。

　　　　　　　　　　　　　　通过arguments对象的length属性，可以判断函数调用时到底带几个参数。

function f() {
    return arguments.length;
}

f(1, 2, 3) // 3
f(1) // 1
f() // 0

　　　　　　　　　　　　　　PS：arguments是一个对象

　　　　Symbol 表示唯一的值

　　可以用typeof来检测一个变量的类型，语法：typeof 要检测的值，例：typeof 'hello';　　

　　PS：typeof null;的结果是‘Object’；typeof没法区分对象和数组返回的都是Object，可以用instanceof来区分

　　基本数据类型：Number、String、boolean、null、undefined、Symbol

 　　

7.数据类型的转换

         强制类型转换

　　     转String：(1)调用被转换数据类型的toString()方法，该方法不会影响到原变量，它会将转换结果返回；

　　　　　　　　　　PS：null、undefined没有toString方法

　　　　　　   　　(2)调用String()方法，例：String(null);    //"null"

 　　    转Number：(1)使用Number()函数，例：Number("123");  //123

　　　　　　　     (2)parseInt()函数，把一个字符串转换为一个十进制整数；parseFloat()函数，把一个字符串转换为一个十进制小数。

　　     转Boolean：Boolean()函数，除了0、NaN、空串、null和undefined其他的都是true。

 

 

 

8.运算符

　　算数运算符：

　　　　　　加法运算符：x + y    PS：对象的相加

　　　　　　减法运算符： x - y

　　　　　　乘法运算符： x * y

　　　　　　除法运算符：x / y

　　　　　　指数运算符：x ** y　　x的y次方

　　　　　　余数运算符：x % y

　　　　　　自增运算符：++x 或者 x++

　　　　　　自减运算符：--x 或者 x--

　　　　　　数值运算符： +x

　　　　　　负数值运算符：-x

　　　　　　PS：猜猜1 + +"2" + 3=?;

　　　　　　　　答案：6；+"2"这里+是做一元运算符，会把其他数据类型转换为Number，使用原理和Number()函数一样，同理-"2" = -2

　　比较运算符：

　　　　　　> 大于运算符

　　　　　　< 小于运算符

　　　　　　<= 小于或等于运算符

　　　　　　>= 大于或等于运算符

　　　　　　== 相等运算符　　　　比较值，1=='1'  //true

　　　　　　=== 严格相等运算符   比较值和数据类型    1==='1'  //false

　　　　　　!= 不相等运算符        

　　　　　　!== 严格不相等运算符   

　　布尔运算符：

　　　　　　取反运算符：!    用于将布尔值变为相反值，即true变成false，false变成true。

　　　　　　且运算符：&&    用于多个表达式的求值，运算规则是：如果第一个运算子的布尔值为true，则返回第二个运算子的值

　　　　　　　　　　　　     （注意是值，不是布尔值）；如果第一个运算子的布尔值为false，则直接返回第一个运算子的值，

　　　　　　　　　　　　　    且不再对第二个运算子求值。

　　　　　　　　　　　　　    这种跳过第二个运算子的机制，被称为“短路”。有些程序员喜欢用它取代if结构，比如下面是一段

　　　　　　　　　　　　　    if结构的代码，就可以用且运算符改写。

　　　　　　　　　　　　　    if (i) {doSomething();}　　等价于　　i && doSomething();

　　　　　　　　　　　　　    上面代码的两种写法是等价的，但是后一种不容易看出目的，也不容易除错，建议谨慎使用。

　　　　　　或运算符：||    用于多个表达式的求值，运算规则和且运算符相反

　　　　　　三元运算符：?:    JS中唯一一个需要三个运算子的运算符。如果第一个表达式的布尔值为true，则返回第二个表达式

　　　　　　　　　　　　　　  的值，否则返回第三个表达式的值。

 　　二进制位运算符：

　　　　　　进制或运算符（or）：符号为|，表示若两个二进制位都为0，则结果为0，否则为1。

　　　　　　二进制与运算符（and）：符号为&，表示若两个二进制位都为1，则结果为1，否则为0。

　　　　　　二进制否运算符（not）：符号为~，表示对一个二进制位取反。

　　　　　　异或运算符（xor）：符号为^，表示若两个二进制位不相同，则结果为1，否则为0。

　　　　　　左移运算符（left shift）：符号为<<  　　

　　　　　　右移运算符（right shift）：符号为>>　　

　　　　　　头部补零的右移运算符（zero filled right shift）：符号为>>>　　
　　　　　　PS：位运算符只对整数起作用，如果一个运算子不是整数，会自动转为整数后再执行。位运算符只对整数起作用，

　　　　　　　　  如果一个运算子不是整数，会自动转为整数后再执行。

　　　　　　　　　　i = i | 0;

　　　　　　　　  上面这行代码的意思，就是将i（不管是整数或小数）转为32位整数。

　　　　　　　　  利用这个特性，可以写出一个函数，将任意数值转为32位整数。

　　　　　　　　　　function toInt32(x) {return x | 0;}

　　其他运算符：

　　　　　　void运算符：

　　　　　　　　　　作用是执行一个表达式，然后不返回任何值，或者说返回undefined　例：void(0) // undefined

　　　　　　　　　　主要用途是浏览器的书签工具（Bookmarklet），以及在超级链接中插入代码防止网页跳转。

 　　　　　　逗号运算符：可用于分隔，例：var a=1, b=2;

　　　　　　　　　　也可用于对两个表达式求值，并返回后一个表达式的值。例：var y = (1, 10);  //10

　　　　　　运算顺序：优先级；优先级高则先计算；圆括号的优先级很高，可以用来提高运算的优先级；

　　　　　　　　　　js中大部分运算符是左结合，少数是右结合（=、?:、**等）