ES6常用语法

ES6

ECMAScript 6.0 (以下简称ES6）使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

let&const

#const常量,声明后不可修改
const a=3；

//var声明的变量往往会越域 
//let声明的变量有严格的局部作用域
<script>
{
  var a = 1;
  let b = 2
}
//a可以打印
 console.log(a);
//b不能打印
console.log(b);
</script>
   
 //var可以声明多次,let只可以声明一次
    
 //var可以变量提升
 //let不会变量提升
    console.log(a) 
    var a=1
    
    console.log(b) 
    let b=2

<script>
        //数组解构
        let arr = [1, 2, 3];
        // let d = arr[0];
        // let b = arr[1];
        // let c = arr[2];
        let [d, b, c] = arr;
        console.log(d, b,c);
    </script>

   <script>
        //对象解构 
        let person = {
            name: "yhh",
            age: 21,
            language: ['java', 'js', 'css'],
        }

        let {
            name,
            age,
            language
        } = person;
        console.log(name, age, language);
        //yhh 21 (3) ['java', 'js', 'css']
    </script>

<script>
        //字符串扩展
        let str = "hello.vue";
        console.log(str.startsWith("hello")) //true 
        console.log(str.endsWith(".vue")) //true 
        console.log(str.includes("e")); //true 
        console.log(str.includes("hello")) //true 
   </script>

<script>
        //字符串模板
        let ss = `<div><a>yhh</a></div>`
        console.log(ss)
        //<div><a>yhh</a></div>  
    </script>

<script>
        let person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css'],

        }

        let {
            name,
            age,
            language
        } = person
        console.log(name, age, language)
        //字符串插入变量和表达式.变量名写在${},${}中可以放入js表达式 
        function fun() {
            return "这是一个函数"
        }
        let info = `我是${name},今年${age+10},我想说${fun()}`
        console.log(info)
    </script>

ES6新特性-函数优化

    <script>
        //函数默认值 
        //在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法： 
        function add(a, b) {
            // 判断b是否为空，为空就给默认值1 
            b = b || 1;
            return a + b;
        }
        // 传一个参数 
        console.log(add(10));
        //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值 
        function add2(a, b = 1) {
            return a + b;
        }
        console.log(add2(20));
        //可变长度参数 
        function fun(...values) {
            console.log(values.length)
        }
        fun(5)
        fun(5, 5, 6)
        //简单的箭头函数 
        function fun(a, b) {
            return a + b;
        }


        var sum = (a, b) => a + b
        console.log(sum(11, 11))
        //箭头函数 
        const person = {
            name: "yhh",
            age: 21,
            language: ['java', 'js', 'css'],
        }

        function hello(person) {
            console.log(person.name)
        }
        let hellos = (obj) => console.log(obj.name)
        hellos(person) //yhh 
    </script>

 <script>
        // 对象的内置函数 
        const person = {
            name: "yhh",
            age: 21,
            language: ['java', 'js', 'css']
        }
        console.log(Object.keys(person)); //["name", "age", "language"] 
        console.log(Object.values(person)); //["yhh", 21, Array(3)] 
        console.log(Object.entries(person)); //[Array(2), Array(2), Array(2)] 
        // 对象合并 
        const target = {
            a: 1
        };
        const source1 = {
            b: 2
        };
        const source2 = {
            c: 3
        };
        Object.assign(target, source1, source2);
        let newarr={...target,...source1,...source2}
        console.log(target); //{a:1,b:2,c:3}
        console.log(newarr); //{a:1,b:2,c:3}

        //2）、声明对象简写 ,key和value相同，可以只写一个
        const age = 23
        const name = ""
        const person1 = {
            age: age,
            name: name
        }

        //3）、声明对象书写方式 
        let person2 = {
            name: "yhh",
            eat: function (food) {
                console.log("我吃了" + food)
            },
            eat1: food => console.log("我吃了" + food),
            eat3(food) {
                console.log("我吃了" + food)
            }
        }
        person2.eat("eat")
        person2.eat1("eat1")
        person2.eat3("eat3")
        //我吃了eat
        //我吃了eat1
        //我吃了eat3
    </script>

    <script>
        //对象拓展运算符
        //拷贝对象 
        let p1 = {
            name: "yhh",
            age: 19
        }
        let someone = {
            ...p1
        }
        console.log(someone)
        //{name: "yhh", age: 19} 
    </script>

map reduce

<script>
        //map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
        let arr = [1, 20, -5, 3];
        arr = arr.map((item) => {
            return item * 2
        });
        //arr = arr.map(item=> item*2);
        console.log(arr);
    </script>

ES6常见的数组遍历方法(6种)

ES6常见的数组遍历方法(6种)

promise异步编排

function myAjax(url){
       return new Promise((resolve, reject) => {
            // 1. 请求用户名是否存在
            $.ajax({
                url,
                success(result) {
                    resolve(result);
                },
                error(err) {
                    reject(err);
                }
            })
        })
    }

    // 验证用户名不存在
    myAjax("http://localhost:8811/user/existUsername")
    .then(result=>{
        if (result.data) {
           alert('用户名不存在！');
           return myAjax("http://localhost:8811/user/existPhone")
        }
        else
        {
            alert(result.message)
        }
    })
    // 验证手机号是否存在
    .then(result=>{
        if (result.data) {
           alert('手机号不存在！');
           return myAjax("http://localhost:8811/user/registryUser")
        }
        else
        {
            alert(result.message)
        }
    })
    // 注册成功
    .then(result=>{
        if (result.data) { 
            alert(result.message)
        }
    })
    .catch(err => {
              alert('服务器异常')
     });

模块化

相当于java的import包

导出

import request from '@/utils/request'

// 查询的基本信息列表
export function listxxinfo(query) {
  return request({
    url: '/customer/xx/list',
    method: 'get',
    params: query
  })
}

//方式2
export {listxxinfo}




// 查询的基本信息列表
export default {
  return request({
    url: '/customer/xx/list',
    method: 'get',
    params: query
  })
}
import defaultxxx from "@/api/customer/xxinfo";

导入

<script>

import { listxxinfo } from "@/api/customer/xxinfo";

全部导入
import * as listxxinfo from "@/api/customer/xxinfo";

</script>