一、声明方式let:
在ES中引入了新的声明方式let,let类似于var,let区别于其他的声明方式主要在于let,仅在他所作用的代码块中有效。
1.块作用域
let声明的变量会作用于块作用域中,外部无法调用。
for(var i=0;i<5;i++){}
console.log(i)
//输出结果:5
for(let i=0;i<5;i++){}
console.log(i)
//输出结果:i is not defined
复制代码
2.let不能提升
var声明的变量可以提升,而let声明的变量不能提升。
console.log(a)
var a = 123
//输出结果:undefined
console.log(a)
let a = 123
//输出结果:a is not defined
复制代码
3.不能重复声明
var重复声明变量会覆盖之前声明过的变量的值,而let拒绝重复声明变量,使用let重复声明的话即会报错。
var a = 123
var a = 456
console.log(a)
//输出结果:456
let a = 123
let a = 456
console.log(a)
//输出结果:Identifier 'a' has already been declared
复制代码
4.暂时性死区
在块作用域中,let声明的变量即会成为暂时性死区。暂时性死区:外部声明的变量无法在内部使用,内部声明的变量外部亦无法使用。
var a = 123
for(let i=0;i<5;i++){
let a =456
}
console.log(a)
//输出结果:123
var a = 123
for(let i=0;i<5;i++){
console.log(a)
let a =456
}
输出结果:a is not defined
复制代码
二、常量声明方式Const
ES中引入了声明方式Const,被Const声明的变量存在栈区的内存地址是不能改变的。数值、字符串、布尔值存在于栈区,所以被const声明后,这些值是无法改变的;对象、数组的内存地址是不能改变的,但内存地址指向的数据是可以改变的。
1.只读常量
const声明为只读常量,改变const声明的简单类型(数值,字符串,布尔值)的变量会报错,改变复合类型(数组,对象)的变量的值则可进行修改,改变符合类型变量的内存地址则会报错。
const a = 123
a = 345
//输出结果:Assignment to constant variable
const b = [1,2,3]
b.push(4,5,6)
coosole.log(b)
//输出结果:[1,2,3,4,5,6]
const c = [1,2,3]
c = []
//输出结果:Assignment to constant variable
复制代码
2.使用说明:
(1)不能提升
console.log(a)
const a = 123
//输出结果:a is not defined
复制代码
(2)暂时性死区
for(let i=0;i<5;i++){
const a = 123
}
console.log(a)
//输出结果:a is not defined
复制代码
(3)不可重复声明
const a = 123
const a = 456
//输出结果:Identifier 'a' has already been declared
复制代码
三、解构赋值
在ES6中,添加了解构赋值,解构赋值语法是一个Javascript表达式,这使得可以将值从数组或属性从对象提取到不同的变量中。
1.数值解构赋值
var [a,b,c] = [1,2,3]
console.log(a)
console.log(b)
console.log(c)
//输出结果:
1
2
3
复制代码
2.字符串解构赋值
var [a,b,c,d,e] = "Hello"
console.log(a)
console.log(b)
console.log(c)
console.log(d)
console.log(e)
//输出结果:
H
e
l
l
o
复制代码
3.对象解构赋值
var {first,second} = {first:"Hello",second:"World"}
console.log(first)
console.log(second)
//输出结果:
Hello
World
复制代码
4.函数解构赋值
function f(x,y){
console.log( x + y)
}
f(1,2)
//输出结果:3
复制代码
四、模板字符串
模板字符串使用反引号(` `)来代替普通字符串的单引号和双引号。模板字符串中包含特定语法(${})的占位符。占位符中的表达式和周围的文本组成了模板字符串。
1.加入变量
模板字符串加入变量需要将变量嵌套在${}中。
var name = "小王"
var age = 18
console.log(`你好,我是${name},今年${age}岁。`)
//输出结果:你好,我是小王,今年18岁。
复制代码
在模板字符串中可以对调用的函数进行运算。
var a = 1
var b = 2
console.log(`1+2=${a+b}`)
输出结果:1+2=3
复制代码
2.调用函数
在模板字符串中,${}可以调用函数。
function f(){
return "Hello World"
}
console.log(`${f()}`)
//输出结果:Hello World
复制代码
五、数组扩展
1.扩展运算符
(1)合并数组
扩展运算符可以实现数组的合并,如下:
var a = [1,2,3]
var b = [...a,4,5,6]
console.log(b)
//输出结果:[1,2,3,4,5,6]
复制代码
(2)复制数组
扩展运算符可以复制数组,如下:
var a = [1,2,3]
var b = [...a]
console.log(b)
//输出结果:[1,2,3]
复制代码
(3)解构赋值
var [a,b,c] = [1,2,[3,4]]
console.log(a,b,c)
//输出结果:1 2 [3,4]
复制代码
(4)将类数组转换为数组
扩展字符串是将类数组转换为数组的方法之一。
- 1
- 2
- 3
- 4
- 5
//
//输出结果:ture
复制代码
(5)将字符串转换为数组
var a = "hello"
var b = [...a]
console.log(b)
//输出结果:["h", "e", "l", "l", "o"]
复制代码
2. Array.from和 Array.of
(1)Array.from
作用:将类数组转化为真正的数组。
- 1
- 2
- 3
- 4
- 5
//输出结果:ture
复制代码
(2)Array.of
作用:将一组值转化为数组
Array.of(1,2,3)
//输出结果:[1,2,3]
复制代码
3. find 和 findIndex
(1)find
作用:寻找数组中的是否存在符合要求的值,存在则返回该值,如果不存在符合要求的值则返回undefined。
var a = [1,2,3,4]
console.log(a.find((index)=>index > 2))
//输出结果:3
复制代码
(2)findIndex
作用:寻找数组中是否寻在符合要求的值,存在则返回该值所在的位置,不存在的话则返回-1。
var a = [1,2,3,4]
console.log(a.findIndex((index)=>index > 2))
//输出结果:2
复制代码
3.includes
判断元素是否在数组中存在,存在返回ture,不存在则返回false。
var a = [1,2,3]
a.includes(1)
//得到结果:ture
a.includes(4)
//得到结果:false
复制代码
4.fill
作用:给数组填充某个指定的值,若已存在值则会被覆盖。 fill可以有第二参数和第三参数,表示填充的起点和终点(起点为闭区间,终点为开区间)。
var a = [1,2,3]
console.log(a.fill("*",0,2))
//输出结果:["*","*",2]
复制代码
六、函数拓展
1.设置默认值
在ES6之前,函数的参数不能设默认值,在ES6中进行了更改,我们可以在函数参数中为函数设定默认值。
function f(x,y=2){
console.log(x,y)
}
f(2)
//输出结果:2 2
复制代码
2.箭头函数
在ES6中,允许使用箭头(=>)构造函数。如果函数只有一行指令,在箭头函数中即可省略大括号。
var f = function(a,b){return a+b}
var f = (a,b) => a+b
//上面两个函数相等,箭头函数即可实现上述函数的功能
复制代码
七、对象拓展
1.Object.getOwnProertyDescriptor()
获取对象中的自身属性。
var a = 1;
console.log(Object.getOwnPropertyDescriptor(window,"a"))
//输出结果:{value: 1, writable: true, enumerable: true, configurable: false}
复制代码
2.Object.assign
Object.assign就去用于对象的合并,将源对象的所有的可枚举属性,复制到目标对象。
var obj1 = {a:"hello"}
var obj2 = {b:"world"}
console.log(Object.assign(obj1,obj2))
//输出结果:{a: "hello", b: "world"}
复制代码
3.Object.keys、Object.values、Object.entries
(1)Object.keys
Object.keys返回一个数组,包括参与对象键值对中的键。
var obj = {a:"hello",b:"world"}
console.log(Object.keys(obj))
输出结果:["a", "b"]
复制代码
(2)Object.values
Object.values返回一个数组,包括参与对象键值对中的值。
var obj = {a:"hello",b:"world"}
console.log(Object.values(obj))
输出结果:["hello", "world"]
复制代码
(3)Object.entries
Object.entries返回一个数组,包括参与对象键值对数组。
var obj = {a:"hello",b:"world"}
console.log(Object.entries(obj))
输出结果:[["a", "hello"] , ["b", "world"]]
复制代码
八、Class
类实际上是个“特殊的函数”,就像你能够定义的函数表达式和函数声明一样,类语法有两个组成部分:类表达式和类声明。
1.class创建对象
格式:
class 类名{
constructor(参数){
this.属性 = 参数;
}
mothod(){}
}
复制代码
使用class创建一个类:
class NBAPlayer{
constructor(name,age,stature){
this.name = name;
this.age = age;
this.stature = stature;
}
say(){
console.log(`我是${this.name},今年${this.age}岁,身高${this.stature}cm。`)
}
}
var curry = new NBAPlayer("curry","30",191)
console.log(curry.say())
//输出结果:我是curry,今年30岁,身高191cm。
复制代码
2.使用extends继承class
格式:
class 子类 extends 父类{
construtor(参数){
super(参数)
this.属性 = 值
}
}
复制代码
使用extends实现继承
class NBAPlayer{
constructor(name,age,stature){
this.name = name;
this.age = age;
this.stature = stature;
}
}
class MVP extends NBAPlayer{
constructor(name,age,stature,year){
super(name,age,stature)
this.year = year
}
say(){
console.log(`我是${this.name},今年${this.age}岁,身高${this.stature}cm,是${this.year}年的MVP。`)
}
}
var curry = new MVP("curry",30,191,2015)
console.log(curry.say())
//输出结果:我是curry,今年30岁,身高191cm,是2015年的MVP。
复制代码
3.静态方法static
可直接通过类名来访问的方法就叫做静态方法,我们可以通过ststic来为类创建静态方法。
class NBAPlayer{
constructor(name,age,stature){
this.name = name;
this.age = age;
this.stature = stature;
}
static jump(){
console.log("jump:90cm")
}
}
NBAPlayer.jump()
//输出结果:jump:90cm
复制代码