JavaScript基礎內容
關於js
js輸出
//js輸出：
// prompt('這是一個網頁彈窗輸入框');
// alert('彈出警示框');
// console.log('控制檯輸出列印資訊，測試使用');
js變數
//變數
//1.宣告變數並賦值，即變數初始化： var age=18; var name='name';自動分配記憶體空間
// 常用變數名：
// var name = prompt("請輸入你的名字"); //prompt所取值是字元型
// alert(name);
//只宣告不賦值則：未定義undefined
//不宣告不賦值直接使用會報錯
//變數命名規範：字母數位下劃線美元符 首字母小寫後面單詞大寫
// //
// var temp;
// var app1=1;
// var app2=2;
// temp=app1;
// app1=app2;
// app2=temp;
// js的變數數據型別由值確定，與變數名無關；
// js是動態語言，變數數據型別可變；
// 數據型別： 預設值
// Number 0
// （八進制（以0開頭）；十六進制（以0x開頭） 數位型最大值alert(Number.MAX_VALUE);最小值alert(Number.MIN_VALUE); 無窮大alert(Infinity);無窮小alert(-Infinity); NaN代表一個非數值；
// isNaN()是數位返回true，否則false）
// String
// 字串跳脫；console.log(str.length);
// 字串拼接：數值相加，字元相連；
// var age=prompt('請輸入您的年齡');
// var str='您今年'+age+'歲';
// alert(str);
// 輸出數據型別：conole.log(typeof str);
// 數據型別轉換：toString()轉成字串 var num=2;alert(num.toString());
// String()強制轉換 var num=1;alert(String(num));
// 加號拼接字串
// conole.log(parseInt(age));字元型轉換爲數位型，取整
// 去掉單位parseInt('120px'); 120
// parseInt('rem120px'); NaN
// parseFloat('age'); 取小數
// 數位型強制轉換Number(str);
// 例1：
// var year = prompt('請輸入您的出生年份');
// alert('您今年' + (2020 - year) + '歲了');
// 例2：
// var num1 = prompt('請輸入第一個數');
// var num2 = prompt('請輸入第二個數');
// alert('您的結果是' + (Number(num1) + Number(num2)));
識別符號及運算子
// 標識(zhi)符，關鍵字，保留字
// 運算子oprerator
// + 加 - 減 * 乘 / 除 % 取餘
// 浮點數直接運算會出現誤差，也不能進行等值比較，一般化爲整數後運算
// num++;
// var e = 10;
// var f = e++ + ++e; //e++=10 e=1 e=12 ++e=12
// console.log(f); //22 e++遇到+使用e值後便自增，不用等到分號
// console.log(18 == '18'); //true 預設轉換數據型別，會把字串型轉換爲數位型
// console.log(18 === '18'); //false ===全等於 數據型別與數據要完全相同
// 邏輯與 &&
// 邏輯或 ||
// console.log(123 && 456); //456
// 存在邏輯中斷
// 運算優先順序 先 && 後 ||
分支和回圈
// var age = prompt('請輸入年齡：');
// if (age > 18) {
// alert('ok');
// }
// 三元表達式 ？ ：
// var time = prompt('0~59');
// result = time < 10 ? '0' + time : time;
// switch(num){
// case value1: ;break;
// case value2: ;break;
// default: ;
// // num===value1才匹配
// }
// for (var i = 1; i <= 100; i++) {
// console.log('1');
// }
// 斷點偵錯
// var sum = 0;
// for (var i = 1; i <= 100; i++) {
// console.log(sum += i);
// }
// 列印幾行幾列星星
// var x = prompt('請輸入列印星星的行數');
// var y = prompt('請輸入列印星星的列數');
// var str = '';
// for (var i = 1; i <= x * y; i++) {
// str += '☆';
// if (i % y == 0) {
// str += '\n';
// }
// }
// console.log(str);
// var rows = prompt('請輸入列印星星的行數');
// var cols = prompt('請輸入列印星星的列數');
// var str = '';
// for (var i = 1; i <= rows; i++) {
// for (var j = 1; j <= cols; j++) {
// str += '☆';
// }
// str += '\n';
// }
// console.log(str);
//單回圈列印倒三角形未實現
// var xin = prompt('請輸入列印行數');
// var num = xin;
// var str = '';
// for (var i = 1; i <= xin * (xin + 1) / 2; i++) {
// str += '☆';
// if (i == num) {
// var j = i - num;
// str += '\n';
// num--;
// }
// }
// 雙重回圈列印倒三角形
// var xin = prompt('請輸入列印行數');
// var str = '';
// for (var i = 1; i <= xin; i++) {
// for (var j = i; j <= xin; j++) {
// str += '☆';
// }
// str += '\n';
// }
// console.log(str);
// 九九乘法表
// var str = '';
// for (var i = 1; i <= 9; i++) {
// for (var j = 1; j <= i; j++) {
// str += j + '*' + i + '=' + i * j + ' ';
// }
// str += '\n';
// }
// console.log(str);
// var message = '我愛你';
// while (message !== '我愛你') { //當 爲真則重複執行，爲假退出
// prompt('你愛我嗎');
// }
// do {
// prompt('你愛我嗎');
// } while (message !== '我愛你') //直到 爲真重複執行，爲假退出
// continue 退出當前次回圈，通常結合if使用
// break 退出整個回圈，回圈結束
陣列
// 命名規範
// var arr = new Array();
// var arr = [];
// 遍歷陣列：
// var arr = [1, 2, 3, 4, 5];
// for (var i = 0; i < arr.length; i++) {
// console.log(arr[i]);
// }
// 找出最大數
// var num = [2, 4, 1, 9, 5, 7];
// var max = num[0];
// for (var i = 0; i < num.length; i++) {
// if (max < num[i]) {
// max = num[i];
// }
// }
// console.log(max);
// 1.陣列新增元素 修改length長度 arr.length+=s; 新增元素爲empty空 undefined
// 2.直接追加 arr[4]='num';
// var arr = [1, 2];
// arr[arr.length] = 3;
// console.log(arr.length);
// console.log(arr);
// var arr = [];
// for (var i = 0; i < 10; i++) {
// arr[i] = i + 1;
// }
// 氣泡排序
// var num = [2, 4, 1, 9, 5, 7];
// for (var i = 0; i < num.length; i++) {
// for (var j = 0; j < num.length - i-1; j++) {
// if (num[j] > num[j + 1]) {
// var temp = num[j];
// num[j] = num[j + 1];
// num[j + 1] = temp;
// }
// }
// }
// console.log(num);
函數
//累加函數
// function getSum(start, end) { //形參，僅代表一個未知數，用來接收實參的數用於計算，不需宣告
// var sum = 0;
// for (var i = start; i <= end; i++) {
// sum += i;
// }
// console.log(sum);
// }
// getSum(1, 100); //實參，給定值 多餘捨棄取前面有效的，少於形參個數則定義爲undefined，結果NaN
// var get = function () { //匿名函數
// var sum = 0;
// for (var i = 1; i <= 100; i++) {
// sum += i;
// }
// return sum; //return後面的語句不執行，且只能返回一個值，返回多個值用陣列 沒有return則返回undefined
// }
// console.log(get()); //這裏犯了一個錯誤，之前get沒有加括號，導致輸出的是列印函數程式碼，這裏的get此時已經作爲函數物件而不是數，所以需要用呼叫函數的方法使用
// //求最大值
// function getArrMax(arr) {
// var max = arr[0];
// for (var i = 1; i < arr.length; i++) {
// if (arr[i] > max) {
// max = arr[i];
// }
// }
// return max;
// }
// var array = [5, 3, 6, 7];
// var re = getArrMax(array);
// console.log(re);
//arguments的使用
//arguments是一個僞陣列，用於儲存所有傳遞過來的實參
// 1. 具有陣列的length屬性
// 2. 按照索引的方式進行儲存
// 3. 沒有真正陣列的pop(),push()等方法
// arguments 此時爲陣列的數據型別
// arguments.length
// arguments[2]
// 按照陣列的方式遍歷
// for(var i=0;i<arguments.length;i++){
// console.log(arguments[i]);
// }
//利用函數翻轉任意陣列 reverse 翻轉
// function reverse(arr) {
// var newArr = [];
// for (var i = arr.length - 1; i >= 0; i--) {
// newArr[newArr.length] = arr[i];
// }
// return newArr;
// }
// var arr1 = [2, 6, 3, 8, 4];
// var re = reverse(arr1);
// console.log(re);
//求閏年
// function isRunYear(year) {
// var flag = false;
// if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
// flag = true;
// }
// return flag;
// }
// console.log(isRunYear(2000));
// function backDay(){
// var year=prompt('請輸入年份');
// if(isRunYear(year)){
// console.log(29);
// }else{
// console.log(28);
// }
// }
作用域
//作用域
//var宣告作用域
// 未宣告時作爲全域性變數
// 執行效率：
// 1.全域性變數只有瀏覽器關閉時纔會銷燬，比較佔記憶體資源 任何地方都可使用
// 2.區域性變數當我們程式執行完畢就會銷燬，比較節約記憶體資源 只能在函數內部使用
// es6新增塊級作用域{}
// 花括號外面的不能呼叫裏面的
// 作用域鏈
// 內部函數可以存取外部函數的變數， 由內而外，就近原則
// 預解析 + 程式碼執行
// 預解析js引擎會把js裡所有的 var 與 function 提升到當前作用域的最前面
// 變數預解析：只提升變數宣告，不提升賦值操作；
// 函數預解析：同理
// var a = b = c = 9; 相當於var a = 9; b = 9; c = 9; 此時b和c是全域性變數
物件
//物件
//包括屬性和方法 ：用逗號
// var object = {
// uname: 'zzh',
// sex: '男',
// sayHi: function () {
// console.log(s); //s未定義 undefined
// console.log('hi'); //輸出hi
// }
// }
// object.屬性名 = "屬性值"; //新增屬性 屬性名可以爲漢字
// object['屬性名'] = "屬性值"; //新增屬性
// console.log(object.sex); // 得到屬性值
// console.log(object['sex']); //得到屬性值
// console.log(object.屬性名);
// console.log(object);
// object.sayHi();
//第二種建立物件的方法 =用分號
// var obj = new Object();
// obj.uname = 'zz';
// obj.age = 20;
// obj.sayHi = function () {
// }
// 建構函式 建構函式名首字母大寫
// function Star(uname, age, sex) {
// this.name = uname;
// this.age = age;
// this.sex = sex;
// this.sing = function (song) {
// console.log(song);
// }
// }
// var ldh = new Star('劉德華', 18, '男'); //利用建構函式建立物件
// ldh.sing('ss');
// new關鍵字執行過程：
// 1.在記憶體中建立一個新的空物件；
// 2.this指向這個新物件；
// 3.執行建構函式裡的程式碼，給新物件新增屬性和方法；
// 4.返回新物件。
// 遍歷物件
// for (k in obj) { //一般用k 或key
// console.log(k); //得到的是屬性名
// console.log(obj[k]); //得到的是屬性值
// }
內建物件
- Math數學物件
//內建物件
//三大物件：自定義物件，內建物件，瀏覽器物件
//前兩個屬於ECMAScript
// // Math數學物件 直接使用
// console.log(Math.PI); //圓周率
// console.log(Math.max(3, 5, 7)); // 7
// console.log(Math.max(3, 's')); //NaN
//自己封裝數學物件
// var myMath = {
// PI: 3.141592653,
// max: function () {
// var max = arguments[0];
// for (var i = 1; i < arguments.length; i++) {
// if (arguments[i] > max) {
// max = arguments[i];
// }
// }
// return max;
// },
// min: function () {
// var min = arguments[0];
// for (var i = 1; i < arguments.length; i++) {
// if (arguments[i] > min) {
// min = arguments[i];
// }
// }
// return min;
// }
// }
// console.log(myMath.max(1, 5, 7));
// Math常用方法 含隱式轉換
// Math.PI //圓周率
// Math.floor() //向下取整 1.1取1
// Math.ceil() //向上取整 1.1取2
// Math.round() //四捨五入，就近取整 -3.5得-3
// Math.abs() //絕對值
// Math.max() /Math.min() //最大最小值
// 亂數
// Math.random(); 返回一個隨機小數 [0,1)
// 包含端點的隨機整數
// Math.floor(Math.random() * (max - min + 1)) + min
// 亂數函數
// function getRandom(min, max) {
// return Math.floor(Math.random() * (max - min + 1)) + min;
// }
// console.log(getRandom(1, 10));
// 猜數位遊戲
// var random = getRandom(1, 10);
// var i = 0;
// while (1) {
// var num = prompt('請輸入一個數字');
// if (num > random) {
// alert('你猜大了,還有' + (2 - i) + '次機會');
// } else if (num < random) {
// alert('你猜小了,還有' + (2 - i) + '次機會');
// } else {
// alert('恭喜你，猜對了');
// break;
// }
// i++;
// if (i >= 3) {
// alert('遊戲結束');
// break;
// }
// }
- Data日期物件
// Data()日期物件 是一個建構函式，必須使用new呼叫建立日期物件
// var date = new Date(); //有參數則返回參數時間 '2020-8-4'或'2020/8/4' 字串形式
// var year = date.getFullYear();
// var month = date.getMonth() + 1; //返回月 0-11
// var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
// var day = date.getDay(); // 1-6 星期日爲 0
// var oneday = arr[day];
// var hour = date.getHours();
// var h = hour < 10 ? '0' + hour : hour;
// var min = date.getMinutes();
// var s = date.getSeconds();
// console.log(date);
//返回當前時間函數
// function getTimer() {
// var hour = date.getHours();
// var hour = hour < 10 ? '0' + hour : hour;
// var min = date.getMinutes();
// var min = min < 10 ? '0' + min : min;
// var s = date.getSeconds();
// var s = s < 10 ? '0' + s : s;
// return hour + ':' + min + ':' + s;
// }
// console.log(getTimer());
//時間戳
// var date = new Date();
// //第一種方法
// console.log(date.valueOf()); //獲取現在距離1970年1月1日過的毫秒數
// //第二種方法
// console.log(date.getTime()); //valueOf()與getTime效果相同
// //第三種方法
// var date1 = +new Date();
// //第四種方法 H5新增
// console.log(Date.now());
// 時分秒轉換公式
// d = parseInt(總秒數 / 60 / 60 / 24); //計算天數
// h = parseInt(總秒數 / 60 / 60 % 24); //計算小時
// m = parseInt(總秒數 / 60 % 60); //計算分鐘
// s = parseInt(總秒數 % 60); //計算當前秒數
//封裝倒計時函數
// function countDown(time) {
// var nowTime = +new Date();
// var inputTime = +new Date(time);
// var times = (inputTime - nowTime) / 1000; //1秒=1000毫秒
// d = parseInt(times / 60 / 60 / 24); //計算天數 取整parseInt()
// d = d < 10 ? '0' + d : d;
// h = parseInt(times / 60 / 60 % 24); //計算小時
// h = h < 10 ? '0' + h : h;
// m = parseInt(times / 60 % 60); //計算分鐘
// m = m < 10 ? '0' + m : m;
// s = parseInt(times % 60);
// s = s < 10 ? '0' + s : s;
// return d + '天' + h + '時' + m + '分' + s + '秒';
// }
// console.log(countDown('2020-12-1 14:00:00'));
- 陣列物件
// 陣列物件
// 1.字面量建立陣列
// var srr=[1,2,3];
// 2.
// var arr1=new Array(2); 2表示陣列長度爲2，有兩個空元素
// var arr2=new Array(2,4); 等價於[2,4]
//利用函數翻轉任意陣列 reverse 翻轉
// function reverse(arr) {
// if(arr instanceof Array){
// var newArr = [];
// for (var i = arr.length - 1; i >= 0; i--) {
// newArr[newArr.length] = arr[i];
// }
// return newArr;
// }else{
// return 'error';
// }
// }
// var arr1 = [2, 6, 3, 8, 4];
// var re = reverse(arr1);
// console.log(re);
// 檢測是否爲陣列
// 1.instanceof運算子
// console.log(arr instanceof Array);
// 2.Array.isArray() H5新增，ie9以上支援
// console.log(Array.isArray(arr));
//新增刪除陣列元素方法
//1.push() //推，在陣列末尾新增陣列元素
// var arr = [1, 2, 3, 4];
// arr.push(4, 5, 6);
// console.log(arr.push(4, 5, 6)); // push完畢後會返回新的陣列長度 此例爲7
// console.log(arr);
// // 2.unshift //在陣列開頭新增陣列元素
// console.log(arr.unshift(0, 10)); //unshif也有返回值，同push
// //3.pop() //刪除最後一個元素，不跟參數，一次只能一個
// console.log(arr.pop()); // pop完畢後會返回刪除的元素
// //4.shift() 刪除第一個元素 一次一個，有返回值，不帶參數
// console.log(arr.shift());
// 陣列排序
// var arr=[1,3,5,7];
// arr.reverse(); //翻轉
// console.log(arr);
// var arr1=[3,6,13,2,4];
// arr1.sort(function(a,b){
// return a-b; //升序排列
// // return b-a; //降序排列
// });
// console.log(arr1);
//陣列索引
// var arr=[1,2,3,4];
// console.log(arr.indexOf(2)); //返回該元素索引號，只返回第一個，找不到則返回-1
// console.log(arr.lastIndexOf(3)); //從後往前查詢
//陣列去重（重點）
// function unique(arr) {
// var newArr = [];
// for (var i = 0; i < arr.length; i++) {
// if (newArr.indexOf(arr[i]) === -1) {
// newArr.push(arr[i]);
// }
// }
// return newArr;
// }
// var arr = ['c', 'a', 'x', 'a', 'c', 'z'];
// console.log(unique(arr));
// //陣列轉換爲字串
// var arr = [2, 5, 4];
// console.log(arr.toString());
// console.log(String(arr));
// //可自定義分隔符的轉換字串
// console.log(arr.join('&'));
// //concat() 連線兩個或多個數組，不影響原陣列 返回新陣列
// const array1 = ['a', 'b', 'c'];
// const array2 = ['d', 'e', 'f'];
// const array3 = array1.concat(array2); //連線多個數組 array2,array3,array4
// console.log(array3);
// //slice() 陣列擷取
// const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
// console.log(animals.slice(2)); //從索引號2起往後擷取，包括2
// // expected output: Array ["camel", "duck", "elephant"]
// console.log(animals.slice(2, 4)); // 包括2不包括4
// // expected output: Array ["camel", "duck"]
// console.log(animals.slice(1, 5));
// // expected output: Array ["bison", "camel", "duck", "elephant"]
//splice() 陣列刪除
//待續
//
//p176
- 遍歷操作基礎
//基本包裝型別：把簡單數據型別包裝成爲複雜數據型別，複雜數據型別如物件 纔有屬性和方法；
// var str = 'str';
// console.log(str.length);
// //如同
// var temp = new String('str');
// str = temp;
// temp = null;
// //字串的不可變
// var str = 'red';
// console.log(str);
// str = 'pink'; //此時是重新開闢了一個空間存放pink，然後讓str指向pink，原來的red空間仍然存在
// console.log(str);
//字串所有的方法都不會修改字串本身，操作完成會返回一個新字串
//str.indexOf('要查詢的字串',[起始位置])
//查詢字串中某個字元出現的次數
// var str = 'sidjfhffosjdf';
// var num = 0;
// var index = str.indexOf('f'); //從第一個開始找，得索引值
// while (index !== -1) { //找到了則執行
// console.log(index); //列印索引值
// num++;
// index = str.indexOf('f', index + 1); //索引值+1了繼續找，找到又得到索引值
// }
// console.log('f出現的次數是：' + num);
//查詢陣列中值出現的次數
// var color = ['red', 'blue', 'red', 'green', 'pink', 'red'];
// var index = color.indexOf('red');
// var n = 0;
// while (index !== -1) {
// console.log(index);
// n++;
// index = color.indexOf('red', index + 1);
// }
// console.log('red出現的次數是：' + n);
// //根據索引號返回字元
// var str = 'pink';
// console.log(str.charAt(2));
// //遍歷所有字元
// for (var i = 0; i < str.length; i++) {
// console.log(str.charAt(i));
// }
// //返回根據索引號返回字元的ASCII碼
// console.log(str.charCodeAt(2));
// //獲取索引號位置處字元 HTML5，IE8 + 支援 同charAt
// console.log(str[2]);
//統計出現最多的字元和次數
// var str = 'abskbdaadsf';
// var obj = {};
// for (var i = 0; i < str.length; i++) {
// var ss = str.charAt(i);
// if (obj[ss]) {
// obj[ss]++;
// } else {
// obj[ss] = 1;
// }
// }
// console.log(obj);
//console.log(obj);
//這裏有一個關鍵點：
//首先兩種新增屬性的方法
// obj.屬性名 = "屬性值";
// obj['屬性名'] = "屬性值";
//下列是第二種寫法，大同小異：
// var str = 'abskbdaadsf';
// var obj = {};
// for (var i = 0; i < str.length; i++) {
// var ss = str.charAt(i);
// if (obj[str.charAt(i)]) {
// obj[str.charAt(i)]++;
// } else {
// obj[str.charAt(i)] = 1;
// }
// }
// console.log(obj);
// console.log(obj[ss]); //1
// console.log(obj['ss']); //undefined
// console.log(obj.ss); //undefined
// 這裏主要看下面 下麪三者的區別，三種都是輸出屬性值，但寫法不同，使用也截然不同
// console.log(obj[ss]); 這裏的ss是變數名，先返回他的值作爲obj的屬性值
// console.log(obj['ss']); 這裏的ss是屬性名，本身是變數也會直接將ss作爲obj的屬性值，不會考慮其變數值
// console.log(obj.ss); 這裏ss也是直接屬性名，不會考慮其是否爲變數
// 因此，在利用屬性名求其屬性值時，
// 1.確定屬性名時用上面三種均可；
// 2.當屬性名是包含函數公式時，先賦值給變數，然後將變數使用obj[變數]
// 其他方法比如直接將表達式代入行不通，此時會把表達式當做直接屬性名
遍歷物件
//遍歷物件
// var max = 0;
// var ch = '';
// for (var k in obj) {
// //k得到的是屬性名
// //obj[k]得到的是屬性值
// if (obj[k] > max) {
// max = obj[k];
// ch = k;
// }
// }
// console.log(max);
// console.log('最多的字元是' + ch);
// 字串操作
// 字串拼接
// concat(str1,str2,str3); +更常用
// 字串擷取
// str.substr('擷取起始位置(包括起點)索引號','擷取幾個字元');
// 字串替換
// var str='aeiou';
// console.log(str.replace('a','b')); //將a替換爲b，替換一個後停止
// 替換多個
// var str1='asfghff';
// while(str1.indexOf('f')!==-1){
// str1=str1.replace('f','*');
// }
// console.log(str1);
// split字元轉換爲陣列 join陣列轉換爲字串
// var str2='red,pink,blue';
// console.log(str2.split(',')); //逗號爲分隔符，字串必須有分隔符才能 纔能轉換
// 轉換大小寫
// toUpperCase() //轉換大寫
// toLowerCase() //轉換小寫
// 簡單型別和複雜型別
// 簡單型別又叫基本數據型別或值型別，
// string,number,boolean,undefined,null null返回的是一個空物件object
// 複雜型別又叫參照型別
// Object,Array,Date
// 棧 類似於數據結構棧，存放簡單數據型別
// 堆 存放複雜數據型別
// 數據傳參是重點，具體見pink老師js基礎語法最後一節內容，贊！