JavaScript Foundation

JavaScript之父：Brendan Eich 。

-基本語法：借鑒了C語言和Java語言。
-數據結構：借鑒了Java，包括將值分成原始值和對象兩大類。

函數的用法：借鑒了Scheme和Awk語言，將函數當成第一等公民，引入閉包。
原型繼承模型：借鑒了Self語言。
正則表達式：借鑒了Perl語言。
字符串和數組處理：借鑒了Python語言。

JavaScript與ECMAScript的關系？

ECMAScript規定了瀏覽器腳本語言的標準。
ECMAScript是JavaScript的規格。

如何在瀏覽器中運行JavaScript？

<script> console.log('運行JS') </script>
<script src='./*'> </script>

JavaScript 聲明變量

var a;
let a;

變量賦值

var a = 1;  //window.a = 1;  全局變量
function(){var a = 1;} //只能在函數體內訪問到變量a

ES6新增結構賦值

let a = 1; //window.a ===undefined;
{
let a,b,c;
[a,b,c=3] = [1,2];   // let a = 1; let b = 2; let b =3;
}
{
let a,b,c;
[a,,b,,c] = [1,2,3,4,5,6,7,8,9,10];
console.log(a,b,c); //1,3,5
}
{
let o = {a:1,b:2};
let {a,b} = o;
console.log(a,b);//1,2
}
{
let o = {a:1,b:2};
let {a=2,b} = o;
console.log(a,b);//1,2
}
{
let metaData = {
 number:'1',
 info:[{
name:'chen'
}]
};
let {number:Num,info:[{name:name}]} = metaData;
console.log(Num,name);   // Num:'1',name:'chen'
}
{
    function test(){
         return [1,2,3,4,5,6,7]
     }
  let a;
[...a] = test(); // let a = [1,2,3,4,5,6,7];
}
{
let a = 1; let b = 2;
[a,b] = [b,a];
console.log(a,b)  //變量交換
}
{
let a,b,c;
[a,b,...c] = [1,2,3,4,5,6,7];  // let a = 1;let b = 2; let c = [4,5,6,7];
}
{
let a,b;
({a,b} ={a:1,b:2});
console.log(a,b); // 1,2;
}

JavaScript 變量聲明提升

console.log(a); //undefind
var a = 1;
//等同如下
var a;
console.log(a);  //undefind
a = 1;

ES6:let聲明變量不提升

console.log(a); // ReferenceError: a is not defined
let a = 1;

標識符

定義：識別具體對象的一個名稱（大小寫敏感），如變量名，函數名。
規則：
- 第一個字符，可是任意Unicode字母，以及美元符號($)，和下劃線(_)。
- 第二個字符以及后面的字符，除了Unicode,美元符號以及下劃線，還可以是數字0-9。
保留字和關鍵字不能作為標識符（如：var 、class、false、true）。

注釋

單行：/這是注釋/。
多行：/*這是注釋*/。

區塊（塊級作用域）

ES5：不存在塊級作用域

{
var a = 1;
}
console.log(a); // 1

ES6:使用let、const聲明變量或常量(存在塊級作用域)

{
let a = 1; const b =1;
}
console.log(a); // ReferenceError: a is not defined
console.log(b); // ReferenceError: a is not defined
{
let a = 1;
let a = 2;
console.log(a) //"SyntaxError: Identifier 'a' has already been declared（同一作用域重復聲明一個變量報錯）。
}
{
var a = 1;
var a = 2;
console.log(a);//2 var 重復聲明同一變量取最后一次聲明的賦值。
}

條件語句

if語句

if(true){
console.log('我被執行了')
}else{
console.log('我永遠不會被執行')
}

switch語句

var f = 'apple';
if(f ==='banana'){
console.log('banana')
}else if(f==='apple'){
console.log('apple')
}
//多個if(){}else if{}嵌套時使用switch語句
switch(f){
case 'banana' : console.log('banana');
break;
case 'apple':console.log('apple');
break;
default: console.log('default');
}

三元運算符
- expression ? do(true): do(false);

 let a = false;
 let b = a ? 1:2;
 console.log(b) // 2;
}```

- while循環語句
 -

{
let i = 0;
while(i<10){
console.log(i); //0~9
i++;
}
}
{
let i = 11;
do{
console.log(i);
i--;
}while(i<10);
}

- for循環語句

for(let i=0;i<100;i++){
console.log(i);//0~99
}

- break和continue關鍵字

{
for(let i=0;i<10;i++){

if(i>=5){break;}   
 console.log(i); //0～4

}
}
{
for(let i=0; i<10;i++){
if(i<=5){continue;}
console.log(i);// 6～9
}
}

##### 數據類型
- 數值（number）
- 字符串（string）
- 布爾值（boolean） 
 - 5個假值（null,undefined,0,'',NaN）
- undefined
- null
- 對象（object）
  - 數組(Array)  是一種對象
  - 函數(Function) 是一種對象
  - 普通對象  

##### 類型轉換

{
let number = 1;
let string = number+'';
console.log(typeof string,string) //string,"1"
}
{
let number = 1;
let bool =!number;
console.log(typeof bool,bool) //boolean,false
}
{
let string = '123';
//let number = string -0;
let number = +string;
console.log(typeof number,number) //number,123
}
{
let string = 'hello';
let number = string - 0;
console.log(typeof number,number) //NaN;
}
{
let bool = true;
let number = bool -0;
//let number = !bool -0; number, 0
console.log(typeof number,number) //number,1
}

- ##### 字符串方法以及遍歷
  - ES5

//遍歷
{
let string = "hello";
for(let i = 0;i<string.length;i++){

console.log(string[i])

}
}
//method
{
let str = 'hello';
let newStr = str.substring(1,2); // [start,end)
console.log(str); // 'hello'
console.log(newStr) // 'e'
}
{
let str = 'world';
let newStr = str.substr(1,2); //start, deleteCount
console.log(str); // 'world'
console.log(newStr) // 'or'
}


- ES6

{
let string = "world";
for(let i of string){
console.log(i)
}
}

 ##### 聲明對象以及讀寫屬性、遍歷對象
- Obejct是一種無序的集合
 - ES5

{
let o = {
name:'小花',
age:18,
skill: function(){console.log('say')}
};
/*let o = new Object({
name:'小花'
}) */
console.log(o.name); //"小花"
o.name = '小草';
console.log(o['name']);//"小草"
console.log('name' in o); //true
delete o.name; //o = {};
}
{
let o = {
name:'小草',
age:18
}
for(let i in o){
console.log(i); //name,age
console.log(o[i]); //小草,18
}
}

 - ES6

{
let name = 'xiaohua',age = 16;
let o = {
name,
age,
skill(){
console.log('say')
}
}
console.log(o.skill())
}
{
let a = 'b';
let es5_obj = {
a:'c',
b:'c'
}
let es6_obj ={
[a]:'c' //key可以用變量
}
console.log(es5_obj,es6_obj);
}


##### 聲明數組、遍歷數組
- Array是一種有序的集合

- 數組的一些方法
  - ES5

{
let array = [1,2,3,[4,5,6],{5:"6",6:"7",7:"8"}]; //聲明數組
console.log(array);
console.log(array.length);//5;
for(let i = 0; i<array.length;i++){
console.log(i,"-",array[i]);
}
array.push(9,10,11,[12,13,14],{name:"array"});
console.log(array);
array.pop();
console.log(array.length);
}
{
let arr = [2,3,1,4,5];
arr.sort();
console.log(arr);//[1,2,3,4,5]
arr.sort(function(a,b){return a<b});
console.log(arr);//[5,4,3,2,1]
}
{
let arr = [1,2,3,4,5];
let deleteArr = arr.splice(0,2,0,1,2);//array.splice(start, deleteCount, item1, item2, ...)
console.log(arr);
console.log(deleteArr);
}
{
let arr = [1,2,3,4];
let arrStr = arr.join('--');
console.log(arr);
console.log(arrStr);
let newArrStr = arrStr.split('--');
console.log(newArrStr);
}

  - ES6

{ //將偽數組轉換成數組
function arg(){
argArray = Array.from(arguments,(item)=> item2); //Array.from(arrayLike[, mapFn[, thisArg]])
console.log(argArray)
}
/
argArray = Array.from(arguments);
argArray.forEach(function(item){console.log(item)})
*/
arg(1,2,3,4,5)
}
{ //填充數組
let array = [1,2,3,4,5]; //arr.fill(value) arr.fill(value, start) arr.fill(value, start, end)
newArray = array.fill(0);
console.log(newArray);
console.log(array);
console.log(array.fill(9,0,3));
console.log(array);
}
{ //遍歷數組
let array = [1,2,3,4,5];
for(let i of array){
console.log(i) //1,2,3,4,5
}
for(let i of array.keys()){
console.log(i)//0,1,2,3,4
}
for(let [i,v] of array.entries()){
console.log(i,v)
}
console.log(array.find((item)=>item>3)); //查找滿足條件，只返回第一個
console.log(array.findIndex(item=>item>3));
{
let array = [1,2,3,4,5];
console.log(array.includes(1,0))//arr.includes(searchElement, fromIndex) //是否包含
}
}



##### 聲明函數，函數提升，arguments及...rest，length屬性，閉包，同步V.S.異步
 - ES5

// var say = function(){}; 只會提升var say
function say(x){ //提升整個函數
console.log(x);
console.log(arguments) //將傳入所有實參生成一個偽數組，其實是一個key為有序下標的對象
return x //使函數具有返回值
}
say('hello'); //傳入實參
console.log(say.length);//行參個數
var c =say('hello'); //返回值賦予變量c
console.log(c);
{ //立即執行函數防止全局污染
!function(){
var a = 1;
console.log(a)
}();
!function(){
var a = 2;
console.log(a)
}();
}
{ //閉包
function f1(){
var a = 1;
function f2(){
a++;
console.log(a)
}
return f2;
}

let result = f1();
result();
}
{//同步
console.log(1);
console.log(2);
console.log(3);
}
{//異步
console.log(1);
setTimeout(function(){
console.log(2);
},3000)
console.log(3);
}

 - ES6

{ //ES6存在塊及作用域，不需要使用匿名函數來防止全局污染
let a =1 ;
console.log(a);
}
{
let a = 2;
console.log(a);
}
{
function say(x,y = 'world'){ //行參默認值
console.log(x,y);
}
say('hello');
}
{
let say = (...arg)=>{
console.log(arg);
for(let i of arg){
console.log(i);
}
console.log(typeof arg.push) //這是一個真數組，和arguments不同
}
say('hello','world');
}
{
let x = 'china';
let say = (x,y = x)=>{
console.log(x,y);
}
say('hello');//"hello hello"
}
{
let x = 'china';
let say = (z,y = x)=>{ //變量作用域，和上一個例子比較
console.log(z,y);
}
say('hello');//"hello china"
}
{
let say = (x)=> x ;//此處如果加{}就不會有返回值
/*
var say = function(x){
return x
}
*/
let result = say(100);
console.log(result)
}
{ //函數作為返回值，函數作為參數的例子
let qux= ()=> (callback)=> callback();
let result = qux();
console.log(result);
result(()=>{console.log("執行了")})
}

類、原型、繼承（面向對象）
  - ES5

{
function Person(name,age,gender){
this.name = name;
this.age =age;
this.gender = gender;
}
Person.prototype.born = function(){
console.log('born')
}
function Man(){
Person.apply(this,arguments)
this.sex = 'male'
}
let empty = function(){};
empty.prototype = Person.prototype;
Man.prototype = new empty();
console.log(Man.prototype.constructor = Man);
var man1 = new Man('張三',18,'male');
console.log(man1)
}
{
var name,age,gender;
var Person = {
name:name,
age:age,
gender:gender,
born:function(){console.log('born')}
}
var Man = Object.create(Person);
Man.sex = 'male';
console.log(Man)
}

  - ES6

{//ES6 類
class Person{
constructor(name='張三',age= 18,gender='male'){
this.name = name;
this.age =age;
this.gender = gender;
};
born(){
console.log('born')
};
die(){
console.log('die')
}
}
console.log(new Person)
class Man extends Person{//類的繼承
constructor(){
super();
this.sex = 'Man'
}
}
let man1 = new Man()
console.log(man1)
console.log(man1.born())
}

##### 標準庫
 - Array
 - String
 - Number
 - Function
 - Boolean
 - Math（console.dir(Math)  ）
  - Math.PI;              //3.141592653589793
  - Math.SQRT2;      //1.4142135623730951
  -Math.pow();
  -Math.sqrt(); 
  - Math.random()*50+50 ;// 50~100之間的偽隨機數
 - Date
  - new Date() 
    - 
       ```
{
let date = new Date();
  console.log(date);//Sat Jun 03 2017 01:27:41 GMT+0800 (CST)
  console.log(date.getFullYear())  //2017
  console.log(date.getMonth()) // 5   0~11個月
  console.log(date.getDate())  //3    
  console.log(date.getDay())  //6 星期日為0,星期一為1。
  console.log(date.getHours());
  console.log(date.getMinutes())
  console.log(date.getSeconds())
}

toLocaleString()
Promise

{
  function breakfast(callback){
     console.log('吃早飯');
     callback&&callback();
  }
  function lunch(){
     console.log('吃午飯');
  }
  console.log(breakfast(lunch))
}
{
  let breakfast = function(){
    console.log('吃早飯');
    return new Promise(function(resolve,reject){
      resolve();
    })
  } 
  let lunch = function(){
    console.log('吃午飯');
    return new Promise(function(resolve,reject){
     resolve();
    })
  }
  let dinner = function(){
    console.log('吃晚飯')
  }
 breakfast().then(lunch).then(dinner)
}

最后編輯于：2017.12.07 18:28:55

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 227,882評論 6贊 531
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,208評論 3贊 414
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 175,746評論 0贊 373
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,666評論 1贊 309
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,477評論 6贊 407
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 54,960評論 1贊 321
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,047評論 3贊 440
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,200評論 0贊 288
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 48,726評論 1贊 333
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,617評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,807評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,327評論 5贊 358
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,049評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,425評論 0贊 26
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,674評論 1贊 281
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,432評論 3贊 390
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,769評論 2贊 372

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

JavaScript Foundation

JavaScript Foundation

JavaScript之父：Brendan Eich 。

JavaScript與ECMAScript的關系？

如何在瀏覽器中運行JavaScript？

JavaScript 聲明變量

變量賦值

JavaScript 變量聲明提升

標識符

注釋

區塊（塊級作用域）

條件語句

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

JavaScript Foundation

JavaScript之父：Brendan Eich 。

JavaScript與ECMAScript的關系？

如何在瀏覽器中運行JavaScript？

JavaScript 聲明變量

變量賦值

JavaScript 變量聲明提升

標識符

注釋

區塊（塊級作用域）

條件語句

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频