JavaScript基礎&入門
1、快速入門
1.1 引入script
-
內部標簽
<script> </script> -
外部應用
aaa.js
//......
test.html
<script src="aaa.js"></script>
測驗代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部引入-->
<!-- 注意：script標簽必須成對出現 -->
<script src="jk.js"></script>
</head>
<body>
<!-- script標簽內 JavaScript代碼 一般會放在bady內的最底部 -->
<script>
alert('hello world');
</script>
</body>
</html>
1.2基本變數
基本變數只有一個var
<script>
//1 定義變數 變數型別 變數名 = 變數值
var num =1;
//2.條件控制
if(2>1){
alert("true")
}
</script>
1.3 資料型別
數值，文本，圖形，音頻，視頻…
變數
var a = 1 //不能以數字開頭
number
js不區分小數和整數，Number
123//整數
123.123//浮點數
1.223e3//科學計數法
-9932//復數
NaN //not a number
字串
‘abc’ “abc”
布林值
true , false
邏輯運算
&& 兩個都為證，結果為真
|| 一個為真，結果為真
！ 真即假，假即真
比較運算子
=
1 "1"
== 等于（型別不一樣，值一樣，也會判斷為true）
=== 絕對等于(型別一樣，值一樣，結果為true)
這是一個JS的缺陷，堅持不要使用 == 比較
須知：
NaN === NaN , 這個與所有的數值都不相等，包括自己
只能通過isNaN(NaN)來潘多這個數是否是NaN
浮點數問題：
console.log((1/3) === (1-2/3))
盡量避免使用浮點數進行運算，存在精度問題
Math.abc(1/3-(1-2/3))<0.000000000001
null 和 undefined
null 空
nudefined 未定義
陣列
Java中一些列相同型別的物件~，js中不需要這樣
//保證代碼的可讀性，盡量使用[]
var arr = [1,2,3,4,5,'hello',true,null];
new Array(1,2,3,4,5,'fdsa');
取陣列下標：如果越界了，就會
undefined
物件
物件是大括號，屬豬是中括號
每個屬性之間使用逗號隔開，最后一個不需要添加
//Person person = new Person(1,2,3,4,5)
var person = {
name: "hello",
age: 3
}
取物件的值
person.name
> "hello"
1.4 嚴格檢查格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提：IDEA需要支持ES6語法
'use strcit';嚴格檢車模式，預防JavaScript的隨意性導致產生的一些問題
必須寫在JavaScript的第一行
區域變數都建議使用 let
-->
<script>
'use strcit'
//全域變數
var i = 1;
//ES6 let
let a = 1;
</script>
</head>
<body>
</body>
</html>
2、資料型別
2.1 字串
1、正常字串我們使用單引號或者雙引號包裹
*2、注意轉義字符 *
\`
\n
\t
\u4e2d \u##### Unicode字符
\x41 Ascll字符
3、多行字串撰寫
//tab 上面 esc下面
var msg =
`
hello
world
dfdsa
12435
`
4、模板字串
let name = "hello world"
let age = 3;
let msg = `你好, ${name}`
5、字串長度
console.log(str.length)
6、字串的可變性，不可變
7、大小寫轉換
//注意，這里是方法，不是屬性
student.toUpperCase()
student.toLowerCase()
8、substring
[)
student.substring(1)//從第一個字串截取到最后一個字串
student.substring(1,3) //[1,3)
2.2 陣列
Array可以包含任意的資料型別
var arr = [1,2,34,45,5,] //通過小標取值和賦值
arr[0]
arr[0] = 3
1、長度
arr.length
假如給arr.length賦值，陣列大小就會發生變化，如果賦值過小，元素就會丟失
2、indexOf，通過元素獲得下標索引
arr.indexOf(2)
1
字串的"1" 和 數字1是不一樣的
3、slice() 截取Array的一部分，回傳一個新陣列，類似于string中的substring
4、push,pop（）
push: 壓入尾部
pop: 彈出尾部的一個元素
5、unshift(),shift() 頭部
unshift: 壓入到頭部
shift： 彈出頭部的一個元素
6、排序sort
arr.sort()
7、元素反轉
arr.reverse()
[1,2,3] → [3,2,1]
8、concat()
(3)["c","b","a"]
arr.concat([1,2,3])
(6)["c","b","a",1,2,3]
arr
(3)["c","b","a"]
注意：concat（）并沒有修改陣列，只是會回傳一個新的陣列
9、鏈接符join
列印拼接陣列，使用特定的字串連接
10、多維陣列
arr = [[1,2],[3,4],["13","14"]]
arr[1][1]
4
陣列：存盤資料(如何存，如何取，方法都可以自己實作)
2.3 物件
若干個鍵值對
var 物件名 = {
屬性名：屬性值，
屬性名：屬性值，
屬性名：屬性值，
屬性名：屬性值
}
var person = {
name: "zhb",
age : 18,
email : "3187311481@qq.com",
score: 0
}
js中物件，{……}表示一個物件，鍵值對描述屬性xxx:xxxxxxx,多個屬性之間用逗號隔開，最后一個逗號不加逗號哦
JavaScript中的所有鍵都是字串，值是任意物件
1、物件賦值
person.name = "zhb"
"zhb"
person.name
"zhb"
2、使用一個不存在的物件屬性，不會報錯！undefined
person.haha
undefined
3、動態的刪減屬性
delete person.name
true
person
4、動態的添加,直接給新的屬性添加值即可
person.haha = "haha"
"haha"
person
5、判斷屬性值是否在這個物件中！
'age' in person
true
//繼承
'toString' in person
true
6、判斷一個屬性是否是這個物件自身擁有的 hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
2.4流程控制
if判斷
var age = 3;
if(age > 3){
alert("haha");
} else{
alert("┭┮﹏┭┮");
}
while回圈,避免程式死回圈
var age = 3
while(age<100){
age = age + 1
console.log(age)
}
//避免while(true) 死回圈
for回圈
for (let i = 0; i < 100; i++) {
console.log(i);
}
forEach回圈
var h = [1,23,32,45,324,53,53,2]
h.forEach(function (value) {
console.log(value)
})
2.5 Map 和 Set
ES6新特性
Map:
var map = new Map([['tom',100],['jack',97]]);
var name = map.get('tom');//通過key獲得value
map.set('haha',13245);//添加值
map.delete("haha");//洗掉
console.log(name)
Set:無序不重復的集合
set.add(1);//添加
set.delete(1);//洗掉
console.log(set.has(3));//是否包含這個元素
2.6 iterator
遍歷map
var map = new Map([['tom',100],['jack',97]]);
for (let x of map){
console.log(x)
}
遍歷陣列
var map = [1,23,4,]
for (let x of map){
console.log(x)
}
遍歷set
var set = new set ([1,23,4,])
for (let x of set){
console.log(x)
}
3、函式
3.1定義函式
定義方式一
絕對值方法
function ab(x){
if(x>=0){
return x
} else {
return -x
}
}
一旦執行到return代表函式結果，回傳結果
如果沒有執行return，函式執行完也會回傳結果，結果就是undefined
定義方式二
var a = function(x){
if(x>=0){
return x
} else {
return -x
}
}
這是一個匿名函式，但是可以吧結果賦值給a，通過a就可以呼叫函式
方式一和方式二等價
呼叫函式
a(10) //10
a(-10) //10
引數問題：JavaScript可以串任意個引數也可以不傳遞引數
rest
以前：
if(argument.length>2){
for(var i = 2; i < arguments.length;i++){
//.........
}
}
ES6引入的新特性，獲取除了已經定義的引數之外的所有引數…
function aaa(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest 引數只能寫在最后，不許使用…標識
3.2 變數的作用域
區域作用域
function f() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);// i出了作用于還可以使用
}
function f() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);// i出了作用于還可以使用
}
ES6 let關鍵字，結局了區域作用域的沖突問題！
建議大家都使用let去定義區域作用域
常量 const
在ES6之前，怎么定義常量：只有用全部大寫字母命名的變數就是常量；建議不要修改這樣的值
var pi='3.14'
console.log(pi);
pi = '242'//可以改變這個值
console.log(pi);
在ES6引入了常量關鍵字const
const pi='3.14'//只讀變數
console.log(pi);
pi = '242'//可以改變這個值
console.log(pi);
3.3 方法
var yehl = {
name:"葉鴻凌",
bitrh: 2002,
//方法
age : function () {
// 今年 - 出生年月
var now = new Date().getFullYear();
return now - this.bitrh;
}
}
//屬性
yehl.name
//方法,一定要帶括號()
yehl.age()
this.代表什么？ 把代碼拆分開如下
function getAge() {
// 今年 - 出生年月
var now = new Date().getFullYear();
return now - this.bitrh;
}
var yehl = {
name:"葉鴻凌",
bitrh: 2002,
age: getAge
}
//yehl.age() 可以 是yehl呼叫的他
//getAge() NaN window是呼叫他的
this是無法指向的，是默認指向呼叫它的物件；
apple
在js中可以控制this的指向
function getAge() {
// 今年 - 出生年月
var now = new Date().getFullYear();
return now - this.bitrh;
}
var yehl = {
name:"葉鴻凌",
bitrh: 2002,
age: getAge
}
getAge.apply(yehl,[]);//this，指向了yehl，引數為空
4、內部物件
標準物件
typeof 123
"number"
typeof "13"
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
4.1 Date
基本使用
var now = new Date();
now.getFullYear();//年
now.getMonth();//月 0~11 月
now.getDate();//日
now.getDay();//星期幾
now.getHours();//時
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//時間戳 全世界統一 1970 1.1 0:00:00 毫秒數
4.2 JSON
json是什么
早期，所有的資料傳輸習慣使用XML檔案！
- JSON(JavaScript Object Notation, JS 物件簡譜) 是一種輕量級的資料交換格式，
- 簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言，
- 易于人閱讀和撰寫，同時也易于機器決議和生成，并有效地提升網路傳輸效率，
在JavaScript一切皆為物件，任何s支持的型別都可以用son來表示；
格式
- 物件都用{}
- 陣列都用[]
- 所有的鍵值對 都是用key.value
JSON 字串 和JS物件的轉化
var user = {
name:"jfdlksa",
age: 3,
sex: "男"
}
//物件轉化為json字串
var jsonUser = JSON.stringify(user);
//json 字串轉化為物件 引數為json字串
JSON.parse('{name: "jfdlksa", age: 3, sex: "男"}')
4.3Ajax
- 原生的js寫法 xhr異步請求
- jQuery封裝號的方法his ${"#name"}.agaj("")
- axios請求
5、 面向物件編程
5.1 什么事面向物件
javascript、 java、 c#、 … 面向物件 ：javascript有些區別
類：模板
物件：具體的實體
在JavaScript這個需要大家換一下思維方式
原型：
var user = {
name:"jfdlksa",
age: 3,
run : function () {
console.log(this.name + "run");
}
}
var xm = {
name : "xm";
}
//小明的原型是user
xm._proto_ = user;
ES6之前的
function student(name) {
this.name = name;
}
//給student新增一個方法
student.prototype.hello = function () {
alert("hello")
}
class繼承
class 關鍵字實在ES6引入的
//ES6
//定義一個學生的類
class student{
constructor(name) {
this.name = name;
}
hello(){
alert("hello");
}
}
var xiaoming = new student("小明");
var xiaoming = new student("小紅");
xiaoming.hello()
繼承
<script>
//ES6
//定義一個學生的類
class student{
constructor(name) {
this.name = name;
}
hello(){
alert("hello");
}
}
class xiaoxue extends student{
constructor (name,grade){
super(name)
this.grade = grade;
}
mygrade(){
alert("我是一個小學生");
}
}
var xiaoming = new student("小明");
var xiaohong = new xiaoxue("小紅",1);
</script>
原型鏈
_ proto _
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/273739.html
標籤：其他