1.变量的作用域
//1.作用域变量的作用域全局 函数块 作用域
// let 声明 的变量只能在定义的那个块中。
{
let fruit = '苹果';
var apple = 'apple';
}
console.log(apple);
// console.log(fruit);
2.const.恒量
//2 const.恒量声明的是常量 不能被修改constfruits = '苹果';
console.log(fruits);
//Identifier 'fruits' has already been declared
constfruits = '橘子';
console.log(fruits);
const fruitss = [];
fruitss.push('苹果');
fruitss.push('橘子');
fruits = []//attempt to assignto const variable3.解构数组- ArrayDestructuring
//3.解构数组- ArrayDestructuring
function breakfast() {
return['cake','tea','apple'];
}
//可以把数组中的值，传递给对应的变量 cake tea apple
let [dessert,drink,fruit] = breakfast();
console.log(dessert,drink,fruit);
4.解构对象 -Object Destructuring
//解构对象 -Object Destructuring
function breakfast() {
return{dessert:'cake',drink:'tea',fruit:'apple'};
}
//cake tea apple，解构对象 前面是 原来对象的属性，后面是接收的属性
let {dessert:desserts,drink:drinks,fruit:fruits}
= breakfast();
console.log(desserts,drinks,fruits);
5.模板字符串-Template Strings
//模板字符串-Template Strings ,使用$符号
let dessert = 'cake',drink = 'tea';
let breakfast = `今天的早餐是${dessert}与${drink} !`;
console.log(breakfast);
//今天的早餐是cake与tea !6.带标签的模板字符串 -Tagged Templates
// 带标签的模板字符串 -Tagged Templates
let dessert = 'cake',drink = 'tea';
let breakfast =kitchen`今天的早餐是${dessert}与${drink} !`;
functionkitchen(strings,...values) {
let result = '';
for(var i = 0;
i7.判断字符串中是否包含其他字符串
//判断字符串中是否包含其他字符串
let state = breakfast.startsWith("今天");
//开头是
let state = breakfast.endsWith("今天");
//结尾是
let state = breakfast.includes("今天");
//包含8.参数默认值 -Default Parameter Value
function breakfast ( dessert = 'cake',drink = 'tea'){
return `${dessert} ${drink}`;
}
console.log(breakfast('aaa','bbb'));
9.展开操作符... Spread
//展开操作符... Spread
letfruits = ['fruits','banana'],foods =['cake',...fruits];
console.log(foods);
//['cake','fruits','banana'];
10.剩余操作符 ... Rest
//剩余操作符 ... Rest
function breakfast ( dessert ,drink ,...foods){
console.log(dessert,drink,...foods);
}
breakfast('cake','orange juice','apple','pear')11.解构参数 -Destructed Parameters
//解构参数 -Destructed Parameters
function breakfast( dessert,drink,{location,restaurant}={}) {
console.log(dessert,drink,location,restaurant);
}
breakfast('cake','orange juice',{location:'济南',restaurant:'董小姐'})12函数的名字 - name属性
//函数的名字 - name属性
let breakfast = function superBreakfast (argument) {}
console.log(breakfast.name);
//superBreakfast13.箭头函数 -Arrow Functions
//箭头函数 -Arrow Functions
let breakfast = dessert => dessert;
//breakfast ：函数名，dessert ：接收参数名字 ,=> ：返回值
//相当于以下写法
var breakfast = function breakfast(dessert) {
return dessert;
}
let breakfast = (dessert,drink) => { return dessert+drink;
};
var breakfast = function breakfast(dessert,drink) {
return dessert+drink;
}14.对象表达式
//对象表达式
letdessert = 'cake',drink = 'tea';
let food = {
dessert,
drink,
breakfast(){},
};
15.对象属性名
//对象属性名
let food ={};
let drink = 'hotdrink';
food.dessert = 'cake';
//如果属性包含空格 不能使用对象.属性，需要用方括号
food['hot drink'] = 'tea';
food[drink] = 'tea';
//两种写法一样16.对比两个值是否相等 -Object.is()
//对比两个值是否相等 -Object.is();
+0 == -0;
//true
+0 === -0;
//true
NaN == NaN;
//false
Object.is(NaN,NaN);
//true
Object.is(+0,-0);
//false17.把对象的值复制到另一个对象中 Object.assign()
//把对象的值复制到另一个对象中 Object.assign();
let breakfast = {};
Object.assign(breakfast,{drink:'peer'});
//breakfast 里面的东西 就是{drink:'peer'}
18.设置对象的prototype -Object.setPrototypeOf()
设置对象的prototype -Object.setPrototypeOf();
let breakfast = {getDrink(){
return 'tea';
}};
let dinner = {
getDrink(){
return 'peer';
}
};
letsunday = Object.create(breakfast);
console.log(sunday.getDrink());
//tea
console.log(Object.getPrototypeOf(sunday) === breakfast);
//trueObject.setPrototypeOf(sunday,dinner);
console.log(sunday.getDrink());
//peer
console.log(Object.getPrototypeOf(sunday) === dinner);
//true
19._proto_
let sunday = {
__proto__:breakfast
};
console.log(sunday.getDrink());
//tea
console.log(Object.getPrototypeOf(sunday) === breakfast);
//true
sunday.__proto__ = dinner;
console.log(sunday.getDrink());
//peer
console.log(Object.getPrototypeOf(sunday) === dinner);
//true20.super
let sunday = {__proto__:breakfast,
getDrink(){
return super.getDrink()+'milk';
}};
21.迭代器 Iteratorsnext 返回 value
function chef(foods) {
let i = 0;
return{
next(){
let done = (i>= foods.length);
let value = https://www.it610.com/article/!done ? foods[i++]:undefined;
return{
value:value,
done: done
}
}
}
}let wanghao = chef(['tomato','egg']);
console.log(wanghao.next());
//tomatodone false
console.log(wanghao.next());
//eggdone false
console.log(wanghao.next());
//value :undefineddone :true22.生成器Generators
function* chef(){
yield 'tomato';
yield 'egg';
}
let wanghao = chef();
console.log(wanghao.next());
//tomatodone false
console.log(wanghao.next());
//eggdone false
console.log(wanghao.next());
//value :undefineddone :truelet chef = function* chef(foods){
for(var i =0;
i23.class 类 创建对象
//class 类 创建对象
class Chef{
constructor(food){
this.food = food;
}cook(){
console.log(this.food);
}}
let wanghao = new Chef();
wanghao.cook();
24.set 与 get 【React|ECMAScript新功能介绍（es6 es2015）】
set 与 get
class Chef{
constructor(food){
this.food = food;
this.dish =[];
}get menu(){return this.dish;
}
set menu(dish){
this.dish.push(dish)
}
staticcook(food){
console.log(food);
}}
let wanghao = new Chef();
wanghao.menu = 'shrimp';
//set
wanghao.menu = 'cake';
//set
wanghao.menu;
//get
wanghao.cook();
25.静态方法 static直接调用
Chef.cook('tomato');
26 继承 extends
//继承 extends
class Person{
constructor(name,birthday){
this.name = name;
this.birthday = birthday;
}intro(){
return`${this.name} ,${this.birthday}`;
}
}
class Chef extendsPerson{
constructor(name,birthday){
super(name,birthday);
}
}
let wanghao= new Chef('wanghao','1984-01-01');
wanghao.intro();
27.集合 Set 类似Arrayset 中不能有重复的内容,添加重复的东西加不进去
//集合 Set 类似Arrayset 中不能有重复的内容,添加重复的东西加不进去
let desserts = new Set('cake tea');
console.log(desserts);
desserts.add();
//添加
desserts.size//判断size
desserts.has('')//是否有某些元素
desserts.delete('')//删除元素
desserts.forEach( dessert =>{
console.log(dessert);
});
//遍历元素
desserts.clear();
//清空Set28.Map
//Map
let food = new Map();
//创建 Map
let fruit = {},cook = function () {},dessert = '甜点';
food.set(fruit,'apple');
food.set(cook,'fork');
food.set(dessert,'cake');
food.set();
//大小
food.get(fruit);
//apple
food.get(cook);
//fork
food.delete(fruit)//删除元素
food.has(fruit);
food.forEach((vaule,key)=>{
console.log(`${key} = ${value}`)
})
food.clear();
//清空Map29.Module 模块
//创建模块 导出模块 导入模块
// 重命名导出与导入的东西
// 默认导出的东西
import {fruit,dessert,supper as dinner} from './chef';
//导入全部
import * as chef from './chef';
//chef 是自己命的一个名
console.log(fruit,dessert);
console.log(chef.fruit,chef.dessert);
dinner(fruit,dessert);
//模块默认导出
export default function dinner(fruit,dessert) {
console.log(`今天的晚餐是：${fruit} 与${dessert}`);
}//导入
importchef from './chef';
chef('apple','Hamburger');
export let fruit = 'apple';
export let dessert = 'cake';
export {fruit,dessert}//导出模块
function dinner(fruit,dessert) {
console.log(`今天的晚餐是：${fruit} 与${dessert}`);
}
export {fruit,dessert,dinner as supper};
推荐阅读
- 前端|面试官（谈谈Vue和React的区别（））
- react|高德地图的使用及自定义图标
- React|【React Native开发】React Native控件之RefreshControl组件详解(21)
- React|React Native开源项目-嘎嘎商城客户端(持续更新中)
- 工作与生活|2016总结,真正新的里程碑和新起点
- React|【React Native开发】React Native应用设备运行(Running)以及调试(Debugging)(3)
- React|【React Native开发】React Native控件之ListView组件讲解以及最齐全实例(19)
- React|React Native控件之PullToRefreshViewAndroid下拉刷新组件讲解(20)
- React|【React Native开发】React Native控件之Text组件讲解(9)
- react学习之旅|react+antd-mobile之项目构建+基础配置