目录
ES6开发环境搭建
现在的Chrome浏览器已经支持ES6了，但是有些低版本的浏览器还是不支持ES6的语法，这就需要我们把ES6的语法自动的转变成ES5的语法。如果你听过我Vue课程的话，应该知道Webpack是有自动编译转换能力的，除了Webpack自动编译，我们还可以用Babel来完成
-
建立工程目录
-
src：书写ES6代码的文件夹，写的js程序都放在这里。
-
dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件
-
-
新建一个index.html
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="./dist/index.js"></script> </head> <body> ECMA Script 6 </body> </html> -
引入dist目录下的文件
script src="./dist/index.js"></script> -
在index.js编写ES6代码
-
初始化项目 用命令 npm init -y
-
全局安装Babel -cli 用命令 npm install -g babel-cli
-
本地安装babel-preset-es2015 和 babel-cli
用命令 npm install --save-dev babel-preset-es2015 babel-cli
-
新建.babelrc
{ "presets":[ "es2015" ], "plugins":[] } -
ES6转换ES5 用命令 babel src/index.js -o dist/index.js
但是上面操作很麻烦，用npm run build操作很简单 把build 命令改成如下：
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
}
新的声明方式
-
var：它是variable的简写，可以理解成变量的意思
-
let：它在英文中是“让”的意思，也可以理解为一种声明的意思
-
const：它在英文中也是常量的意思，在ES6也是用来声明常量的，常量你可以简单理解为不变的量
{ let a = 111; } console.log(a); // Uncaught ReferenceError: a is not defined a如果用let声明可以理解成局部的变量，如果用var声明就不报错了 const b = 2; // b是常量 无法修改了
变量的解构赋值
-
常量的解构赋值
let a = 1;
let b = 2;
let c = 3;
// 上述的声明可以换成下面这种解构赋值的方式
let [a,b,c] = [1,2,3];
console.log(a);
console.log(b);
console.log(c);
// 不管多复杂的解构赋值，左右结构要对应
let [a,[b,c],d] = [1,[2,3],4];-
字符串的解构赋值
const [a,b,c,d,e,f]="Harry"; console.log(a);// H console.log(b);// a console.log(c);// r console.log(d);// r console.log(e);// y console.log(f);// undefined -
解构默认值
let [a = true] =[]; console.log(a); // true -
圆括号的使用
let str; {str} = {str:'Harry'}; // error console.log(foo); let str; ({str} = {str:'Harry'}); // 正确的写法 console.log(foo); -
对象的解构赋值
let {a,b} = {a:'HanShuo',b:'Harry'}; console.log(a + b); // HanShuoHarry let json = { a:'hanshuo', b:'Harry' } function func({a, b='hanshuo'}){ console.log(a, b); // hanshuo Harry } func(json); -
数组解构赋值
let arr = ['hanshuo','harry','react']; function fun(a, b, c){ console.log(a, b, c); } fun(...arr);
扩展运算符和reset运算符
-
对象操作运算符（...)
function test(...arg) {
console.log(arg[0]);
console.log(arg[1]);
}
test(1, 2);-
数组操作运算符的好处
let arr1 = ['a','b','c'];
let arr2 = [...arr1];
console.log(arr2); // a b c
arr2.push('d');// 操作arr2不会影响arr1
console.log(arr2); // a b c d
console.log(arr1); // a b c-
reset运算符
function test(first, ...arg){
console.log(arg.length); // 3
}
test(0,1,2,3);
字符串模板
-
字符串拼接
let a = 'harry';
let name = `我是${a}`;
console.log(name); // 我是harry
let nameWrite = `<h2>${name}</h2>` // 支持标签
document.write(nameWrite) -
对运算符的支持
let a = 1;
let b = 2;
let result = `${a+b}`;
document.write(result);查找字符index
let a = 'harry';
let name = `我是${a}`;
console.log(name.indexOf(a)); // 2
console.log(name.includes(a)); // true
console.log(name.endsWith(a)); // true
document.write('harry|'.repeat(3)); // harry|harry|harry|
ES6数字操作
-
对二进制操作
let binary = 0B010101;
console.log(binary); // 21-
对八进制操作
let b = 0o666;
console.log(b); // 438-
数字判断和转换
let a = 11/4;
console.log(Number.isFinite(a));//true
console.log(Number.isFinite('harry'));//false
console.log(Number.isFinite(NaN));//false
console.log(Number.isFinite(undefined));//false-
NaN验证
console.log(Number.isNaN(NaN));-
安全整数
// 最大安全整数
consolec .log(Number.MAX_SAFE_INTEGER);
// 最小安全整数
console.log(Number.MIN_SAFE_INTEGER);
// 安全整数判断
let a= Math.pow(2,53) - 1;
console.log(Number.isSafeInteger(a));//false
ES6数组
-
json转数组
let json = {
'0': 'harry',
'1': 'hanshuo',
length:2
}
let arr = Array.from(json);
console.log(arr)
-
数字和字符串转数组
// 数字转数组
let arr =Array.of(3,4,5,6);
console.log(arr); // [3, 4, 5, 6]
// 字符串转数组
let arr1 =Array.of('harry','hanshuo','react');
console.log(arr1); // ["harry", "hanshuo", "react"]-
数组find
// 在函数中如果找到符合条件的数组元素就进行return，并停止查找
let arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
return value > 5; // 控制台输出了6，说明找到了符合条件的值，并进行返回了，如果找不到会显示undefined
}))-
数组填充和遍历
// 数组填充 let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; arr.fill('harry', 2, 5); // 从第2个到第5个index充满要填充的字符 console.log(arr); // 数组遍历 let arr = ['harry','hanshuo','react'] for (let item of arr){ console.log(item); } for (let item of arr.keys()){ console.log(item); // 0 1 2 } arr.map((value) => console.log(value)); arr.forEach((val) => console.log(val)); arr.filter(val => console.log(val)); arr.some(val => console.log(val)); let list = arr.entries(); console.log(list.next().value); // [0, "harry"] console.log(list.next().value); // [1, "hanshuo"] console.log(list.next().value); // [2, "react"] -
数组内元素判断 in
let arr=[,,,,,]; console.log(0 in arr); // false let arr1=['hanshuo','Harry']; console.log(0 in arr1); // true
ES6的箭头函数和扩展
-
默认值
function add(a, b = 1){ return a + b; } console.log(add(1)); // 2 -
主动抛出错误
function add(a, b = 1){ if(a == 0){ throw new Error('This is error') } return a + b; } add(0);
-
箭头函数
var add = (a, b=1) => a+b;
// 和上面的那行代码等价
var add =(a, b=1) => {
return a+b;
};
console.log(add(2, 3)); // 5
ES6对象
-
对象赋值
let name = "harry"; let skill = 'web'; var obj = {name,skill}; console.log(obj); // {name: "harry", skill: "web"} -
对象key值构建
let key = 'skill'; var obj = { [key]:'web' } console.log(obj.skill); -
自定义对象构建
var obj = { add:function(a,b){ return a+b; } } console.log(obj.add(1,2)); // 3 -
ES6提供的对比对象方法
var obj1 = {name:'harry'}; var obj2 = {name:'harry'}; console.log(obj1.name === obj2.name); //true console.log(Object.is(obj1.name, obj2.name)); //true // === 和 is的区别 ===为同值相等，is()为严格相等 console.log(+0 === -0); //true console.log(NaN === NaN ); //false console.log(Object.is(+0, -0)); //false console.log(Object.is(NaN, NaN)); //true -
对象合并
var a = {a:'hanshuo'}; var b = {b:'harry'}; var c = {c:'web'}; let d = Object.assign(a,b,c) console.log(d); // {a: "hanshuo", b: "harry", c: "web"}
Symbol在对象的作用 (全局标记）
-
声明
var a = new String; var b = new Number; var c = new Boolean; var d = new Array; var e = new Object; var f = Symbol(); console.log(typeof(d)); // Array console.log(typeof(f)); // Symbol var g = Symbol('harry'); console.log(g); // Symbol(harry) 红色的 console.log(g.toString());// Symbol(harry) 白色的 -
如何用Symbol构建对象的Key，并调用和赋值
var harry = Symbol(); var obj = { [harry]:'hanshuo' } console.log(obj[harry]); // hanshuo obj[harry] = 'web'; console.log(obj[harry]); // web -
symbol在对象中的保护作用
var obj = {name:'harry', age:27}; for (let item in obj){ console.log(obj[item]); // harry 27 } console.log('-------'); let obj1 = {name:'harry'}; let age = Symbol(); obj1[age] = 27; for (let item in obj1){ console.log(obj1[item]); // harry } console.log(obj1); // {name: "harry", Symbol(): 27}
Set和WeakSet数据结构
-
set增删查改
let set = new Set(['harry','hanshuo','web']);
console.log(set); // Set {"harry", "hanshuo", "web"}
set.add('harry');
console.log(set); // Set{"harry", "hanshuo", "web"}
set.add('test');
console.log(set); // Set{"harry", "hanshuo", "web", "test"}
set.delete('harry'); //Set{"hanshuo", "web", "test"}
set.has('harry'); // false
set.has('web'); // true
console.log(set.size); // set的长度
-
WeakSet使用
let weakObj = new WeakSet();
let obj = {a:'hanshuo',b:'harry'}
weakObj.add(obj);
console.log(weakObj);
let obj1 = obj
weakObj.add(obj1);
console.log(weakObj); // 这里打印和上面打印一致
Map
-
map的灵活性
let json = {
name: 'hanshuo',
age: 27
}
console.log(json.name); // hanshuo
var map = new Map();
map.set(json,'iii'); // json作为key iii作为value
console.log(map); // 0: {Object => "iii"} key: {name: "hanshuo", age: 27} value: "iii"
map.set('aaa', json); // 'aaa'作为key json作为value
console.log(map); // map.set('aaa', json); // {"aaa" => Object} key: "aaa" value: name: "hanshuo" age: 27
console.log(map.get(json)); // iii
map.delete(json);
console.log(map.size); // 1
map.clear() // 清除所有的
Proxy进行预处理
-
钩子函数 可以理解为在执行方法前预处理一些代码
var pro = new Proxy({
add: function (val) {
return val + 10;
},
name: 'harry'
}, {
get:function(target, key, property){
console.log('come in Get');
// target：得到的目标值
// key：目标的key值，相当于对象的属性
// property：
return target[key];
},
set:function(target,key,value,receiver){
console.log(` setting ${key} = ${value}`);
// target:目标值。
// key：目标的Key值。
// value：要改变的值。
// receiver：改变前的原始值
return target[key] = value;
}
});
console.log(pro.name);-
apply函数 apply的作用是调用内部的方法，它使用在方法体是一个匿名函数时
get = function () {
return 'I am hanshuo';
};
var handler = {
apply(target, ctx, args) {
console.log('do apply');
return Reflect.apply(...arguments);
}
}
var pro = new Proxy(target, handler);
console.log(pro());Promise对象的使用
-
promise执行多步操作非常好用 必须保证上一步完成，才能顺利进行下一步
let state = 1;
function step1(resolve,reject){
console.log('1.开始');
if(state == 1){
resolve('1.完成');
}else{
reject('1.出错');
}
}
function step2(resolve,reject){
console.log('2.开始');
if(state == 1){
resolve('2.完成');
}else{
reject('2.出错');
}
}
function step3(resolve,reject){
console.log('3.开始');
if(state == 1){
resolve('3.完成');
} else{
reject('3.出错');
}
}
new Promise(step1).then(function(val){
console.log(val);
return new Promise(step2);
}).then(function(val){
console.log(val);
return new Promise(step3);
}).then(function(val){
console.log(val);
return val;
});
Class类的使用
-
方法声明
class Person{ name(val){ console.log(val); return val; } age(val){ console.log(val); console.log(this.name('hanshuo') + val + '岁'); return val; } } let p = new Person; p.name('harry'); p.age(18); -
构造函数传参
class Person { constructor(a, b) { this.a = a; this.b = b; } add() { return this.a + this.b; } } let p = new Person(1, 2); console.log(p.add()); // 3 -
继承
class Me extends Person{ } let p = new Me; p.name('hanshuo');
模块化操作
-
export :负责进行模块化，也是模块的输出。
-
import : 负责把模块引，也是模块的引入操作
// 把一个变量导出
export var a = 'hanshuo';
// 把一个变量导入
import {a} from './temp.js';
var a ='harry';
var b ='hanshuo';
var c = 'react';
// 多变量导出
export {a,b,c}
// 函数的模块化导出
export function add(a,b){
return a+b;
}
// export default
export default var a = 'harry';
import test from './temp.js' // test 是随便起的名字-
export default 向外暴露的成员，可以使用任意变量来接收
-
在一个模块中，export default 只允许向外暴露一次
-
在一个模块中，可以同时使用export default 和export 向外暴露成员
-
使用export向外暴露的成员，只能使用{ }的形式来接收，这种形式，叫做【按需导出】
-
export可以向外暴露多个成员，同时，如果某些成员，在import导入时，不需要，可以不在{ }中定义
-
使用export导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收
-
使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名
3341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
