JavaScript Foundation

JavaScript之父：Brendan Eich 。

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

  • 函數的用法：借鑒了Scheme和Awk語言，將函數當成第一等公民，引入閉包。
  • 原型繼承模型：借鑒了Self語言。
  • 正則表達式：借鑒了Perl語言。
  • 字符串和數組處理：借鑒了Python語言。
JavaScript與ECMAScript的關系？
  • ECMAScript規(guī)定了瀏覽器腳本語言的標準。
  • ECMAScript是JavaScript的規(guī)格。
如何在瀏覽器中運行JavaScript？
  • <script> console.log('運行JS') </script>
  • <script src='./*'> </script>
JavaScript 聲明變量
  • var a;
  • let a;
變量賦值
  • ES5
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 變量聲明提升
  • ES5
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;
標識符
  • 定義：識別具體對象的一個名稱（大小寫敏感），如變量名，函數名。
  • 規(guī)則：
    • 第一個字符，可是任意Unicode字母，以及美元符號($)，和下劃線(_)。
    • 第二個字符以及后面的字符，除了Unicode,美元符號以及下劃線，還可以是數字0-9。
  • 保留字和關鍵字不能作為標識符（如：var 、class、false、true）。
注釋
  • 單行：/這是注釋/。
  • 多行：/*這是注釋*/。
區(qū)塊（塊級作用域）
  • 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('我被執(zhí)行了')
}else{
console.log('我永遠不會被執(zhí)行')
}
  • 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循環(huán)語句
 -

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

- for循環(huán)語句

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);
{ //立即執(zhí)行函數 防止全局污染
!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("執(zhí)行了")})
}

類、原型、繼承（面向對象）
  - 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)
}
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 工廠模式類似于現實生活中的工廠可以產生大量相似的商品，去做同樣的事情，實現同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 8,131評論 2贊 17
  • 單例模式 適用場景：可能會在場景中使用到對象，但只有一個實例，加載時并不主動創(chuàng)建，需要時才創(chuàng)建 最常見的單例模式，...
    Obeing閱讀 2,320評論 1贊 10
  • 風兒說不知道 你是哪一株小草 是否垂著頭 吹不到綠草帽 人們說不知道 你是哪一個少年 不招手的背影 好像都一樣黑 ...
    淺暖姑娘閱讀 355評論 3贊 3
  • 一、發(fā)現問題 我兒子剛上小學的時候，我還是挺淡定的，甚至有點信心滿滿的把他送去學校。不管怎么說，兒子應該不會學習太...
    安心小屋閱讀 761評論 4贊 7
  • 普通人的生活軌跡大致相同。揮手告別校園，懵懵懂懂步入社會?？傆袑Υ蟪鞘械南蛲?，背起行囊，孤身一人，向著目的地出發(fā)。...
    齊小奇閱讀 888評論 31贊 9

友情鏈接更多精彩內容