【ECMAScript 6】es 6要点(一)残存パラメータ|配列方法|解構賦値|文字列テンプレート|オブジェクト向け|モジュール

9845 ワード
es6 javascript

varとlet,constの違い


var
  • は、
    • を繰り返し宣言することができる
  • 修正を制限できない
  • ブロックレベルの役割ドメイン
    • がない/無視されている.
      ，              ，             。
     var                             ，
        。

    varとは異なり、let const (「ブロックレベルの役割ドメイン内、サイクル内、関数内、グローバル環境内」であってもよい).したがって、letとconst 、 、 を使用することができます.
    let:繰り返し宣言できません.変数-変更できます.自分のブロックレベルの役割ドメインconstを定義します.繰り返し宣言できません.定数-変更できません.ブロックレベルの役割ドメインです.
    for( let i=0;i<10;i++){
}
console.log(i);//error, i is not defined

    const FLAG= true;//  const         ，       
FLAG = false;
console.log(FLAG); // ture

    const変数の特性:
    const objConst =  {};
objConst.name = 'imaginecode';

    すなわち、const変数は宣言時に一度のみ初期化され、その後、const変数に新しい値を割り当てることは許可されません. ， const ， const 。

    関数＃カンスウ＃


    矢印関数


    矢印関数では、thisが指すコンテキスト環境は、通常の関数のthisと著しく異なります.
  • 一般関数:thisを呼び出すと、thisは
    • を指します.
  • 矢印関数:thisがどの環境にあるか、thisは
    • を指します.
    例:
    class Demo(){
	construct(){
		
	}
	handle1 =()=>{
		this.handle2()
	}
	handle2 =()=> {
		let html =`btn2`;
        	$('body').append(html);
        	$('.btn2').click(()=>{return this.handle1()}); //this  Demo
        	$('.btn2').click(function(){this.handle1()}); //undefined ,this      btn2   a   
	}
}

    function削除、加算=>
    #es5
function () {

}
#es6
()=>{

}
  • パラメータが1つしかない場合は、()
    • を省くことができます.
  • returnが1つしかない場合、returnとカッコ{}は
    • 節約できます.
    window.onload = function() {
	alert('abc);
};

#es6
window.onload = ()=> {
	alert('abc');
};

    リファレンス

  • https://segmentfault.com/a/1190000011194676#articleHeader2
  • https://www.liaoxuefeng.com/wiki/1022910821149312/1031549578462080

    • 関数のパラメータ

  • パラメータの拡張/展開
  • デフォルトパラメータ
    • パラメータ拡張
  • は残りのパラメータ(Rest Parameter)を収集するが、最後の
    • でなければならない.
    function show(a,b,...args) {
	alert(a);
	alert(b);
	alert(args);//args = [3,4,5,6]
}
show(1,2,3,4,5,6);

    配列を展開
  • 展開後の効果と、直接配列の内容をここに書く
    • let arr=[1,2,3];
show(...arr); //==show(1,2,3)
function(a,b,c){

}

    既定のパラメータ
  • は伝えることができますが、伝えることはあなたの言うことを聞いて、渡さないのはデフォルトです.
    • function show(a,b=1,c=2){//b=1,c=2    
	console.log(a,b,c);
}
show(7,8,9);//result: 7,8,9

    かいぞうわりあて


    従来のjsでは、配列の字面量は、イコール(コピーオペレータ)の左側には表示されません.解構賦値の構文は、等号の右側の配列に含まれる値を、等号の左の配列の変数にそれぞれ付与することである.
    例:
    //  
var [,value] = ["color","red"];
console.log(value);//"red"
//  
var person = {
	name:"imaginecode",
	age: 17
}
var {name:personName,age:personAge} = person;
console.log(personName);//"imaginecode"
console.log(personAge);//17

    簡単な理解、解体=「解体」
  • の左右の両側の構造は同じ
    • でなければならない.
  • 右側は物でなければなりません
  • 宣言と付与は分けられません.一言で
    • でなければなりません.
    let arr=[1,2,3];
#    
let [a,b,c]=[1,2,3];//        

    let {a,b,c}={a:1,b:2,c:3};//json

let [{a,b,c},[n1,n2,n3],num,str]=[{a:1,b:2},[1,2,3],1,'abc']; 
#   
let [json,arr,num,str][{a:1,b:2},[1,2,3],1,'abc'];
console.log(json,arr,num,str);

    はいれつ


    4つの新しい方法
  • mapマッピング:1対1
  • reduceまとめ:
  • filterフィルタ
  • forEachサイクル(反復)
    • map 
    let arr = [1,2,3];

let result = arr.map(function(item){
	return item*2;
});
alert(result);
#       
let result = arr.map(item=>item*2);

    reduce 
    #   
let arr = [1,2,3,4,5,6];
let result = arr.reduce(function(tmp,item,index){
	return tmp+item;
	//tmp：    
	//item:arr    ，index:  
});
alert(result);

    #     
let arr = [1,2,3,4,5,6];
let result = arr.reduce(function(tmp,item,index){
	if(index!=arr.length-1){//      
		return tmp+item;
	}else {//      
		return (tmp+item)/arr.length;
	}
});
alert(result);

    filter 
    let arr = [1,2,3,4,5,6];
let result = filter(item=>item%3==0);

alert(result);

    	let arr = [
		{title:'a',price:10002},
		{title:'b',price:999},
		{title:'c',price:789},
		{title:'d',price:10090},
		{title:'e',price:11122},
	];
	let result=arr.filter(json=>json.price>=10000);
	console.log(result);

    forEach 
    let arr = [1,2,3];
arr.forEach((item,index)=。{
	alert(index+':'+item);
})；

    残りのパラメータと分布パラメータ、デフォルトパラメータ


    ざんりゅうパラメータ


    ES 6はargumentsオブジェクトを除去するため、宣言されていないパラメータを読み取ることができません.
    ただし、残りのパラメータ構文を使用すると、関数に可変数のパラメータを入力することを期待していることを示すこともできます.残りのパラメータの構文形式は、3つのポイントの後ろに識別子が付いています.この構文を使用して、伝達される可能性のあるより多くのパラメータを定義し、配列に収集します.
    function sum(num1,num2,...nums){
    var result = num1 + num2;
    for(let i=0,len=nums.length;i

    残りのパラメータはnums配列に保存されます.元のargumentsとは異なり、残りのパラメータはArrayのインスタンスに保存されます.したがって、任意の配列メソッドを使用してそれらを操作することができます.

    ぶんぷパラメータ


    分散パラメータは、関数に配列を入力し、配列の要素を関数の各パラメータにマッピングします.分布パラメータの構文形式は、残りのパラメータの構文と同じで、値の前に3つの点を加算します.唯一の違いは、分布パラメータが関数を呼び出すときに使用され、残りのパラメータが関数を定義するときに使用されることです.
    var result = sum(...[1,2,3,4,5,6]);

    既定のパラメータ


    パラメータのデフォルト値を指定します.関数が呼び出されたときにパラメータが入力されなかった場合、パラメータはデフォルト値を使用します.パラメータにデフォルト値を指定するには、パラメータ名の後に等号とデフォルト値を直接付けることができます.
    function sum(num1,num2=0){
}
sum(5);

    文字列

  • 複数の新しい方法startsWith//...で始まるendsWith//...で終わる
  • 文字列テンプレート
    • 2つの新しい方法
    let str= 'http://abc.com';
if(str.startsWith('http://')){

}else if(){

}

    let str = 'a.txt';
if(str.endsWith('.txt'){
	alert('    ');
})

    文字列テンプレート1、文字列に直接物を押し込む${物}2、逆一重引用符を折ることができる`
    let a=12;
let str = `a${a}c`;//str = a12c
#      
let title = '  ';
let content = '  ';
let str = '
    \
	 
    '+title+'
    \
	 
    '+content+'
    \

    ';
#  
let str2 = `
    
		
    ${title}
    
		
    ${content}
    

    `;

    Map


    if-else/switchの代わりにmapを使用
    
const fn = ()=> {
    console.log('find')
}
let handle = function(){}
const map = new Map();
const arr = [1,3,5,7,9];
map.set(arr,fn);
const getVal = (params) => {
    for(let value of map.entries()){
        if(value[0].includes(params)) {
            handle = value[1]
        }else {
            console.log('not find')
        }
    }
}
let i = 9;
getVal(i);
handle()

    ES 6のオブジェクト向け


    新旧対比1、classキーワード、コンストラクタとクラス分離2、classに直接加算する方法
    特長
  • 継承
    • 旧版
    function User(name,pass){
	this.name = name;
	this.pass = pass;
}
User.prototype.showName = function() {
	alert(this.name);
}
User.prototype.showPass = function() {
	alert(this.pass);
}
var user = new User('blue','123');

user.showName();
user.showPass();

    新版
    class User{
	constructor(name,pass){
		this.name = name;
		this.pass = pass;
	}
	showName() {
		alert(this.name);
	}
	showPass() {
		alert(this.pass);
	}
}
var user = new User('blue','123');

user.showName();
user.showPass();

    継承
    class vipUser extends User{
	constructor(name,pass,level){
		super(name,pass); //super   ，  (  )
		this.level = level;
	}
	showLevel(){
		alert(this.level);
	}
}
var v1 = new vipUser('blue','123');
v1.showName();
v1.showPass();
v1.showLevel();

    Reactの適用

  • コンポーネント化-class
  • JSX(JSXbabelbrowser.js)、JS拡張バージョン
    • class Test extends React.Component {
            constructor(...args) {
                super(...args);
            }
            render(){
                return 123;
            }
        }
        window.onload = function() {
            let oDiv = document.getElementById('div1');

            ReactDOM.render(
                ,
                oDiv
            );
        };

    JSON

  • JSON対象JSON.stringify; JSON.parse;
  • JSON略記(名前同様;方法)
    • let json = {a:1,b:2};
let str = 'http://abc.com?data='+encodeURIComponent(JSON.stringify(json)); //stringify

    json標準表記1、二重引用符2のみ、すべての名前を引用符で囲まなければならない
    let str = '{"a":12,"b":5，"c":"abc"}';
let json = JSON.parse(str);

    1、名前が値と同じ場合は、1つ残すことができます
    let a =1;
let b =5;
let json = {a:a,c:b};//   let json = {a,c:b};

    2、書き方
    let json = {
	a:1,
	show(){
		alert(this.a);
	}
}
json.show();

    export/import


    モジュール、または「ネーミングスペース」または「パッケージ」と呼ばれるjavasriptアプリケーションコードを整理する重要な方法です.各モジュールには、他のモジュールとは独立した特定のユニークな機能が含まれています.モジュールは、独自のトップレベルの実行環境で実行されるため、導入されたグローバル実行環境を汚染しません.デフォルトでは、モジュールに宣言されているすべての変数、関数、クラスなどは、そのモジュールにプライベートです.外部に公開すべきメンバーには、exportのキーワードを前に付けることができます.例:
    a-module.js    
module  MyModule {
	//    
	export let myobject= {};
	export function hello() {console.log('hello')}
	//    
	function nihao(){
	}
}
b.js  
//   myobject
import myobject from MyModule;
console.log(myobject);
//        
import * from MyModule;
//        
import {myobject,hello} from MyModule;

    簡単に言えば、モジュールは関連する機能を組織する手段であり、汚染からグローバルな役割を保護することができる.
    参照先:
    https://stackoverflow.com/questions/48140375/javascript-es6-import-expects-exactly-one-argument
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export
    Gerencie suasは、esをesにします
    ul:list-style-type、サイト要素設計に必要な位置属性、アニメーション変換可能