码迷,mamicode.com
首页 > 其他好文 > 详细

ES6常用语法

时间:2019-10-05 12:23:15      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:for循环   函数   参数   sign   foo   循环   use   赋值   size   

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();     //继承静态方法也是用类名调用

 

ES6常用语法

标签:for循环   函数   参数   sign   foo   循环   use   赋值   size   

原文地址:https://www.cnblogs.com/zcy9838/p/11624121.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!