1. 程式人生 > 其它 >JavaScript進階函式學習筆記,例如:map、reduce、apply、call,以及this關鍵字詮釋

JavaScript進階函式學習筆記,例如:map、reduce、apply、call,以及this關鍵字詮釋

//在呼叫函式中修改這個變數,其變數在內部發生改變,返回出來的是新賦予的值。但在外部函式中,其屬性值,未發生改變 //也就是說,函式傳參的時候,給的是值,不是儲存數值的地址,當這個值改變的時候,原來的地址存放的值沒有變化,因此不會改變原來的數值 // var color = 'blue'; // function changecolor() {
// if (color === 'blue') { // color = 'red'; // } else{ // color = 'green'; // } // return color; // }
// console.log(color, changecolor(color));//blue red // //此時列印的color是外部函式的calor值blue,在呼叫函式changcolor中傳入的color是新賦予的red

//this關鍵字,在一個物件中繫結一個函式,我們叫做這個物件的方法,在這個方法裡,存在一個this指標,其指向當前物件, //只在物件的方法第一層能拿到正確的this,在方法內部重新定義this會指向全域性,可以使用that = this捕獲第一層的this。然後在方法內部函式使用


// function getAge() { // var y = new Date().getFullYear(); // return y - this.birth; // }
// var xiaoming = { // name: '小明', // birth: 1990, // age: getAge // };
// xiaoming.age(); // 25 // getAge.apply(xiaoming, []); // 25, this指向xiaoming, 引數為空


// function getAge() { // var y = new Date().getFullYear(); // return y - this.birth; // }
// var xiaoming = { // name: '小明', // birth: 1990, // age: getAge // };
// xiaoming.age(); // 25, 正常結果 // getAge(); // NaN

// 另一個與apply()類似的方法是call(),唯一區別是:
// apply()把引數打包成Array再傳入; //apply('指向的物件',[需要傳遞的引數]);
// call()把引數按順序傳入。
// 比如呼叫Math.max(3, 5, 4),分別用apply()和call()實現如下:
// Math.max.apply(null, [3, 5, 4]); // 5 // Math.max.call(null, 3, 5, 4); // 5 // 對普通函式呼叫,我們通常把this繫結為null。 // 計算函式被呼叫幾次
// 'use strict' // var count = 0; // var oldParseInt = parseInt;//保留原函式的功能 // window.parseInt = function () { // count += 1; //保留函式功能的情況下,增加一個函式被呼叫的功能 // return oldParseInt.apply(null,arguments); // }
// parseInt('1'); // parseInt('2'); // parseInt('3'); // console.log('count= ' + count); // console.log(parseInt('0x10')); //apply裝飾器的原理,不改變原函式的情況下,給原函式增加新功能,在呼叫
//利用apply()可以動態指向想要指向的物件,以及想傳遞的引數   //高階函式 一個函式可以接收另一個函式作為引數,這種函式成為高階函式 // function add(x,y,f) { // return f(x) + f(y); // }
// var x=add(-2, 4, Math.abs); // console.log(x);


//陣列的map方法,將函式作用在數組裡,將數組裡的每一個元素逐步傳入函式,並獲得新的一組陣列結果 其接受一個引數 //陣列多長,就呼叫幾次函式,例如:長度為2的陣列:[1,2],則呼叫函式時。將呼叫兩次,例如:arr.map(function add(x){return x*x}) 得到新陣列結果為 [1,4] // function pow(x) { // return x * x; // }
// var arr1 = [1, 2, 3, 4, 5, 6]; // var results = arr1.map(pow);//一次放入陣列元素,並求得平方 // console.log(results);//[1, 4, 9, 16, 25, 36]


//陣列reduce方法 將函式作用在數組裡,將數組裡的每一個元素,分成前後傳入函式,並獲得一組陣列結果,其接受兩個引數 //陣列多長,就呼叫除以2次函式,例如:長度長度為4;[1,2,3,4],則呼叫函式時,將函式呼叫2次。例如:arr.reduce(function sub(x,y){return x-y}) 得到的新陣列結果為[-1,-1]
// var arr = [1, 2, 3, 4]; // arr.reduce(function (x, y) { // return res= x * y; // });
// console.log(res);
// 'use strict';

// console.log(arr); // arr.reduce( // (x,y)=>{ // res= x * y; // } // ); // }


// 使用reduce求任意陣列的乘積 // function product(arr) { // return arr.reduce(function (x, y) { // return x*y // });   // } // // 測試: // if (product([99, 88, 77, 66]) === 44274384) { // console.log('測試通過!'); // } // else { // console.log('測試失敗!'); // }
// //使用reduce將任意陣列中的所有元素合併成一個整數 // var arr = [1, 3, 5, 7, 9]; // var num = arr.reduce(function (x, y) { // console.log(x, y); // console.log('x='+x * 10 +'+'+ y+'y='+y); // return x * 10 + y;   // },);
// console.log(num);
// 把字串轉換成整數 // 思路:現將字串轉換成陣列,然後將陣列轉換成整數 // function string2int(s) {  

// var arr = s.split(''); // console.log(arr); // var arr2 = eval('[' + String(arr) + ']') // var num = arr2.reduce(function (x, y) { // console.log(x,y); // return x * 10 + y; // }); // return num   // }

// // 測試: // if (string2int('0') === 0 && string2int('12345') === 12345 && string2int('12300') === 12300) { // if (string2int.toString().indexOf('parseInt') !== -1) { // console.log('請勿使用parseInt()!'); // } else if (string2int.toString().indexOf('Number') !== -1) { // console.log('請勿使用Number()!'); // } else { // console.log('測試通過!'); // } // } // else { // console.log('測試失敗!'); // } // 將使用者輸入的英文名,首字母大寫,其他小寫 //思路:將使用者輸入的英文名首字母做大寫處理,再將其與字母做小寫處理,最後拼接在一起 // 'use strict' // function normalize(arr) { // var userNmae = arr.map(function (name) { // return name.toString()[0].toUpperCase() + name.substring(1).toLowerCase(); // }); // return userNmae // }

// //測試: // if (normalize(['adam', 'LISA', 'barT']).toString() === ['Adam', 'Lisa', 'Bart'].toString()) { // console.log('測試通過!'); // } // else { // console.log('測試失敗!'); // }

//利用map把字串變為整數
// 'use strict';
// var arr = ['1', '2', '3']; // var r;
// r = arr.map(Number);

// console.log(r);