前端基礎之JS

JavaScript引入方式

Script標籤內寫代碼

<script>
  // 在這裏寫你的JS代碼
</script>

引入額外的JS文件

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

JavaScript註釋

//單行註釋

/*
這是多行註釋
*/

結束符

JavaScript中的語句要以分號(;)結尾

1、JavaScript語言基礎

變量聲明

1.變量名的命名能夠是由數字，字母，下劃線，$組成，不能以數字開頭

2.聲明變量用(var 變量名;)的格式來進行聲明

var name = "Alex";
var age = 18;

在ECMA6最新語法中：也能夠用(let 變量名;)的格式來聲明

let name = 'jason'

var與let的區別：

　　var做用的是全局，修改變量的值

　　let做用的是局部，能夠保證變量的值不被隨意的修改

 

 

 

 

 

 ES6新增const用來聲明常量。一旦聲明，其值就不能改變

const pi = 3.1415926

2、JavaScript數據類型

JavaScript擁有動態類型

var x;  // 此時x是undefined
var x = 1;  // 此時x是數字
var x = "Alex"  // 此時x是字符串 

1.數值（Number）

JavaScript不區分整型和浮點型，就只有一種數字類型

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

還有一種NaN，表示不是一個數字（Not a Number）。

經常使用方法：

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN屬性是表明非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("123.456")  // 返回123.456
parseInt('111jasfjd')  //返回111  字符裏面既有數字又有字符返回的開頭的數字
parseInt('11.11')  //返回11

2.字符串

js中字符串的拼接推薦你使用加號(python不推薦使用加號由於效率極低)

var a = "Hello"
var b = "world''
var c = a + b; 
console.log(c);  // 獲得Helloworld

ES6新語法模板字符串,用反引號（'）標識。便可以當作普通字符串使用，也能夠用來定義多行字符串，也支持字符串的替換。

使用  ${},進行佔位

// 普通字符串
`這是普通字符串！`
// 多行文本
`這是多行的
文本`
// 字符串中嵌入變量
var name = "jason", time = "today";
`Hello ${name}, how are you ${time}?`

經常使用方法：

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

 

 

 

 

 

 

 

 

 

 

 

3.布爾值

區別於python,true和false都是小寫

var a = true;
var b = false;

4.null和undefined

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

null表示變量的值是空(null能夠手動清空一個變量的值，使得該變量變爲object類型，值爲null)，undefined則表示只聲明瞭變量，但尚未賦值。

var ss;   //undefined

ss=null;  //null

5.對象(object)

JavaScript 中的全部事物都是對象：字符串、數值、數組、函數...此外，JavaScript 容許自定義對象(字典)。

JavaScript 提供多個內建對象，好比 String、Date、Array 等等。

對象只是帶有屬性和方法的特殊數據類型。

數組

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

經常使用方法：

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

 

 

 

 

.forEach()    將數組的每一個元素傳遞給回調函數

語法：

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

 

 

 

 .splice()   刪除元素，並向數組添加新元素。

 

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

 

 遍歷數組中的元素

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(i);
}

6.類型查詢   typeof

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

對變量或值調用 typeof 運算符將返回下列值之一：

• undefined - 若是變量是 Undefined 類型的
• boolean - 若是變量是 Boolean 類型的
• number - 若是變量是 Number 類型的
• string - 若是變量是 String 類型的
• object - 若是變量是一種引用類型或 Null 類型的

3、運算符

1.算數運算符

+ - * / % ++ --
var x=10;
var res1=x++;
var res2=++x;

res1;
10
res2;
12

這裏因爲的x++和++x在出現賦值運算式，x++會先賦值再進行自增1運算，而++x會先進行自增運算再賦值！

2.比較運算符

> >= < <= != == === !==

1 == 「1」  // true  弱等於
1 === "1"  // false 強等於

3.邏輯運算符

&& || !

 

 4.賦值運算符

= += -= *= /=

4、流程控制

1.if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

2.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");
}

3.switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

switch中的case子句一般都會加break語句，不然程序會繼續執行後續case中的語句。

4.for

for (var i=0;i<10;i++) {
  console.log(i);
}

5.while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

6.三元運算

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

 

 5、函數

函數定義

JavaScript中的函數和Python中的很是相似，只是定義方式有點區別。

// 普通函數定義
function f1() {
  console.log("Hello world!");
}

// 帶參數的函數
function f2(a, b) {
  console.log(arguments);  // 內置的arguments對象
  console.log(arguments.length);
  console.log(a, b);
}

// 帶返回值的函數
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 調用函數

// 匿名函數方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 當即執行函數 書寫當即執行的函數，首先先寫兩個括號()()這樣防止書寫混亂
(function(a, b){
  return a + b;
})(1, 2);

View Code

 

 

 

 

 

 

 

 使用‘箭頭’（==>）定義函數

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

若是箭頭函數不須要參數或須要多個參數，就是用圓括號表明參數部分：

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

var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2){
  return num1 + num2;  //這裏的return只能返回一個值，若是想返回多個值須要本身手動給他們包一個數組或對象中
}

6、內置對象和方法

JavaScript中的全部事物都是對象：字符串、數字、數組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數據。

咱們在學習基本數據類型的時候已經帶你們瞭解了，JavaScript中的Number對象、String對象、Array對象等。

自定義對象

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

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

遍歷對象中的內容：

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

 

 建立對象  （使用new關鍵字）

var person=new Object();  // 建立一個person對象
person.name="Alex";  // person對象的name屬性
person.age=18;  // person對象的age屬性

Date對象  建立Date對象

//方法1：不指定參數
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：參數爲日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：參數爲毫秒數
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

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

Date對象的方法：

var d = new Date(); 
//getDate()                 獲取日
//getDay ()                 獲取星期
//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);   #loads
// 對象轉換成JSON字符串 
var str = JSON.stringify(obj1);   #dumps

RegExp對象