day44 js

js介紹

是前端的一段編程語言（也是有邏輯的）

node.js 支持前端js代碼跑在後端服務器上

js跟Java的關係？

​ 半毛錢的關係都沒有

​ 緣由：當初Java火 想蹭熱度

js是網警公司開發的 想讓索引的瀏覽器都支持該語言，折中 更名字 js也叫ECMAScript（二者等價）

當前使用較多的版本 ECMAScript5.1 ECMAScript6（簡稱ES6）

註釋

單行註釋： //

多行註釋：

/*

*/

引入方式

1.script標籤內部直接書寫

<script>
    alert(123)
</script>

2.經過script標籤內src屬性引入外部js文件

<script src="js.js"></script>

js變量

在js中聲明變量須要使用關鍵字

變量命名規範；

​ 1.由數字 字符 下劃線 $組成,不能以數字開頭

​ 2.不能用關鍵字做爲變量名，區分大小寫

​ 3.推薦使用駝峯體命名

​ python推薦使用下劃線（C++）

​ username='jason'

​ js推薦使用駝峯體

​ userName='jason'

​ js代碼默認以分號做爲結束符,不寫也沒有問題

confirm('are you sure');

var與let的區別

var：聲明的是全局有效

let：能夠只在局部有效，let局部聲明只會在局部有效，不會影響全局（ES6新語法）

var name ='jason';
let name= 'oscar';

js中有常量,const 定義正常的常量 不能修改

const PI =3.1415

js數據類型

js擁有動態類型

var x;//x是undefined
var x=1;//x是數字
var x='alex'//x是字符串

數值類型Number

js包含整形浮點型int float

var a=12.34;
var b=10;

NaN也是數值類型，但表示的意思是 不是一個數字

var a=123
parseInt(a)//123
var b='sdfgd'
parseInt(b)//NaN
var c='122axs456'
parseInt(c)//122 只要字符串裏有數字就會將數字拿出來
var d='123.123.123'
parseFloat(d)//123.123

字符類型string

字符串的拼接:python 不推薦使用加好（效率極低） 用 %是format js中推薦使用加號

var a='Hello'
var b='world'
console.log(a+b)//Helloworld

常見方法：

方法	說明
.length	返回長度
.trim()	移除空白
.trimLeft()	移除左邊空白
.trimRight()	移除右邊空白
.charAt(n)	返回第n個字符
.concat(value,...)	拼接
.indexOf(substring,strat)	子序列位置
.substring(from,to)	根據索引獲取子序列
.slice(start,end)	切片
.toLowerCase()	小寫
.toUpperCase()	大寫
.split(deliniter,limit)	分割

//返回長度  .length
var name='jasonjsaon'
name.length//10

//移除空白  .trim()
var name='  jason  jason   '
name.trim()//"jason  jason"

// 返回第n個字符  .charAt(n) 根據索引取值
var name='jsaonjason'
name.charAt(3)//"o"

//子序列位置  indexOf(substring,start)  根據值找索引
var name='jsaonjason'
name.indexOf('n')//4

//拼接  .concat(value,....)
var name='jsaonjason'
name.concat('dsbdsbdsb')//"jsaonjasondsbdsbdsb"

//根據索引獲取子序列  .substring(from,to)
name.substring(1,4)//"sao" 不支持負數

//分割  .split(delimiter,limit)
name.slice(1,4)//"sao"
name.slice(0,-2)//"jsaonjas"
name.slice(2)//"aonjason"

//大小寫  .toLOwerCase()  .toUpperCase()
var name='Kdsd'
name.toLocaleUpperCase()//"KDSD"
name.toLocaleLowerCase()//"kdsd"

如何定義多行文本

模板字符串是加強版字符串，要用反引號··

var name='nick';
var age=18
var res =`
my nageame is ${name} my age is ${age}
`/*"
my nageame is nick my age is 18
"*/

布爾值Boolean

區別於python，js中true和false都是小寫的

var a=true//true
var b=false;//false

注意：空字符串，0，null,undefined,NaN都是false

null和undefined

null 表示值是空，通常在須要制定或狀況一個變量時纔會用到，如name=null

undefined 表示當聲明一個變量但未初始化時，該變量的默認值是undefined。函數無明確返回值時，返回的也是undefined.

null表示變量的值是空（null能夠手動清空一個變量的值，使得該變量變成object類型，職位null），undefined則表示只是聲明瞭變量，可是還沒賦值

對象object

數組 [] 自定義對象{}

js其實也是面向對象編程，對象只是帶有屬性和方法的特殊數據類型

數組

數組對象的做用是：使用單獨的變量名來儲存一系列的值。相似於python中的列表

方法	說明
.length	數組的大小
.push(ele)	尾部追加元素
.pop	獲取尾部的元素
.unshift(ele)	頭部插入元素
.shift()	頭部移除元素
.slice(start,end)	切片
.reverse()	反轉
.join(seq)	將數組元素鏈接成字符串
.concat(val,...)	鏈接數組
.sort()	排序
.forEach()	將數組的每個元素傳遞給回調函數
.splice()	刪除元素，並向數組添加新元素
.map()	返回一個數組元素調用函數處理後的值的新數組

//數組的大小  .length
var l1=[1,2,3,4,5,6,7,8,9]
l1.length//9

//尾部追加元素  .push(ele)
l1.push(666)//10
l1//(10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 666]

//獲取尾部的元素  .pop()
l1.pop()//666
l1//(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

//頭部插入元素   .unshift(ele)
l1.unshift(666)//10
l1//(10) [666, 1, 2, 3, 4, 5, 6, 7, 8, 9]

//頭部移除元素  .shift()
l1.shift(666)//666
l1//(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

//切片   .slice(start, end)
l1.slice(1,4)//(3) [2, 3, 4]
l1.slice(1,-1)//(7) [2, 3, 4, 5, 6, 7, 8]

//反轉  .reverse()
l1.reverse()//(9) [9, 8, 7, 6, 5, 4, 3, 2, 1]
l1//(9) [9, 8, 7, 6, 5, 4, 3, 2, 1]

//將數組元素鏈接成字符串  .join(seq)
l1.join(',')//"9,8,7,6,5,4,3,2,1"

//鏈接數組  .concat(val, ...)
l1.concat([99,88,66])//(12) [9, 8, 7, 6, 5, 4, 3, 2, 1, 99, 88, 66]
l1//(9) [9, 8, 7, 6, 5, 4, 3, 2, 1]

//排序  .sort()
l1.sort()//(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

forEach()

將數組的每一個元素傳遞給回調函數

語法：

forEach(function(currentValue,index,arr),thisValue)

參數	說明
currentValue	必需。當前元素
index	可選。當前元素的索引值
arr	可選。當前元素所屬的數組對象
thisValue	可選。傳遞給函數的值通常用「this」值。若是這個參數爲空，「undefined」會傳遞給「this"值

//for循環取出每個元素交給函數處理
var l2=[11,22,33,44,55,66]
l2.forEach(function(index,obj){
console.log(index,obj)
})/*11 0
 22 1
 33 2
 44 3
 55 4
 66 5*/

splice()

刪除元素，並向數組添加新元素。

語法：

splice(index,howmany,item1,...,itemx)

參數	說明
index	必需。規定從何處添加/刪除元素。該參數是開始插入或刪除的數組元素的下標，必須是數字
howmany	必須。規定應該刪除多少元素。必須是數字，但能夠是0.可是未規定詞參數，則刪除從index開始到原數組結尾的全部元素
item1,...,itemx	可選。要添加到數組的新元素

//第一個參數是起始位，第二個參數是刪除個數，第三個參數是刪除後加入的  第三個參數後有多少個就加多少個
l2//(6) [11, 22, 33, 44, 55, 66]
l2.splice(1,2)//(2) [22, 33]
l2//(4) [11, 44, 55, 66]
l2.splice(1,1,[111,222,333])//[44]
l2//(4) [11, Array(3), 55, 66]
l2.splice(1,1,888,999)//[Array(3)]
l2//(5) [11, 888, 999, 55, 66]

map

返回一個數組元素調用函數處理後的值的新數組

語法：

map(function(currentValue,index,arr),thisValues)

參數	說明
currentValue	必需。當前元素的值
index	可選。當前元素的索引值
arr	可選。當前嚴肅屬於的數組對象
thisValue	可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。 若是省略了 thisValue ，"this" 的值爲 "undefined"

var l2=[11,22,33,44,55,66]
l2.map(function(value,index,arr){
return value+1
})//(6) [12, 23, 34, 45, 56, 67]

typeof用來查看數據類型的

typeof l2

python中往列表添加數據的方式：append尾部追加 insert按照索引插入 extend擴展列表

python中列表刪除元素：remove（沒返回值） pop（有返回值） del

運算符

算數運算符

+ - * / % ++ --
var x=10
var res1=x++//先賦值再自增
var res2=++x//先自增再賦值
res1//10
res2//12

比較運算符

> >=  <  <=  !=  ==  ===  !==
1=='1'//true 弱等於  內部自動轉化成相同的數據類型進行比較
1==='1'//false  強等於   不會進行數據類型的轉換 直接進行比較

邏輯運算符

python       js
and         &&
or           ||
not          !

賦值運算符

=   +=  -=  *=  /=

流程控制

if-else

var a=10
if (a>10){
    console.log('yes')
}else{
    console.log('no')
}//no

if -else if-else

var a=10
if (a>5){
    console.log('a>5')
}
else if (a<5){
    console.log('a<5')
}
else{
    console.log('a=5')
}//a>5

switch

var day=new Date().getDay();
switch (day){
    case 0:
        console.log('sunday')
        break
    case 1:
        console.log('monday')
        break
    default:
        console.log('.....')
}//.....

for

for (var i=0;i<5;i++){
    console.log(i)
}/*0
 1
 2
3
4*/

while

var i=0
while (i<5){
   console.log(i) 
    i++
}/*0
 1
 2
3
4*/

三元運算

var a=1
var b=2
var c=a>b?a:b//這裏的三元運算順序是先寫判斷條件a>b再寫條件成立返回的值爲a，條件不成立返回的值爲b；三元運算能夠嵌套使用var x=a>b ?a:(b=="20")?a:b;
c//2

函數

函數定義

普通函數定義

function f1(){
    console.log('hello world')
}
f1()//hello world

帶參數的函數

function f2(a,b){
    console.log(arguments)
    console.log(arguments.length)
    console.log(a,b)
}//內置的arguments接收用戶傳入的索引參數，組成數組
f2(1,2)/*Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
2
1 2*/

帶返回值的函數

function sum(a,b){
    return a+b
}
sum(1,2)//3

匿名函數方式

var sum=function(a,b){
    return a+b
}
sum(1,2)//3

當即執行函數

書寫當即執行的函數，首先先寫兩個括號（）（）這樣防止書寫混亂

(function(a,b){
    return a+b
})(1,2)//3

補充

ES6中容許使用箭頭（=>)定義函數

var f=v=>v
//等同於
var f=function(v){
    return v
}

var f=()=>5
//等同於
var f=function(){
    return 5
}

var sum=(num1,num2)=>num1+nim2
//等同於
var sum=function(num1,num2){
    return num1+num2
}

函數中的arguments參數

function add(a,b){
    console.log(a+b)
    console.log(arguments.length)
    console.log(arguments[0])//arguments至關於將傳入的參數所有包含，這裏取得就是一個個元素
}
add(1,2)/*3
 2
 1*/

注意：函數只能返回一個值，若是要返回多個值，只能將其防砸數組或者對象中返回

函數的全局變量和局部變量

局部變量

在js函數內部聲明的變量（使用var)是局部變量，因此只能在函數內部訪問它（該變量的做用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。

全局變量

在函數外聲明的變量時全局變量，網頁上的全部腳本和函數都能訪問它

變量生存週期

js變量的生命期是從他們被聲明的時間開始。局部變量會在函數運行之後被刪除。全局變量會在頁面關閉後被刪除。

做用域

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}
f();//ShenZhen

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();//BeiJing

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();//ShangHai

內置對象和方法

自定義對象

js對象（object）本質上是鍵值對的集合（Hash結構），可是隻能用字符串做爲鍵

var a={'name':'nick','age':18}
console.log(a.name)//nick
console.log(a['age'])//18

遍歷對象中的內容

for (var i in a){
    console.log(i,a[i])
}/*name nick
 age 18*/

建立對象：

var person=new Object()//建立一個person對象
person.name='nick'
person.age=18
person//{name: "nick", age: 18}

注意：

ES6中提供了Map數據結構，他相似於對象，也是鍵值對的集合，可是鍵的範圍不限於字符串，各類類型的值（包括對象）都何以做鍵，也就是說，Object結構提供了 字符串-值 的對應 Map結構提供了 值-值的對應，是一種更完善的Hash結構實現

var m = new Map();
var o = {p: "Hello World"}

m.set(o, "content"}//m.o='content' 好像也能夠
m.get(o)  // "content"//m.o好像也行

m.has(o)  // true
m.delete(o)  // true
m.has(o) // false

Date對象

//方法1：不指定參數
var d1=new Date()
console.log(d1.toLocaleString())//2019/11/16 下午4:30:28
d1//Sat Nov 16 2019 16:30:28 GMT+0800 (中國標準時間)

//方法2:參數爲日期字符串
var d2=new Date('2004/3/20 11:12')
console.log(d2.toLocaleString())//2004/3/20 上午11:12:00
var d3=new Date('04/03/02 11:12')
console.log(d3.toLocaleString())//2002/4/3 上午11:12:00

//方法3：參數爲毫秒數
var d3=new Date(5000)
console.log(d3.toLocaleString())//1970/1/1 上午8:00:05
console.log(d3.toUTCString())//Thu, 01 Jan 1970 00:00:05 GMT

//方法4：參數爲年月日時分秒毫秒
var d4=new Date(2004,2,20,11,12,0,300)
console.log(d4.toLocaleString())//2004/3/20 上午11:12:00  毫秒並不直接顯示

Date對象的方法：

var d=new Date()

方法名	功能
getDate()	獲取日
getDay()	獲取星期（0-6）
getMonth()	獲取月（0-11）
getFullYear()	獲取完全年份
getYear()	獲取年(通過多少年)
getHours()	獲取小時
getMinutes()	獲取分鐘
getSeconds()	獲取秒
getMilliseconds()	獲取毫秒
getTime()	返回累計毫秒數（從1970/1/1午夜）

json對象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串轉換成對象
var obj = JSON.parse(str1); 
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);

RegExp對象

// 定義正則表達式兩種方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

// 正則校驗數據
reg1.test('jason666')
reg2.test('jason666')

/*第一個注意事項，正則表達式中不能有空格*/ 

// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二個注意事項，全局匹配時有一個lastIndex屬性*/

// 校驗時不傳參數
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();