1 let 和const
<script type="text/script">
//let声明的变量是块级作用域,不能重复声明
{
let gkate=12;
}
console.log(a)
</script>
const命令
基本语法
const声明一个只读的常量,一旦声明,常量的值就不能改变
const = PI = 3.14;
PI = 3;
上面的代码表明改变变量的值会报错
const声明的变量不得改变值,这意味着const一旦声明变量,就必须立即初始化,不能留到以后赋值
const的作用域与let命令不同,只在声明
2模板字符串
传统的JavaScript语言,输出模板通常是这样的写的。
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);
上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题。
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义
let greeting = `\`Yo\` World!`;
输入结果:`Yo` World!
如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`);
3箭头函数
//传统的
//无形参
var f = function(a){
return a;
}
//有形参
var sum=function(num1,num2){
return num1+num2;
}
//箭头函数
//无形参
var f = (a) => 5
//有形参
var sum = (num1,num2) =>num1+num2;
使用箭头函数注意点:
箭头函数有几个使用注意点。
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
var name = 'Twiss';
var person = {
name:'Gkate',
age:18,
fav:function(){
console.log(this)
console.log(this.name)
}
}
person.fav();
此时this指向的是使用它的对象,也就是person对象
var person2 = {
name:'Gkate',
age:18,
fav: ()=>{
// 当前this指向了定义时所在的对象(window)
console.log(this);
}
}
person2.fav();
使用箭头函数,它表示定义时所在的对象window。
2)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
4对象的单体模式
为了解决箭头函数this指向的问题 推出来一种写法 对象的单体模式
var person = {
name:'Twiss',
age:23a,
fav(){
console.log(this.name,this.age);
}
}
person.fav();
5面向对象
JavaScript 语言中,生成实例对象的传统方法是通过构造函数。
function Animal(name,age){
this.name = name;
this.age = age;
}
Animal.prototype.showName = function(){
console.log(this.name);
console.log(this.age);
}
var a = new Animal('dog",5);
a.showName();
上面这种写法跟传统的面向对象语言(比如 C++ 和 Java)差异很大,很容易让新学习这门语言的程序员感到困惑。
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。
基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写,就是下面这样
class Animal{
// 构造器 当你创建实例之后 constructor()方法会立刻调用 通常这个方法初始化对象的属性
constructor(name,age){
this.name = name;
this.age = age;
}
showName(){
console.log(this.name);
}
}
var a2 = new Animal('cat',3);
上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。也就是说,ES5 的构造函数Animal,对应 ES6 的Animal类的构造方法。
Animal类除了构造方法,还定义了一个showName方法。注意,定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。
ES6 的类,完全可以看作构造函数的另一种写法。
console.log(Animal2===Animal2.prototype.constructor);//true
上面代码表示,类本身就指向了类的构造函数。
使用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。
5.1constructor方法
constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。
class Animal {
}
// 等同于
class Animal {
constructor() {}
}
上面代码中,定义了一个空的类Point,JavaScript 引擎会自动为它添加一个空的constructor方法。