码迷,mamicode.com
首页 > Web开发 > 详细

js基础

时间:2016-04-25 00:45:52      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:

# window对象(浏览器对象模型) #

---------------

window对象表示在浏览器中打开的窗口, 它是JavaScript浏览器对象模型中的顶层对象.其中还包括了: 



        . Document: 使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

        . History: 包含用户(在浏览器窗口中)访问过的 URL。

        . Location: 包含有关当前 URL 的信息。

        . Navigator: 包含有关浏览器的信息。

        . Screen: 包含有关客户端显示屏幕的信息。

说明:



        1. 说有浏览器都支持 window 对象。它表示浏览器窗口。

        2. 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

        3. 全局变量是 window 对象的属性。

        4. 全局函数是 window 对象的方法。

        

#### 1. window对象 ####

#### 1.1 位置 ####



        方法                        描述

        screenX                 返回相对于屏幕窗口的x坐标(IE不支持)

        screenY                 返回相对于屏幕窗口的y坐标(IE不支持,距离浏览器最顶端)

        screenLeft                 返回相对于屏幕窗口的x坐标

        screenTop                 返回相对于屏幕窗口的y坐标(在IE中包括工具栏+菜单栏+地址栏)

 





#### 1.2 窗口大小 ####

    方法                                        描述

    window.innerWidth                         返回窗口的文档显示区的宽度。(IE不支持)

    window.innerHeight                         返回窗口的文档显示区的高度。(IE不支持)

    document.documentElement.clientWidth    返回窗口的文档显示区的宽度。(通用方法)

    document.documentElement.clientHeight     返回窗口的文档显示区的高度。(通用方法)

## 2. window对象的方法 ##

#### 2.1 窗体的移动和尺寸(仅IE有效) ####

    方法                        描述

    window.moveBy(x, y)         可相对窗口的当前坐标把它移动指定的像素。

    window.moveTo(x, y)     把窗口的左上角移动到一个指定的坐标。

    window.resizeBy(x, y)     按照指定的像素相对的调整窗口的大小。

    window.resizeTo(x, y)     把窗口的大小调整到指定的宽度和高度。

#### 2.2 滚动条的控制 ####

示例: 滚动条移动

    方法                            描述

    window.scrollBy(x, y)         相对于当前滚动条的位置移动

    window.scrollTo(x, y)         把内容滚动到指定的坐标。

#### 2.3 时间间隔函数(计时器) ####

    方法                                    描述

    window.setInterval(code, millisec) 按照指定的周期(以毫秒计)来调用函数或计算表达式。

    window.clearInterval(obj)             取消由 setInterval() 设置的 timeout。

    window.setTimeout(code, millisec)     在指定的毫秒数后调用函数或计算表达式。

    window.clearTimeout(obj)             取消由 setTimeout() 方法设置的 timeout。

#### 2.4 打开新窗口 ####

    window.open(URL,name,specs,replace)

    参数说明:http://www.runoob.com/jsref/met-win-open.html

#### 2. history对象 ####

    包含用户(在浏览器窗口中)访问过的 URL。

#### 2.1 属性 ####

    属性            描述

    length         返回历史列表中的网址数

#### 2.2 方法 ####

    方法                        描述

    history.back()            加载历史列表中的前一个 URL(如果存在),调用该方法的效果等价于点击后退按钮或调用history.go(-1)

    history.forward()         加载历史列表中的下一个 URL。调用该方法的效果等价于点击前进按钮或调用 history.go(1)。

    history.go(number|URL)     加载历史列表中的某个具体的页面

## 3. location对象 ##

    包含有关当前 URL 的信息。

#### 3.1 属性 ####

    属性            描述

    href         返回完整的URL

    hostname     返回URL的主机名

    pathname     返回的URL路径名

    port         返回一个URL服务器使用的端口号

    search         返回一个URL的查询部分

#### 3.2 方法 ####

    方法                            描述

    location.assign(URL)         加载一个新的文档

    location.reload()             用于刷新当前文档

    location.replace(newURL)     用一个新文档取代当前文档(没有历史记录)

    示例:等待3秒跳转

## 4. screen对象 ##

    包含有关客户端显示屏幕的信息。

#### 4.1 属性 ####

    属性                描述

    availHeight     返回屏幕的高度(不包括Windows任务栏)

    availWidth         返回屏幕的宽度(不包括Windows任务栏)

    width             返回屏幕的总宽度

    height             返回屏幕的总高度

## 5. Navigator 对象 ##

    对象包含有关浏览器的信息

#### 5.1 属性 ####

    属性                描述

    appCodeName     返回浏览器的代码名

    appName         返回浏览器的名称

    appVersion         返回浏览器的平台和版本信息

    platform         返回运行浏览器的操作系统平台

 

 

总结

语法:

条件判断1:

 1. if语句

语法:

if(表达式1){

    表达式2;

}

表达式3;



.程序判断表达式1,成立执行表达式2,不成立执行表达式3



 2. if...else... 语句



语法:

if(表达式1){

    表达式2;

}

表达式3;



.程序判断表达式1,成立执行表达式2,不成立执行表达式3

 2. if...else... 语句



语法:

if(表达式1) {

    表达式2;

} else {

    表达式3;

}

表达式4;



说明: 程序判断表达式1,成立执行表达式2,不成立执行表达式3,再执行表达式4

3. if...else if..



if(表达式1) {

    表达式2;

} else if(表达式3) {

    表达式4;

} else if(表达式5) {

    表达式6;

} else {

    表达式7;

}

表达式8;



4. 嵌套使用



if(表达式1) { //区块1

    if(表达式2) { //区块2

        表达式3;

    }

    表达式4;

}

表达式5;



说明:

1. 程序判断表达式1,不成立执行表达式5,成立进入区块1;

2. 进入区块1,判断表达式2,成立执行表达式3,否则执行表达式4;















5. switch结构

var a = 1;

switch(a) {

    case 1 :

        console.log(1);

        break;

    case 2 :

        console.log(2);

        break;

    case 3 :

        console.log(3);

        break;

    default :

        console.log("default");

}



说明: ...break:...跳出控制语句;...default:...当所有...case...都不匹配时执行...default...;



循环语句

循环语句用于重复执行某个操作,它有许多种形式。

1. while循环

while(表达式1) {

    表达式2;

}

表达式3;



>说明:首先判断表达式1,成立执行表达式2,然后继续判断表达式1,如果不成立执行表达式3

2. do...while...循环

do {

    表达式1;

} while(表达式2);

表达式3;

说明:先执行表达式1,在判断表达式2,如果成立,继续执行表达式1,不成立执行表达式3;

3. for循环



for语句是循环命令的另一种形式,它分成三步:

 初始化(initialize):确定循环的初始值,只在循环开始时执行一次;

测试(test):检查循环条件,只要为真就进行后续操作;

递增(increment):完成后续操作,然后返回上一步,再一次检查循环条件。

语义: 

for(初始化;测试;递增) {}

执行流程:

for(表达式1;表达式2;表达式3) {

    表达式4;

}

表达式5;



>说明:首先执行表达式1,再判断表达式2,如果表达式2成立,则执行表达式4,再执行表达式3,再判断表达式2,不成立的话执行表达式5;

break语句和continue语句

- break语句用于跳出代码块或循环。

- continue语句用于立即终止本次循环,返回循环结构的头部,开始下一次循环

 

 

**# 总结** #

----------------------





# 函数 #





----------







## 1. 函数的声明 ##

#### 1.1 关键字 function ####

函数就是使用function命令命名的代码区块,便于反复调用。function命令后面是函数名,函数名后面是一对圆括号,里面是传入函数的参数。函

数体放在大括号里面。

    //函数的声明

    function test() {

    //方法体

    }

#### #1.2 函数表达式 # ####

 

除了用function命令声明函数,还可以采用变量赋值的写法。

    //函数表达式

    var test = function() {

    //方法体

    }

说明:

1.采用函数表达式声明函数时,function命令后面不带有函数名。

2.函数的表达式需要在语句的结尾加上分号,表示语句结束。而函数的声明在结尾的大括号后面不用加分号。总的来说,这两种声

明函数的方式,差别很细微(变量提升),这里可以近似认为是等价的。

#### ## 1.3 Function构造函数 ## ####

通过Function构造函数声明。总的来说,这种声明函数的方式非常不直观,几乎无人使用。

    var add = new Function("x", "y", "return x + y");

    console.log(add(1, 2));

#### 1.4 函数的重复声明 ####

如果多次采用function命令,重复声明同一个函数,则后面的声明会覆盖前面的声明。

    function f(){

    console.log(1);

    }

    f(); // 2

    function f(){

    console.log(2);

    }

    f(); // 2

#### 2. 形式参数和return语句 ####

调用函数时,要使用圆括号运算符。圆括号之中,可以加入函数的参数。

    function add(x,y) {

    return x+y;

    }

    add(1,1) // 2

## 3. 立即调用的函数表达式(IIFE(Immediately-Invoked Function Expression)) ##

有时,我们需要在定义函数之后,立即调用该函数。这时,你不能在函数的定义之后加上圆括号,这会产生语法错误。产生这个错误的原因

是,Javascript引擎看到function关键字之后,认为后面跟的是函数定义语句,不应该以圆括号结尾。

    function(){ /* code */ }();

    // SyntaxError: Unexpected token (

解决方法: 圆括号前面的部分不是函数定义语句,而是一个表达式,可以对此进行运算。

    (function(){ /* code */ }());

    // 或者

    (function(){ /* code */ })();

注意,上面的两种写法的结尾,都必须加上分号。

## 4. 第一等公民 ##

JavaScript的函数与其他数据类型处于同等地位,可以使用其他数据类型的地方就能使用函数。比如,可以把函数赋值给变量和对象的属性,也

可以当作参数传入其他函数,或者作为函数的结果返回。这表示函数与其他数据类型的地方是平等,所以又称函数为第一等公民。

    function add(x, y) {

    return x + y;

    }

    // 将函数赋值给一个变量

    var fn = add;

    console.log(fn(1, 2));

    // 将函数作为参数和返回值

    function operator(fn) {

    return fn;

    }

    console.log(operator(add)(1, 2));

## 5. 函数名的提升 ##

JavaScript引擎将函数名视同变量名,所以采用function命令声明函数时,整个函数会被提升到代码头部。所以,下面的代码不会报错。

    var sum = add(1, 2);

    console.log(sum);

    function add(x, y) {

    return x + y;

    }

表面上,上面代码好像在声明之前就调用了函数add。但是实际上,由于“变量提升”,函数f被提升到了代码头部,也就是在调用之

前已经声明了。但是,如果采用赋值语句定义函数,JavaScript就会报错。

    var sum = add(1, 2);

    console.log(sum);

    var add = function (x, y) {

    return x + y;

    }

    //Uncaught TypeError: add is not a function

如果同时采用function命令和赋值语句声明同一个函数,最后总是采用赋值语句的定义。

    var fn = function() {

    console.log ("1");

    };

    function fn() {

    console.log("2");

    }

    fn();

    // 1

##  6. 函数的属性和方法 ##

#### 6.1 name属性:返回紧跟在function关键字之后的那个函数名。 ####

    function fn1() {}

    console.log(fn1.name);

    var fn2 = function() {};

    console.log(fn2.name);

    var fn3 = function fn3() {};

    console.log(fn3.name);

#### 6.2 length属性:返回函数定义中参数的个数。 ####

    function fn(x, y) {}

    console.log(fn.length);

7. 函数作用域

7.1 定义

作用域(scope)指的是变量存在的范围。Javascript只有两种作用域:一种是全局作用域,变量在整个程序中一直存在;另一种是函数作用域,

变量只在函数内部存在。

(1) 在函数外部声明的变量就是全局变量(global variable),它可以在函数内部读取。

(2) 在函数内部定义的变量,外部无法读取,称为“局部变量”(local variable)。

(3) 函数内部定义的变量,会在该作用域内覆盖同名全局变量。

7.2 函数内部的变量提升

与全局作用域一样,函数作用域内部也会产生“变量提升”现象。var命令声明的变量,不管在什么位置,变量声明都会被提升到函数体的头部。

7.3 函数本身的作用域

函数本身也是一个值,也有自己的作用域。它的作用域绑定其声明时所在的作用域。

    var a = 1;

    var fn = function() {

    console.log(a);

    };

    function fn1() {

    var a = 2;

    fn();

    }

    fn1(); //1

### 8. 参数 ###

#### 8.1 概述 ####

函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据就叫参数。

    function square(x) {

    return x * x;

    }

    square(2); //4

    square(3); //9

8.2 传递方式

JavaScript的函数参数传递方式是传值传递(passes by value),这意味着,在函数体内修改参数值,不会影响到函数外部。

    //原始数据类型

    var a = 1;

    function fn(a) {

    a = 3;

    }

    fn(a);

    console.log(a); //1

    //引用类型

    var arr = [1, 2, 3];

    function fn1(arr) {

    arr = [4, 5, 6];

    }

    fn1(arr);

    console.log(arr); //[1, 2, 3]

注意 , 虽然参数本身是传值传递,但是对于复合类型的变量来说,属性值是传址传递(pass by reference),也就是说,属性值是通过

地址读取的。所以在函数体内修改复合类型变量的属性值,会影响到函数外部。

    //修改对象的属性值

    var obj = {

    attr : 1

    };

    function fn(obj) {

    obj.attr = 2;

    }

    console.log(obj.attr);

    //修改数组的元素值

    var arr = [1, 2, 3];

    function fn(arr) {

    arr[0] = 4;

    arr[1] = 5;

    arr[2] = 6;

    }

    fn(arr);

    console.log(arr.toString());

#### 8.3 arguments对象 ####

1) 由于JavaScript允许函数有不定数目的参数,所以我们需要一种机制,可以在函数体内部读取所有参数。这就是arguments对象的由来。

2) arguments对象包含了函数运行时的所有参数,arguments[0]就是第一个参数,arguments[1]就是第二个参数,依次类推。这个对象只有在函

数体内部,才可以使用。

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



语法

    function.apply(thisobj, args)

参数

thisobj 

调用function的对象。在函数主体中,thisobj是关键字this的值。



args 

一个数组,它的元素是要传递给函数function的参数值。



返回值

调用函数function的返回值。



抛出

TypeError 

如果调用该函数的对象不是函数,或参数args不是数组和Arguments对象,则抛出该异常。



描述

apply()将指定的函数function作为对象thisobj的方法来调用,传递给它的是存放在数组args中的参数,返回的是调用function的返回值。在函数体内,关键字this引用thisobj对象。



参数args必须是数组或Arguments对象。如果想单独指定传递给函数的参数,而不是指定数组元素,请使用Function.call()方法。



示例

// 在对象上应用默认的Object.toString()方法,



/ /该对象用该方法的版本覆盖了它。注意,没有参数



    Object.prototype.toString.apply(o);







//使用数组中用来查找最大元素的方法来调用Math.max()



// 注意本例中第一个参数没有什么作用

    

    var data = [1,2,3,4,5,6,7,8];

    

    Math.max.apply(null, data);









//   function add(a,b){

//   return a+b;

//   }

//console.log(add(1,2));

//

//function saysomething(){

//console.log("hello world!!")







    

    # ATM #

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>ATM</title>

    <script type="text/javascript">



    var users=[

    ["王海建","123456",1000],

            ["王建","111111",2000]

    ];

    var username=window.prompt("请输入用户名:");

    var password=window.prompt("请输入密码:");

    

    var userIndex = isLogin(username,password);

    operation(userIndex);

    

    

    function  save(user){

    var money = parseInt(window.prompt("请输入存款金额:"));

    user[2] += money;

    console.log("操作成功!!")

    }

    function  getMoney(user){

    var money = parseInt(window.prompt("请输入取款金额:"));

    user[2] -= money;

    console.log("操作成功!!")

    }

    function operation(userIndex){

    var flag = true;

    while (flag){

    var option=window.prompt("1、存款  2、取款   3、查询  4、退出");

    switch(option){

        case"1":

                save(users[userIndex]);

            console.log("1");

            break;

        case"2":

                getMoney(users[userIndex]);

            console.log("2");

            break;

        case"3":

            console.log("余额:" + users[userIndex][2]);

            break;

        default:

        flag = false;

         }

    }

    }

      function isLogin(username,password){

            for(var i=0;i<users.length;i++){

    if(username == users[i][0]&&password ==users[i][1]){

        return i;

         }

        }

    return -1;

      }





    </script>

    </head>

    <body>

    

    </body>

    </html>

 

 

**### 总结 ###**





----------

    







冒泡排序(Bubble Sort



冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法。

它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。</br>

这个算法的名字由来是因为越大的元素会经由交换慢慢“浮”到数列的顶端,故名。</br>

1. 

冒泡排序算法的运作如下:(从后往前)</br>

1.    比较相邻的元素。如果第一个比第二个大,就交换他们两个。</br>

2.    对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。</br>

3.    针对所有的元素重复以上的步骤,除了最后一个。</br>

4.    持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。</br>

function bubbleSort(arr) {

        var i = arr.length, j;



    var tempexchangval;

    while (i > 0) {

    for (j = 0; j < i - 1; j++) {

    if (arr[j] > arr[j + 1]) {

    tempexchangval = arr[j];

    arr[j] = arr[j + 1];

    arr[j + 1] = tempexchangval;

    }

    }

    i--;

    }

    return arr;

    }

var arr = [3, 2, 4, 9, 1, 5, 7, 6, 8];

var arrSorted = bubbleSort(arr);

console.log(arrSorted);

alert(arrSorted);

# 控制台将输出:[1, 2, 3, 4, 5, 6, 7, 8, 9]

并且弹窗; #





**

JS 索引数组、关联数组和静态数组、动态数组  **



数组分类:</br>

1、从数组的下标分为索引数组、关联数组 </br>

/* 索引数组,即通常情况下所说的数组 */</br>

var ary1 = [1,3,5,8];</br>

//按索引去取数组元素,从0开始(当然某些语言实现从1开始)</br>

//索引实际上就是序数,一个整型数字</br>

alert(ary1[0]);

alert(ary1[1]);

alert(ary1[2]);

alert(ary1[3]);



/* 关联数组,指以非序数类型为下标来存取的数组  python中称为字典</br> */

var ary2 = {};

//存取时,以非序数(数字),这里是字符串</br>

ary2["one"] = 1;

ary2["two"] = 2;

ary2["thr"]  = 3;

ary2["fou"] = 4;



2、从对数据的存储分为静态数组、动态数组 </br>

/* java中的静态数组 */ Int[] ary1 = {1,3,6,9};//定义后数组的长度固定了不能改变,按索引取数组元素   /* java中的动态数组  (java中的ArrayList实现是以Array为基础的,这里说动态数组是广义的,不管采用什么方式实现。不要较劲)  */ List<Integer> ary2 = new ArrayList<Integer>(); ary2.add(1);//可以动态的添加元素,数组的长度也随着变化 ary2.add(3); ary2.add(6);  </br>



/* js的数组属于动态数组 */</br>

var ary = [];//定义一个数组,未指定长度

ary[0] = 1;//可以动态的添加元素

ary.push(3);

ary.push(5);



alert(ary.join(","));//输出1,3,5

js的数组同时属于索引数组和动态数组,因为本质上它就是一个js对象,体现着js动态语言特性。但js的索引数组并非“连续分配”内存的,因此索引方式并不会带来很高的效率。而Java中的数组则是连续分配内存的。</br>

Array 对象sort 方法</br>

描述: 

返回一个元素已经进行了排序的 Array 对象.</br>



语法:

sort() 默认对 字符传进行排序.</br>

arrayobj.sort(sortfunction) 

如要求结果是10、16、120这样的数字大小排序,应该使用下面的程序:</br>

<SCRIPT language=JavaScript> 

var a=new Array(3); 

a[0]=10; 

a[1]=16; 

a[2]=120; 

a.sort(function(x,y){return parseInt(x)-parseInt(y);}); 

document.write(a+" "); 

</SCRIPT>

 

function(x,y)是具体实现排序功能的函数, 上面的方法是实现升序,如果想实现降序,可以改下返回结果:return parseInt(y)-parseInt(x);</br>

当然如果想实现字符串的排序,则可以直接使用a.sort(param);即sort(param) 默认对字符串进行排序,参数为一函数,如果省略该参数,则那么元素将按照 ASCII 字符顺序进行升序排列.当然也可以实现对Long型数据排序,将parseInt改为parseLong即可.</br>





冒泡排序的原理是这样的,比方说有五个数字54321,要按从小到大排列;</br>

首先比较前两个,就是5和4,如果第一个小于第二个,不做操作,如果第一个大于第二个,那么交换二者的位置,即变成45321,然后比较第二个和第三个,交换位置,变成43521,然后第三个和第四个,第四个和第五个,这样一次循环下来,变成43215</br>

所以,一层循环的效果就是挑出最大的一个数字5,冒泡到最后面。但是还要挑出第二大,第三大的数字,等等。所以一层循环根本就不够用,必须再套一层才行。像这个例子,五个数字,起码要进行四轮循环才行。至于为什么要this.length-i,是因为第一次比较五个数字,第二个只要比较前四个就行了,第五个肯定是最大的了。。</br>

var array = [5, 4, 3, 2, 1];

var temp = 0;

for (var i = 0; i < array.length; i++)

{

for (var j = 0; j < array.length - i; j++)

{

if (array[j] > array[j + 1])

{

temp = array[j + 1];

array[j + 1] = array[j];

array[j] = temp;

}

}

}

console.log(array);



**1.概述**



Array是JavaScript的内置对象,同时也是一个构造函数,可以用它生成新的数组。

作为构造函数时,Array可以接受参数,但是不同的参数,会使得Array产生不同的行为。



new Array(1); 返回length为1的空数组;



new Array(1, 2);

2. 静态方法





isArray方法: 用来判断一个值是否为数组。它可以弥补typeof运算符的不足。



var a = [1, 2, 3];

typeof a // "object"

Array.isArray(a) // true

上面代码表示,typeof运算符只能显示数组的类型是Object,而Array.isArray方法可以对数组返回true。



3. Array实例的方法





valueOf: valueOf方法返回数组本身。





toString: 返回数组的字符串形式。





var a = [1, 2, 3];

a.toString() // "1,2,3"

var a = [1, 2, 3, [4, 5, 6]];

a.toString() // "1,2,3,4,5,6"

push: 用于在数组的末端添加一个或多个元素,并返回添加后的数组的长度。



var a = [];

a.push(1) // 1

a.push(‘a‘) // 2

a.push(true, {}) // 4

a // [1, ‘a‘, true, {}]

pop: 用于删除数组的最后一个元素,并返回该元素。



var a = [‘a‘, ‘b‘, ‘c‘];

a.pop() // ‘c‘

a // [‘a‘, ‘b‘]

join: 以参数作为分隔符,将所有数组成员组成一个字符串返回。



var a = [1, 2, 3, 4];

a.join() // "1,2,3,4"

a.join(‘‘) // ‘1234‘

a.join("|") // "1|2|3|4"

concat: 用于多个数组的合并。它将新数组的成员,添加到原数组的尾部,然后返回一个新数组。



[‘hello‘].concat([‘world‘])

// ["hello", "world"]

[‘hello‘].concat([‘world‘], [‘!‘])

// ["hello", "world", "!"]

[1, 2, 3].concat(4, 5, 6)

// [1, 2, 3, 4, 5, 6]

shift: 用于删除数组的第一个元素,并返回该元素。



var a = [‘a‘, ‘b‘, ‘c‘];

a.shift() // ‘a‘

a // [‘b‘, ‘c‘]

shift: 可以遍历并清空一个数组。



var list = [1,2,3,4,5,6,7,8,9,10];

var item;

while (item = list.shift()) {

console.log(item);

}

list // []

unshift: 用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度。



var a = [‘a‘, ‘b‘, ‘c‘];

a.unshift(‘x‘); // 4

a // [‘x‘, ‘a‘, ‘b‘, ‘c‘]

reverse: 用于颠倒数组中元素的顺序,使用这个方法以后,返回改变后的原数组。



var a = [‘a‘, ‘b‘, ‘c‘];

a.reverse() // ["c", "b", "a"]

a // ["c", "b", "a"]

slice: 用于提取原数组的一部分,返回一个新数组,原数组不变。

它的第一个参数为起始位置(从0开始),第二个参数为终止位置(但该位置的元素本身不包括在内)。如果省略第二个参数,则一直返回到原数组的最后一个成员。



// 格式

arr.slice(start_index, upto_index);

// 用法

var a = [‘a‘, ‘b‘, ‘c‘];

a.slice(1,2) // ["b"]

a.slice(1) // ["b", "c"]

a.slice(0) // ["a","b","c"]

a.slice(-2) // ["b", "c"]

a.slice(4) // []

a.slice(2, 6) // ["c"]

a.slice(2, 1) // []

splice: 用于删除原数组的一部分成员,并可以在被删除的位置添加入新的数组成员。它的返回值是被删除的元素。该方法会改变原数组。



// 格式

arr.splice(start_index, count_to_remove, addElement1, addElement2, ...);

// 用法

var a = ["a","b","c","d","e","f"];

a.splice(4,2)

// ["e", "f"]

a

// ["a", "b", "c", "d"]

4. ECMAScript 5 新加入的数组方法



map: 对数组的所有成员依次调用一个函数,根据函数结果返回一个新数组。



var numbers = [1, 2, 3];

numbers.map(function(n) { return n+1 });

// [2, 3, 4]

numbers



// [1, 2, 3]

forEach: 数组实例的forEach方法与map方法很相似,也是遍历数组的所有成员,执行某种操

作,但是forEach方法没有返回值,一般只用来操作数



据。如果需要有返回值,一般使用map方法。



var arr = [1, 2, 3, 4, 5, 6, 7];

arr.forEach(function(ele) {

console.log(ele);

})

filter:依次对所有数组成员调用一个测试函数,返回结果为true的成员组成一个新数组返回。



var arr = [1, 2, 3, 4, 5, 6, 7];

console.log(arr.filter(function(elem) {

return elem > 3;

}))

语法概述
引入JavaScript方式
注释
标识符
变量
区块
数据类型
分号
运算符
引入JavaScript方式
使用外部的js文件,这样的好处是实现表现和行为的分离,W3C非常提倡页面、样式、行为都分离,这样页面结构清晰,方便维护和团队的
开发。
使用标签直接嵌入网页,一般放在head标签内,亦可以放在body标签内,只要保证这些代码在被调用前已读取并加载到内存即可
直接作为某个标签的事件代码
注释
源码中被JavaScript引擎忽略的部分就叫做注释,它的作用是对代码进行解释。Javascript提供两种注释:一种是单行注释,用 // 起头;另一种
是多行注释,放在 /* 和 */ 之间。
标识符
标识符(identifier)是用来识别具体对象的一个名称。最常见的标识符就是变量名,以及后面要提到的函数名。JavaScript语言的标识符对大
小写敏感,所以a和A是两个不同的标识符。
标识符有一套命名规则,不符合规则的就是非法标识符。JavaScript引擎遇到非法标识符,就会报错。
命名规范:
第一个字符可以是任意Unicode字母,以及美元符号($)和下划线(_)。
第二个字符及后面的字符,还可以用数字。
合法的标识符。
不合法的标识符。
中文是合法的标识符,可以用作变量名(这种方式不推荐)
保留字(reserved word):在 JavaScript 中已经定义过的字,使用者不能再将这些字作为变量名使用
另外,还有三个词虽然不是保留字,但是因为具有特别含义,也不应该用作标识符:Infinity、NaN、undefined。
变量
变量是对“值”的引用,使用变量等同于引用一个值。每一个变量都有一个变量名。
var a = 1;
说明:
最前面的var,是变量声明命令。它表示通知解释引擎,要创建一个变量a。
JavaScript允许省略var,直接对未声明的变量赋值。也就是说,var a = 1 与 a = 1,这两条语句的效果相同。但是由于这样的做法很容易不
知不觉地创建全局变量(尤其是在函数内部),所以建议总是使用var命令声明变量。
如果一个变量没有声明就直接使用,JavaScript会报错,告诉你变量未定义。
关于变量提升:
JavaScript引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明
语句,都会被提升到代码的头部,这就叫做变量提升(hoisting)。
var a;
console.log(a); //最后的结果是显示undefined,表示变量a已声明,但还未赋值。
a = 1;
变量提升只对var命令声明的变量有效,如果一个变量不是用var命令声明的,就不会发生变量提升。
区块
JavaScript使用大括号,将多个相关的语句组合在一起,称为“区块”(block)。
与大多数编程语言不一样,JavaScript的区块不构成单独的作用域(scope)。也就是说,区块中的变量与区块外的变量,属于同一个作用
域。
区块往往用来构成其他更复杂的语法结构,比如for、if、while、function等。
//区块
{
a = 1;
console.log(a); //a = 1
}
console.log(a); //a = 1
数据类型
JavaScript语言的每一个值,都属于某一种数据类型。JavaScript的数据类型,分成两组:原始类型(primitive type)和引用类型(complex
type)。
原始类型包括五种数据类型。
数值( number )
字符串类型( string )
布尔值(boolean)
null
undefined
引用类型也包括三种数据类型。
对象(object)
数组(array)
函数(function)
判断Number类型常用方法
方法描述
isInteger(value) 判断参数是否为整数
isNaN(value) 判断参数是否为NaN
parseFloat(value) 把参数转换为浮点数
parseInt(value) 把参数转换为整数
typeof运算符
1. 原始类型: 数值、字符串、布尔值分别返回number、string、boolean。
typeof 123; //number
typeof "123"; //string
typeof false; //boolean
2. 函数: 函数返回function
function fn() {}
typeof fn; //function
3. undefined: 返回undefined
typeof undefined //undefined
可以使用这一点来检测一个变量是否被声明
if(typeof v === "undefined") {
console.log(1);
}
4. 除此之外,都返回object
typeof window //object
typeof {} //object
typeof [] //object
typeof null //object
null和undefined
1. 相似性
首先,null与undefined都可以表示“无”,含义非常相似。将一个变量赋值为undefined或null,老实说,几乎没区别。
2. 历史原因
1995年JavaScript诞生时,最初像Java一样,只设置了null作为表示”无”的值。根据C语言的传统,null被设计成可以自动转为0。
Number(null); //0
5 + null; //5
但是,JavaScript的设计者Brendan Eich,觉得这样做还不够,有两个原因。
首先,null像在Java里一样,被当成一个对象。但是,JavaScript的数据类型分成原始类型和引用类型两大类,Brendan Eich觉得表
示”无”的值最好不是对象。
其次,JavaScript的最初版本没有包括错误处理机制,发生数据类型不匹配时,往往是自动转换类型或者默默地失败。Brendan Eich觉
得,如果null自动转为0,很不容易发现错误。
因此,Brendan Eich又设计了一个undefined。他是这样区分的:null是一个表示”无”的对象,转为数值时为0;undefined是一个表
示”无”的原始值,转为数值时为NaN。
3. null的特殊之处
JavaScript把它包含在对象类型(object)之中。这并不是说null的数据类型就是对象,而是JavaScript早期部署中的一个约定俗成,其
实不完全正确,后来再想改已经太晚了,会破坏现存代码,所以一直保留至今。
4. 注意点
JavaScript的标识名区分大小写,所以undefined和null不同于Undefined和Null(或者其他仅仅大小写不同的词形),后者只是普通的变
量名。
布尔值
如果JavaScript预期某个位置应该是布尔值,会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false,其他值都视为
true。
undefined
null
false
0
NaN
""(空字符串)
分号的使用
不使用分号结尾的语句
for和while语句
分支语句: if, switch, try
函数的声明语句
分号的自动添加
除了本来就不写分号的情况,JavaScript引擎还有一个特点,就是在应该写分号却没写的情况下,它会自动添加(Automatic Semicolon
Insertion,简称ASI)。
注意:由于解释引擎自动添加分号的行为难以预测,因此编写代码的时候不应该省略行尾的分号。省略结尾的分号,还有一个问题。有些
JavaScript代码压缩器不会自动添加分号,因此遇到没有分号的结尾,就会让代码保持原状,而不是压缩成一行。
运算符
JavaScript提供了9种算术运算符
加法运算符(Addition):x + y
减法运算符(Subtraction): x - y
乘法运算符(Multiplication): x * y
除法运算符(Division):x / y
余数运算符(Remainder):x % y
自增运算符(Increment):++x 或者 x++
自减运算符(Decrement):--x 或者 x--
求负运算符(Negate):-x
数值运算符(Convert to number): +x
1. 加法运算符
加法运算符(+)需要注意的地方是,它除了用于数值的相加,还能用于字符串的连接。
var a = 1 + 2; //a = 3
var b = "1" + 2; //b = "12"
var c = 3 + 4 + "5"; //c = "75"
说明:这种由于参数不同,而改变自身行为的现象,叫做“重载”(overload)。
x + ""; //将x重载成字符串类型
加法运算符以外的其他算术运算符,都不会发生重载。它们的规则是:所有运算一律转为数值,再进行相应的数学运算。
1 - "1" // 0 (number)
+"3" // 3 (number)
-true // -1 (number)
2. 自增和自减
自增和自减运算符,是一元运算符,只需要一个运算子。它们的作用是将运算子首先转为数值,然后加上1或者减去1。
var x1 = 1;
var x2 = 1;
console.log(++x1); //1
console.log(x2++); //2
3. 赋值运算符
赋值运算符(Assignment Operators)用于给变量赋值。
最常见的赋值运算符,当然就是等号(=),表达式x=y表示将y赋值给x。除此之外,JavaScript还提供以下赋值运算符。
运算符例子等价于
= x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*= y x=x* y
/= x/=y x=x/y
%= x%=y x=x%y
4. 关系运算符
运算符描述
== 等于
=== 全等(值和类型)
!= 不等于
> 大于
< 小于
>= 大于或等于
<= 小于或等于
说明:关系运算符的优先级低于算术运算符,高于赋值运算符。在六个关系运算符中,<、<=、>、>=的优先级相同,高于==
和!=。而==和!=的优先级相同。
5. 取反运算符: 形式上是一个感叹号,用于将布尔值变为相反值,即true变成false,false变成true。
!true // false
!false // true
以下6个值取反后为true:
undefined
null
false
0(包括+0和-0)
NaN
空字符串("")
6. 逻辑运算符
且运算符(&&): 同时为真即为真
或运算符(||): 一个为真即为真
7. 三元条件运算符( 表达式1 ? 表达式2 : 表达式3)
表达式1成立执行表达式2,否则执行表达式3
运算顺序
左右结合
对于优先级别相同的运算符,大多数情况,计算顺序总是从左到右,这叫做运算符的“左结合”(left-to-right associativity),即从左边开始计算。
x + y + z
少数运算符的计算顺序是从右到左,即从右边开始计算,这叫做运算符的“右结合”(right-to-left associativity)。其中,最主要的是赋值运算符
(=)和三元条件运算符(?:)。
w = x = y = z;
q = a ? b : c ? d : e ? f : g;
总结: 取反运算符 > 算术运算符 > 关系运算符 > && > || > 三目运算符 >赋值运算符

 

js基础

标签:

原文地址:http://www.cnblogs.com/wanghaijian/p/5428976.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!