学习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`不能重新的进行赋值;限制的是给恒量分配值的动作，并不是限制恒量里面的那个值

'use strict';

const fruit = 'AA';//定义一个恒量，使用const
// fruit.push("A");
console.log(fruit);

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

报错:

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);

报错:

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 Destructuring

'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 String

字符串拼接:

'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

posted @ 2017-01-10 17:11 marlonxlj 阅读(373) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Marlonxlj 繁星密布,璀璨夜空。 苦苦寻觅，只为那一点答案。 Email:marlonxlj@163.com

学习ReactNative笔记二 __ECMAScript新功能

学习ReactNative笔记二 __ECMAScript新功能

★★★笔记时间- 2017-1-10 ★★★

请教一个问题：第30和31的时候在导入使用import的时候总

ES5使用了:Bable,JSPM

1.块的作用域:以前有全局作用域和函数作用域，现在还有一个块级作用域;let

工具:Atom的插件使用

2. 恒量:const不能重新的进行赋值;限制的是给恒量分配值的动作，并不是限制恒量里面的那个值

报错:

报错:

3.解构数组:Array Destructuring

4.解构对象:Object Destructuring

5.模板字符串:Template String

6.带标签的字符串模板:Tagged Templates

7.判断字符串是否包含某个其它字符串

8. 默认参数

9.展开操作符:Spread: ...

10.剩余操作符:Rest

11.解构参数:Destrucred Parameters

12.函数的名字:name属性

13.箭头函数

14.对象表达式

15.对象属性名

16.对比两个值是否相等:Object.is(a,b)两个参数就是需要对比的东西

17.把一个对象的值复制到另一个对象里:Object.assign()

18 设置对象的prototype: Object.setPrototypeOf()

19.__proto__

20.super

21.迭代器:Itertors

22.生成器:Generators

23.类:Class

24.get与set

25.静态方法:static

26.继承:extends

27. Set 里面不能有重复的内容

29.map

30.重命名导出导入的东西

31.默认导出与导入

🐼🐶🐶如果对你有帮助，或觉得可以。请右上角star一下，这是对我一种鼓励，让我知道我写的东西有人认可，我才会后续不断的进行完善。

有任何问题或建议请及时issues me，以便我能更快的进行更新修复。

Email: marlonxlj@163.com

公告

Marlonxlj 繁星密布,璀璨夜空。苦苦寻觅，只为那一点答案。 Email:marlonxlj@163.com

请教一个问题：第30和31的时候在导入使用`import`的时候总

2. 恒量:`const`不能重新的进行赋值;限制的是给恒量分配值的动作，并不是限制恒量里面的那个值

9.展开操作符:Spread: `...`

10.剩余操作符:`Rest`

16.对比两个值是否相等:`Object.is(a,b)`两个参数就是需要对比的东西

17.把一个对象的值复制到另一个对象里:`Object.assign()`

18 设置对象的prototype: `Object.setPrototypeOf()`

19.`proto`

20.`super`

21.迭代器:`Itertors`

22.生成器:`Generators`

23.类:`Class`

25.静态方法:`static`

26.继承:`extends`