资讯专栏INFORMATION COLUMN

JavaScript知识点总结(一)

BlackFlagBin / 1174人阅读

摘要:是时候把的知识点总结下,并且会持续施工,每个知识点如果有更深入的技术探讨和知识会陆续添加进去。返回对象的字符串数值或布尔值表示。通常与方法的返回值相同。

是时候把JS的知识点总结下,并且会持续施工,每个知识点如果有更深入的技术探讨和知识会陆续添加进去。

ECMAScirpt中的变量,函数名,操作符都区分大小写。

标识符

标识符指的可能是:

变量名

函数名

属性名

函数的参数

标识符的名称:

第一个字符只能是字母,下划线_,或者美元符号$;

其他的可以是字母,数字,下划线_,或者美元符号$。

按照惯例,标识符名称应使用驼峰法,即首字母小写,剩下的每个单词首字母大写。

不能把关键字、保留字、TRUE、FALSE、NULL作为标识符名称。

注释:
//单行注释

/*
多行注释
多行注释
*/
严格模式:

ES5引入了严格模式,严格模式下,某些旧版本(ES3)的一些不确定行为将得到处理,而对某些不安全的操作也会抛出错误。支持严格模式的浏览器:IE10+ Firefox 4+ Safari 5.1+ Opera 12+ Chrome

//在整个脚本中引入严格模式,则在script标签顶部或者*.js文件顶部添加如下代码即可。
"use strict";

//在指定函数中引入严格模式:
function f1(){
     "use strict";
     //TODO...
};

TODO : 引入了严格模式与没引入严格模式的js文件如何解决冲突以及共存?

语句:

ES中的语句以一个分号结尾,省略分号虽然有效但不推荐。

    var sum = 1 + 2;
关键字与保留字:
// 关键字
break case catch continue debugger default delete do instanceof else new finally return for switch function this if throw in try typeof var void while with
// ES3定义的保留字
abstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile

//ES5中非严格模式下的保留字缩减为这些:
class enum extends super const export import

//ES5中严格模式下的相对非严格模式增加的保留字,其中let与yield是新增的。
implements interface let package private protected public static yield
//实际开发中,建议将ES3定义的保留字外加新增的let与yield作为参考。

需要注意的是,ES5的严格模式下,evalarguments也不能作为标识符与属性名,否则会抛出错误。

变量:

ES中的变量是松散类型的,即变量可以保存任何类型的数据。
定义变量使用var操作符,后跟变量名(即一个标识符),
使用var操作符定义的变量会成为该作用域下的局部变量,该变量在函数退出之后就会被销毁:

var a; //定义一个名为a的变量,值是undefined
var b = null; //定义一个名为b的变量,值为null(空)
var c = "percy"; //定义一个名为c的变量,值为字符串“percy”
function f1(){
  var name = "jon"; //函数f1()下的局部变量
  alert(name); 
}
f1(); //jon
alert(name); //外部不能直接访问函数的内部变量
//使用一条语句定义多个变量,用逗号分隔即可。
var name="jon", age=25, isMarried=false;
数据类型:

ES中有
5种简单数据类型(基本数据类型):UndefinedNullBooleanNumberString
1种复杂数据类型:Object

检测给定变量的数据类型 —— typeof操作符

返回值:

undefined——给定的值未定义;

boolean——给定的值是布尔值;

string——给定的值是字符串;

number——给定的值是数值;

object——给定的值是对象或者null

function——给定的是函数;

function f2(){
    console.log("Hi!");
}
var name = "jon";
var age = 25;

alert(typeof f2); //function
alert(typeof name); //string
alert(typeof age); //number
ES数据类型之 Undefined 类型

只有一个值:undefined

var name; 
/*var name = undefined;*/ //无需把变量显式设置undefined值
alert(name == undefined); //true 

变量的值为undefined与未声明的变量并不一样,但使用typeof操作符均会返回undefined,但输出值时未声明的变量会产生错误:

var job; //该变量已声明但未赋值,默认值为undefined
// var name2; 该变量并未声明

alert(typeof job); //测试变量类型,输出undefined
alert(typeof name2); //测试变量类型,即使变量未声明也会输出undefined

//输出值时
alert(job); //undefined
alert(name2); //产生错误:Uncaught ReferenceError: name2 is not defined
ES数据类型之 Null 类型

只有一个值:null
undefined值派生自null值,所以用==测试两者时会返回true
null值表示一个空对象指针,所以使用typeof操作符时会返回object
如果创建的变量将来用于保存对象,那么初始声明该变量时应把值设置为null

var name = null;
alert(typeof name); //object
ES数据类型之 Boolean 类型

有两个值:truefalse

//注意Boolean类型字面值是区分大小写的,True、False以及其他大小写混合的形式均不属于Boolean类型值;
var isBoy = true;
var isGirl = false;
使用Boolean()函数把其他值转为Boolean值
var name = "jon";
var nameBool = Boolean(name); //true

转换规则如下表:

数据类型 转为true的值 转为false的值
Boolean true false
String 任何非空字符串 ""(空字符串)
Number 任何非零数值(包括无穷大) 0,NaN
Object 任何对象 null
Undefined 不适用 undefined

转换规则对于流程控制语句自动执行相应的Boolean转换非常重要:

var name = "jon";
if(name){ //name转换为true,执行下面的语句
    alert("name is defined!");
}
ES数据类型之 Number 类型

包含整数浮点数(双精度数值)NaN

整数
var intN1 = 123; //十进制整数
var intN2 = 013; //十进制的11
var intN3 = 018; //无效的八进制,会被转成十进制的18,并且在严格模式下回抛出错误
var intN4 = 0xB; //十六进制,会被转为十进制的11
alert(-0 == +0); //true,ES中正零相等于负零;
浮点数
var fN1 = 0.1;
var fN2 = 1.1;
var fN3 = .1; //不推荐
var fN4 = 1. //被解析为整数1
var fN5 = 1.0; //被解析为整数1
var fN6 = 1.05e5; //e表示法,即科学记数法,会被解析成105000,即1.05乘以10的7次方
var fN7 = 3e-6; //会被解析成0.000003

浮点数的精确度远远不如整数,所以永远不要用计算浮点数来进行条件测试:

if(a + b = 0.3){ //不要做这样的测试!
    //DO STH...
}
数值范围
console.log(Number.MIN_VALUE); //ES能表示的最小数,结果是5e-324
console.log(Number.MAX_VALUE); //ES能表示的最大数,结果是1.7976931348623157e+308
/*
若一次运算中,计算结果超过了ES的最大或最小数,那么这个结果会被转换成特殊的Infinity或-Infinity,该值无法参与运算;以下两个属性也保存着上述两个值;
*/
alert(Number.NEGATIVE_INFINITY); //-Infinity
alert(Number.POSITIVE_INFINITY); //Infinity

确定某个结果是否为有穷的(是否位于ES能表示的最大与最小数之间的有效数值),使用isFinite()函数;

var a = 10.4e-8;
alert(isFinite(a)); //true,该数值在有效范围之内
NaN (Not a Number,非数值(中文名字)是一个特殊的数值)

用于表示一个本来要返回数值的操作数没有返回数值的情况,这样就不会抛出错误;

ES中0除以0都会返回NaN;(其他数值除以0会返回Infinity或者-Infinity)

任何涉及NaN的运算操作也会返回NaN;

NaN不等于任何值,包括它自己;

alert(NaN == NaN); //false

isNaN()函数,接受一个参数,确定该参数是否“不是数值”,如果该参数是数值或者能转换成数值,则会返回false,否则返回true

alert(isNaN(1)); //false
alert(isNaN("2")); //false,可以把字符串2转换成数值2
alert(isNaN(true)); //false,可以把布尔值true转换成数值1,如果false则转换成0
alert(isNaN("1024cl")); //true,数值与字符串不能转换成数值
alert(isNaN("true")); //true,字符串*均*不能转换成数值
alert(isNaN(NaN)); //true,NaN本身不是有效的数值
数值转换,有三个方法,Number()parseInt()parseFloat()

Number()的转换例子:

alert(Number(1)); //1
alert(Number(true)); //转换成1
alert(Number(false)); //转换成0
alert(Number(null)); //转换成0
alert(Number(undefined)); //NaN
alert(Number("")); //空字符串转换成0
alert(Number("12")); //转换成12
alert(Number("034")); //忽略前导0,转换成34
alert(Number("12ab")); //NaN
alert(Number("0x11")); //有效的十六进制会转换成十进制的17

更常用的parseInt()parseFloat()例子:

alert(parseInt(1)); //1
alert(parseInt(11.91)); //11
alert(parseInt(true)); //NaN
alert(parseInt(false)); //NaN
alert(parseInt(null)); //NaN
alert(parseInt(undefined)); //NaN
alert(parseInt("")); //NaN
alert(parseInt("12")); //12
alert(parseInt("034")); //34
alert(parseInt("12ab")); //忽略数值后的无效字符,转换为12
alert(parseInt("ab12")); //NaN
alert(parseInt("0x11")); //17
//在转换八进制的字符串包含的数值中,ES3与ES5有时会存在分歧:
alert(parseInt("067")); //ES3中会输出55
alert(parseInt("067")); //ES5中会忽略前导0,并转换成10进制的67

基于上面的问题,作为最佳实践,使用parseInt()始终应该加入第二个参数,即需要转换时需要使用的进制数

alert(parseInt("076",8)); //62
alert(parseInt("076",10)); //76
alert(parseInt("0xAA",16)); //170
alert(parseInt("AA",16)); //170
alert(parseInt("AA")); //NaN
//parseFloat()只会解析十进制数值,所以没有第二个参数
alert(parseFloat("1.2.3")); //只会解析左起第一个小数点,所以该数值会被转换成1.2
alert(parseFloat("0xAA")); //十六进制数值始终会被转换成0
alert(parseFloat(11.1)); //11.1
alert(parseFloat("443abc")); //443,忽略后面的无效字符
alert(parseFloat("443.3aa")); //443.3,忽略后面的无效字符
alert(parseFloat("3.33e7")); //33300000
alert(parseFloat("0757.2768")); //忽略前导0,757.2768
ES数据类型之 String 类型

即字符串,由0或多个16位Unicode字符组成的字符序列;

//可以由单引号或双引号包裹,且左右引号必须匹配
var s1 = "name1"; 
var s2 = "name2";
字符字面量

String数据类型包含一些特殊的字符字面量,也叫转义序列,用于表示非打印字符,或者有其他用途的字符:

字面量 含义
n 换行
t 制表
b 空格
r 回车
f 进纸
斜杠
" 单引号("),在用单引号表示的字符串中使用,例如"I "m JonHo"
" 双引号("),在用双引号表示的字符串中使用,例如"I "m JonHo"
xnn 以十六进制代码nn表示的一个字符,其中n为0~F,例如,x41代表A
unnnn 以十六进制代码nnnn表示的一个Unicode字符,其中n为0~F,例如,u03a3表示希腊字符∑

上述的字符字面量可以出现在字符串的任意位置,并且也会被作为字符来解析:

var sign = "sign is : u011f";
console.log(sign);  /*sign is : ğ*/
console.log(sign.length); //11,说明六个字符长的转义序列只会表示一个字符,占一个索引位置;
转换为字符串的方法toString():
var name = "Jon";
alert(name.toString()); //"Jon"
var age = 25;
alert(age.toString()); //字符串"25"
var isMarried = false;
alert(isMarried.toString()); //字符串"false"

//null与undefined没有toString()方法
alert(null.toString()); //NaN
alert(undefined.toString()); //NaN

//转换数值的情况下,可以传入一个参数,即输出数值的基数
var num = 10;
alert(num.toString()); //默认十进制输出,10
alert(num.toString(2)); //二进制输出,1010
alert(num.toString(8)); //八进制输出,12
alert(num.toString(10)); //十进制输出,10
alert(num.toString(16)); //十六进制输出,A

在不知道转换的值是否为nullundefined的情况下,可以使用转型函数String(),该函数能把任何类型的值转为字符串:

如果传入的值有toString()方法,则调用该方法并返回相应的结果;

如果传入的值是null,则返回"null";

如果传入的值是undefined,则返回"undefined";

var value1 = 10;
var value2 = true;
var value3 = null;
var value4;

alert(String(value1)); // "10"
alert(String(value2)); // "true"
alert(String(value3)); // "null"
alert(String(value4)); // "undefined"
ES数据类型之 Object 类型

ES中的Object(对象)就是一组数据和功能的集合。
Object类型是所有其他类型的基础,所以Object类型的所以属性和方法也会存在于其他具体的对象中。

var o1 = new Object(); //创建一个自定义对象

Object实例拥有的属性和方法

属性/方法 解析
constructor 保存着用于创建对象的函数。对于前面的例子而言,构造函数(constructor)就是Object()。
hasOwnProperty(propertyName) 用于检查给定的属性(propertyName)在当前的对象实例中(而不是在实例的原型中)是否存在。propertyName必须以字符串形式指定。
isPrototypeOf(object) 用于检查传入的对象是否是传入对象的原型。(?)
propertyIsEnumerable(propertyName) 检查给定的属性(propertyName)是否能用for-in语句枚举。propertyName必须以字符串形式指定。
toLocaleString() 返回对象的字符串表示,该字符串与执行环境的地区对应。
toString() 返回对象的字符串表示。
valueOf() 返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。
操作符

包括 一元操作符位操作符布尔操作符乘性操作符加性操作符关系操作符相等操作符条件操作符赋值操作符逗号操作符

一元操作符
递增与递减操作符(包括前置型与后置型)
//前置型操作符
var n1 = 25;
++n1;
 
var n2 = 25;
--n2;

//前置型操作符会在求值前被执行
var age = 25;
var anotherAge = --age + 2;

console.log(age); //24 (在下一句执行之前已经执行了自减)
console.log(anotherAge); //26 (24+2)
//后置型操作符
var n1 = 25;
n1++;

//后置型操作符会在被求值之后才执行,注意以下问题
var n1 = 2;
var n2 = 20;
var n3 = n1-- + n2; 
console.log(n3); //计算n3时使用了原始值计算,所以输出22
var n4 = n1 + n2; 
console.log(n4); //计算n4时,n1已经被递减,所以输出21

上述的4个操作符可以用于整数浮点数字符串布尔值对象运算;

var s1 = "2"; 
console.log(++s1);//转换为数值2再参与运算,输出3
var s2 = "a"; 
console.log(++s2);//值为NaN,无法参与运算
var s3 = false; 
console.log(++s3);//转换为数值0再参与运算,输出1, **true则转换为1**
var s4 = 2.1; 
console.log(--s4); //参与减一运算,注意浮点数舍入错误问题,输出1.1
console.log(++s4); //参与加一运算,注意浮点数舍入错误问题,输出2.1
var s5 = {
  valueOf: function(){
    return -1;
  }
};
console.log(++s5); //先调用对象的valueOf()方法,取得一个可供操作的值,然后把该值应用于前述规则;如果结果是NaN,则调用toString()方法后再应用前述规则。对象变量变成数值变量,这里输出0
console.log(++s5); //输出1
一元加和减操作符

+-
对非数值应用一元加和减操作符时,会像Number()转型函数一样对这个值执行转换

/*一元加操作符*/
var s1 = "01";
var s2 = "1.1";
var s3 = "z";
var b = false;
var f = 1.1;
var o = {
    valueOf: function() {
        return -1;
    } 
};
s1 = +s1; //1
s2 = +s2; //1.1
s3 = +s3; //NaN
b= +b; //0
f= +f; //1.1
o= +o; //-1

/*一元减操作符*/
//一元减操作符主要用来表示负数
var n1 = 1;
n2 = -n1; //-1
位操作符 (略) 布尔操作符

非(NOT),与(AND),或(OR)

逻辑非!

返回一个布尔值, 然后再对其求反

alert(!false); //true
alert(!"blue"); //false
alert(!0); //true
alert(!NaN); //true
alert(!""); //true
alert(!12345); //false
alert(!undefined); //true
alert(!null); //true
var i = function(){};
alert(!i); //false
逻辑与&&

有两个操作数, 只有两个操作数都返回true时, 才返回true; 否则返回false

var i = function(){};
var j = function(){console.log("funciton j")};
alert(i && true); //true
alert(i && false); //false

alert(true && i); //function(){}
alert(false && i); //false
alert(i && j); //function(){console.log("funciton j")};
//如果有一个操作数是null, NaN或undefined, 则返回该三者之一
alert(null && false); //null
alert(null && true); //null
alert(null && i); //null
/*逻辑与属于短路操作, 即如果第一个操作数能决定结果,就不会再对第二个操作数求值*/
var f = true;
var r = (f && cc); //cc未声明 
alert(r); //这一句不会执行,因为上面的cc未声明. Uncaught ReferenceError: cc is not defined(…)

//如果f为false,则会执行并返回false, 因为第一个操作数已经是false, 所以就不会再对后面的操作数求值了
var f = false;
var r = (f && cc); //cc未声明
alert(r); //false
逻辑或||

有两个操作数, 只要有一个操作数都返回true, 就会返回true;

var i = function(){};
var j = function(){console.log("funciton j")};
alert(i || true); //function(){};
alert(i || false); //function(){};
alert(i || j); //function(){};
alert(true || i); //true
alert(false || i); //function(){};
alert(null || false); //false
alert(null || true); //true
alert(null || i); //function(){};
//如果两个操作数都是null, NaN, undefined, 则会返回同样的结果.
//逻辑或也属于短路操作
var f = true;
var r = (f || cc); //cc未声明 
alert(r); //会执行true

var f = false;
var r = (f || cc); //cc未声明
alert(r); //这一句不会执行,因为上面的cc未声明. Uncaught ReferenceError: cc is not defined(…)
/*正常开发中, 可以使用逻辑与来避免为变量赋null或undefined值*/
var o = preferredObject || backupObject;
//backupObject提供一个后备值, 如果preferredObject不包含期望的有效值的情况下, backupObject会被赋值给o, 否则在经常情况下, preferredObject赋值给o.
乘性操作符

*, 乘法,用于计算两个值的乘积

alert(2 * 2); //4
alert(2 * -2); //-4
alert(NaN * 2); //NaN
alert(Infinity * 0); //NaN
alert(Infinity * 1); //Infinity
alert(Infinity * -1); //-Infinity
alert(Infinity * Infinity); //Infinity
//在操作数不是数值的情况下, 后台会调用Number()将其转换为数值,然后在进行运算

/, 除法,第二个操作数除第一个操作数

alert(2 / 2); //1
alert(2 / -2); //-1
alert(2 / NaN); //NaN
alert(Infinity / Infinity); //NaN
alert(0 / Infinity); //0
alert(Infinity / 0); //Infinity
alert(0 / 0); //NaN
alert(0 / 2); //0
alert(2 / 0); //Infinity
alert(-2 / 0); //-Infinity
//在操作数不是数值的情况下, 后台会调用Number()将其转换为数值,然后在进行运算
加性操作符

+, 加法

alert(1 + 2); //3
alert(NaN + 1);//NaN
alert(Infinity + Infinity); //Infinity
alert(-Infinity + (-Infinity)); //-Infinity
alert(Infinity + (-Infinity)); //NaN
alert(0 + 0); //0
alert(-0 + (-0)); //0
alert(0 + (-0)); //0
alert(1+"2"); //12, 字符串拼接
//注意加法操作中的数据类型错误
var num1 = 5;
var num2 = 10;
var message = "The sum of 5 and 10 is " + num1 + num2;
alert(message);    // 得到的结果是 : "The sum of 5 and 10 is 510"

//应该像下面这样使用括号
var num1 = 5;
var num2 = 10;
var message = "The sum of 5 and 10 is " + (num1 + num2); 
alert(message); //"The sum of 5 and 10 is 15"

-, 减法

alert(2 - 1);
alert(NaN - 1); //NaN
alert(Infinity - Infinity); //NaN
alert(-Infinity -(-Infinity)); //NaN
alert(Infinity -(-Infinity)); //Infinity
alert(-Infinity - Infinity); //-Infinity
alert(0 - 0); //0
alert(0 - (-0)); //-0
alert(-0 -(-0)); //0
alert(5 - true); //4, ture to 1
alert(5 - ""); //5, "" to 0
alert(5 - "2"); //3, "2" to 2
alert(5 - null); //5, null to 0
关系操作符

小于<, 大于>, 小于等于<=, 大于等于>=, 均返回一个布尔值

var r = 5 > 4; //true
var r = 5 < 4; //false
//在字符串的比较中, 决定结果的是字符串字母(大小写)的字符编码, 而不是字母的顺序 : 
alert("app" > "back"); //false
alert("app" > "Back"); //true
alert("App" > "Back"); //false
//因字符编码的顺序不同, 所以在进行比较时应该把字符串统一转换成大写或者小写再进行比较;
alert("App".toLowerCase() > "Back".toLowerCase()); //false

//同样的, 数字字符串也会比较的是字符编码 : 
alert("15" > "4"); //false
//把其中一个变成数值类型, 或者使用有效的转型函数转型成数值, 结果就正常了 :
alert("15" > 4); //true
alert(Number("15") > Number("4")); //true

//NaN跟任何数值比较均返回false
alert(NaN > 4); //false
alert(NaN < 4); //false
相等操作符

相等==和不相等!=, 全等===和不全等!==
相等和不相等在比较前都会先转换操作数, 然后再进行比较

相等和不相等
//布尔值会被先转换成0和1
alert(1 == true); //true
alert(2 == true); //false
alert(0 == false); //true
alert("a" == 1); //false
var a = "jon";
var b = "percy";
var c = a;
alert(a == c); //true, 比较两个对象时, 如果两个对象指向的是同一个对象,则返回true, 否则返回false
alert(a == b); //false
alert(a == 1); //false
alert(null == undefined); //true
alert(undefined == 0); //false
alert(null == 0); //false
alert(5 == "5"); //true
alert("NaN" == NaN); //false
alert(5 == NaN); //false
alert(NaN == NaN); //false, NaN不等于自身
全等和不全等

全等和不全等不会像上面的相等和不相等一样进行数据类型转换, 而是直接进行比较 :

alert(55 == "55"); //相等比较下, 会进行数据转换, 所以返回true
alert(55 === "55"); //全等比较下, 不会进行数据转换, 所以这里返回false
/*注意null和undefined进行全等比较会返回false, 因为他们是类似的值(所以相等比较会返回true)但是属于不同类型的值*/
alert(null == undefined); //false
条件操作符(三目运算符)
//对boolean_expression求值, 如果结果为true则返回true_value(给variable), 否则返回false_value(给variable)
variable = boolean_expression ? true_value : false_value;
var num1 = 4;
var num2 = 6;
var max = (num1 > num2) ? num1 : num2;
console.log(max); //6
赋值操作符

简单的赋值操作符=

乘/赋值*=

除/赋值/=

模/赋值%=

加/赋值+=

减/赋值-=

左移/赋值<<=

有符号右移/赋值>>=

无符号右移/赋值>>>=

var n = 2;
n = n + 2; //4 

//可以简化成
n += 2;

//其他原理相同
逗号操作符
//可用于同时声明多个变量
var a, b, c;
语句

ES指流程控制语句

if语句
if(condition){
    statement1
}else{
      statement2
}
var i = 20;
if(i > 25){
  console.log("i is greater than 25");
}else{
  console.log("i is less than or equal to 25");
}
//i is less than or equal to 25
if(condition1){
  statement1
}else if(condition2){
  statement2
}else{
  statement3
}
var i = 25;
if(i > 25){
  console.log("i is greater than 25");
}else if(i == 25){
  console.log("i is equal to 25");
}else{
  console.log("i is less than 25");
}
//i is equal to 25
do-while语句

do-while语句在对表达式求值之前, 循环体内的代码会被最少执行一次

do{
  statement
}while(expression)
var i = 2;
do{
  i += 2;
  console.log(i);
}while(i < 7);
//之所以出现8的原因是, 当i递增到6的时候依然少于7, 所以在判断while里面的条件之前依然会被递增一次
//4, 6, 8
var i = 10;
do{
  i ++;
  console.log(i);
}while(i < 10);
//虽然while里面的条件已经不满足,但do里面的语句还是会被执行一次, 输出11
while语句

与do-while语句相反, while语句会在循环体(expression)内的代码被执行之前, 先对条件求值

while(expression){
  statement
}
var i = 10;
while(i < 20){
  i+=2;
  console.log(i);
  //12, 14, 16, 18, 20
}
console.log("the last i is : " + i); //20
for语句

for与while一样, 也是前测试循环语句, 但它可以在执行循环之前初始化变量定义循环后要执行的代码

for(initialization; expression; post-loop-expression){
  statement;
}
var c = 10;
for(var i = 1; i <= c; i+=2){
  console.log(i);
}
//1, 3, 5, 7, 9
//提前定义好变量, 就可以在for语句里面省略var关键字
var i, c = 10;
for(i = 1; i <= 10; i+=3){
  console.log(i);
  //1, 4, 7, 10
}
//注意ES里面没有块级作用域, 所以下面的语句可以正常输出
console.log("the last i is : " : i); //10
for-in语句

for-in是精准的迭代语句, 可以用来枚举对象的属性

for(property in expression){
  statement
}
var arr = ["Jon","Martin","Percy"];
for(var i in arr){
  console.log(arr[i]);
  //Jon, Martin, Percy
}
//注意for-in语句输出的结果顺序是不可预测的
//作为最佳实践, 使用for-in语句时, 应该确认该对象的值不是null或undefined
label语句

label语句可以在代码中添加标签, 以便在将来被break或continue引用

label : statement
first : for(var i = 0; i < 10; i+=2){
  console.log(i);
}
//first作为for循环的标签
break与continue语句

break与continue语句用于在循环中精确的控制代码的执行;

break会立即退出循环, 强制执行后面的语句

continue也会立即退出循环, 但退出后会从循环的顶部继续执行

//break
var n = 0; //初始化计算累积次数的变量
for(var i = 1; i < 10; i++){ //i从1递增到10
  if(i % 5 == 0){ //递增过程中判断i是否能被0整除
      break; //是的话立即退出循环,这里在i=5的时候退出了循环
  }
  n++; //每循环一次累积计算次数
}
console.log(n); //退出循环之前,循环体执行了4次,所以输出4
//continue
var n = 0; //初始化计算累积次数的变量
for(var i = 1; i < 10; i++){ //i从1递增到10
  if(i % 5 == 0){ //递增过程中判断i是否能被0整除
      continue; //是的话立即退出循环,这里在i=5的时候退出了循环, 并且回到循环顶部继续执行(在for循环条件未满足之前继续执行)
  }
  n++; //每循环一次累积计算次数
}
console.log(n); //退出循环之前(for循环结束之前),循环体执行了8次(因为在5被整除的时候退出了循环,导致循环体少执行了一次),所以最终输出8

与label标签配合使用

//break
var i, j, n = 0;
outerloop:
for(i = 0; i < 10; i++){
  for(j = 0; j < 10; j++){
    if(i == 5 && j ==5){
        break outerloop;
    }
    n++;
  }
}
//正常来说, i每递增1次, j就会递增10次, 所以n最终值在不受干扰的情况下回等于100
//这里判断如果i和j都等于5的情况下回立即退出循环, 所以循环体最终会退出内部和外部的for循环(退回标签outerloop的位置), 所以最终n会输出55
console.log(n); //55
//continue
var i, j, n = 0;
outerloop:
for(i = 0; i < 10; i++){
  for(j = 0; j < 10; j++){
    if(i == 5 && j ==5){
        continue outerloop;
    }
    n++;
  }
}
//这里判断如果i和j都等于5的情况下回立即退出循环, 但退回外部的for循环(outerloop标签)的循环之后会继续强制执行外部循环, 所以最终会得到95
console.log(n); //95
with语句

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

with(expression){
  statement;
}
//定义with语句的目的主要是简化多次编写同一个对象的工作
var qs = location.search.substring(1);
var hostName = location.hostname;
var url = location.href;

//使用with语句上面的代码可以改成
with(location){
  var qs = search.substring(1);
  var hostName = hostname;
  var url = href;
}
//严格模式下不允许使用with, 否则会报错
//with会导致性能下降, 在大型项目中不建议使用

switch语句

switch(expression){
  //如果expression等于value, 则执行后面的statement, 并跳出当前循环
  case value : statement
  break;
  case value : statement
  break;
  case value : statement
  break;
  case value : statement
  break;
  //如果expression不等于前面任何一个value, 则使用default内的statement代码
  default : statement
}

var i = 2;
switch(i){
    case 1 : 
    console.log("result is 1");
    break;
    
    case 2;
    console.log("result is 2");
    break;
    
    default : 
    console.log("what is the result?");
}

//可以合并两种情形(cast)
switch(i){
  case 1 :
  case 2 :
  console.log("1 or 2");
  break;
  
  case N...
}
函数

函数可以封装任意多条语句, 且可以在不同地方, 不同时间调用执行.

使用关键字function声明,后面跟一组参数以及函数体

function functionName(arg0, arg1, arg2, ...argN){
  statements;
}

//实例
function sayHi(name, age){
  console.log("my name is " + name +", age is" + age + ".");
}
//调用
sayHi("Jon",25);
//输出my name is Jon, age is 25.
//使用return语句后面跟要返回的值来实现返回值
function sum(n1, n2){
  return n1 + n2;
}
var r = sum(1 + 2);
alert(r); //3
//注意在return后面的语句永远不会执行
function sum(n1, n2){
  return n1 + n2;
  console.log("Hi!"); //永远不会执行
}
//一个函数中可以包含多个return语句
function diff(n1 ,n2){
  if(n1 < n2){
      return n2 - n1;
  }else{
    return n1 - n2;
  }
}

//return可以不带有任何返回值,一般用在需要提前执行函数执行有不需要返回值的情况下.
function sayHi(name, message){
  return;
  console.log("Hi! " + name + "," + message); //永远不会调用
}
//推荐的做法是要么让函数始终返回一个值, 要么永远不会返回值
理解参数

ES中的参数不限定数量和数据类型

假设被调用的函数的参数定义了两个, 在调用这个函数时也不强制需要传入两个, 可以少传或多穿而不会报错, 命名的参数只是为了便利, 并不是必须的

ES函数的参数内部是一组类数组, 在函数体内可以通过arguments对象来访问这组数组的内容, 访问的时候像访问数组一样, 使用方括号语法arguments[0], arguments[1], arguments[2], arguments[n] ...

//上面的sum函数例子可以写成
function sum(n1, n2){
  //return n1 + n2;
  return arguments[0] + arguments[1];
}
sum(1 , 2); //3

//访问arguments的length属性可以知道多少个参数传递给了函数
function howManyArgs(){
  console.log(arguments.length);
}
howManyArgs(); //0
howManyArgs(1); //1
howManyArgs(1,2); //2

//可以利用这一点让函数在接收不同参数时执行不同的功能
function doAdd(n1, n2){
  if(arguments.length == 1){
    console.log(arguments[0] + 2);
  }else if(arguments.length == 2){
      console.log(arguments[0] + arguments[1]);
    //argument对象可以和命名参数混合使用
    //console.log(arguments[0] + n2); //没有问题!
  }
}
doAdd(1); //3
doAdd(2,3); //5

arguments的值和对应的命名参数的值会保持同步

function doAdd(n1, n2){
  arguments[1] = 10;//注意严格模式下会无效,n2仍然等于undefined
  console.log(arguments[0] + n2); 
}
doAdd(12,1); //22, 而不是13
//严格模式下重写arguments的值会导致语法错误, 代码不能执行

ES中所有参数传递都是值, 不可能通过引用传递参数

没有重载

其他语言中可以为一个函数编写两个定义, 只要这两个定义的签名(接受的参数类型和数量)不同即可

ES中的参数是由包含零个或多个值的数组来表示的, 而没有函数签名, 真正的重载是不可能的

如果定义了两个名字相同的函数, 那么改名字只属于后定义的函数

function add(n){
  return n + 10;
}
function add(n){
  return n + 20;
}
add(1); //21

通过检查传入函数中参数的类型和数量并作出不同的反应, 可以模拟方法的重载.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87750.html

相关文章

  • JavaScript 基础知识篇关于 JavaScript 识点总结 —— 持续更新

    摘要:中基础数据类型数据类型名称数据类型说明只有一个值,即,声明变量的初始值。只有一个值,即,表示空指针,的值是派生的值。由零或多个位字符组成只有两个值,即和该类型使用来表示整数和浮点数。中的对象其实就是一组数据和功能的集合。 JavaScript 中基础数据类型 数据类型名称 数据类型说明 Undefined 只有一个值,即 undefined ,声明变量的初始值。 Nul...

    felix0913 评论0 收藏0
  • 个人分享--web前端学习资源分享

    摘要:前言月份开始出没社区,现在差不多月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了一般来说,差不多到了转正的时候,会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客,博文推荐分享给大家。 1.前言 6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天我就...

    sherlock221 评论0 收藏0
  • 优化JavaScript总结分享(上)

    摘要:上面代码优化后尽量使用局部变量缓存全局变量在实际开发中尽量使用局部变量缓存全局变量,因为,到一个函数多次访问全局变量的时候,会出现一个作用域练查找的过程,全局作用域位置越深找到的时间就越久,因此这也会涉及到性能的执行速度问题。 本来想整理一篇完整的JavaScript优化知识点出来跟大家讨论分享一下的,但是由于最近个人的时间比较少,所以先整理了两个知识点,之后有时间了再继续整理后面的。...

    jackwang 评论0 收藏0
  • ES6-7

    摘要:的翻译文档由的维护很多人说,阮老师已经有一本关于的书了入门,觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中,显得越来越重要。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

    mudiyouyou 评论0 收藏0
  • 深入理解js

    摘要:详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于,工作和学习过程中遇到过许多问题,也解答过许多别人的问题。介绍了的内存管理。 延迟加载 (Lazyload) 三种实现方式 延迟加载也称为惰性加载,即在长网页中延迟加载图像。用户滚动到它们之前,视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。 详解 Javascript十大常用设计模式 力荐~ ...

    caikeal 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<