ES6/7有很多的新的特性,下面只介绍了一部分,还有几个重要的单独讲,很多的地方都写的不是很详细,主要做一个大概的方向的了解,一篇文章也是写不完的
let 和 const
两个新的关键字用来声明变量
let用来声明一个块级变量,作用域只在块级内部,有几个不同于var的特性:
- 块级作用域
- 不能重复声明
- 不存在变量提升
- 但是存在变量暂时性锁死
example:
var ex = 1;
(function () {
console.log(ex); // ex is not defined
let ex = 2;
})()
(function () {
let ex = 2;
console.log(ex); // 2
})()
console.log(ex) // 1
const用来声明一个不可改变的变量,特性与let相同
example:
var ex = 1;
(function () {
const ex = 2;
console.log(ex) // 2
ex = 1 // error
})()
console.log(ex) // 1
解构赋值
可以很方便的通过数组(是具有Iterator借口的数据结构)或者对象赋值给单个的变量
最简单也是最好用的用法
let list = [1,2]
let [a,b] = list
console.log(a) // 1
console.log(b) // 2
而且支持默认值
let list = [1, 2]
let [a, b, c = 3] = list
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
也可以嵌套
let list = [1, [2, 3]]
let [a, [b, c], d = 4] = list
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(d) // 3
简单的用法,数据交换
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1
对象的结构赋值,语法与数组大致相同,同样支持嵌套
let obj = {
name: 'bulesyk',
age :'22'
}
let {name:name,age:age} = obj
console.log(name) // bulesyk
console.log(age) // 22
看一下对应关系
let obj = {
name: 'bulesyk',
age: '22'
}
let {name: first, age: second, sex: third = 'mail'} = obj
console.log(first) // bulesyk
console.log(second) // 22
console.log(third) // mail
函数的默认参数对象
function fn({a=1,b=2}) {
console.log(a)
console.log(b)
}
// 当需要配置的参数为对象时
fn({
a:3
})
// 3
// 2
字符串
新的includes方法,返回true/false
let ex = 'hello world'
console.log(ex.includes('hello')) // true
新的startsWith和endsWith,返回true/false
console.log(ex.startsWith('hello')) // true
console.log(ex.endsWith('world')) // true
上面的三种方法都支持第二个参数,以为着从第几位(不包括起始位置)开始计算
endsWith的第二个参数是只计算前多少位
console.log(ex.includes('hello',1)) //false
console.log(ex.startsWith('llo',2)) // true
console.log(ex.endsWith('llo',5)) // true
函数
函数参数默认值
function fn(a=1,b=2) {
console.log(a)
console.log(b)
}
// 和解构的不同之处是之前传入的是对象参数
fn(3)
// 3
// 2
rest表示法
function fn(a,b,...params) {
console.log(a)
console.log(b)
console.log(params)
}
fn(1,2,3,4,5)
// 1
// 2
// [3,4,5]
还可以用来合并数组
let a = [1]
let b = [2,3,4]
let c = [5]
console.log([...a,...b,...c])
// 或者 console.log([1,...b,5])
// [1,2,3,4,5]
箭头函数
用来替代匿名函数,并且this指的就是定义时的对象
let ex = {
name: 'example',
fn: function () {
console.log(this);
(function () {
console.log(this);
})();
(()=>{
console.log(this);
})();
}
}
ex.fn();
// Object
// Window
// Object
语法
// () => {}
// function () {}
// para => {} // 或者(para) => {}
// function (para) {}
// (a,b) => {}
// function (a,b) {}
// 形式上,上面两两相同
对象
对象的属性简写
var a= 1;
var b= 2;
var ex = {a,b}
// 等于var ex = {a:a,b:b}
console.log(ex)
// object{a:1,b:2}
方法的简写
var ex = {
fn(){
console.log('fn')
}
// 等于
// fn:function () {
// console.log('fn')
// }
}
ex.fn() // 'fn
数组
Array.from(params)根据类数组返回一个新的数组
var ex = {
0:'a',
1:'b',
length:2
}
var arr = Array.from(ex)
console.log(arr) // ['a','b']
console.log(arr instanceof Array) // true
Class
这相当于构造函数的语法糖
class Fn {
constructor(a, b) {
this.a = a
this.b = b
}
fn(){
console.log('fn')
}
}
var ex = new Fn(1,2)
console.log(ex.a) // 1
console.log(ex.b) // 2
ex.fn() // fn
console.log(typeof Fn) // function
function Fn1(a,b) {
this.a = a
this.b = b
}
Fn1.prototype.fn = function(){
console.log('fn')
}
var ex1 = new Fn1(1,2)
console.log(ex1.a) // 1
console.log(ex1.b) // 2
ex1.fn() // fn
上面Fn大致与Fn1相同,部分不同之处有:
- Fn中的方法是不可枚举的
- 创建实例时要用new关键词,不可以当做一个普通函数来用,会抛出错误
- 继承机制的不同
class Fn {
constructor(a, b) {
this.a = a
this.b = b
}
fn(){
console.log('fn')
}
}
class FnInner extends Fn{
constructor(a,b) {
super(a,b)
// 必须要super如果没有super创建实例时会抛出错误
// super相当于父类的this
}
fn(){
console.log('inner')
}
}
var ex = new FnInner(1,2)
console.log(ex.a) // 1
console.log(ex.b) // 2
ex.fn() // inner
Set
Set是一个内部不能有重复值的对象,使用new Set()创建
var arr = [1,1,3,4,2,4,4]
var set = new Set(arr)
console.log(set) // Set{1,3,4,2}
这个可以很方便的数组去重
var arr = [1,1,3,4,2,4,4]
var set = new Set(arr)
console.log(set) // Set{1,3,4,2}
var arr = Array.from(set)
console.log(arr) // [1,3,4,2]
