javascript基礎(第四天)

時間 2019-11-09

原文原文鏈接

ECMAScript6預計將在 2015年6月正式發佈

chrome測試語法須要引入Traceur編輯器https://github.com/google/traceur-compilercss

瞭解將來的語法和趨勢, 將來1年內估計也用到不, 這裏只作基本的瞭解.html

let 變量聲明node

{
let a = 10; //只在代碼塊內有效,適用於for,if等方法體
var b = 20;
}
console.log(a); // ReferenceError a is not defined
console.log(b); // 20git

const 聲明常量, 一旦聲明, 不可修改.es6

const PI = 3.1415;github

變量的解構賦值web

//es3
var a = 1;
var b = 2;
var c = 3;
console.log(a); //1
console.log(b); //2
console.log(c); //3
//es6
var [x,y,z] = [4,5,6];
console.log(x); //4
console.log(y); //5
console.log(z); //6chrome

對象的解構賦值api

var {foo,bar} = {foo:'foo',bar:"bbb"}; //有沒有腦殘的感受? 數組

(1)做用1,交換變量的值

[x,y] = [y,x];

(2)做用2,從函數返回多個值

function f(){ return [4,5,6] }
var [x,y,z] = f();
console.log(x); //4
console.log(y); //5
console.log(z); //6

(3)遍歷Map,這是我見過最簡潔的語法,後面會講到Map,for of

var map = new Map();
map.set('first','hello');
map.set('second','world');

for(let [key,value] of map){
console.log(key+','+value);
}

字符串的擴展

'母字符串'.contains(待查找的字符串); //返回true,false, 和indexOf差很少,就返回值不太同樣

'母字符串'.startWith(待查找的字符串); //返回true,false,是否以什麼開頭

'母字符串'.endsWith(待查找的字符串); //返回true,false,是否以什麼結尾

'母字符串'.repeat(重複次數);//返回字符串,是新字符串?仍是就舊字符串? 固然是新字符串啦

console.log( 'x'.repeat(3) ); //xxx

//下面這2個方法支持4個字節存儲的unicode字符

'母字符串'.codePointAt(字符索引) ; //返回編碼,用來處理大於\uFFFF的unicode字符

'母字符串'.fromCodePoint(unicode編碼); //返回字符,用來處理大於\uFFFF的unicode字符

/匹配字符串/imgu.test(待匹配的) //支持unicode, 用來處理大於\uFFFF的unicode字符

/匹配字符串/imy.test(待匹配的) //隱式^

/abcd/img.test('xabcd') === true

/abcd/imy.test('xabcd') === false;

模板字符串!!!最重要的!!!

須要反引號標示`` 支持多行輸出, 支持變量嵌入

`This is 'abcd' ha ha ha`;

`he he

ha ha

hei hei `

var a = 'aaa', b='bbb'

`this is ${a} and ${b}` // this is aaa and bbb

數值的擴展

0b111110111 === 503; //支持2機制, 前綴0b

0o767 === 503; //支持8進制, 前綴0o

Number.isFinite(); //非數值,一概返回false

Number.isNaN();

Number.parseInt();

Number.parseFloat();

Number.isInteger(); //25 === true, 25.0 === true, 25.1 === false

Number.trunc(); 去掉小數部分 // 4.1 >> 4 , 4.9 >>4, -4.1 >> -4, -4.9 >> -4;

Math補充了一堆數學運算方法

數組的擴展

Array.from(); //講可遍歷(set,map),或者相似數組(array-like object)轉換成真正的數組

let ps = document.querySelectorAll('p');

Array.from(ps) == >> 轉成數組了

Array.of(); //講一組值轉換數組,

Array.of(3,11,8); //[3,11,8];

數組實例.find(); //找到第一個符合的數組元素

數組實例.findIndex(); //找到第一個符合數字元素的索引

[1,5,10,15].findIndex(function(value,index,arr){
return value > 9;
}); // 2

數組實例.fill(); //使用給定值填充一個數組

new Array(3).fill(7); //[7,7,7]

數組實例.entries() .keys() .values()

for(let index of ['a','b'].keys()){
console.log(index);
}
for(let elem of ['a','b'].values()){
console.log(elem);
}
for(let [index,elem] of ['a','b'].entries()){
console.log(index+','+elem);
}

數組推導

var a1 = [1,2,3,4];
var a2 = [for (i of a1) i*2]; //[2,4,6,8]

數組監聽(add,update,delete,splice)

Array.observe(); Array.unobserve();

對象的擴展

Object.is(); 用來比較2個值是否相等

console.log(+0 === -0);
console.log( Object.is(+0,-0) ); //false
console.log(NaN === NaN);
console.log( Object.is(NaN,NaN) ); //true

Object.assign(target,source1,source2,....); 將源可枚舉的屬性賦值到目標對象

var target = {a:1,b:1};
var source1 = {b:2,c:2};
var source2 = {c:3};
Object.assign(target,source1,source2);
target; //{a:1,b:2,c:3}

Object.__proto__ 用於讀取當前對象的prototype對象, 有了這個屬性,實際上再也不須要經過Object.create()來生成對象了? 阮一峯<ECMAScript6入門>61頁

吐槽點,這個__proto__ 是否穩定? 歡迎探討

Object.setPrototypeof(); //設置原型對象

function f(obj,proto){
obj.__proto__ = proto;
return obj;
}
var o = f({},obj);
var o = Object.setPrototypeOf({},null); //和上面的效果同樣

Object.getPrototypeOf(待取的對象); //取得對象原型

Symbol, 一種新的原始數據類型, 最大的特色,就是Symbol都是不相等的

Proxy

var proxy = new Proxy({name:"aaaa"},{
get:function(target/*代理對象*/,property/*屬性*/){
return 35;
}
});
proxy.name; //35
proxy.time; //35

Object.observe().Object.unobserve();監聽對象的變化

函數的擴展

function Point(x=0,y=0){ //默認值
this.x=x;
this.y=y;
}
var p = new Point(); //{x:0,y:0}

function add(...values){ //用於獲取函數的多餘參數
let sum = 0;
for(var val of values){
sum += val;
}
return sum;
}

function push(array,...items){ // ...的用法
array.push(...items);
}

var sum = (a,b) => a+b; //箭頭函數
sum(3,4); //7

[1,2,3].map(x=>x*x);

Set和Map數據結構

var s = new Set(); //都是惟一的,沒有重複的值
[1,2,2,2,2,2,3].map(function(val,idx,arr){ s.add(val) });
for(var i of s){
console.log(i);
} //1,2,3

add(value) delete(value) has(value) clear() size

var m = new Map(); //對鍵的限制不限於字符串,對象也能夠當鍵

var a = {b:'bbb',c:'ccc'};
m.set(a,'content');

size, set(key,value) get(key) has(key) delete(key) clear() 三種遍歷器 keys() values() entries();

var map = new WeakMap(); //只接受對象做爲鍵名

Iterator和for of循環

Iterator遍歷器是一種規定, 有next()方法, 該方法返回{value:'當前遍歷位置的值',done:布爾值,表示是否遍歷結束}

function mkIterator(array){
var nextIndex = 0;
  return {
      next:function(){
          return nextIndex < array.length ?
          {value:array[nextIndex++],done:false},
          {value:undefined,done:true};
      }
  }
}

for of循環一個對象

只要部署了next方法, 就被視爲具備iterator接口,就能夠for of遍歷

Array, 類數組(arguments Dom NodeList對象), Set, Map, 字符串, Generator(內部狀態的遍歷器)

Generator(內部狀態的遍歷器)

Generator函數就是普通函數, 有2個特徵, 函數名後面有星號,函數體內使用yield(產出)定義遍歷器的每一個成員,即不一樣的內部狀態

function* hellWorldGenerator(){
yield 'hello'; //這個地方能夠替換成函數
yield 'world';
return 'ending';
}
var h = hellWorldGenerator();
h.next(); //{value: 'hello', done:false};
h.next(); //{value: 'world', done:false};
h.next(); //{value: 'ending', done:true};
h.next(); //{value: 'undefined', done:true}; //之後再調用和這個同樣

Promise對象 !!!!這個是最好玩的!!!! 它能夠將異步的操做用同步的寫法表達出來,避免了層層嵌套的回調函數 (PromiseJS 第三方模擬庫)

http://www.w3ctech.com/topic/656

http://liubin.github.io/promises-book/

Class 和 Module

class Point{
constructor(x,y){
      this.x = x;
      this.y = y;
  }
  toString(){
      return '('+this.x+','+this.y+')';
  }
}
var point = new Point(2,3);
point.toString() // (2,3)

class ColorPoint extends Point{
  constructor(x,y,color){
      super(x,y); //super.constructor(x,y)
      this.color=color;
  }
  toString(){
      return this.color+super();
  }
}

export 和 import

a.js

export var aaa = 'aaa';

exprot var bbb = 'bbb';

b.js

import {aaa,bbb} from './a'

console.log(aaa+','+bbb);

es6語法尚未通過最佳技術實踐的檢驗, 用法不統一, 以上代碼僅供熟悉.