• 学习笔记 谷粒03 前端


    vscode安装

    https://blog.csdn.net/qq_25744257/article/details/125273656

    ES6

    • ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准,开发大型应用
    • ES6是规范,JavaScript是实现

    1

    • 打开VSCode—打开文件夹—新建es6文件夹—新建文件1、let.html—shift+!+Enter生成模板。填入下面内容后,右键open with live server

    2.1 let声明变量 ***

    • var 声明的变量没有局部作用域,let 有局部作用域
    • var 可以声明多次, let 只能声明一次

    2.2 const声明常量(只读变量)

    • 不能改变
    • const n = 10;

    2.3 解构赋值

    • 对数组或者对象进行模式匹配,(将对象或数组赋值给单个变量)
    • let [x, y, z] = [1, 2, 3]
    • let user = {name: 'Helen', age: 18}
    • let { name, age } =  user     ===  (name=user.name)

    字符串扩展

    • startsWith,endsWith,includes,
    • 反引号``括起多行字符串 

    模板字符串

    • 占位符功能 ${变量名}
    • ( 字符串插入变量和表达式。变量名写在 ${} 中,${} 中可以放入 JavaScript 表达式)
    • ( let info = `My name is ${name} ,I am ${age+1}` )

    函数优化

    • 默认值  add2(a = 1)
    • 不定参数  fun(...values) {}
    • 箭头函数(lambda表达式),(a) => {}

    对象优化

    • 获取对象的键值对 Object.keys()、values、entries
    • 合并对象 Object.assgn(target,source1,source2)  
    • 定义对象 const user1 = {name,age}   (name,age是变量名)
    • 拷贝对象  let user2= { …user1}  
    • 合并对象  let user3= { ...user1, ...user2}

    2.7箭头函数

    • 箭头函数提供了一种更加简洁的函数书写方式。基本语法是:
    • 参数 => 函数体
    • var f1 = function(a) {return a} //传统
    • var f2 = a => a //es6
    • var f2 = (m,n) => m+n //es6

    map和reduce方法

    • map():接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回
    • arr = arr.map(item=> item*2);
    • reduce() 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,
    • let result = arr.reduce((a,b)=>{  return a + b; },100); (100+数组所有元素返回合计)

    Promise

    • 把Ajax封装到Promise中,赋值给let p
    • 在Ajax中成功使用resolve(data),失败使用reject(err)
    • then和catch 成功 或者失败

    模块化

    • 模块化就是把代码进行拆分,方便重复利用。类似于java中的导包,而JS换了个概念,是导模块。

    模块功能主要有两个命令构成 export 和import

    • export用于规定模块的对外接口
    • import用于导入其他模块提供的功能

    三、Vue

    MVVM思想

    • M:model 包括数据和一些基本操作
    • V:view 视图,页面渲染结果
    • VM:View-model,模型与视图间的双向操作(无需开发人员干涉)

    核心

    • 视图和数据通过VM绑定起来,model里有变化会自动地通过Directives填写到视view中,视图表单中添加了内容也会自动地通过DOMListeners保存到模型中
    • 双向绑定,模型变化,视图变化。反之亦然

    下载安装:

    • 下载vue.min.js用