JavaScript學習(一)
一、JavaScript簡介
1.一、概述
JavaScript是世界上最流行的腳本語言javascript
一個合格的後端人員，必需要精通JavaScriptcss
1.二、歷史
這篇博客詳細的介紹了JavaScript的歷史：https://blog.csdn.net/kese7952/article/details/79357868html
ECMAScript它能夠理解爲是JavaScript的一個標準java
最新版本已經到es6版本，可是大部分瀏覽器還只停留在支持es5代碼上！es6
開發環境--線上環境，版本不一致！後端
二、快速入門
2.一、引入JavaScript
- 內部標籤
<!--script標籤中寫JavaScript代碼-->
<script>
alert('hello,world!');
</script>
- 外部引入
abc.js數組
alert('hello,world!');
<!--外部引入--> <script src="js/abc.js"></script>
測試代碼瀏覽器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<!–script標籤中寫JavaScript代碼–>-->
<!--<script>-->
<!--alert('hello,world!');-->
<!--</script>-->
<!--外部引入-->
<script src="js/qj.js"></script>
<!--不用寫也默認JavaScript-->
<script type="text/javascript"></script>
</head>
<body>
</body>
</html>
2.二、基本語法入門
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--JavaScript嚴格區分大小寫-->
<script>
// 1.定義變量: 變量類型 變量名 = 變量值；
var score = 71;
//alert(score);
// 2.條件控制
if(score>60 && score<70){
alert("60-70")
}else if(score>70 && score<80){
alert("70-80")
}else {
alert("other")
}
//console.log(score) 在瀏覽器的控制檯打印變量！至關於：System.out.println(score);
</script>
</head>
<body>
</body>
</html>
瀏覽器必備調試須知：
app
2.三、數據類型
數值、文本、圖形、音頻、視頻...函數
變量
//變量名不能以數字($、_能夠)開頭 var 王者榮耀="倔強青銅";
number
js不區分小數和整數，Number
123 //參數123 123.1 //浮點數123.1 1.123e3 //科學計數法 -99 //負數 NaN //not a number Unfinity//表示無窮大
字符串
'abc' "abc"
布爾值
true、false
邏輯運算
&& 兩個都爲真，結果爲正 || 一個爲真，結果爲真 ! 真即假，假即真
比較運算符
= == 等於（類型不同，值同樣也爲此true） ===絕對等於（類型同樣，值同樣爲true）
這是js的一個缺陷，堅持不要使用 == 比較
還有：
- NaN===NaN。這個與全部的數值都不相等，包括本身
- 只能經過isNaN(NaN)來判斷這個數是不是NaN
浮點數問題：
console.log((1/3) === (1-2/3))
儘可能避免使用浮點數進行運算，存在精度問題！
console.log(Math.abs(1/3-(1-2/3))<0.00000000001)
null和undefined
- null 空
- undefined 未定義
數組
Java的數組必須是相同類型的對象，JS中不須要這樣！
//保證代碼的可讀性，儘可能使用[]
var arr=[1,2,3,'hello',null,true];
new Array(1,12,3,4,'hello');
取數組下標：若是越界了，就會：undefined
對象
對象是大括號，數組是中括號
每一個屬性之間使用逗號隔開，最後一個不須要添加
//Person person = new person(1,2,3,4,5)
var person = {
name: 'zhangsan',
age: 3,
tags: ['js','java','css','...']
}
取對象的值
person.name >'zhangsan' person.age >3
2.四、嚴格檢查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提：IDEA須要設置ES6語法
'use strict';嚴格檢查模式，預防JavaScript的隨意性致使產生的一些問題
必須寫在JavaScript的第一行
局部變量建議都是用 let 去定義
-->
<script>
'use strict'
//全局變量
let i=1;
//ES6 let
</script>
</head>
<body>
</body>
</html>
三、數據類型
3.一、字符串
一、正常的字符串咱們使用單引號或者雙引號包裹
二、注意轉義字符 \
\' \n \t \u4e2d \u### Unicode字符 "\x41" AscII字符
三、多行字符串編寫
'use strict'
//TAB鍵上面的鍵
var msg = `hello
world
你好ya
你好`
四、模板字符串
'use strict'
//TAB鍵上面的鍵
let name = "zhangsan";
let age = 5;
var msg = `hello ${name}`;
五、字符串長度
str.length
六、字符串的可變性，不可變
七、大小寫轉換
//注意，這裏是方法，不是屬性 student.toUpperCase() student.tiLowerCase()
八、student.indexOf('t')
九、substring
student.substr(1）//從下標1日後截取 student.substr(1,3)//從下標1日後截取三個
3.二、數組
Array能夠包含任意的數據類型
var arr = [1,2,34,'asnd']
一、長度
arr.length
注意：假如給arr.length賦值，素組大小就會發送變化，若是賦值太小，元素丟失
二、indexOf，經過元素得到下標索引
arr.length(2) 1
字符串的"1"和數字1是不一樣的
三、slice()按照小標截取數組的一部分(含頭不含尾)，返回一個新數組。
四、push()，pop()尾部
push: 壓入到尾部 pop： 彈出尾部的一個元素
五、unshift(),shift()頭部
unshift: 壓入到頭部 shift： 彈出頭部的一個元素
六、排序sort()
七、元素反轉reverse()
arr (3) [1, 3, 7] arr.reverse() (3) [7, 3, 1]
八、concat()
arr.concat([1,2,3]) (6) [7, 3, 1, 1, 2, 3] arr (3) [7, 3, 1]
注意：concat()並無修改數組，知識會返回一個新的數組
九、鏈接符join
打印拼接數組，使用的特定的字符串鏈接
arr
(3) [7, 3, 1]
arr.join('-')
"7-3-1"
十、多維數組
arr = [[1,2],[3,4],['a','f']]; (3) [Array(2), Array(2), Array(2)] arr[1][1] 4
數組：存儲數據(如何存，如何取，方法均可以本身實現！)
3.三、對象
若干個鍵值對
var 對象名 = {
屬性名：屬性值；
屬性名：屬性值；
屬性名：屬性值；
}
//定義了一個person對象，它有四個屬性
var person = {
name : "zhangsan",
age : 15,
email : "1224512341@163.com",
score : 44
}
js中對象{...}表示一個對象，鍵值對描述屬性xxxx：xxxx，多個屬性之間使用逗號隔開，最後一個屬性不加逗號！
JavaScript中的全部鍵都是字符串，值是任意獨享！
一、對象賦值
person.name = "lisi" "lisi" person.age "lisi"
二、使用一個不存在的對象屬性，不會報錯！
person.hah undefined
三、動態刪減屬性
delete person.name
true
person
{age: 15, email: "1224512341@163.com", score: 44}
四、動態的添加，直接給新的屬性添加值便可
person.haha = "haha"
"haha"
person
{age: 15, email: "1224512341@163.com", score: 44, haha: "haha"}
五、判斷屬性值是否在這個對象中！xxx in xxx！
'age' in person true //繼承 'toString' in person true
六、判斷一個屬性是不是這個對象自身擁有的hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
3.四、流程控制
if判斷
var age = 3;
if(age>3){
alert("haha")
}else if(age<5){
alert("wa")
}else {
alert("...")
}
while循環、避免程序死循環
while(age<100)
age = age + 1;
alert(age);
for循環
for(int i=0; i<100; i++){
alert(i);
}
forEach循環
var arr=[1,2,54,76,5,34,6,2,87,97]
//函數
arr.forEach(function (value) {
console.log(value);
})
for...in
var arr=[1,2,54,76,5,34,6,2,87,97]
//函數
for (var num in arr){
console.log(arr[num]);
}
3.五、Map和Set
//ES6
//學生的成績，學生的名字
//var names = ["tom","jack","haha"];
//var svore = [99,67,100];
var map = new Map([["tom",99],['jack',67],['haha',100]]);
let name = map.get('tom');//經過ley得到value
map.set("admin",78);
Set:無序不重複的集合
set.add(2);//添加！ set.delete(1);//刪除 console.log(set.has(3));//是否包含某個元素
3.六、iterator
遍歷map
//經過for of
var arr = [3,5,4];
for(var x of arr){
console.log(x);
}
遍歷map
var map = new Map([["tom",99],['jack',67],['haha',100]]);
for (var x of map){
console.log(x)
}
遍歷set
var set = new set([5,6,7]);
for(let x of set){
console.log(x)
}
四、函數
4.一、定義函數
定義方式一
絕對值函數
function abs(x){
if(x>=0){
return x;
}else {
return -x;
}
}
一旦執行到return表明函數結束，返回結果！
若是沒有執行return，函數執行完也會返回結果，結果就是undefined
定義方式二
var abs = function(x){
if(x>=0){
return x;
}else {
return -x;
}
}
測試結果相同
function(x){...}這是一個匿名函數，可是能夠把結果賦值給abs，經過abs就能夠調用函數！
方式一和方式二等價！
參數問題：JavaScript能夠傳任意個參數，也能夠不傳遞參數
參數傳遞是否存在問題？
假設不存在參數，如何規避？
//手動拋出異常
if(typeof x != 'number'){
throw "Not a Number";
}
arguments
arguments是一個JS免費贈送的關鍵字；
表明傳遞進來的全部的參數，是一個數組！
var abs = function(x){
console.log("x=>"+x)
for (var i=0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if(x>=0){
return x;
}else {
return -x;
}
}
測試結果
問題：arguments包含全部參數，咱們有時候想使用多餘的參數來進行附加操做，須要排除已有參數
rest
之前：
if(arguments.length>2){
for(var i = 2; i < arguments.length; i++){
//...
}
}
ES6引入的新特性，獲取除了已經定義的參數以外的全部參數
function abs(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest參數只能寫在最後面，必須用‘...’標識。
4.二、變量的做用域
在JavaScript中，var定義變量實際是有做用域的。
假設在函數體中聲明，則在函數體外不可使用
function qj(){
var x = 1;
x = x + 1;
}
x = x + 2;//Uncaught ReferenceError: x is not defined
若是兩個函數使用了相同的變量名，只要在函數內部，就不衝突
function qj() {
var x = 1;
x = x + 1;
}
function qj2() {
var x = 'A';
x = x + 1;
}
內部函數能夠訪問外部函數的成員，繁殖則不行
function qj() {
var x = 1;
function qj2() {
var y = x + 1;//2
}
var z = y + 1;//Uncaught ReferenceError: y is not defined
}
假設內部函數和外部函數的變量重名
function qj() {
var x = 1;
function qj2() {
var x = 2;
console.log('inner'+x);
}
console.log("outer"+x);
qj2();
}
qj();
在JavaScript中函數查找變量從自身函數開始，由 內 向 外 查找，假設外部存在這個同名的函數變量，則內部函數會屏蔽外部函數的變量。
提高變量的做用域
function qj() {
var x = 'x' + y;
console.log(x);
var y = 'y';
}
qj();
結論：js執行引擎，自動提高了y的聲明，可是不會提高變量有的賦值；
等價於以下代碼！
function qj() {
var y;
var x = 'x' + y;
console.log(x);
y = 'y';
}
qj();
這個是在JavaScript創建之初就存在的特性！
養成規範：全部的變量定義都放在函數的頭部，不要亂放，便於代碼的維護；
function qj() {
var x = 1,
y = x+'y',
z,i,a;
}
全局函數
x=1;
//全局變量
function f() {
console.log(x);
}
f();
console.log(x)
全局對象window
var x = 'xxx';
alert(x);
alert(window.x);//默認全部的全局變量，都會自動綁定在window對象下
alert()這個函數自己也是一個window變量；
var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
//在這裏改變它的函數體
window.alert = function () {
};
window.alert(123);//alert失效了
//恢復
window.alert = old_alert;
window.alert(456);
JavaScript實際上只有一個全局做用域，任何變量（函數也能夠視爲變量），假設沒有在函數做用範圍內找到，就會向外查找，若是在全局做用域都沒有找到，報錯RefrenceError
規範
因爲咱們全部的全局變量都會綁定在咱們的widow上，若是不一樣的js文件，使用了相同的全局變量，會產生衝突，如何減小衝突？
//惟一全局變量
var StarApp = {};
//定義全局變量
StarApp.name = "abcdef";
StarApp.add = function (a,b) {
return a + b;
}
把本身的代碼所有放入本身定義的惟一空間名字中， 下降全局命名衝突的問題
局部做用域 let
function aba() {
for (var i=0 ; i<100;i++){
console.log(i);
}
console.log(i+1);//i除了這個做用域還能使用
}
aba()
ES6 let關鍵字，解決局部做用域衝突問題！
function aba() {
for (let i=0 ; i<100;i++){
console.log(i);
}
console.log(i+1);//Uncaught ReferenceError: i is not defined
}
aba()
建議你們都使用let取定義局部做用域的變量；
常量 const
在ES6以前，怎麼定義常量？
只用用所有大寫字母命名的變量就是常量，建議不要修改這樣的值
var PI = '3.14';
console.log(PI);
PI = '213';//能夠改變這個值
console.log(PI);
在ES6引入了常量關鍵字 const
const PI = '3.14';
console.log(PI);
PI = '213';//能夠改變這個值
console.log(PI);
4.三、方法
定義方法
方法就是把函數放在對象裏面，對象只有兩個東西：屬性和方法
var lstar = {
name :"zhangsan",
birth: 2000,
//方法
age:function () {
//今年 - 出生的年
var now = new Date().getFullYear();
return now-this.birth;
}
}
//屬性
lstar.name;
//方法，必定要帶()
lstar.age();
this是默認指向調用它的那個對象；
apply
在JavaScript中能夠控制this的指向！
function getage() {
//今年 - 出生的年
var now = new Date().getFullYear();
return now - this.birth;
}
var lstar = {
name :"zhangsan",
birth: 2000,
age:getage,
}
var lstar2 = {
name :"lisi",
birth: 1999,
age:getage,
}
getage.apply(lstar,[]);//這裏指向了lstar2這個對象，參數爲空：
- 1. JavaScript學習（一）
- 2. Javascript學習一
- 3. javascript學習一
- 4. javascript 學習一
- 5. Javascript 學習 （一）
- 6. JavaScript -- API學習（一）
- 7. 一、JavaScript 基礎一 （從零學習JavaScript）
- 8. Javascript- Javascript學習
- 9. JavaScript 基礎學習（一）JavaScript 簡介
- 10. javascript學習總結（一）---初識JavaScript
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Kotlin學習（一）基本語法
- • Tomcat學習筆記（史上最全tomcat學習筆記）
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接