學習ReactNative筆記二 __ECMAScript新功能

時間 2019-11-26

標籤學習 reactnative 筆記 ecmascript 功能欄目 JavaScript 简体版

原文原文鏈接

##學習ReactNative筆記二 __ECMAScript新功能 ####★★★筆記時間- 2017-1-10 ★★★數組

###請教一個問題：第30和31的時候在導入使用import的時候總是報錯，不明白是哪裏的問題，請你們幫我解決一下，謝謝。函數

###ES5使用了:Bable,JSPM ###1.塊的做用域:之前有全局做用域和函數做用域，如今還有一個塊級做用域;let ###工具:Atom的插件使用工具

做用域：就是一個變量的有效範圍學習

if (true){
//    var fruit = '霜'; //這裏是全局均可以訪問
    let fruit = '震';//let 定義的變量，只能在這個塊裏面使用它。這就是塊做用域，只能在這個塊中進行訪問，外部是不能訪問的;會報錯
}
console.log(fruit);

###2. 恆量:const不能從新的進行賦值;限制的是給恆量分配值的動做，並非限制恆量裏面的那個值ui

'use strict';

const fruit = 'AA';//定義一個恆量，使用const
// fruit.push("A");
console.log(fruit);

const fruit = 'BB';
console.log(fruit);

####報錯:this

script.js:7 Uncaught SyntaxError: Identifier 'fruit' has already been declared

'use strict';

const fruit = [];
fruit.push('A');
fruit.push('B');
console.log(fruit);

'use strict';

const fruit = [];
fruit.push('A');
fruit.push('B');
const fruit = [];
console.log(fruit);

####報錯:prototype

ncaught SyntaxError: Identifier 'fruit' has already been declared

###3.解構數組:Array Destructuring插件

'use strict';

function brakfast(){
  return ['A', 'B', 'C'];
}

var tmp = brakfast(),

  desset = tmp[0], drink = tmp[1], fruit = tmp[2];

// let [desset, drink, fruit] = brakfast();

  console.log(desset, drink, fruit);//這裏會報錯

###4.解構對象:Object Destructuringrest

'use strict';

function brakfast(){
  return {dessert: 'A', drink: 'B', fruit:'C'};
}

let {dessert: dessert, drink: drink, fruit: fruit} = brakfast();
  console.log(dessert, drink, fruit);

###5.模板字符串:Template Stringcode

字符串拼接:

'use strict';

let dessert = 'A',
    drink = 'B';

let breakFast = '今天的早餐是' + dessert + drink;

console.log(breakFast);

另外一種寫法:

'use strict';

let dessert = 'A',
    drink = 'B';

let breakFast = `今天的早餐是${dessert}與${drink}`;

console.log(breakFast);

###6.帶標籤的字符串模板:Tagged Templates 標籤就是一個函數:

'use strict';

let dessert = 'A',
    drink = 'B';

let breakFast = kitchen`今天的早餐是${dessert}與${drink}`;

function kitchen(strings, ...values){
  console.log(strings);
  console.log(values);
}

'use strict';

let dessert = 'A',
    drink = 'B';

let breakFast = kitchen`今天的早餐是\n${dessert}與${drink}`;

function kitchen(strings, ...values){
  // console.log(strings);
  // console.log(values);

  let result = '';

  for(var i = 0; i < values.length; i++){
    result += strings[i];
    result += values[i];
  }
  result += strings[strings.length - 1];

return result;
}


console.log(breakFast);

###7.判斷字符串是否包含某個其它字符串

7.1 判斷字符串是不是某個字符串開頭:startsWith('條件字符串')返回值：true，false
'use strict';

let dessert = 'A', drink = 'B';

let breakFast = 今天的早餐是 \n ${dessert} 與 ${drink};

console.log( breakFast.startsWith('!') );

7.2 判斷字符串結尾使用:endsWith('條件字符串')，返回值爲:true, false
'use strict';

let dessert = 'A', drink = 'B';

let breakFast = 今天的早餐是 \n ${dessert} 與 ${drink};

console.log( breakFast.endsWith('?') );

7.3 包含某個字符串:`includes()`返回值爲:true, false

'use strict';

let dessert = 'A', drink = 'B';

let breakFast = 今天的早餐是 \n ${dessert} 與 ${drink}!;

console.log( breakFast.includes('!') );

###8. 默認參數

'use strict';

function breakFast (dessert = 'AA', drink = 'BB'){
  return `${dessert} ${drink}`;
}

console.log(
  breakFast('CC','DD')
);

###9.展開操做符:Spread: ... 有點相似數組的拼接

'use strict';

let fruits = ['AA','BB'],
    foods = ['CC',...fruits];
console.log(fruits);
console.log(...fruits);
console.log(foods);

###10.剩餘操做符:Rest

'use strict';

function breakFast (dessert, drink, ...foods){
  console.log(dessert, drink, foods);//輸出帶有數組的信息
  // console.log(dessert, drink, ...foods);//輸出全部的內容，不帶數組
}

breakFast('PP','NN','MM', 'ZZ');

###11.解構參數:Destrucred Parameters 第三參數:能夠是對象

'use strict';

function breakFast (dessert, drink, {location, restaurant}){
  console.log(dessert, drink, location, restaurant);
}

breakFast('AA', 'BB', {location: '同東', restaurant: '小明'})

###12.函數的名字:name屬性

'use strict';

function breakFast(argument){

}

console.log(
  breakFast.name
);

'use strict';

let breakfast = function superBreakfast (argument){

}

console.log(
  breakfast.name
);

###13.箭頭函數

'use strict';

//左邊的變量能夠做爲函數的名字，右邊是函數能夠接收的參數; desset(參數) => desserts(函數的返回值)
let breakfast = (dessert, drink) => dessert + drink;

###14.對象表達式

方式一:

'use strict';

let dessert = 'AA', drink = 'BB';

let food = {
  dessert: dessert,
  drink: drink,
};

console.log(food);

方式二:

'use strict';

let dessert = 'AA', drink = 'BB';

let food = {
  dessert,
  drink,
};

console.log(food);

方式三:

'use strict';

let dessert = 'AA', drink = 'BB';

let food = {
  dessert,
  drink,
  breakfast(){}
};

console.log(food);

###15.對象屬性名 15.1 屬性中不能包括:空格

'use strict';

let food = {};

food.dessert = 'BB';
food.hot drink = 'CC';

console.log(food);

15.2 添加帶空格的屬性名字:

'use strict';

let food = {};

food.dessert = 'BB';
// food.hot drink = 'CC';//這句話是錯誤的

food[`hot drink`] = 'CC';

console.log(food);

'use strict';

let food = {};
let drinks = `hot drinks`;
food.dessert = 'BB';
// food.hot drink = 'CC';//這句話是錯誤的

// food[`hot drink`] = 'CC';
food[drinks] = 'CC';
console.log(food);

###16.對比兩個值是否相等:Object.is(a,b)兩個參數就是須要對比的東西

###17.把一個對象的值複製到另外一個對象裏:Object.assign()

'use strict';

let breakfast = {};

Object.assign(
  breakfast,//須要複製到的對象
  {drink: 'AA'}//須要複製對象的內容
);

console.log(breakfast);

###18 設置對象的prototype: Object.setPrototypeOf() 建立對象之後去改變prototype

'use strict';

let breakfast = {
  getDrink() {
    return 'AAA';
  }
};

let dinner = {
  getDrink(){
    return 'BBB';
  }
};

let sunday = Object.create(breakfast);

console.log(sunday.getDrink());
console.log(Object.getPrototypeOf(sunday) == breakfast);

// Object.setPrototypeOf(須要設置的這個對象,設置成的對象)
Object.setPrototypeOf(sunday, dinner);

console.log(sunday.getDrink());

console.log(Object.getPrototypeOf(sunday) == dinner);

###19.__proto__

'use strict';

let breakfast = {
  getDrink() {
    return 'AAA';
  }
};

let dinner = {
  getDrink(){
    return 'BBB';
  }
};

let sunday = {
  __proto__: breakfast
};

console.log(sunday.getDrink());

console.log(Object.getPrototypeOf(sunday) == breakfast);

sunday.__proto__ = dinner;

console.log(sunday.getDrink());
console.log(Object.getPrototypeOf(sunday) == dinner);

###20.super

'use strict';

let breakfast = {
  getDrink() {
    return 'AAA';
  }
};

let dinner = {
  getDrink(){
    return 'BBB';
  }
};

let sunday = {
  __proto__: breakfast,
  getDrinkP(){
    return super.getDrink() + `marlonxlj`;
  }
};

console.log(sunday.getDrinkP());

###21.迭代器:Itertors 返回一個對象{value: xx, done: true/false} 還有一個next方法生成迭代器:Generators

'use strict';

function chef(foods){
  let i = 0;

  return {
    next(){
      let done = (i >= foods.length);
      let value = !done ? foods[i++] : undefined;

      return {
        value: value,
        done: done
      }
    }
  }
}

let marlonxlj = chef(['AA', 'BB']);

console.log(marlonxlj.next());

console.log(marlonxlj.next());
//
console.log(marlonxlj.next());

###22.生成器:Generators

'use strict';

//生成器的名字
// function* chef(){
//   yield 'AA';
//   yield 'BB';
// }

//帶參數
// function* chef(foods){
//   for(var i = 0; i < foods.length; i++){
//     yield foods[i];
//   }
// }

//使用函數表達式
let chef = function* (foods){
  for(var i = 0; i < foods.length; i++){
    yield foods[i];
  }
}

//生成迭代器
let marlonxlj = chef(['AA', 'BB', 'CC']);

console.log(marlonxlj.next());
console.log(marlonxlj.next());
console.log(marlonxlj.next());
console.log(marlonxlj.next());

###23.類:Class

'use strict';

class Chef {
  constructor(food){
    this.food = food;
  }

  cook() {
    console.log(this.food);
  }
}

let marlonxlj = new Chef('marlonxljPP');

marlonxlj.cook()

###24.get與set

'use strict';

class Chef {
  constructor(food){
    this.food = food;
    this.dish = [];
  }

  get menu(){
    return this.dish;
  }

  set menu(dish){
    this.dish.push(dish);
  }
  cook() {
    console.log(this.food);
  }
}

let marlonxlj = new Chef();

console.log(marlonxlj.menu = 'Hello');
console.log(marlonxlj.menu = 'world');
console.log(marlonxlj.menu);

###25.靜態方法:static

'use strict';

class Chef {
  constructor(food){
    this.food = food;
    this.dish = [];
  }

  get menu(){
    return this.dish;
  }

  set menu(dish){
    this.dish.push(dish);
  }
//修改cook方法
  static cook(food) {
    console.log(food);
  }
}

Chef.cook('marlonxlj');

###26.繼承:extends

'use strict';

class Person {
  constructor(name, birthday){
    this.name = name;
    this.birthday = birthday;
  }

  intro() {
    return `${this.name}, ${this.birthday}`;
  }
}

class Chef extends Person {
  constructor (name, birthday) {
    super(name, birthday);
  }
}

//建立一個類
let marlonxlj = new Chef('marlonxlj', '2014');

console.log(marlonxlj.intro());

###27. Set 裏面不能有重複的內容

'use strict';

let dessets = new Set('ABVX');

dessets.add('marlonxlj');
dessets.add('A');

console.log(dessets);
//查看有多少個元素
console.log(dessets.size);
//查看是否是有這個‘marlonxlj’
console.log(dessets.has('marlonxlj'));
//刪除marlonxlj
dessets.delete('marlonxlj');

console.log(dessets);

//循環處理
dessets.forEach(dessets => {
  console.log(dessets);
});

//清除
dessets.clear();
console.log(dessets);

###29.map

'use strict';

let food = new Map();

let fruit = {}, cook = function() {}, dessert = 'marlonxlj';

//往map裏面添加map的key
//2個參數:第一個是:key,項目的名字;第二個是value:
food.set(fruit, 'AA');
food.set(cook, 'BB');
food.set(dessert, 'CC');

console.log(food);
//項目裏面有多個
console.log(food.size);
//獲得它的值
console.log(food.get(cook));
//刪除map裏面的項目
food.delete(dessert)
//判斷是否包含這個derrsert
console.log(food.has(dessert));


//循環處理map裏面的東西
food.forEach((value, key) => {
  console.log(`${key} = ${value}`);
});

//清除
food.clear();
console.log(food);

###30.重命名導出導入的東西

script.js

'use strict';

import {fruit, dessert, super as dinner} from './chef.js';//可是在運行是這句話老是有錯???求解啊

console.log(chef.fruit, chef.dessert);

chef.js

'use strict';

let fruit = 'AA';
let dessert = 'BB';

function dinner(fruit, dessert){
  console.log(`今天的晚餐是: ${fruit} 與 ${dessert}`);
}

export {fruit, dessert, dinner as upper};

###31.默認導出與導入

chef.js

'use strict';

let fruit = 'AA';
let dessert = 'BB';

//export default默認要導出的模塊
//一種寫法
// export default function dinner(fruit, dessert){
//   console.log(`今天的晚餐是: ${fruit} 與 ${dessert}`);
// }
//
// 另外一種寫法
 function dinner(fruit, dessert){
  console.log(`今天的晚餐是: ${fruit} 與 ${dessert}`);
}

export {dinner as default};

script.js

'use strict';

// import {fruit, dessert, super as dinner} from './chef.js';
import dinner from './chef.js'

// inclode [fruit, dessert, super as dinner] from './chef.js';

dinner('AA','BB');

####🐼🐶🐶若是對你有幫助，或以爲能夠。請右上角star一下，這是對我一種鼓勵，讓我知道我寫的東西有人承認，我纔會後續不斷的進行完善。

###有任何問題或建議請及時issues me，以便我能更快的進行更新修復。

####Email: marlonxlj@163.com