javaScript的基礎文法筆記

(一)變量的命名規則和規範

規則 - 必須遵守的，不遵守會報錯
- 由字母、數字、下劃線、$符号組成，不能以數字開頭
- 不能是關鍵字和保留字，例如：for、while。
- 區分大小寫
規範 - 建議遵守的，不遵守不會報錯
- 變量名必須有意義
- 遵守駝峰命名法。首字母小寫，後面單詞的首字母需要大寫。例如：userName、userPassword

(二)javascript中的函數的應用

arguments屬性的應用

JavaScript中，arguments對象是比較特别的一個對象，實際上是目前函數的一個内置屬性。也就是說所有函數都内置了一個arguments對象，arguments對象中存儲了傳遞的所有的實參。arguments是一個僞數組，是以及可以進行周遊

示例：

function fun() {
    console.log(arguments);
    for(var i=0;i<arguments.length;i++){
        console.log(arguments[i]);
    }
}
fun(2,3,4);

效果圖：

javaScript基礎文法筆記javaScript的基礎文法筆記

匿名函數的使用方式

//函數表達式 -- 後半部分  匿名函數
var fn = function () {
}

//自調用函數，函數書寫完成之後便可自調用
(function () {
    console.log()
})();

(三)javascript中的對象應用

對象的字面量

var dog = {
    name : "tom",
    age : 2,
    type : "紅毛犬",
    eat : function () {
         console.log(this.name +"啃骨頭");
    }
}

console.log(dog.name);      //輸出name值
console.log(dog["name"]);    //輸出name值
dog.eat();                  //調用類中的方法

對象的動态建立new object()

// object 是一個構造函數

// new 的方式來調用構造函數

// new object() 調用構造函數會在記憶體中建立一個對象

示例：

var dag = new Object();     //建立一個對象
dag.name  = "obg";
dag.work = function () {
     console.log(this.name + "正在工作");
}

對象的周遊與删除

自定義構造函數

function Person(name, age, job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayHi = function(){
  	console.log('Hello,everyBody');
  }
}
var p1 = new Person('張三', 22, 'actor');

this 關鍵字的詳解

this 出現在一下位置，分别代表：

1.在函數中： — this 指向window

2.在方法中： — this 指向這個方法所屬的對象

3.在構造函數中： — this 指向構造函數建立的對象

對象的周遊與删除

對象的周遊：

var dog={
    name : "zs",
    age : 12,
    say : function () {
         console.log(this.name + "會說話");
    }
};

for(var key in dog){
     console.log(key + "---"+ dog[key]);
}

示例：

javaScript基礎文法筆記javaScript的基礎文法筆記

對象的屬性的删除：

var dog={
    name : "zs",
};
delete dog.name ;   //删除屬性

(四)javaScript中的内置對象

※ Math對象

Math對象不是構造函數，它具有數學常數和函數的屬性和方法，都是以靜态成員的方式提供

Math.PI						// 圓周率
Math.random()				// 生成随機數
Math.floor()/Math.ceil()	 // 向下取整/向上取整
Math.round()				// 取整，四舍五入
Math.abs()					// 絕對值
Math.max()/Math.min()		 // 求最大和最小值

Math.sin()/Math.cos()		 // 正弦/餘弦
Math.power()/Math.sqrt()	 // 求指數次幂/求平方根

※ Date對象

建立

Date

執行個體用來處理日期和時間。Date 對象基于1970年1月1日（世界标準時間）起的毫秒數。

// 擷取目前時間，UTC世界時間，距1970年1月1日（世界标準時間）起的毫秒數
var now = new Date();
console.log(now.valueOf());	// 擷取距1970年1月1日（世界标準時間）起的毫秒數

Date構造函數的參數
1. 毫秒數 1498099000356		new Date(1498099000356)
2. 日期格式字元串  '2015-5-1'	 new Date('2015-5-1')
3. 年、月、日……				  new Date(2015, 4, 1)   // 月份從0開始

擷取日期的毫秒形式

var now = new Date();
// valueOf用于擷取對象的原始值
console.log(date.valueOf())	

// HTML5中提供的方法，有相容性問題
var now = Date.now();	

// 不支援HTML5的浏覽器，可以用下面這種方式
var now = + new Date();			// 調用 Date對象的valueOf()

日期格式化方法

toString()		// 轉換成字元串
valueOf()		// 擷取毫秒值
// 下面格式化日期的方法，在不同浏覽器可能表現不一緻，一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()

擷取日期指定部分

getTime()  	  // 傳回毫秒數和valueOf()結果一樣
getMilliseconds() 
getSeconds()  // 傳回0-59
getMinutes()  // 傳回0-59
getHours()    // 傳回0-23
getDay()      // 傳回星期幾 0周日   6周6
getDate()     // 傳回目前月的第幾天
getMonth()    // 傳回月份，***從0開始***
getFullYear() //傳回4位的年份  如 2016

案例

寫一個函數，格式化日期對象，傳回yyyy-MM-dd HH:mm:ss的形式

function formatDate(d) {
  //如果date不是日期對象，傳回
  if (!date instanceof Date) {
    return;
  }
  var year = d.getFullYear(),
      month = d.getMonth() + 1, 
      date = d.getDate(), 
      hour = d.getHours(), 
      minute = d.getMinutes(), 
      second = d.getSeconds();
  month = month < 10 ? '0' + month : month;
  date = date < 10 ? '0' + date : date;
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute:minute;
  second = second < 10 ? '0' + second:second;
  return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
}

計算時間差，傳回相差的天/時/分/秒

function getInterval(start, end) {
  var day, hour, minute, second, interval;
  interval = end - start;
  interval /= 1000;
  day = Math.round(interval / 60 / 60 / 24);
  hour = Math.round(interval / 60 / 60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);
  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
  }
}

※ Array對象

建立數組對象的兩種方式
- 字面量方式
- new Array()

// 1. 使用構造函數建立數組對象
var arr = new Array();
// 建立了一個數組，裡面存放了3個字元串
var arr = new Array('zs', 'ls', 'ww');


// 2. 使用字面量建立數組對象
var arr = [1, 2, 3];

檢測一個對象是否是數組
- instanceof
- Array.isArray() HTML5中提供的方法，有相容性問題
函數的參數，如果要求是一個數組的話，可以用這種方式來進行判斷
toString() / valueOf()
- ==toString()==把數組轉換成字元串，逗号分隔每一項
- valueOf() 傳回數組對象本身
數組常用方法

// 1 棧操作(先進後出)
>>==push()==<<
>>==pop()==<<		//取出數組中的最後一項，修改length屬性

// 2 隊列操作(先進先出)
>>==push()==<<
>>==shift()==<<		//取出數組中的第一個元素，修改length屬性
>>==unshift()==<< 	//在數組最前面插入項，傳回數組的長度

// 3 排序方法
>>==reverse()==<<	//翻轉數組
>>==sort()==<<; 	//即使是數組sort也是根據字元，從小到大排序

// 4 操作方法
>>==concat()==<<  	//把參數拼接到目前數組
>>==slice()==<< 	//從目前數組中截取一個新的數組，不影響原來的數組，參數start從0開始,end從1開始
>>==splice()==<<	//删除或替換目前數組的某些項目，參數start, deleteCount, options(要替換的項目)

// 5 位置方法
>>==indexOf()、lastIndexOf()==<<   //如果沒找到傳回-1

// 6 疊代方法 不會修改原數組(可選)  html5
>>==every()、filter()、forEach()、map()、some()==<<

// 7 方法将數組的所有元素連接配接到一個字元串中。
>>==join()==<<

清空數組

// 方式1 推薦 
arr = [];
// 方式2 
arr.length = 0;
// 方式3
arr.splice(0, arr.length);

案例

工資的數組[1500, 1200, 2000, 2100, 1800],把工資超過2000的删除

var array =  [1500, 1200, 2000, 2100, 1800];
array = array.filter(function (item, index) {
  if (item < 2000) {
    return true;
  }
  return false;
});
console.log(array);

[“c”, “a”, “z”, “a”, “x”, “a”]找到數組中每一個a出現的位置

var array =  ['c', 'a', 'z', 'a', 'x', 'a'];
do {
  var index = array.indexOf('a',index + 1);
  if (index != -1){
    console.log(index);
  }
} while (index > 0);

編寫一個方法去掉一個數組的重複元素

var array =  ['c', 'a', 'z', 'a', 'x', 'a'];
function clear() {
  var o = {};
  for (var i = 0; i < array.length; i++) {
    var item = array[i];
    if (o[item]) {
      o[item]++;
    }else{
      o[item] = 1;
    }
  }
  var tmpArray = [];
  for(var key in o) {
    if (o[key] == 1) {
      tmpArray.push(key);
    }else{
      if(tmpArray.indexOf(key) == -1){
        tmpArray.push(key);
      }
    }
  }
  return tmpArray;
}

console.log(clear(array));

※ String對象

字元串對象的常用方法

字元串所有的方法，都不會修改字元串本身(字元串是不可變的)，操作完成會傳回一個新的字元串

// 1 字元方法
charAt()    	//擷取指定位置處字元
charCodeAt()  	//擷取指定位置處字元的ASCII碼
str[0]   		//HTML5，IE8+支援 和charAt()等效

// 2 字元串操作方法
concat()   		//拼接字元串，等效于+，+更常用
slice()    		//從start位置開始，截取到end位置，end取不到
substring() 	//從start位置開始，截取到end位置，  end取不到
substr()   		//從start位置開始，截取length個字元

// 3 位置方法
indexOf()   	//傳回指定内容在元字元串中的位置
lastIndexOf() 	//從後往前找，隻找第一個比對的

// 4 去除空白   
trim()  		//隻能去除字元串前後的空白

// 5 大小寫轉換方法
to(Locale)UpperCase() 	//轉換大寫
to(Locale)LowerCase() 	//轉換小寫

// 6 其它
search() 	//搜尋，傳回指定内容在字元串中的位置，支援正規表達式
replace()	//替換字元
split()		//分割字元

案例

"abcoefoxyozzopp"查找字元串中所有o出現的位置

var s = 'abcoefoxyozzopp';
var array = [];
do {
  var index = s.indexOf('o', index + 1);
  if (index != -1) {
    array.push(index);
  }
} while (index > -1);
console.log(array);

把字元串中所有的o替換成!

var s = 'abcoefoxyozzopp';
var index = -1;
do {
  index = s.indexOf('o', index + 1);
  if (index !== -1) {
    // 替換
    s = s.replace('o', '!');
  }
} while(index !== -1);
console.log(s);

把字元串中的所有空白去掉’ abc xyz a 123 ’

var s = '   abc       xyz  a    123   ';   
var arr = s.split(' ');
console.log(arr.join(''));

判斷一個字元串中出現次數最多的字元，統計這個次數

var s = 'abcoefoxyozzopp';
var o = {};

for (var i = 0; i < s.length; i++) {
  var item = s.charAt(i);
  if (o[item]) {
    o[item] ++;
  }else{
    o[item] = 1;
  }
}

var max = 0;
var char ;
for(var key in o) {
  if (max < o[key]) {
    max = o[key];
    char = key;
  }
}

console.log(max);
console.log(char);

擷取url中?後面的内容，并轉化成對象的形式。例如：http://www.itheima.com/login?name=zs&age=18&a=1&b=2

var url = 'http://www.itheima.com/login?name=zs&age=18&a=1&b=2';
// 擷取url後面的參數
function getParams(url) {
  // 擷取? 後面第一個字元的索引
  var index = url.indexOf('?') + 1;
  // url中?後面的字元串 name=zs&age=18&a=1&b=2
  var params = url.substr(index);
  // 使用& 切割字元串 ，傳回一個數組
  var arr = params.split('&');
  var o = {};
  // 數組中每一項的樣子 key = value
  for (var i = 0; i < arr.length; i++) {
    var tmpArr = arr[i].split('=');
    var key = tmpArr[0];
    var value = tmpArr[1];

    o[key] = value;
  }
  return o;
}

var obj = getParams(url);
console.log(obj);

console.log(obj.name);
console.log(obj.age);

javaScript基礎文法筆記javaScript的基礎文法筆記

javaScript的基礎文法筆記

(一)變量的命名規則和規範

(二)javascript中的函數的應用

(三)javascript中的對象應用

(四)javaScript中的内置對象

※ Math對象

※ Date對象

案例

※ Array對象

案例

※ String對象

案例

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條