web前端篇：JavaScript基礎篇（易懂小白上手快）-1

時間  2019-12-09
標籤 web 前端 javascript 基礎 易懂 手快 欄目 HTML 简体版
原文   原文鏈接

目錄javascript

詳細內容：

0.JavaScript的引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--行內js-->
    <p id="" class="" style="" onclick="console.log(2);">mjj</p>
<!--內嵌-->
<script type="text/javascript">

    //js代碼


</script>
    <script type="text/javascript" src="js/index.js"></script>

</body>
</html>

1.第一個JavaScript

1.alert語句

  • 用途：彈出警告框。html

    <script>
        alert('你好')
    </script>

2.註釋：

  • JavaScript對換行，縮進，空格不敏感。前端

  • 單行註釋(ctrl +/)java

    //我是單行註釋

  • 多行註釋（ctrl+shift+/）python

    /*
多行註釋1
多行註釋2
*/

3.console.log('')

  • 控制檯輸出。數組

    <script>
        console.log('hello world!');
    </script>

4.prompt()語句

  • 彈出可以讓用戶輸入的對話框瀏覽器

    <script>
        prompt('今每天氣如何？')
    </script>

  • prompt()語句中，用戶無論輸入什麼內容，都是字符串。數據結構

  • alert和prompt的區別app

    alert('今每天氣如何？');//直接使用，不須要變量
var a = prompt("請輸入一個數字");//必須用一個變量，來接收用戶輸入值

2.變量

1.變量的定義

  • var是英語「variant」變量的縮寫。後面要加一個空格，空格後面的東西就是「變量名」。
    • 定義變量：var就是一個關鍵字，用來定義變量。所謂關鍵字，就是有特殊功能的小詞語。關鍵字後面必定要有空格隔開。
    • 變量的賦值：等號表示賦值，將等號右邊的值，賦給左邊的變量。
    • 變量名：咱們能夠給變量任意的取名字。

2.變量的寫法：

var a = 100;
console.log(a);//輸出100

3.變量命名規範：

  • 變量名有命名規範：只能由英語字母、數字、下劃線、美圓符號$構成，且不能以數字開頭，而且不能是JavaScript保留字，以下：dom

    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

3.變量的類型

1.數值型：number

<script>
    var a= 100;
console.log(typeof a);
</script>
//number
  • 經過typeof()表示「獲取變量的類型」，語法：typeof 變量

2.字符串型：string

<script>
        var a = "abcde";
        var c= '1234';
        var d = '哈哈';
        var e = '';   //空字符串
        
        console.log(typeof a);//string
        console.log(typeof c);//string
        console.log(typeof d);//string
        console.log(typeof e);//string

    </script>

3.Boolean布爾值

  • 爲JS中的Boolean的值也只有2中：true和false。他們一般被用於在適當的代碼以後，測試條件是否成立，好比 3 > 4。這是個表達式，咱們都知道3是不會大於4的，因此返回了false。

    3>4;//false
4>=3;//true

4.字符串拼接

  • 經過+拼接：

    <script>
console.log('我'+"愛"+"吃"+"飯")
</script>
//我愛吃飯

  • 經過$和tab上面鍵拼接

    <script>
        var name = 'jk' , age = 20;
        var str = `${name}今年是${age}歲數了`;
        console.log(str);
    </script>
//jk今年是20歲數了

5.數學運算符

  • Javascript有一套可用的全功能的數學功能，接下來咱們就重點來學習Javascript中的數學運算吧。

  • 算數運算符

運算符 名稱 做用 示例
+ 加法 兩個數相加。 6 + 9
- 減法 從左邊減去右邊的數。 20 - 15
* 乘法 兩個數相乘。 3 * 7
/ 除法 用右邊的數除左邊的數 10 / 5
% 求餘(有時候也叫取模) 在你將左邊的數分紅同右邊數字相同的若干整數部分後，返回剩下的餘數 8 % 3(返回 2，將8分紅3份，餘下2 。) 
5 + 4 * 3;
num % 8 *num;

  • 運算符優先級

  • Javascript中的運算符優先級與數學運算符優先級相同—乘法和除法老是先完成，而後再算加法和減法。

  • 遞增和遞減運算

    • 增量（++）或遞減（--）
    var x = 3;
x++;//至關於x = x + 1
    • 常見以下：
運算符 名稱 做用 示例 等價於
+= 遞增賦值 右邊的數值加上左邊的變量，而後再返回新的變量。 x = 3;x += 4; x = 3;x = x + 4;
-= 遞減賦值 左邊的變量減去右邊的數值，而後再返回新的變量。 x = 6;x -= 3; x = 6;x = x - 3;
*= 乘法賦值 左邊的變量乘以右邊的數值，而後再返回新的變量。 x = 2;x *= 3; x = 2;x = x * 3;
/= 除法賦值 左邊的變量除以右邊的數值，而後再返回新的變量。 x = 10;x /= 5; x = 10;x = x / 5; 
//第一題：
<script>
        var a = 4;
    var c = a ++;
    console.log(c);//4
    console.log(a);//5
</script>
//先讓a的值賦值給c,再對a++

//第二題：
<script>
    var a = 4;
    var c = ++a;
    console.log(c);//5
    console.log(a);//5
</script>
//想讓a加法運算，再將a賦值給c

//第三題：
<script>
    var a = 2;
    var b = '2';
    console.log(a == b);//true
    console.log(a === b); //false
</script>
//== 比較的是值 console自動將a轉換字符串進行比較，===比較是值和數據類型。

6.數字和字符串之間的轉換

  • 數字轉字符串

    <script>
    var myNum = "" +234;
    console.log(typeof myNum);
</script>
//string
    var myNum = 123;
var myStr = myNum.toString();

var num  = 1233.006;
// 強制類型轉換
console.log(String(num));
console.log(num.toString());
// 隱式轉換
console.log(''.concat(num));
// toFixed()方法會按照指定的小數位返回數值的字符串 四捨五入
console.log(num.toFixed(2));

  • 字符串轉數字

    <script>
    var myStr = '123';
    var myNum = Number(myStr);
    console.log(typeof myNum);
</script>
//number

var str = '123.0000111';
console.log(parseInt(str));//123
console.log(typeof parseInt(str));//number
console.log(parseFloat(str));//123.0000111
console.log(typeof parseFloat(str));//number
console.log(Number(str));//123.0000111

4.數組

1.數組的建立

var shop = ['apple','milk','banana','orange']

2.訪問和修改數組

shop[0];//訪問數組
shop[0] = 'pen'；

3.獲取數組長度

shop.length;

5.條件語句

1.if...else語句

  • 語法：

    if (判斷條件) {
  //結果1
}else{
    //結果2
}
    • 關鍵字 if，而且後面跟隨括號。
    • 測試的條件，放到括號裏。這個條件會利用比較運算符進行比較，而且返回true或者false。
    • 一組花括號，在裏面咱們有一些代碼——能夠是任何咱們喜歡的代碼，而且只會在條件語句返回true的時候運行
    • 關鍵字else
    • 另外一組花括號，在裏面咱們有一些代碼——能夠是任何咱們喜歡的代碼，而且當條件語句返回值不是true的話，它纔會運行。

2.else...if語句

  • 上述例子提供咱們兩種選擇或結果，但咱們若是想要多個選擇和結果能夠用else if.
var weather = 'sunny';
if(weather == 'sunny'){
    //天氣很是棒，能夠出去玩耍了
}else if(weather == 'rainy'){
    //天氣下雨了，只能在家裏呆着
}else if(weather == 'snowing'){
    //天氣下雪了，能夠出去滑雪了
}

3.if ...else的嵌套

var weather = 'sunny';
if(weather == 'sunny'){
    if(temperature > 30){
        //仍是在家裏吹空調吧
    }else if(temperature<=30){
        //天氣很是棒，能夠出去玩耍了
    }
}

4.邏輯運算符：&&，||，！

  • && — 邏輯與; 使得並列兩個或者更多的表達式成爲可能，只有當這些表達式每個都返回true時，整個表達式纔會返回true.
  • || — 邏輯或; 當兩個或者更多表達式當中的任何一個返回 true 則整個表達式將會返回 true.
  • ! — 邏輯非; 對一個布爾值取反, 非true返回false,非false返回true。
var mathScore = 88;
var enlishScore = 90;
if(mathScore > 70 || enlishScore > 95){
    console.log('才能夠玩遊戲');
}else{
    console.log('在家裏寫做業');
}

5.switch語句

var weather = 'sunny';
switch(weather){
    case 'sunny':
        //天氣很是棒，能夠出去玩耍了
        break;
    case 'rainy':
       //天氣下雨了，只能在家裏呆着
        break;
    case 'snowing':
        //天氣下雪了，能夠出去滑雪了
        break;
    default:
        //哪裏也不出去
}

6.三元運算符

  • 三元運算符它解決了像if..else塊較少的代碼。若是你只有兩個經過true/false條件選擇。
(codition) ? run this code : run this code instead;
<script>
    var a = '';
    (1 > 2)? a='真的' : a='假的';
    console.log(a)

</script>
//假的

7.循環

1.for循環

  • Javascript的循環有兩種，一種是for循環，經過初始化條件、結束條件和遞增條件來循環執行語句塊，語法以下：
for (初始化條件;結束條件;遞增條件){
    run this code
}

  • 示例：

    <script>
        var total = 0;
        var i;
        for (i = 1;i <= 1000; i++){
            total = total + i;
        }
        console.log(total);//500500
    </script>

2.使用Break退出循環

  • for循環的3個條件都是能夠省略的，若是沒有退出循環的判斷條件，就必須使用break語句退出循環，不然就是死循環：

    <script>
        var x = 0;
        for (;;){
            if (x>100) {
                break;
            }
            x ++;
            console.log(x)
        }
    </script>
//1.....101

3.continue語句

  • continue語句中斷循環中的迭代,若是出現了指定的條件,而後繼續循環中的下一個迭代。

    <script>
        var x;
        for (var i = 0; i<=10; i++){
            if (i==3) continue;
            x ='這個數字是' + i;
            console.log(x)
        }
    </script>
//這個數字是0......這個數字是10

4.while循環

  • Javascript中的另外一種循環則是while循環，使用它最佳。

  • 語法：

    while (判斷循環結束條件){
  //code to run
  遞增條件
}

  • 示例：

    <script>
    var a = 1;
    while (a <=100){
        console.log(a);
        a += 1;
    }
</script>
//1 2 3 .....100

5.do...while

  • 最後一種循環是do { ... } while()循環，它和while循環的惟一區別在於，不是在每次循環開始的時候判斷條件，而是在每次循環完成的時候判斷條件：

    var n = 0;
do {
    n = n + 1;
} while (n < 100);
n; // 100

  • 用do { ... } while()循環要當心，循環體會至少執行1次，而for和while循環則可能一次都不執行。

8.函數

  • 在Javascript中另外一個基本概念是函數，它容許你在一個代碼塊中存儲一段用於處理一個任務的代碼，而後在任何你須要的時候用一個簡短的命令來調用，而不是把相同的代碼寫不少次。

1.函數定義

  • 一個函數定義(也稱爲函數聲明，或函數語句)由一些列的function關鍵字組成。例如，如下代碼是一個簡單的計算多組數的和的函數，咱們給它命名爲sum。

    function sum(a,b) {
  //函數體
}

2.函數的調用

  • 函數定義好後，它是不能自動執行的，須要調用它，直接在須要的位置寫函數名。

    <script>
    function sum(a,b){
        console.log(a+b);
    }
    sum(3,5);
</script>
  • 咱們把定義函數時傳入的兩個參數a和b叫形參(形式參數，一個未來被代替的參數)，調用函數時傳入的兩個參數叫實參(實際的參數)。

  • 若是向在定義函數時添加多個形參。能夠在後面添加多個，注意參數之間用逗號隔開。

3.函數的返回值

  • 咱們在計算兩個數之和的時候，能夠給函數一個返回值，每次調用該函數，你就能計算出兩個數之和。

    <script>
    function sum(a,b){
        return a+b
    }
    var result = sum(3,5);
    console.log(result);
</script>

4.函數表達式

  • 雖然上面的函數定義在語法上是一個語句，但函數能夠由函數表達式建立。這樣的函數能夠是匿名的;它沒必要有一個名稱。例如，函數sum也能夠這樣去定義：

    var sum = function(a,b){
    return a + b;
}
sum(4,5);

5.函數做用域衝突

  • 處理函數時，做用域是很是重要的一個概念。當你建立函數時，函數內定義的變量和其它東西都在它們本身的單獨的範圍內，意味着它們被鎖在本身獨立的房間內。

  • 全部的函數的最外層被稱爲全局做用域。在全局做用域內定義的值能夠任意地方訪問。

    <!-- my HTML file -->
<script src="first.js"></script>
<script src="second.js"></script>
<script>
  hello();
</script>
    //first.js
var name = 'Tom';
function hello() {
  alert('Hello ' + name);
}
    //second.js
var name = 'Jack';
function hello() {
  alert('Hello ' + name);
}
    • 這兩個函數都是用hello()形式調用，可是你只能訪問到 second.js文件的hello()函數。second.js 在源代碼中後應用到HTML中，因此它的變量和函數覆蓋了 first.js 中的。咱們稱爲這種行爲叫代碼衝突。

  • 例題：

    function fn() {
        switch (arguments.length){
            case 2:
                console.log('2個參數');
                break;
            case 3:
                console.log('3個參數');
                console.log(arguments);//Arguments(3) [2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
                break;
            default:
                break;
        }
    }
    fn(2,3);//2個參數
    fn(2,3,4);//3個參數
//arguments對象在函數中引用函數的參數。此對象包含傳遞給函數的每一個參數.
//arguments對象不是一個 Array 。它相似於Array，但除了length屬性和索引元素以外沒有任何Array屬性。

6.函數內部的函數

  • 在任何地方你均可以調用函數，甚至能夠在另外一個函數中調用函數。這一般被用做保持代碼整潔的方式。若是你有一個複雜的函數，若是將其分解成幾個子函數，它更容易理解：
function myBigFunction() {
  var myValue = 1;
  subFunction1(myValue);
  subFunction2(myValue);
  subFunction3(myValue);
}
function subFunction1(value) {
  console.log(value);
}
function subFunction2(value) {
  console.log(value);
}
function subFunction3(value) {
  console.log(value);
}

  • 函數自執行

    （function(){
          //代碼
        })();

9.對象（object）:

  • 對象屬性：它是屬於這個對象的某個變量。好比字符串的長度、數組的長度和索引、圖像的寬高等。

  • 對象的方法：只有某個特定屬性才能調用的函數。表單的提交、時間的獲取等。

  • 對象的建立方式：

    1.字面量表示法

    • 對象字面量是對象定義的一種簡寫形式，目的在於簡化建立包含大量屬性的對象的過程。

      <script>
    var person = {
        name : 'xjk',
        age : 22,
        fav :function() {
            console.log('學JS')
        }

    };
    person.fav();//學JS
    console.log(person.name);//22
</script>
      var person = {};//與new Object()相同

var obj2 = new Object();
    2.點語法(set和get)
    <script>
    var person = {};
    person.name='xjk';
    person.fav = function(){
        console.log(this)
    };
    person.fav();//{name: "xjk", fav: ƒ}
    console.log(person.name);//xjk
</script>
    //set get  用法：
//一、get與set是方法，由於是方法，因此能夠進行判斷。
//二、get是獲得 通常是要返回的   set 是設置 不用返回
//三、若是調用對象內部的屬性約定的命名方式是_age   
    var my = {
        name:'jk',
        work:function () {
            console.log('working');
        },
        _age:22,
        get age(){
            return this._age;
        },
        set age(val){
            if (val<0 || val>100) {
                throw new Error('invalid value')
            }else{
                this._age = val;
            }
        }
    };
    console.log(my.age);//22
    my.age = 18;
    console.log(my.age);//18
    my.age = 200;
    console.log(my.age);//Uncaught Error: invalid value
    3.括號表示法
    person['name'];

  • ECMAScript6：

    <script>
    class Person{
        constructor(name,age){
            //初始化至關於python__init__,this至關於self
            this.name = name;
            this.age = age;
        }
        fav(){
            console.log(this.name);
        }
    }
    var p = new Person('mjj',18);
    p.fav();
</script>
//與python類似

  • 例題：

    var obj = {};
    obj.name = 'mjj';
    obj.fav = function(){
        //obj
        console.log(this);
    };
    console.log(this);
  //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}全局的。
    function  add(x,y) {
        console.log(this.name);
        console.log(x);
        console.log(y);
    }

    add.call(obj,1,2);
  //obj傳入add 函數，給this賦予局部函數，爲obj.name，調用obj對象的name並打印。

  add.apply(obj,[1,2]);
  //apply 與call類似，第二個參數傳入必須爲數組



//匿名函數
    (function () {
        console.log(this);
    })();
//window

  • 注意：首先要了解JS裏的this對象，this對象是在運行時基於函數的執行環境綁定的，在全局函數中，this等於window，而當函數做爲某個對象例如A的方法B被調用時，this等於A對象，這裏有個例外，匿名函數的執行環境具備全局性，所以匿名函數的this對象一般指向window。用一句話總結，就是誰調用this，誰就被引用。

    <script>
    var name = 'wusir';
    (function () {
        console.log(this.name);
    })();

</script>
//wusir

  • 練習題：

    <script>
    var name = 'window';
    var obj = {
        name:'my obj',
        getname:function () {
            var name = 'inner name';
            return this.name;
        }
    };
    alert(obj.getname());
</script>
//my obj
//誰調用this，誰就被引用。

  • apply:方法能劫持另一個對象的方法，繼承另一個對象的屬性. Function.apply(obj,args)方法能接收兩個參數 obj：這個對象將代替Function類裏this對象 args：這個是數組，它將做爲參數傳給Function（args-->arguments）call:和apply的意思同樣,只不過是參數列表不同. Function.call(obj,[param1[,param2[,…[,paramN]]]]) obj：這個對象將代替Function類裏this對象

10.內置對象：

  • 它提供了一些列預先定義好的對象，而咱們能夠把這些對象直接用在本身的腳本里。咱們稱這種對象叫內置對象（navtive object）。

1.Array

  • 其實咱們已經見過一些Javascript內置對象了。數組就是一種Javascript內置對象中的一種。本節咱們主要介紹數組經常使用的屬性和方法。
1.1數組建立：
var colors = new Array();
1.2使用字面量方式建立數組
var colors = [];
1.3 isArray
  • 判斷是否爲數組
<script>
    var  colors = ['red','green','blue'];
    if (Array.isArray(colors)){
        console.log("是數組")
    }
</script>
//是數組
1.4 toString

  • 數組中每一個值得字符串形式拼接。

    <script>
    var  colors = ['red','green','blue'];
    alert(colors.toString());
</script>
//red,green,blue
1.5 join

  • 分割字符串

    <script>
    var  colors = ['red','green','blue'];
    res = colors.join("|");
    console.log(res);
</script>
//red|green|blue
1.6棧方法push() pop()
  • 數組也能夠像棧同樣，既能夠插入和刪除項的數據結構。棧是一種LIFO(Last-In-First-Out,後進先出)的數據結構，也就是最新添加的那項元素最先被刪除。而棧中項的插入（叫作推入）和移除(叫作彈出)，只發生在一個位置——棧的頂部。
    • push():能夠接收任意數量的參數，把它們逐個添加到數組末尾，並返回修改後數組的長度。
    • pop():從數組末尾移除最後一項，減小數組的 length 值，而後返回移除的項 。
     <script>
    var  colors = ['red','green','blue'];
    colors.push('yellow','black');
    console.log(colors);
</script>
//["red", "green", "blue", "yellow", "black"]
    <script>
    var  colors = ['red','green','blue'];
    res = colors.pop();//res = 'blue'
    console.log(colors);
</script>
//["red", "green"]
1.7隊列方法 shift() unshift()

  • 隊列數據結構的訪問規則是 FIFO(First-In-First-Out， 先進先出)。隊列在列表的末端添加項，從列表的前端移除項。

  • shift()

    <script>
    var  colors = ['red','green','blue'];
    var item = colors.shift();
    alert(item);
</script>
//red

  • unshift()

    var colors = [];
var count  = colors.unshift('red','green'); //推入兩項
alert(count); //2
console.log(colors); // ["red", "green"]
1.8reverse()

  • 反轉數組。

    var values = [1,2,3,4];
values.reverse();
alert(values);
//4,3,2,1
1.9sort()

  • 方法按升序排列

    • 默認狀況下，sort()方法按升序排列——即最小的值位於最前面，最大的值排在最後面。 爲了實現排序，sort()方法會調用每一個數組項的toString()轉型方法，而後比較獲得的字符串，以肯定如何排序 。即便數組中的每一項都是數值，sort()方法比較的也是字符串。
    var values = [0,1,5,10,15];
varlus.sort();
alert(values); //0,1,10,15,5
//可見，即便例子中值的順序沒有問題，但 sort()方法也會根據測試字符串的結果改變原來的順序。 由於數值 5 雖然小於 10，但在進行字符串比較時，」10」則位於」5」的前面，因而數組的順序就被修改了。 不用說，這種排序方式在不少狀況下都不是最佳方案。
1.10 concat方法
  • 數組合並方法，一個數組調用concat()方法去合併另外一個數組，返回一個新的數組。concat()接收的參數是能夠是任意的。
    • 參數爲一個或多個數組，則該方法會將這些數組中每一項都添加到結果數組中。
    • 參數不是數組，這些值就會被簡單地添加到結果數組的末尾
var colors = ['red','blue','green'];
colors.concat('yello');//["red", "blue", "green", "yello"]
colors.concat({'name':'張三'});//["red", "blue", "green", {…}]
colors.concat({'name':'李四'},['black','brown']);// ["red", "blue", "green", {…}, "black", "brown"]
1.11 slice()方法
  • slice()方法，它可以基於當前數組中一個或多個項建立一個新數組。slice()方法能夠接受一或兩個參數，既要返回項的起始和結束位置。
    • 一個參數的狀況下，slice()方法會返回從該參數指定位置開始到當前數組默認的全部項
    • 兩個參數的狀況下，該方法返回起始和結束位置之間的項——但不包括結束位置的項。
var colors = ['red','blue','green','yellow','purple'];
colors.slice(-2,-1);//["yellow"] 
colors.slice(-1,-2);//[]
//解析colors.slice(-2,-1) 等於colors.slice(3,4)，都加colors.length.此時爲5.
1.12splice

  • 用於數組刪除，插入，替換。

    //1.刪除：能夠刪除任意數量的項，只需指定2個參數：要刪除的第一項的位置和要刪除的個數。例如splice(0,2)會刪除數組中的前兩項。
<script>
    var colors = ['red','blue','green','yellow','purple'];
    colors.splice(0,2);
    console.log(colors);//["green", "yellow", "purple"]
</script>
//2.插入：能夠向指定位置插入任意數量的項，只需提供3個參數：起始位置、0（要刪除的個數）和要插入的項。若是要插入多個項，能夠再傳入第4、第5、以致任意多個項。例如，splice(2,0,'red','green')會從當前數組的位置2開始插入字符串'red'和'green'。
<script>
    var colors = ['red','blue','green','yellow','purple'];
    colors.splice(2,0,'red','green');
    console.log(colors);//["red", "blue", "red", "green", "green", "yellow", "purple"]
</script>
//3.替換：能夠向指定位置插入任意數量的項，且同時刪除任意數量的項，只需指定 3 個參數:起始位置、要刪除的項數和要插入的任意數量的項。插入的項數沒必要與刪除的項數相等。例如，splice (2,1,"red","green")會刪除當前數組位置 2 的項，而後再從位置 2 開始插入字符串"red"和"green"。
<script>
    var colors = ['red','blue','green','yellow','purple'];
    colors.splice(2,1,'red','green');
    console.log(colors);//["red", "blue", "red", "green", "yellow", "purple"]
</script>
1.13 indexOf() lastIndexOf()位置方法

  • indexOf()和 lastIndexOf()。這兩個方法都接收兩個參數:要查找的項和(可選的)表示查找起點位置的索引。其中，indexOf()方法從數組的開頭(位置 0)開始向後查找，lastIndexOf()方法則從數組的末尾開始向前查找。在沒找到的狀況下返回-1.

    <script>
    var num = [1,2,3,4,5,4,3,2,1];
    alert(num.indexOf(4));//3 查找值爲4的索引爲3
</script>

<script>
    var num = [1,2,3,4,5,4,3,2,1];
    // alert(num.indexOf(4));//3 查找值爲4的索引爲3
    alert(num.lastIndexOf(4));//5 從後開始查找值爲4的 索引爲5（索引仍是從前面開始算）
</script>

<script>
    var num = [1,2,3,4,5,4,3,2,1];
    alert(num.indexOf(4,4));//5 第一個參數要查找的值4，第二個參數爲規定在字符串中開始檢索的位置,從4好位置開始查找
    // alert(num.lastIndexOf(4));//5 從後開始查找值爲4的 索引爲5（索引仍是從前面開始算）
</script>
1.14迭代方法 filter map forEach

  • filter()函數，它利用指定的函數肯定是否在返回的數組中包含某一項。

    var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
    return (item > 2);
});
alert(filterResult); //[3,4,5,4,3]

  • map方法

    • 方法也返回一個數組，而這個數組的每一項都是在原始數組中的對應項上運行輸入函數的結果。
    var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.map(function(item, index, array){
    return item * 2;
});
alert(filterResult); //[2,4,6,8,10,8,6,4,2]

  • forEach()方法

    • 它只是對數組中的每一項運行傳入的函數。這個方法沒有返回值， 本質上與使用 for 循環迭代數組同樣。
    <script>
    var num = [1,2,3,4,5,4,3,2,1];
    var res = num.forEach(function(item,index,array){
        console.log(index,item);

    });
</script>
/*
第一個索引index，第二個值item
0 1
1 2
2 3
3 4
4 5
5 4
6 3
7 2 
8 1
*/

2.String

2.1 length方法
  • 獲取字符串長度。
var stringValue = "hello world"; 
alert(stringValue.length);     //"11"
2.2charAt() charCodeAt()字符方法

  • 這兩個方法都接收一個 參數，即基於 0 的字符位置。其中，charAt()方法以單字符字符串的形式返回給定位置的那個字符。

    <script>
    var stringValue = "hello world";
    alert(stringValue.charAt(1));//'e'
</script>

var stringValue = "hello world";
alert(stringValue.charCodeAt(1)); //輸出"101" 當前字符編碼
2.3 concat()字符串操做方法

  • 用於將一或多個字符串拼接起來， 返回拼接獲得的新字符串.concat能夠接收任意多個參數。

    <script>
    var stringValue = "hello ";
    var result = stringValue.concat("world",'!');
    alert(result);//hello world!
</script>
2.4子字符串建立新字符串

  • slice() substr() substring()

  • 與 concat()方法同樣，slice()、substr()和 substring()也不會修改字符串自己的值——它們只是 返回一個基本類型的字符串值，對原始字符串沒有任何影響。

    • slice()、 substring() 第二個參數指定的是字符串最後一個字符位置。
    • substr()第二個參數指定則是返回字符個數。
    var stringValue = "hello world";
alert(stringValue.slice(3));//"lo world"
alert(stringValue.substring(3));//"lo world"
alert(stringValue.substr(3));//"lo world"
alert(stringValue.slice(3, 7));//"lo w"
alert(stringValue.substring(3,7));//"lo w"
alert(stringValue.substr(3, 7));//"lo worl"
2.5indexOf() lastIndexOf()字符串位置方法

  • 有兩個能夠從字符串中查找子字符串的方法:indexOf()和 lastIndexOf()。這兩個方法都是從 一個字符串中搜索給定的子字符串，而後返回子字符串的位置(若是沒有找到該子字符串，則返回-1)。

    var stringValue = "hello world";
alert(stringValue.indexOf("o"));             //4
alert(stringValue.lastIndexOf("o"));         //7
alert(stringValue.indexOf("o", 6));         //7
alert(stringValue.lastIndexOf("o", 6));     //4
2.6trim()方法

  • trim()方法,刪除字符串的先後空格.

    var stringValue = "   hello world   ";
var trimmedStringValue = stringValue.trim();
alert(stringValue);            //"   hello world   "
alert(trimmedStringValue);     //"hello world"
2.7字符串大小寫轉換
var stringValue = "hello world";
alert(stringValue.toLocaleUpperCase());  //"HELLO WORLD"
alert(stringValue.toUpperCase());        //"HELLO WORLD"
alert(stringValue.toLocaleLowerCase());  //"hello world"
alert(stringValue.toLowerCase());        //"hello world"

11.date對象方法

var date = new Date();
console.log(date);
//Mon Jun 03 2019 23:51:28 GMT+0800 (中國標準時間)
console.log(date.getDate());
//3 根據本地時間返回本月第幾天
console.log(date.getMonth()+1);
//6 根據本地時間返回第幾月
console.log(date.getFullYear());
//2019  返回年
console.log(date.getDay());
// 星期幾
console.log(date.getHours());
//幾時
console.log(date.getMinutes());
//幾分
console.log(date.getSeconds());
//幾秒
console.log(date.toLocaleString());
//2019/6/3 下午11:56:00
var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
var date = new Date();
console.log(weeks[date.getDay()]);
var day = weeks[date.getDay()];
document.write(`<a href="#">${day}</a>`);
  • 時鐘：
<h2 id="time"></h2>
<script>
    var timeObj = document.getElementById('time');
    console.log(time);

    function getNowTime() {
        var time = new Date();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        var temp = "" + ((hour > 12) ? hour - 12 : hour);
        if (hour == 0) {
            temp = "12";
        }
        temp += ((minute < 10) ? ":0" : ":") + minute;
        temp += ((second < 10) ? ":0" : ":") + second;
        temp += (hour >= 12) ? " P.M." : " A.M.";
        timeObj.innerText = temp;
    }

    setInterval(getNowTime, 20)
</script>

12.window對象

  • ECMAScript 雖然沒有指出如何直接訪問 Global 對象，但 Web 瀏覽器都是將這個全局對象做爲 window 對象的一部分加以實現的。所以，在全局做用域中聲明的全部變量和函數，就都成爲了 window 對象的屬性。來看下面的例子。
var color = "red";
function sayColor(){
    alert(window.color);
}
window.sayColor();  //"red"

13.Math對象

13.1max min 最小值 最大值
var max = Math.max(3,54,32,16);
alert(max);//54
var min = Math.min(3,54,32,16);
alert(min);//3
var values = [1,2,36,23,43,3,41];
var max = Math.max.apply(null, values);
console.log(max);
13.2舍入方法
  • Math.ceil():執行向上舍入，即它老是將數值向上舍入爲最接近的整數;
  • Math.floor():執行向下舍入，即它老是將數值向下舍入爲最接近的整數;
  • Math.round():執行標準舍入，即它老是將數值四捨五入爲最接近的整數(這也是咱們在數學課上學到的舍入規則)。
<script>
    var a = 1.523;
    console.log(Math.ceil(a));//2
    console.log(Math.floor(a));//1
    console.log(Math.round(a));//2
</script>
13.3random()隨機數

  • 方法返回大於等於 0 小於 1 的一個隨機數

  • 生成100~400隨機整數

    <script>
    function random(min,max){
        return min +Math.floor(Math.random()*(max-min));
    }
    var res = random(100,400);
    console.log(res);

</script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程