1.变量声明let与const（注意与var的区别）
/** * 声明变量let和const */ //let声明的变量不存在预解析 //报错 flag is not defined console.log(flag); let flag = 123;
//let声明的变量不允许重复（在同一个作用域内） //报错Identifier 'flag' has already been declared let flag = 123; let flag = 456; console.log(flag);
//ES6引入了块级作用域，而之前在浏览器中的JS是不存在块级作用域的 if (true) { //var flag = 123; //用var声明的flag变量在for循环外也可以正常打印出来 let flag = 123; //用let声明的flag变量在for循坏外面打印报错：flag is not defined } console.log(flag);
//const用来声明常量 //const声明的常量不允许重新赋值 //报错：Assignment to constant variable. const n = 1; n = 2; //const声明的常量必须初始化 //报错：Missing initializer in const declaration const a;
2.变量的解构赋值
/** * 变量的解构赋值 */ /* var a = 1; var b = 2; var c = 3; */ //或者var a = 1, b = 2, c = 3; //ES6中数组的解构赋值 //var [a,b,c] = [1,2,3]; //打印结果：1 2 3 //let [a,b,c] = [,123,]; //打印结果：undefined 123 undefined let [a = 111,b,c] = [,123,]; //打印结果：111 123 undefined console.log(a,b,c);
//对象的解构赋值 //对象的赋值与顺序没有关系，是通过对象的名称进行赋值 //let {foo,bar} = {foo:'hello',bar:'hi'}; let {foo,bar} = {bar:'hi',foo:'hello'}; console.log(foo,bar); //对象的属性别名（如果有了别名，那原来的名字就无效了） let {foo:abc,bar} = {bar:'hi',foo:'hello'}; //打印结果：hello hi //let {foo:abc,bar} = {bar:'hi',abc:'hello'}; //打印结果：undefined 'hi' console.log(abc,bar); //正常打印 //console.log(foo,bar); //报错：foo is not defined
内置对象Math(Math是对象，不是函数)
let {cos,sin,random} = Math;
//字符串的解构赋值 //[]里面声明的叫变量，这种方法不能获取字符串的长度 let[a,b,c,d,e] = "hello"; console.log(a,b,c,d,e); //打印结果：h e l l o let[a,b,c,d] = "hello"; console.log(a,b,c,d); //打印结果：h e l l //{}里面声明的是对象，即对象的解构赋值 let {length} = "hello"; console.log(length); //打印结果：5 //对象的解构赋值指定默认值 let {foo:abc = 'hello',bar} = {bar:'hi'}; console.log(abc,bar);
3.字符串扩展
/** * 字符串相关扩展 * 几个常用的API： * includes():判断字符串中是否包含指定的子串，有的话返回true，否则返回false * 参数一：匹配的字符串；参数二：从第几个开始匹配 * startsWith():判断字符串是否以特定的字符串开始 * endsWith():判断字符串是否以特定的字符串结束 * * 模板字符串 */ /* console.log('hello world'.includes('world')); //true console.log('hello world'.includes('world1')); //false console.log('hello world'.includes('world',6)); //true console.log('hello world'.includes('world',7)); //false */ /* let url = 'admin/index.php'; console.log(url.startsWith('admin')); console.log(url.endsWith('php')); */ let obj = { username:'xiaoming', age:'24', gender:'male' } let tag = '<div><span>'+obj.username+'</span><span>'+obj.age+ '</span><span>'+obj.gender+'</span></div>'; console.log(tag); //模板字符串:注意：用的是反引号（键盘上数字1左边的） //反引号表示模板，模板中的内容可以有格式，通过${}方式填充数据 //支持一些简单的表达式运算，也支持函数调用 let fn = function(info){ return info; } let tpl = ` <div> <span>${obj.username}</span> <span>${obj.age}</span> <span>${obj.gender}</span> <span>${1+1}</span> <span>${fn('hello')}</span> </div> `; console.log(tpl);
4.函数扩展
/** * 函数扩展： * 1.参数默认值 * 2.参数解构赋值 * 3.rest参数 * 4.扩展运算符：... */ //参数默认值 //以前的写法： function foo(param){ let p = param || 'hello'; //let p = 'hello' || param; //注意，如果把'hello'赋值放在前面，则不管参数是什么都将打印hello console.log(p); } //foo(); //打印结果：hello foo('hi'); //打印结果：hi //ES6的写法：在原来的基础上做了精简 function foo(param = 'hello'){ console.log(param); } //foo(); //打印结果：hello foo('hi'); //打印结果：hi //参数的解构赋值（传入的参数就是一个对象了） function foo({name='xiaoming',age=24} = {}){ console.log(name,age); } foo(); //打印结果：xiaoming 24 foo({name:'zhangsan',age:22}); //打印结果：zhangsan 22 //rest参数（剩余参数）：将单个数据转化成数组 function foo(a,b,...param){ console.log(a); console.log(b); console.log(param); //剩余的参数用数组的形式打印出来 } foo(1,2,3,4,5,6); //扩展运算符 ... :将数组转化成单个数据 function foo(a,b,c,d,e){ console.log(a+b+c+d+e); } foo(1,2,3,4,5); //打印结果：15 let arr = [1,2,3,4,5]; foo.apply(null,arr); //打印结果：15 foo(...arr); //打印结果：15 //合并数组:rest参数的应用 let arr1 = [1,2,3]; let arr2 = [4,5,6]; let arr3 = [...arr1,...arr2]; console.log(arr3); //打印结果：[ 1, 2, 3, 4, 5, 6 ]
/** * 箭头函数 */ //普通函数： function foo(){ console.log('hello'); } //箭头函数： let foo = () => console.log('hello'); //带一个参数的普通函数： function foo(v){ return v; } //带一个参数的箭头函数： let foo = v => v; //多个参数的箭头函数参数必须用（）包住，函数体内有多行代码的必须用{}包住 let foo = (a,b) => {let c=a+b; console.log(c);} /** * 箭头函数的注意事项 */ //1.箭头函数中的this取决于函数的定于，而不是调用 function foo(){ //使用call调用foo时，这里的this其实就是call的第一个参数 console.log(this); //打印结果：{ num: 1 } setTimeout(() => {console.log(this.num)},100); //打印结果：1 } foo.call({num:1}); //2.箭头函数不可以new let foo = () => {this.num = 123;} new foo(); //报错：foo is not a constructor //3.箭头函数不可以使用arguments获取参数列表，可以使用rest参数代替 let foo = (a,b) => { console.log(arguments); //打印出来的对象 } let foo = (...param) => { console.log(param); //打印结果：[ 123, 456 ] } foo(123,456);
5.类与继承
/** * 类与继承 */ //以前创建构造函数和实例 function Animal(name){ this.name = name; } Animal.prototype.showName = function(){ console.log(this.name); } var a = new Animal('Tom'); a.showName(); var b = new Animal('Jerry'); b.showName(); //=============================================== //ES6语法创建构造函数和实例 class Animal{ //静态方法 static showInfo(){ console.log('hello'); } //构造函数 constructor(name){ this.name = name; } showName(){ console.log(this.name); } } let a = new Animal('spike'); a.showName(); Animal.showInfo(); //静态方法只能通过类名来调用 //============================================================ //类的继承extends class Dog extends Animal{ constructor(name, color){ super(name); //调用父类的构造函数 this.color = color; } showColor(){ console.log(this.color); } } let dog = new Dog('doudou','yellow'); dog.showName(); dog.showColor(); Dog.showInfo(); //继承静态方法也是用类名调用