学习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');
