關於ES6常用語法

1.箭頭函數

①普通函數

function fn(){}

② 箭頭函數

當函數沒有參數時，（）不能省略
當函數只有一個參數，且函數體是一句代碼，且是返回語句參數的（）可省略、函數體 {} 可省略、return可省略、中間使用 => 連接
若函數體只有一句，且不是return 語句，不能省略 {}
若函數體有多條語句，不能省略 {}
若函數有多個參數，不能省略()
若函數的返回值爲對象，此時不能省略return
箭頭函數不適用於聲明函數
箭頭函數不適用於DOM事件
箭頭函數不能作爲構造函數（迭代器）
箭頭函數內不能使用arguments
不能使用yield命令

var  fn = ()=>{}

2.this的指向問題

this的指向不是window,是對象本身

3.let,const,var

let 聲明的變量只在 let 命令所在的代碼塊內有效。
const 聲明一個只讀的常量，一旦聲明，常量的值就不能改變,一旦聲明必須初始化，否則會報錯。
let 是在代碼塊內有效，var 是在全局範圍內有效；let 只能聲明一次 var 可以聲明多次;let 不存在變量提升，var 會變量提升。
var命令能重複聲明，後者覆蓋前者。
let,const只在最近的一個塊中（花括號中）有效;let 和 const不允許在相同作用域內，重複聲明同一個變量。

4.for循環

for…or(適用於數組）

let arr = [1,2,3];
for(let itr of arr){
    console.log(itr)   //1 2 3
}

for…in…(適用於對象）

let arr = [1,2,3];
arr.aa = "bb";
for(let itr in arr){
    console.log(itr) //0 1 2 aa
}

5.模板字符串

6.解構賦值

1.數組

基本

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

可嵌套

let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

可忽略

let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

不完全解構

let [a = 1, b] = []; // a = 1, b = undefined

擴展運算符

let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

解構默認值

let [a = 2] = [undefined]; // a = 2

2.字符串

let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

3.對象

基本

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

let {name,age} = {name:"lili",age:"20"}

可嵌套可忽略

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

不完全解構

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

擴展運算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

解構默認值

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

注意：

let {ept} = {} //console.log(ept) =>undefind
let {ept}= {undefind} // console.log(ept) => undefind
let {ept} = {null} // console.log(ept) => null

7.rest

和擴展運算符…的區別：

rest參數，出現在函數參數位置,… 擴展運算符出現在非參數位置
rest的作用：離散數據 -> 數組；擴展運算符的作用：1.數組 -> 離散的數據 2.拆分僞數組： NodeList HTMLCollection arguments…

rest:

function fn(...rest) {
    console.log(rest);
}
fn(100, 110, 120);    //(3) [100, 110, 120]

function f(x,...y){
	RETURN X * y.length
}
f(3,"hello",true);//6

擴展運算符(spread):

let arr = [1, 2, 3, 4, 5];
console.log(...arr);    //1 2 3 4 5    

function fn1() {
    console.log(arguments);     //Arguments(3) [2, 3, 4]
    console.log(...arguments);  //2 3 4
}
fn1(2,3,4);

function f(x,y,z){
	return x+y+z
}
f(...[1,2,3]) //6

8.對象字面量

允許對象的屬性直接寫變量，這時候屬性名是變量名，屬性值是變量值

const age = 12;
const name = "Amy";
const person = {age, name};
//person =>{age: 12, name: "Amy"}等同於const person = {age: age, name: name}

方法名可簡寫

const person = {
  sayHi(){
    console.log("Hi");
  }
}
person.sayHi();  //"Hi"
//等同於
const person = {
  sayHi:function(){
    console.log("Hi");
  }
}
person.sayHi();//"Hi"

允許用表達式作爲屬性名，但是一定要將表達式放在方括號內

const obj = {
 ["he"+"llo"](){
   return "Hi";
  }
}
obj.hello();  //"Hi"

屬性的簡潔表示法和屬性名表達式不能同時使用，否則會報錯

const hello = "Hello";
const obj = {
 [hello]
};
obj  //SyntaxError: Unexpected token }
 
const hello = "Hello";
const obj = {
 [hello+"2"]:"world"
};
obj  //{Hello2: "world"}

若是Generator 函數，則要在前面加一個星號


const obj = {
  * myGenerator() {
    yield 'hello world';
  }
};
//等同於
const obj = {
  myGenerator: function* () {
    yield 'hello world';
  }
};

擴展運算符
1.基本用法

let person = {name: "Amy", age: 15};
let someone = { ...person };
someone;  //{name: "Amy", age: 15}

2.合併兩個對象

let age = {age: 15};
let name = {name: "Amy"};
let person = {...age, ...name};
person;  //{age: 15, name: "Amy"}

注意：
1.自定義的屬性和拓展運算符對象裏面屬性的相同的時候：自定義的屬性在拓展運算符後面，則拓展運算符對象內部同名的屬性將被覆蓋掉

let person = {name: "Amy", age: 15};
let someone = { ...person, name: "Mike", age: 17};
someone;  //{name: "Mike", age: 17}

2.自定義的屬性在拓展運算度前面，則變成設置新對象默認屬性值

let person = {name: "Amy", age: 15};
let someone = {name: "Mike", age: 17, ...person};
someone;  //{name: "Amy", age: 15}

3.拓展運算符後面是空對象，沒有任何效果也不會報錯

let a = {...{}, a: 1, b: 2};
a;  //{a: 1, b: 2}

4.拓展運算符後面是null或者undefined，沒有效果也不會報錯

let b = {...null, ...undefined, a: 1, b: 2};
b;  //{a: 1, b: 2}

例子：

var human = { breathe() { console.log("breathe...") }
var worker = {
	human1:human,
	company:"wangyi",
	work() { console.log("work...")
}

human.breathe(); // breathe...
worker.breathe(); //breathe...

9.對象新方法

Object.assign(target, source_1, ···) ：用於將源對象的所有可枚舉屬性複製到目標對象中
注：
1.如果目標對象和源對象有同名屬性，或者多個源對象有同名屬性，則後面的屬性會覆蓋前面的屬性
2.如果該函數只有一個參數，當參數爲對象時，直接返回該對象；當參數不是對象時，會先將參數轉爲對象然後返回

let target = {a: 1};
let object2 = {b: 2};
let object3 = {c: 3};
Object.assign(target,object2,object3);  
// 第一個參數是目標對象，後面的參數是源對象
//target => {a: 1, b: 2, c: 3}





//assign 的屬性拷貝是淺拷貝
let sourceObj = { a: { b: 1}};
let targetObj = {c: 3};
Object.assign(targetObj, sourceObj);
targetObj.a.b = 2;
sourceObj.a.b;  // 2




Object.assign(3);         // Number {3}
typeof Object.assign(3);  // "object"




//同名屬性替換
targetObj = { a: { b: 1, c : 2 } };
sourceObj = { a: { b: "hh"} };
Object.assign(targetObj, sourceObj);
targetObj;  // {a: {b: "hh" } }



//數組的處理
Object.assign([2,3], [5]);  // [5,3] =>會將數組處理成對象，所以先將 [2,3] 轉爲 {0:2,1:3} ，然後再進行屬性複製，所以源對象的 0 號屬性覆蓋了目標對象的 0




//null 和 undefined 不能轉化爲對象，所以會報錯
Object.assign(null);       // TypeError: Cannot convert undefined or null to object
Object.assign(undefined);  // TypeError: Cannot convert undefined or null to object
當參數不止一個時，null 和 undefined 不放第一個，即不爲目標對象時，會跳過 null 和 undefined ，不報錯
Object.assign(1,undefined);  // Number {1}
Object.assign({a: 1},null);  // {a: 1}
Object.assign(undefined,{a: 1});  // TypeError: Cannot convert undefined or null to object

Object.is(value1, value2)：用來比較兩個值是否嚴格相等，與（===）基本類似。

Object.is("q","q");      // true
Object.is(1,1);          // true
Object.is([1],[1]);      // false
Object.is({q:1},{q:1});  // false

與 === 的區別

//一：+0不等於-0
Object.is(+0,-0);  //false
+0 === -0  //true
//二：NaN等於本身
Object.is(NaN,NaN); //true
NaN === NaN  //false

10.Iterators(迭代器）

可通過Symbol.iterator給對象設置默認的遍歷器，直到狀態爲true退出。
是一個統一的接口，它的作用是使各種數據結構可被便捷的訪問，它是通過一個鍵爲Symbol.iterator 的方法來實現。
用於遍歷數據結構元素的指針（如數據庫中的遊標）。

var arr = [11,12,13];
var itr = arr[Symbol.iterator]();
itr.next()  // {value:11,done:false}
itr.next()  //{value:12,done:false}
itr.next()  //{value:13,done:false}
itr.next()  //{value:undefind,done:true}

可迭代的數據結構：Array，String，Map，Set，

11.Generators函數

可在函數中間暫停一次或多次，並且之後恢復執行，在它暫停期間，允許其他代碼執行，可用其實現異步。

function foo(x){
   var y = 2 *(yield(x+1));  //yield:類似return，是一個生成器generator
    var z = yield(y/3);
    return (x+y+z);
}

var it = foo(5);
console.log(it.next());  //{value:6,done:false}
console.log(it.next(12));//{value:8,done:false}
console.log(it.next(13));//{value:42,done:true}


function* func(){
 console.log("one");
 yield '1';
 console.log("two");
 yield '2'; 
 console.log("three");
 return '3';
}

f.next();
// one
// {value: "1", done: false}
 
f.next();
// two
// {value: "2", done: false}
 
f.next();
// three
// {value: "3", done: true}
 
f.next();
// {value: undefined, done: true}

菜鳥教程地址：https://www.runoob.com/w3cnote_genre/es6/page/2

關於ES6常用語法

1.箭頭函數

2.this的指向問題

3.let,const,var

4.for循環

5.模板字符串

6.解構賦值

7.rest

8.對象字面量

9.對象新方法

10.Iterators(迭代器）

11.Generators函數

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

vue項目中多行文本超出省略失效解決方式

uploadify---jQuery多文件上傳

input框輸入文本限制

metisMenu側邊欄插件

js 調用 IOS 、Android原生方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結