版权声明:原创文章,未经博主同意,不得擅自转载! https://blog.csdn.net/qq_36718999/article/details/81258645
一、准备
1.1 安装依赖
//浏览器不能直接解析es6,需要安装以下依赖包
\desktop\mkdir xiaoyang-js
\desktop\cd xiaoyang-js
\desktop\xiaoyang-js>npm init
\desktop\xiaoyang-js> npm install [email protected] webpa
[email protected] [email protected] [email protected] b
[email protected] --dev
1.2 配置
1.2.1 新建:xiaoyang-js/webpack.config.js 内容如下:
const wenpack = require('webpack')
module.exports = {
entry:'./script.js',
output:{
filename:'./bundle.js'
},
module:{
rules:[
{
test:/\.js?/,
exclude:/node_modules/,
use:{
loader:'babel-loader',
options:{
presets:['env']
}
}
}]
}
}
1.2.2 新建:xiaoyang-js/.babelrc 内容如下:
{"presets":["env"]}
1.2.3 新建:xiaoyang-js/index.js、xiaoyang-js/index.html(index.html中 引入 bundle.js)
//index.html 中引入:
<script src="./bundle.js"></script>
1.2.4 修改package.json(添加scripts脚本命令)
"description": "",
"main": "index.js",
"scripts": {
"start":"./node_modules/.bin/webpack-dev-server"
},
1.2.5 cmd运行:npm run strat >> 再打开 localhost:8080
二、作用域
//script.js
'use strict';
//块级 作用域
/*{
let i = 0;
}
console.log(i);//报错
*/
//恒量 const
/*
const abc = [];
abc.push('123');
const abc=[]; //报错,不能再次申明
*/
三、解构
//script.js
'use strict';
//解构数组
/*
function breakfast (){
return ['蛋糕','茶','苹果']
}
const [dessert,drink,fruit] = breakfast()
console.log(dessert,drink,fruit);//'蛋糕','茶','苹果'
*/
// 解构对象
function breakf (){
return {dessert:'蛋糕',drink:'茶',fruit:'苹果'}
}
const {dessert:dessert,drink:drink,fruit:fruit} = breakf ()
console.log(dessert,drink,fruit);//'蛋糕','茶','苹果'
四、字符串模板
4.1 模板字符串
//script.js
'use strict';
let dessert = '蛋糕',
drink = '茶';
let breakfast = `您的早餐是:
${dessert}与${drink}!`;//字符串模板
console.log(breakfast);
4.2 带标签的模板字符串
//script.js
'use strict';
let dessert = '蛋糕',
drink = '茶';
//字符串模板 添加标签 可以处理字符 和 变量
let breakfast = kitchen`您的早餐是:
${dessert}与${drink}!`;
function kitchen(strings,...values){
console.log(strings);//数组["您的早餐是:","与","!"]
console.log(values);//数组["蛋糕","茶"]
//输出模板字符串
let result ='';
for (let i=0;i<values.length;i++){
result += strings[i];
result += values[i]
}
result += strings[strings.length-1];
return result
}
console.log(breakfast);
4.3 判断字符串含有某字符
//script.js
'use strict';
let dessert = 'adc',drink = '13';
let breakfast = `您的早餐是${dessert}与${drink}!`
//判断字符串 开头 结尾 含有
console.log(breakfast.startsWith('您'));//true
console.log(breakfast.endsWith('!'));//true
console.log(breakfast.includes('早'));//true
五、函数
5.1 函数参数 默认值
//script.js
'use strict';
//函数 设置默认值
function food (name = 'adv',value = '123'){
console.log(name ,value);
}
5.2 展开操作符 spread
//script.js
'use strict';
//展开操作符 ...
let food = ['ab','cd'];
let chef = ['12','34',...food];
console.log(food);//['ab','cd']
console.log(...food);//ab cd
console.log(chef);//["12", "34", "ab", "cd"]
5.3 剩余操作符 rest
//script.js
'use strict';
//剩余操作符 ... rest
function fast(dessert,drink,...foods){
console.log(dessert,drink,foods);
}
console.log(fast('a','b','c','d','e'));//a b ["c", "d", "e"]
5.4 解构参数
//script.js
'use strict';
//解构参数
function fast (dessert,drink,{locala,resta}={}){
console.log(dessert,drink,locala,resta);
}
fast('a','b',{locala:'12',resta:'34'});//a b 12 34
5.5 函数的name属性
//script.js
'use strict';
//函数 名字 属性name
function food(){}
console.log(food.name);//food
let foods = function (){}
console.log(foods.name);//foods
let foodes = function foodb (){}
console.log(foodes.name);//foodb
5.6 箭头函数
//script.js
'use strict';
//箭头函数 () =>
let breakfast = dessert => dessert;
/*等效于
let breakfast = function breakfast(dessert){return dessert}
*/
console.log(breakfast('123'));//123
// 多个参数
let food = (dessert,drink) =>dessert + drink;
let foods = (dessert,drink) =>{console.log(dessert + drink);};
六、对象
6.1 对象表达式
//script.js
'use strict';
//对象表达式 省略简写
let dessert = 'ad',drink='123';
let food = {
dessert,
drink:drink,
cook (){
console.log('cook');
}
}
console.log(food);
6.2 对象属性名
//script.js
'use strict';
//对象 属性
let food = {};
food.dessert = 'as'; //添加对象属性
console.log(food);//{dessert: "as"}
food['hot drink'] = '123';// 属性名 含有空格
let cook = 'hot cook';
food[cook] = 'df';//变量 作为属性名
console.log(food);//{dessert: "as", hot drink: "123", hot cook: "df"}
6.3 判断两个值是否相等 Object.is()
//script.js
'use strict';
//判断两个值 相等 Object.is();
//判断两个值 == === 存在问题;
console.log(+0 == -0);//true
console.log(+0 === -0);//true
console.log(NaN == NaN);//false
console.log(NaN === NaN);//false
console.log(Object.is(NaN,NaN));//true
console.log(Object.is(-0,+0));//false
6.4 把一个对象的值复制给另一个对象 Object.assign()
//script.js
'use strict';
//把一个对象的值复制给另一个对象 Object.assign();
let breakfast = {};
let food={dessert:"345",drink:'ads'}
Object.assign(
breakfast,{dessert:'123'},food
)
console.log(breakfast);
//{dessert: "345", drink: "ads"},相同的值会覆盖
6.5 设置对象的prototype
//script.js
'use strict';
//把一个对象的值复制给另一个对象 Object.assign();
let breakfase = {
getSome (){
console.log('123');
}
}
let dinner = {
getSome () {
console.log('abc');
}
}
let food = Object.create(breakfase);
food.getSome();//123
console.log(Object.getPrototypeOf(food)===breakfase);//true
Object.setPrototypeOf(food,dinner);//改变food的proto
food.getSome();//abc
6.6 __proto__
//script.js
'use strict';
//把一个对象的值复制给另一个对象 Object.assign();
let breakfase = {
getSome (){
console.log('123');
}
}
let dinner = {
getSome () {
console.log('abc');
}
}
let food = {
__proto__:breakfase
};
food.getSome();//123
console.log(Object.getPrototypeOf(food) === breakfase);//true
food.__proto__ = dinner; //设置proto
food.getSome();//abc
console.log(Object.getPrototypeOf(food) === dinner);//true
6.7 super
//script.js
'use strict';
//super 执行原型的方法
let breakfase = {
getSome (){
return '123'
}
}
let food = {
__proto__:breakfase,
getSome() {
return super.getSome() + 'abc';
}
};
console.log(food.getSome()); //123abc
七、生成器与迭代器
7.1 迭代器 Iterators
//script.js
'use strict';
//Iterators 每次执行时,next() 方法 返回一个对象 {value:xx,done:false/true}
//手动创建迭代器
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 xiaoyang = chef(['13','ac']);
console.log(xiaoyang.next());//{value: "13", done: false}
console.log(xiaoyang.next());//{value: "ac", done: false}
console.log(xiaoyang.next());//{value: undefined, done: true}
7.2 生成器 Generators
//script.js
// 'use strict';
//创建生成器,yield是每次next()返回的值
function* chef(){
yield 'a';
yield 'b';
}
//新建迭代器
let xiaoyang = chef();
console.log(xiaoyang.next());//{value:'a',done:false}
console.log(xiaoyang.next());//{value:'b',done:false}
console.log(xiaoyang.next());//{value:undefinde,done:true}
var chef02 = function* (foods) {
for (let i=0;i<foods.length.i++){
yield foods[i];
}
}
八、类
8.1 class
//script.js
'use strict';
/* jshint esversion: 6 */
//创建类
class Chef {
contstructor(food){//定义属性
this.food= food;
}
cook() {//定义方法
console.log(this.food);
}
}
let xiaoyang = new Chef('123');//实例化
xiaoyang.cook();
8.2 get 与 set
//script.js
'use strict';
/* jshint esversion: 6 */
//创建类
class Chef {
contstructor(food){//定义属性
this.food= food;
this.dish=[];
}
get menu() {
return this.dish;
}
set menu(dish) {
this.dish.push(dish);
}
cook() {//定义方法
console.log(this.food);
}
}
let xiaoyang = new Chef();
console.log(xiaoyang.menu = 'a');
console.log(xiaoyang.menu = 'b');
8.3 静态方法static
//script.js
'use strict';
/* jshint esversion: 6 */
//创建类
class Chef {
contstructor(food){//定义属性
this.food= food;
this.dish=[];
}
static cook(food) {//static 定义静态方法,不用实例化就能使用
console.log(food);
}
}
Chef.cook('123');
8.4 继承 - extends
//script.js
'use strict';
/* jshint esversion: 6 */
//创建类 Person
class Person {
constructor(name,birth) {
this.name = name;
this.birth = birth;
}
intro() {
return `${this.name},${this.birth}`;
}
}
class Chef extends Person { //extents 继承类
constructor(name,birth) {
super(name,birth);//使用super 调用父类
}
}
let xiaoyang = new Chef('xy','123');
console.log(xiaoyang.intro());// xy 123
九、集合
9.1 set
//script.js
'use strict';
//set 一个集合,类似于数组,但不能有重复的项
let desserts = new Set('12a蛋糕');
console.log(desserts);//Set(5) {"1", "2", "a", "蛋", "糕"}
desserts.add('b');//add 增加项
desserts.add('b');//set 不能有重复的项
console.log(desserts.size);//6 size 多少项
console.log(desserts.has('蛋'));//has 是否含有项
desserts.delete('a');//delete 删除
desserts.forEach(dessert =>{
console.log(dessert);
});//forEach 循环
console.log(desserts);
desserts.clear();//clear 清空
9.2 map
//script.js
'use strict';
//map 一个集合,类似于对象,key => value
//key 可以是函数 字符串 对象
let food = new Map();//创建map集合
let fruit ={},cook =function () {},dessert = 'str';
food.set(fruit,'a');// set 设置值value
food.set(cook,'b');
food.set(dessert,'c');
console.log(food);//Map(3) {{…} => "a", ƒ => "b", "str" => "c"}
console.log(food.size);//3 size项数
console.log(food.get(fruit));//a get()得到某项值
food.delete(dessert);//delete 删除某项
console.log(food.has(dessert));//false has是否含有某项
food.forEach((value,key) =>{
console.log(`${value} => ${key}`);
})//forEach 循环
food.clear();//clear 清空food
十、模块 (借用工具 jspm 或 webpack)
10.1 导出或导入
//chef.js 导出模块
export let a = '1';
//chef.js 导出模块
let b = '2';
let c = '3';
export {b,c};
//script.js 使用 导入模块
import {b,c} from "./chef"
console.log(b, c);
//script.js 使用 导入模块
import * as chef from "./chef"
console.log(chef.b,chef.c);
10.2 重命名 as
//chef.js 导出模块 as重命名
let b = '2';
let food = function(){} ;
export {b,food as fruit};
//script.js 导入模块 as重命名
import {b,c as d} from "./chef"
console.log(b, d);
10.3 默认导出导入
//chef.js 导出 默认
export default function food(){
console.log('food');
}
//chef.js 导出 默认
function food (){
console.log('food');
}
export {food as default}
//script.js 导入 默认模块
import zidingyi from "./chef"