ECMAScript 6.0(2015年)
es6核心知识
- 变量上的变化 let/const
babel可以编译成var的形式 - 不允许重复定义变量
var num=0; var num=20; console.log(num);//var可以重复定义
let num=0; let num=20; console.log(num);//此处报错
- 不存在变量提升,
console.log(b); // 变量声明提升
var b = 20;
<input type="button" value="按我" />
<script>
/*
es6类没有变量提升 所以必须先定义类 后实例化对象
*/
var _this;
class Student {
constructor(sname) {
_this = this;
this.sname = sname;
//this.study();
this.btn = document.querySelector('input');
this.btn.onclick = this.study.bind(this);
}
study() {
console.log(this.sname + 'work hard');
}
}
let s1 = new Student('jack');
s1.study();
console.log(_this === s1);
</script>
- 支持块级作用域
if(10>5) {
let c = 20; // 只能在当前块级作用域下有效
console.log(c);
}
//console.log(c); // c is not defined
if(true) {
var c = 20; // 不支持块级作用域
}
console.log(c);
- const用于定义常量
const PI=3.141592653
PI=2;不能修改
const PI;必须初始化
const obj={a:10,b:20};
obj.a=12;
console.log(obj);//可以修改不可以重新赋值
闭包
<script>
/* 全局作用域 局部作用域
var num = 10;
function f() {
var num2 = 20; // 函数内定义的变量 局部变量
console.log(num);
console.log(num2);
}
f();
console.log(num2);
*/
// 闭包 有权利访问另外一个函数作用域中的变量的函数
// fun闭包函数 fun2闭包
function fun() {
var a = 10;
function fun2() {
console.log(a);
}
//fun2();
return fun2;
}
var f = fun();
f(); // 闭包可以延伸变量作用范围
</script>
{
var i=10; //解决用闭包,自执行
}
console.log(i);
{
let i=10;
}
console.log(i); 报错
//结果为3
for(var i=0;i<3;i++){
setTimeout(function(){
console.log(i);
});
}
闭包
for(var i=0;i<3;i++){
(function(i){
setTimeout(function(){
console.log(i);
});
})(i);
}
var arr=[];
for(var i=0;i<2;i++){
arr[i]=function(){
console.log(i);
}
}
arr[0]();
arr[1]();//2
单击li 打印每个li的序号:
<ul class="nav">
<li>北京</li>
<li>上海</li>
<li>深圳</li>
</ul>
1 )思路一 动态添加属性
<script>
var lis = document.querySelector('ul.nav').querySelectorAll('li');
//思路一 动态添加属性
for(var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function() {
console.log(this.index);
}
}
2)思路二闭包
// 思路二闭包
for(var i = 0; i < lis.length; i++) {
(function(i) {
lis[i].onclick = function() {
console.log(i);
}
})(i);
}
3) es6 let
for(let i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
console.log(i);
}
}
3秒后 打印每个城市
for(var i = 0; i < lis.length; i++) {
// 闭包
(function(i) {
setTimeout(function() {
console.log(lis[i].innerHTML);
},3000);
})(i);
}
// 滴滴打车 3公里以内 14 每增加1公里收5元
// 堵车 在原来收费上多收5元
var c = (function() {
var base = 14;
var sum = 0;
return {
normal: function(n) {
if (n <= 3) {
sum = base;
} else {
sum = base + (n - 3) * 5;
}
return sum;
},
yj: function(flag) {
return flag ? sum + 5 : sum
}
}
})();
c.normal(5);
console.log(c.yj(false));
解构赋值
let [a, b, c] = [10, 20, 30];
console.log(a, b, c);
let [{ name }, { hobby }] = [{ id: 1, name: 'zs', age: 23 }, { id: 2, name: 'lisi', hobby: ['sleeping', 'eating'] }];
console.log(name);
console.log(hobby);
解构重命名
let { name: userName } = { name: 'along', age: 33 };
console.log(userName);
省略解构
let [, , c] = [10, 20, 30];
console.log(c);
默认解构
age没有赋值的话,默认为8
let { name, age = 8 } = { name: 'zs', age: 12 }
console.log(name, age);
默认赋值解构更清晰
function ajax(options) {
var method = options.method || 'get';
}
function ajax({ method = 'get', data }) {
var method = options.method || 'get';
}
ajax({
method: 'post',
data: {
"a": 10,
"b": 20
}
})
es6字符串的变化
let name = 'n1';
let age = 30;
let str = 'My name is ${name}, I am ${age}';
str = str.replace(/\$\{([^}]*)\}/g, function() {
console.log(arguments);
return eval(arguments[1]); // eval('name')
});
console.log(str);
// 模版字符串换行
let name = 'n1';
let age = 30;
let userInfo = [name, age];
let lis = userInfo.map(function(item) {
return `<li>${item}</li>`;
})
let ul = `
<ul>
${lis.join('')}
</ul>`;
console.log(ul);
// 模版标签
let name = 'n1';
let age = 30;
function tag(strs) {
console.log(strs);
console.log(arguments);
let values = Array.prototype.slice.call(arguments, 1);
console.log(values);
let res = '';
for (let key in values) {
res += strs[key] + values[key].toString().toUpperCase();
}
res += strs[strs.length - 1];
return res;
}
let str = tag `My name is ${name}, I am ${age}`;
console.log(str);
// 新增常用api
console.log('http://www.baidu.com'.startsWith('http'));
console.log('1.jpg'.endsWith('png'));
console.log('welcometobeijing'.includes('to'));
console.log('hi'.repeat(10));
console.log('0'.padEnd(8, 5));
严格模式
'use strict';
// if(true) {
// function fun() {
// console.log(123);
// }
// }
// fun()
function fun() {
function fun2() {
}
}
/*
正常模式
严格模式 在严格的条件下执行js代码 ie10以上
*/
/*
function fn() {
'use strict';
num = 10;
}
fn();
console.log(num);
*/
/*
var num = 20;
delete num; // 删除已经声明的变量
console.log(num);
*/
// Cannot delete unqualified property 'num' in strict mode.
// function fn() {
// console.log(this);
// }
// fn(1,2);
// function Student(name) {
// this.name = name;
// }
//Student('zs');
// setInterval(function(){
// console.log(this);
// }, 1000);
function fn(num1,num2) {
console.log(num1+num2);
}
fn(2,3);
/*
严格模式一些变化
1 严格模式禁止变量没有声明就赋值 变量必须先定义后赋值
2 禁止删除已经声明的变量
3 严格模式下 全局作用域中函数this是undefined
构造函数不加new this会报错
4 严格模式下 参数名不能重复
5 不允许在非函数代码块中定义函数
*/
</script>
高阶函数
<script>
// 高阶函数 函数的参数是函数或者返回值是函数
// animate(obj,500,function(){})
function fn() {
return function() {
console.log(123);
}
}
// var newFn = fn();
// newFn();
fn()();
</script>