有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

web前端高阶-ES6语法糖

javascript cat 3个月前 (07-19) 84次浏览 已收录 0个评论 扫描二维码

CMAScript 6.0(以下简称 ES6)是JavaScript语言的下一代标准

2.解构赋值

2.1 数组的解构赋值

    //数组解构赋值
    let arr = [100,'小明',200];

    let [a,b,c] = arr;
    let [,,m] = arr;
    let [x,y] = [100,200];

2.2 对象的解构赋值

 //对象解构赋值
    //将对象中的某个属性 通过变量提取出来
    // 按照对象属性名进行匹配
    let user = {name:'张麻子',age:20};

    let {age,name} = user;
    console.log( name);
    console.log(age);

2.3 函数的解构赋值

   //函数解构赋值
    function sum([a,b]){
        return a+b;
    }

    console.log(  sum([100,200]));

    // 
    function userCreate({name,like='打麻将'}){
        return '我是:'+name+'我的爱好:'+like
    }
   console.log( userCreate({name:'张麻子;',age:20,sex:'男'}));

2.4 解构赋值案例
请求json文件并拿到json数据

    $http.get('data.json',({id,status,data} )=>{
        console.log(id);
        console.log(status);
        console.log(data);
    })

3.展开运算符 ...

作用:将字符串 数组 对象 进行展开

  // 1.展开字符串
    let str = 'xxczxcxc';
    console.log(...str);
    // 字符串转为数组
    // let strArr = str.split('');
    let strArr = [...str];
    console.log(strArr);

    //2.展开数组
    let arr = ['xxx','aaaa','333'];
    let arr1 = ['张麻子','张三'];
    console.log(...arr);
    //数组合并【浅拷贝】
    // let arr2 = arr.concat(arr1);
    let arr2 = [...arr1,...arr];
    console.log(arr2);

    //将伪数组转换为真数组
    function sum(){
        let argArr = [...arguments];
        console.log(argArr);
    }   
    sum(1,5,69,8,9,5,5,5,5);

    //将对象进行展开
    let user={name:'张三',age:'20'};
    let info = {sex:'男',like:'打游戏'};
    //对象合并【浅拷贝】
    // let obj = Object.assign({},user,info);
    let obj = {...user,...info};
    console.log(obj);

4.模板字符串

作用: 字符串拼接 可以在字符串拼接中写变量 ${data}

let user={
        name:'张麻子',
        age:45,
        like:['抽烟','喝酒','烫头']
    }

    // let str = '我的名字:'+user.name+';'+'我的年龄:'+user.age+'我的爱好:'+user.like[0]+','+user.like[1]+','+user.like[2]; 

    let str = `
    我的名字:${user.name},
    我的年龄:${user.age},
    我的爱好:${user.like[0]},${user.like[1]},${user.like[2]}
    `
    console.log(str);

5.ES6的类

5.1 最简单类的写法

    // ES6 人类
     class  Prosen{
        // 构造器 接收参数--构造属性
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        //方法
        eat(){
            console.log('吃.....');
        }
     }
     let user = new Prosen('黄四郎',25)

5.2 类的属性 类的静态方法

    // ES6 人类
     class  Prosen{
        //类特有的属性--常量
        have='两只眼睛';
        features = '一张嘴巴';
        // 构造器 接收参数--构造属性
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        //方法--公有方法
        eat(){
            console.log('吃.....');
        }
        //静态方法---类的私有方法
        //只有类才可以使用的方法
        static war(){
            console.log('打仗...');
        }
     }
     let user = new Prosen('黄四郎',25)

     console.log(Prosen.war());

5.2 ES6 类的 继承

ES6 子类可以完美继承所有父类所有的东西

父类的属性(常量) 父类公共方法 父类静态方法 父类构造器中的属性
//子类写法
class  子类名  extends 父类名{
    constructor(){
        super(传递给父类的数据);
    }
}
 //人类
    class Prosen{
        features="两只眼睛 一张嘴巴";

        //构造器
        constructor(name,age){
            this.age= age;
            this.name = name;
        }
        //公共方法
        eat(){
            console.log('吃东西...')
        }

        //静态方法
        static war(){
            console.log('战争...');
        }
    }

    //医生类
    class Doctor extends Prosen{

        constructor(name,age,genre){
            // 继承父类的属性及方法
            super(name,age);
            this.genre=genre;
        }
        //公共方法
        show(){
            console.log('看病')
        }
        //静态方法
       static likeColor(){
            console.log('喜欢穿白色的衣服');
        }
    }

    let doctor1 = new Doctor('张麻子',40,'外科')

6.模块化

模块的优点:

1.高内聚:尽可能将一个功能的实现 写到一个模块中

2.低耦合:尽可能每个模块之间相互不产生影响

6.1 回顾node环境中的模块导入与导出

//导出
export.moudle = {xx}
//导入
require('./index.css');
const xx = requrie('./a.js');

6.2 ES6环境的模块导入导出

6.2.1 语法一

//导出.js
export let a= '张三';
export let age = '25';
export let arr = [11,32,3,556,2,5]
//导入js
import {a,age,arr} from './导出语法1.js'

console.log(a);
console.log(age);
console.log(arr)
   <!-- 引入最终的主模块到html页面 -->
   <script src="./导入.js" type="module"></script>

6.2.2 语法二【用得更多】

//导入js
let name= '张麻子';
let user ={
    name:'黄四郎',
    age:20
}
let likes = ['抽烟','喝酒','烫头'];
export default {
    name,
    user,
    likes
}
//导入js
//语法二
//1.接收一个对象
// import userInfo from './导出语法2.js'
// console.log(userInfo);

//2.对象解构赋值接收
//注意:必须先用一个变量对象接收了值 之后才能使用结构拿到每个属性
import userInfo from './导出语法2.js'
let {name,user,likes} = userInfo;
console.log(name);
console.log(user);
console.log(likes);
   <!-- 引入最终的主模块到html页面 -->
   <script src="./导入.js" type="module"></script>
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址