ES6常用语法

Posted 2022-12-24 zcy9838

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