今天學習了函式，主要還是邏輯思維的鍛煉，頭腦要靈活，總結：多做演算法題！！！????????
函式以及優點 實際就是多行代碼的抽取（多行代碼會構成特定的功能），減少冗余代碼，函式封裝，提高了可維護性和可閱讀性， 函式的分類 系統函式：window里面所有的函式都屬于系統函式console.log(),alert(),prompy() // 內置函式：所有的內置物件里面的函式 Math.pow() // 自定義函式：自己定義的函式 // 內置函式和系統函式我們更關注他的使用 自定義函式（定義以及使用）// 自定義函式的定義以及呼叫
// 1.使用function關鍵詞匿名函式（沒有名字的函式）
/* function (形參（可省略）) {
函式體（代碼）
} //直接呼叫 */
/* (function(){
console.log('匿名函式');
})() */
// 匿名函式，宣告比較少，沒有復用價值
</script>
<script>
// 自執行的匿名函式，只執行一次，沒有復用價值
(function(){
console.log('匿名函式');
})()
</script>
<script>
// 1.使用function關鍵詞 定義具名函式
// function函式名（形參，形參.....）{
// 函式體（代碼）
// }
// 宣告 具名函式（第一種）形參是形容的引數
function sayhello(name){
console.log('hello');
}
// 呼叫
sayhello('李四') //傳進去的是實參 根據你要的引數個數來傳遞對應的引數
// 具名函式的變種宣告 （第二種）
var sayhi = function(){
console.log('hi');
}
// 呼叫
sayhi()//這種宣告，呼叫只能放在定義之后，因為沒有賦值
// 具名函式的兩種宣告，呼叫速度來看，第一種更快
// function 和 var 在預編譯階段就會宣告
// var關鍵詞修飾的變數在預編譯階段不會賦值
// 使用new Function （new 后面的內容首字母絕對是大寫的）
// var 函式名 = new function函式名（‘形參，形參1’，‘函式體’）
var sayBye = new Function('console.log("bye bye!!") ')
sayBye()
var sayBye = new Function('username','console.log("bye bye!!") ')
sayBye('李四')
// 在引數執行之前，有個預編譯程序，他會宣告對應的function和var關鍵詞修飾的變數（開辟記憶體的操作）
// 對應的function的記憶體空間開辟以后他會將對應的代碼塊放在其中 等待呼叫
// var 修飾的關鍵詞 只會開辟一個空間 并不會進行賦值（默認給他一個undefined的值）
// return 關鍵詞
// return回傳對應的資料的 他是在函式內容進行資料回傳的（當你呼叫了return操作，后面的內容將不再執行）
function sum(a,b){
return a+b;
console.log('不會執行的代碼');
}
console.log(sum(1,2));//回傳對應的a+b的值
// 如果沒有return關鍵詞，回傳的一個undefined的值
function sayHi(){
console.log('hi');
}
console.log(sayHi());
// 函式執行程序
// 1.方法堆疊 （執行堆疊） 把對應的開辟的function記憶體里面的代碼丟給方法堆疊去執行
// 2.執行堆疊就會自動取執行對應的方法 執行完回傳對應的結果，
// 3.
function say(){
var a = 10;
a++;
console.log(a);
}
say();
say();
</script>示例：
<script>
// 階乘計算
function compute(n) {
var sum = 0;
// 回圈1-n
for (var i = 1; i <= n; i++) {
sum += i;
}
return sum
}
console.log(compute(10));
</script>
<script>
// 計算最小公倍數
// 方法一
function double(a, b) {
if (a > b) {
for (var i = 1; i <= a * b; i++) {
a *= i;
if (a % b == 0) {
return a;
}
}
} else {
for (var i = 1; i <= a * b; i++) {
b *= i;
if (b % a == 0) {
return b;
}
}
}
}
console.log(double(12, 8));
//方法二
function fn(number1, number2) {
var max = number1 > number2 ? number1 : number2
for (var i = max; i <= number1 * number2; i++) {
if (i % number1 == 0 && i % number2 == 0) {
return i;
}
}
}
console.log(fn(12, 8));
</script>
<script>
// 判斷是否閏年
function year(time) {
if (time % 4 == 0 && time % 100 != 0 || time % 400 == 0) {
console.log('是閏年');
return;
} else {
console.log('不是閏年');
return;
}
}
year(1696);
</script>
<script>//判斷素數 方法一
var count = 0;
function fn1(number) {
for (var i = 1; i <= number; i++) {
if (number % i == 0)
count++
}
if (count == 2) {
console.log('素數');
} else {
console.log('不是素數');
}
}
fn1(8)
</script>
<script>//判斷素數 方法二
var count = 0;
function fn3(number) {
for (var i = 2; i < number; i++) {
if (number % i == 0) {
count++;
break;
}
}
if (!count) {
console.log('素數');
} else {
console.log('不是素數');
}
}
fn3(2)
</script>
<script>
function fn4(year) {
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
console.log('是閏年');
return;
} else {
console.log('不是閏年');
return;
}
}
function checkDay(day,max){
if(day>0 && day<=max){
console.log('當前日期合法');
}else{
console.log('當前日期不合法');
}
}
function fn2(year,month,day){
if(month>0 && month<=12){
if(month==2){
if(fn4(year)){
checkDay(day,29);
}else{
checkDay(day,28);
}
}else{
switch(month){
case 4: case 6: case 9: case 11:
checkDay(day,30);
break;
default:
checkDay(day,31)
}
}
}
}
fn2(2007,2,30)
</script>函式的嵌套：函式的嵌套: 函式內部可以再包含其他函式; 函式之間允許相互呼叫，也允許向外呼叫, 但是不可以呼叫同級函式的嵌套函式;
<script>
function fn1(){
console.log('函式1');
function fn2(){
console.log('函式2');
//fn3() 死回圈
// fn1() 沒有結果就是死回圈
}
function fn2(){
console.log('函式3');
// 呼叫函式2
fn2()
}
fn2()
fn3()
}
fn1() //函式1 函式2 函式3 函式2
</script>函式中的arguments陣列
<script>
// arguments是一個偽陣列（有部分的陣列特性）（可以通過length對應的長度[]）
// 下標來訪問里面的元素）
function sum(){//不清楚引數個數
// 獲取里面傳遞的所有引數 arguments 長度length
var result = 0;
for(var i=0;i<arguments.length;i++){
result += arguments[i]
}
return result;
}
console.log(sum(1,3,5));
console.log(sum(1,5));
console.log(sum(1,5,7,9,8));
</script>
<!-- 所有的函式都具備arguments（物件） -->
<!-- 訪問length屬性訪問長度 -->
<!-- []加下標（從0開始）訪問里面的元素 -->函式作用域：
<!-- <script>
// 因為作用域的導致 下面找不到number
var number = 2; //全域作用域 var 關鍵詞宣告的是偽全域作用域
function factorial(n){
console.log(number);//undefined
number = 1;//區域變數 位于某一個代碼的里面 稱為全域變數
// 解決方法 變數提升 用全域變數去提升
return number;
}
// 作用域鏈
// 先往同級的地方找 找不到向上找 一直向上 直到找到為止
factorial()
console.log(number); //如果外面沒有宣告number就找不到number（報錯）
// 作用域：當前一個變數的作用范圍 分為區域作用域（在一個函式內或者在一個代碼塊內他的作用范圍就是當前代碼塊）和全域作用域（他的作用范圍是全域的）
// 當前的作用域內沒有找到,就會一直向上找,這個程序就叫做作用域鏈，
</script> -->
<script>
var a = 20;
function fn(){
console.log(a);//20
a = 10;
if(10>9){
console.log(a);//10
a =30;
if(5>4){
console.log(a);//30
a = 40;
if(a>10){
console.log(a);//40
}
}
}
}
fn()
</script>
<script>
var a = 20;
function fn(){
console.log(a);//20
// a = 10;
if(10>9){
console.log(a);//20
// a =30;
if(5>4){
console.log(a);//20
// a = 40;
if(a>10){
console.log(a);//20
}
}
}
}
fn()
</script>
<script>
var a = 20;
function fn(){
console.log(a);//undefined
var a = 10;
if(10>9){
console.log(a);//10
var a =30;
if(5>4){
console.log(a);//30
var a = 40;
if(a>10){
console.log(a);//40
}
}
}
}
fn()
</script>Dom的簡單操作：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href=''>
</head>
<body>
<input id="number" type="text">
<button id="btn">判斷奇數偶數</button>
</body>
</html>
<script>
function handlerClick(){
// document.getElementById('btn').onclink = function(){
// 拿到input框里面的內容 獲取到input框
var inputValue = https://www.cnblogs.com/liu-2001/p/document.getElementById('number').value
// console.log(typeof inputValue);
// 判斷
if(inputValue%2==0){
console.log('偶數');
}else{
console.log('奇數');
}
}
// 首先需要點擊按鈕 獲取按鍵 加點擊事件
// 事件觸發自動呼叫對應的函式（事件驅動）
document.getElementById('btn').onclick = handlerClick
// 1.獲取對應的標簽（通過id獲取）
// document.getElementById('id的屬性值')
// 2.input框的值獲取value屬性
// document.getElementById('input框的id').value
// 3.點擊事件 onclink
//
</script>輸入搜索內容列印出來，同按鈕實作：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href=''>
</head>
<body>
<input id="number" type="text" placeholder="請輸入電影名">
<button id="btn">搜索</button>
<script>
function handlerClick(){
// 拿到input框里面的內容 獲取到input框
var search = document.getElementById('number')
console.log(search.value);
// 將value為空值
search.valuehttps://www.cnblogs.com/liu-2001/p/= ""
}
// 首先需要點擊按鈕 獲取按鍵 加點擊事件
// 事件觸發自動呼叫對應的函式（事件驅動）
document.getElementById("btn").onclick = handlerClick
</script>
</body>
</html>今日練習！！！
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href=''>
</head>
<body>
<input type="text" id="number1">
<select name="" id="s">
<option value="https://www.cnblogs.com/liu-2001/p/+">+</option>
<option value="https://www.cnblogs.com/liu-2001/p/-">-</option>
<option value="https://www.cnblogs.com/liu-2001/p/*">*</option>
<option value="https://www.cnblogs.com/">/</option>
</select>
<input type="text" id="number2">
=
<input type="text" id="result">
<button id="btn">計算</button>
<script>
// 簡易計算器
function computer(){
// 獲取兩個輸入框的值
var number1 = document.getElementById('number1').value
var number2 = document.getElementById('number2').value
// 獲取下拉串列的值
var s = document.getElementById('s').value
// 設定結果
document.getElementById('result').value = https://www.cnblogs.com/liu-2001/p/fn2(Number(number1),Number(number2),s)
}
document.getElementById('btn').onclick = computer
</script>
</body>
</html>
<script>
function fn1() {
// 遍歷陣列
var result =1;
for(var i = 0;i<arguments.length;i++){
result *= arguments[i]
}
return result
}
console.log(fn1(1,2,3));
</script>
<script>
// 實作加減乘除運算
// function fn2(n1,n2){
// var sum = n1+n2;
// var reduce = n1 - n2;
// var product = n1*n2;
// var quotient = n1/n2;
// console.log('兩數相加為' + sum);
// console.log('兩數相減為' + reduce);
// console.log('兩數相乘為' + product);
// console.log('兩數相除為' + quotient);
// }
// fn2(3,2)
</script>
<script>
// 第二種方法
function fn2(number1,number2,s){
var result = 0
switch(s){
case '+':
result = number1+number2
break
case '-':
result = number1-number2
break
case '*':
result = number1*number2
break
case '/':
result = number1/number2
break
default:
console.log('引數錯誤');
}
return result
}
console.log(fn1(10,20,'+'));
</script>
<script>//寫個函式實作n的階乘
function fn3(n){
if(n==1){
return 1;
}else {
return fn3(n-1)*n
}
}
console.log(fn3(3));
</script>
<script>//找出0-100之間7的倍數，和包含7的數字
for(i=1;i<=100;i++){
if(i%7==0 || i%10==7 || parseInt(i/10)==7){
console.log(i);
}
}
</script>
<script>//不用回圈，計算0-100以內的數字和
function fn4(n){
if(n==1){
return 1;
}else{
return fn4(n-1)+n;
}
}
console.log(fn4(100));
</script>
<script>//兔子繁殖問題，設有一只新生兔子，從第四個月開始他們每個月, 月初都生一只兔子, 新生的兔子從第四個月
//月初開始又每個月生一只兔子按此規律，并假定兔子沒有死亡,
// n(n<=20)個月月末共有多少只兔子？
function fn5(n){
if(n==1 || n==2 || n==3){
return 1;
}else{
return fn5(n-1)+fn5(n-3)
}
}
console.log(fn5(20));
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500547.html
標籤：JavaScript
上一篇：js中函式的概念及方法