JavaScript基础

Posted 2020-08-20

javascript是区分大小写的语言，关键字、变量、函数名和所有的标识符都必须采用一致的大小写。

标识符：第一字符必须是一个字母、下划线(_)或一个美元符号($)，其他字符可以是字母、下划线、美元符号或数字，不能把关键字、保留字、true、false 和 null 作为标识符。

数据类型

typeof 操作符：用来检测变量的数据类型。typeof 操作符可以操作变量，也可以操作字面量。

Undefined 类型：定义变量时，尽可能的不要只声明，不赋值。

Null 类型：如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为 null。

Boolean 类型：true 和 false。

Number 类型：整型和浮点型。

由于保存浮点数值需要的内存空间比整型数值大两倍，因此 ECMAScript 会自动将可以转换为整型的浮点数值转成为整型。

虽然浮点数值的最高精度是 17 位小数，但算术运算中可能会不精确。

最小值：Number.MIN_VALUE    最大值：Number.MAX_VALUE    正无穷：Number.POSITIVE_INFINITY    负无穷：Number.NEGATIVE_INFINITY

isFinite()：确定一个数值到底是否超过了规定范围。没有超过 ，返回 true，超过了返回 false。

isNaN()：判断这个值到底是不是 NaN。

把非数值转换成数值

Number()：用于任何数据类型。null和空返回0，undefined和字符串（包含）返回NaN。

parseInt()：只能将字符串转成数值。字符串（开头）返回NaN，小数点不是数值，会被去掉。

 parseFloat()：浮点转换，只认一个小数点。

String 类型：用于表示由于零或多个 16 位 Unicode 字符组成的字符序列，即字符串。

toString()：可以把值转换成字符串。（不能转换null和undefined）

String()：能够将任何类型的值转换为字符串。

Object 类型：其实就是一组数据和功能的集合。

运算符

表达式：单一的字面量和组合字面量的运算符。

一元运算符：只能操作一个值的运算符。

前置和后置的区别：在没有赋值操作，前置和后置是一样的。但在赋值操作时，如果递增或递减运算符前置 ，那么前置的运算符会先累加或累减再赋值，如果是后置运算符则先赋值再累加或累减。

算术运算符：加减乘除求模(取余)。

关系运算符：小于(<)、大于(>)、小于等于(<=)、大于等于(>=)、相等(==)、不等(!=)、全等(恒等)(===)、不全等(不恒等)(!==)。

逻辑运算符：逻辑与(AND) ：&&、逻辑或(OR)：||、逻辑非(NOT)：!。

*位运算符：有七种，分别是：位非 NOT(~)、位与 AND(&)、位或 OR（ | ）、位异或 XOR(^) 、左移(<<)、有符号右移(>>)、无符号右移(>>>)。

赋值运算符：加/赋(+=)、乘/赋(*=)、除/赋(/=)、模/赋(%=)、加/赋(+=)、减/赋(-=)、左移/赋(<<=)、有符号右移/赋(>>=)、无符号有移/赋(>>>=)。

其他运算符：

1.字符串运算符：字符串运算符只有一个，即："+"。它的作用是将两个字符串相加。规则：至少一个操作数是字符串即可。

2.逗号运算符：逗号运算符可以在一条语句中执行多个操作。

3.三元条件运算符：var box = 5 > 4 ? ‘对‘ : ‘错‘; //对，5>4 返回 true 则把‘对‘赋值给 box，反之。

运算符优先级：使用圆括号强制优先级。

流程控制语句

if 语句：条件判断语句。

switch 语句：多重条件判断，用于多个值相等的比较。

var box = 1;
switch (box) {        //box就是要比较的变量
　　case 1 :　　　　//条件语句，相当于box=1;
　　　　alert(‘one‘);
　　　　break; //break;用于防止语句的穿透
　　case 2 :
　　　　alert(‘two‘);
　　　　break;
　　case 3 :
　　　　alert(‘three‘);
　　　　break;

　　default : //相当于 if 语句里的 else，否则的意思
　　　　alert(‘error‘);
}

do...while 语句：先运行，后判断的循环。不管条件是否满足，至少先运行一次循环体。

var box = 1; //如果是 1，执行五次，如果是 10，执行 1 次
do {
　　alert(box);
　　box++;
} while (box <= 5); //先运行一次，再判断

while 语句：先判断，后运行的循环语句。必须满足条件了之后，方可运行循环体。

var box = 1; //如果是 1，执行五次，如果是 10，不执行
while (box <= 5) { //先判断，再执行
　　alert(box);
　　box++;
}

for 语句：先判断，后运行。但它具有在执行循环之前初始变量和定义循环后要执行代码的能力。

for (var box = 1; box <= 5 ; box++) {   //第一步，声明变量 var box = 1;
　　alert(box);                                     //第二步，判断 box <=5
}                                                        //第三步，alert(box)
                                                          //第四步，box++
                                                          //第五步，从第二步再来，直到判断为 false

for...in 语句：一种精准的迭代语句，可以用来枚举对象的属性。

var box = { //创建一个对象
　　‘name‘ : ‘zhangsan‘,        //键值对，左边是属性名，右边是值
　　‘age‘ : 28,
　　‘height‘ : 178
};
for (var q in box) { //列举出对象的所有属性
　　alert(q);
}

break 和 continue 语句:在循环中精确地控制代码的执行。其中，break 语句会立即退出循环，强制继续执行循环体后面的语句。而 continue 语句退出当前循环，继续后面的循环。

with 语句:将代码的作用域设置到一个特定的对象中。

var box = { //创建一个对象
　　‘name‘ : ‘zhangsan‘, //键值对
　　‘age‘ : 28,
　　‘height‘ : 178
};
　　var n = box.name; //从对象里取值赋给变量
　　var a = box.age;
　　var h = box.height;
可以将上面的三段赋值操作改写成：
with (box) { //省略了 box 对象名
　　var n = name;
　　var a = age;
　　var h = height;
}

对象和数组

Object 类型

创建：

1.var box=new Object();box.name=‘js‘,box.age=‘200‘;box.run=objRun();     function objRun(){alert(1)}   //调用方法：alert(box.run);

2.var box={name=‘js‘,age=‘200‘;}

3.var box={};box.name=‘js‘,box.age=‘200‘;box.run=objRun;     function objRun(){alert(1)}   //调用方法：alert(box.run());

4.var box={‘name‘:‘js‘,‘age‘:‘200‘;run:function(){return 1}}     //调用方法：alert(box.run());

两种属性输出方式:

1.alert(box.age);//点表示法输出

2.alert(box[‘age‘]);//中括号表示法输出，注意引号

使用 delete 删除对象属性:delete box.name; //删除属性

Array 类型

创建：

1.var box=new Array();//创建了一个数组

   var box = newArray(10);//创建一个包含 10 个元素的数组

   var box = newArray(‘zhangsan‘,‘lisi‘,‘wangwu‘); //创建一个数组并分配好了元素

2.var box = []; //创建一个空的数组

   var box = [1,2]; //创建包含元素的数组 exp:box.join(‘|‘)

PS：数组最多可包含 4294967295 个元素，超出即会发生异常。

对象中的方法：

转换方法：对象或数组都具有toLocaleString()//本地格式区域字符串、toString()和valueOf()方法。其中toString()和valueOf()。无论重写了谁，都会返回相同的值。数组会讲每个值进行字符串形式的拼接，以逗号隔开。

　　　　   默认情况下，数组字符串都会以逗号隔开。如果使用 join()方法，则可以使用不同的分隔符来构建这个字符串。

栈方法：后进先出

push()：可以接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后数组的长度。

pop()：从数组末尾移除最后一个元素，减少数组的 length 值，然后返回移除的元素。

队列方法：先进先出

push()：//数组末尾添加一个元素，并且返回长度。

shift()：从数组前端移除一个元素，并返回移除的元素。

unshift()：为数组的前端添加一个元素，并返回移除的元素。PS：IE 浏览器对 unshift()方法总是返回 undefined 而不是数组的新长度。

重排序方法：

sort() ：从小到大排序，源数组也被从小到大排序，返回排序后的数组。

reverse() ：逆向排序，源数组也被逆向排序，返回排序后的数组。

sort 方法的默认排序在数字排序上有些问题，因为数字排序和数字字符串排序的算法是一样的。我们必须修改这一特征，修改的方式，就是给 sort(参数)方法传递一个函数参数。

function compare(value1, value2) { //数字排序的函数参数
　　if (value1 < value2) { //小于，返回负数
　　　　return -1;
　　} else if (value1 > value2) { //大于，返回正数
　　　　return 1;
　　} else { //其他，返回 0
　　　return 0;
　　}
}
var box = [0,1,5,10,15]; //验证数字字符串，和数字的区别
alert(box.sort(compare)); //传参
PS：如果要反向操作，即从大到小排序，正负颠倒即可。当然，如果要逆序用 reverse()更加方便。

操作方法

exp:var box = [1, 2,3]; //当前数组

concat()：可以基于当前数组创建一个新数组。   var box2 = box.concat(4); //创建新数组，并添加新元素  alert(box2); //输出新数组[1, 2,3,4]  alert(box); //当前数组没有任何变化[1, 2,3]

slice()：可以基于当前数组获取指定区域元素并创建一个新数组 。var box2 = box.slice(1); //box.slice(1,3)，2-4 之间的元素[ 2,3]  alert(box2); //2，3  alert(box); //当前数组没有任何变化[1, 2,3]

splice()：删除功能：var box2 = box.splice(0,2); //截取前两个元素  alert(box2); //返回截取的元素[1, 2]  alert(box); //当前数组被截取的元素被删除[3]

 　　　　插入功能：var box2 = box.splice(1,0,4,5); //没有截取，但插入了两条  alert(box2); //在第 2 个位置插入两条，返回空    alert(box); //输出[1,4,5,2,3]

　　　　 替换功能：var box2 = box.splice(1,1,100); //截取了第 2 条，替换成 100  alert(box2); //输出截取的[2]   alert(box); //输出[1,100,3]

时间与日期

创建：var box = new Date(); //创建一个日期对象

Date.parse()：接收一个表示日期的字符串参数，然后尝试根据这个字符串返回相应的毫秒数。

Date.UTC()：同样也返回表示日期的毫秒数，但它与 Date.parse()在构建值时使用不同的信息。

日期格式化方法：

alert(box.toDateString()); //以特定的格式显示星期几、月、日和年
alert(box.toTimeString()); //以特定的格式显示时、分、秒和时区
alert(box.toLocaleDateString()); //以特定地区格式显示星期几、月、日和年
alert(box.toLocaleTimeString()); //以特定地区格式显示时、分、秒和时区
alert(box.toUTCString()); //以特定的格式显示完整的 UTC 日期。

组件方法：

alert(box.getTime()); //获取日期的毫秒数，和 valueOf()返回一致
alert(box.setTime(100)); //以毫秒数设置日期，会改变整个日期
alert(box.getFullYear()); //获取四位年份
alert(box.setFullYear(2012)); //设置四位年份，返回的是毫秒数
alert(box.getMonth()); //获取月份，没指定月份，从 0 开始算起
alert(box.setMonth(11)); //设置月份
alert(box.getDate()); //获取日期
alert(box.setDate(8)); //设置日期，返回毫秒数
alert(box.getDay()); //返回星期几，0 表示星期日，6 表示星期六
alert(box.setDay(2)); //设置星期几
alert(box.getHours()); //返回时
alert(box.setHours(12)); //设置时
alert(box.getMinutes()); //返回分钟
alert(box.setMinutes(22)); //设置分钟
alert(box.getSeconds()); //返回秒数
alert(box.setSeconds(44)); //设置秒数
alert(box.getMilliseconds()); //返回毫秒数
alert(box.setMilliseconds()); //设置毫秒数
alert(box.getTimezoneOffset()); //返回本地时间和 UTC 时间相差的分钟数

PS：以上方法除了 getTimezoneOffset()，其他都具有 UTC 功能，例如 setDate()及 getDate()获取星期几，那么就会有 setUTCDate()及 getUTCDate()。表示世界协调时间。

正则表达式

两种创建方式：

1.var box = new RegExp(‘box‘, ‘ig‘); //第二个参数可选模式修饰符

2.var box = /box/ig; //在第二个斜杠后面加上模式修饰符

测试正则表达式：

使用字符串的正则表达式方法：

获取控制：正则表达式元字符是包含特殊含义的字符。它们有一些特殊功能，可以控制匹配模式的方式。反斜杠后的元字符将失去其特殊含义。

函数

JavaScript 中的函数，没有像其他高级语言那种函数重载功能。（重载：根据参数选择相同函数名而参数不同的函数）

arguments 对象：接收传递进来的参数。arguments 对象的 length 属性可以得到参数的数量。

function box() {
　　var sum = 0;
　　if (arguments.length == 0) return sum; //如果没有参数，退出
　　　　for(var i = 0;i < arguments.length; i++) { //如果有，就累加
　　　　　　sum = sum + arguments[i];
　　　　}
　　　　return sum; //返回累加结果
　　}
alert(box(5,9,12));

作为值的函数：函数名本身就是变量，所以函数也可以作为值来使用。

function box(sumFun, num) {
　　return sumFun(num); 
}
function sum(num) {
　　return num + 10;
}

var result = box(sum, 10); //传递函数到另一个函数里 

var result = box(sum(10), 10); //传递函数返回值到另一个函数里

函数内部属性：arguments 和 this。

function box(num) {
　　if (num <= 1) {
　　　　return 1;
　　} else {
　　　　return num * arguments.callee(num-1);//使用 callee 来执行自身  return num * box(num-1); //一个简单的的递归
　　}
}

this 引用的是函数据以执行操作的对象，或者说函数调用语句所处的那个作用域。

函数属性和方法：length 和 prototype。其中，length 属性表示函数希望接收的命名参数的个数。

对于 prototype 属性，它是保存所有实例方法的真正所在，也就是原型。而 prototype 下有两个方法：apply()和 call()，每个函数都包含这两个非继承而来的方法。这两个方法的用途都在特定的作用域中调用函数，实际上等于设置函数体内 this 对象的值。

function box(num1, num2) {
　　return num1 + num2; //原函数
}
function sayBox(num1, num2) {
　　return box.apply(this, [num1, num2]); //this 表示作用域，这里是 window
} //[]表示 box 所需要的参数
function sayBox2(num1, num2) {
　　return box.apply(this, arguments); //arguments 对象表示 box 所需要的参数
}
alert(sayBox(10,10)); //20
alert(sayBox2(10,10)); //20

call()方法于 apply()方法相同，他们的区别仅仅在于接收参数的方式不同。对于 call()方法而言，第一个参数是作用域，没有变化，变化只是其余的参数都是直接传递给函数的。

function box(num1, num2) {
　　return num1 + num2;
}
function callBox(num1, num2) {
　　return box.call(this, num1, num2); //和 apply 区别在于后面的传参
}
alert(callBox(10,10));

事实上，传递参数并不是 apply()和 call()方法真正的用武之地；它们经常使用的地方是能够扩展函数赖以运行的作用域。

var color = ‘红色的‘; //或者 window.color = ‘红色的‘;也行
var box = {
　　color : ‘蓝色的‘
};
function sayColor() {
　　alert(this.color);
}
sayColor(); //作用域在 window
sayColor.call(this); //作用域在 window
sayColor.call(window); //作用域在 window
sayColor.call(box); //作用域在 box，对象冒充

变量、作用域及内存

变量可能包含两种不同的数据类型的值：基本类型值和引用类型值。

基本类型值：指的是那些保存在栈内存中的简单数据段，即这种值完全保存在内存中的一个位置 。占有固定大小的空间，按值访问。

引用类型值：是指那些保存在堆内存中的对象，意思是变量中保存的实际上只是一个指针，这个指针指向内存中的另一个位置，该位置保存对象。且大小不固定，因此不能把它们保存到栈内存中。但内存地址大小的固定的，因此可以将内存地址保存在栈内存中。这样，当查询引用类型的变量时，先从栈中读取内存地址，然后再通过地址找到堆中的值。对于这种，我们把它叫做按引用访问。

JavaScript所有函数都是按值传递的，没有按引用传递。

检测类型：instanceof检查基本类型的值时，它会返回 false。

执行环境及作用域：执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。全局的变量和函数，都是 window 对象的属性和方法。没有块级作用域。

基本包装类型

substring()：截掉字符串

 

String 也包含对象的通用方法，比如 valueOf()、toLocaleString()和 toString()方法，但这些方法都返回字符串的基本值。

 

PS：IE 的 JavaScript 实现在处理向 substr()方法传递负值的情况下存在问题，它会返回原始字符串，使用时要切记。

 

内置对象

 Global 对象：一个特别的对象，因为这个对象是不存在的。

 Global 对象有一些内置的属性和方法：

 1.URI 编码方法：encodeURI()不会对本身属于 URI 的特殊字符进行编码，例如冒号、正斜杠、问号和#号；而 encodeURIComponent()则会对它发现的任何非标准字符进行编码。　　　　　　　　

                 PS：因为 encodeURIComponent()编码比 encodeURI()编码来的更加彻底，一般来说encodeURIComponent()使用频率要高一些。

　　　　　　　　 使用了 URI 编码过后，还可以进行解码，通过 decodeURI()和 decodeURIComponent()来进行解码
2.eval()：主要担当一个字符串解析器的作用，他只接受一个参数，而这个参数就是要执行的 JavaScript 代码的字符串。

             eval()方法的功能非常强大，但也非常危险。因此使用的时候必须极为谨慎。特别是在用户输入数据的情况下，非常有可能导致程序的安全性，比如代码注入等等。

3.Global 对象属性：undefined、NaN、Object、Array、Function 等等。

4.window 对象：Global 没有办法直接访问，而 Web 浏览器可以使用 window 对象来实现一全局访问。

Math  对象：包含的属性大都是数学计算中可能会用到的一些特殊值。

min()和 max()方法：Math.min()用于确定一组数值中的最小值。Math.max()用于确定一组数值中的最大值。

exp:alert(Math.min(2,4,3,6,3,8,0,1,3)); //最小值

      alert(Math.max(4,7,8,3,1,9,6,0,3,2)); //最大值

舍入方法:

Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数；
Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数；
Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数；

random():返回介于 0 到 1 之间一个随机数，不包括 0 和 1。

如果想大于这个范围的话，可以套用一下公式：值 = Math.floor(Math.random() * 总数 + 第一个值)

exp:alert(Math.floor(Math.random() * 10 + 1)); //随机产生 1-10 之间的任意数

为了更加方便的传递想要范围，可以写成函数：
function selectFrom(lower, upper) {
　　var sum = upper - lower + 1; //总数-第一个数+1
　　return Math.floor(Math.random() * sum + lower);
}
for (var i=0 ;i<10;i++) {
　　document.write(selectFrom(5,10)); //直接传递范围即可
　　document.write(‘<br />‘);
}