学习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