前端基础

ES6

let,var,const

let声明的变量有严格的局部作用域，var没有

    <script>
        {
            var a = 1;
            let b = 2;
        }
        console.log(a); //1
        console.log(b); //报错
    </script>

let声明一次，var声明多次

        var m=1
        var m=2
        let n=3
        let n=4
        console.log(m); //2
        console.log(n); // 报错

let 不存在变量提升,var会变量提升

console.log(x); // undefined
var x = 10;
console.log(y); //ReferenceError: y is not defined
let

const声明常量只读变量 ,一但声明必须初始化，否则会报错,声明之后不允许改变

const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.

解构表达式

数组解构

        let arr=[1,2,3]
        let a=arr[0]
        let b=arr[1]
        let c=arr[2]
        let [x,y,z]=arr

对象解构

        const person = {
            name: '张三',
            age: 12,
            language: ['java', 'js', 'css']
        }

        //const name =person.name
        //const age =person.age
        //const language=person.language 
        const { name, age, language } = person

        const {name:abc}=person
        console.log(abc) //解构出name属性并赋值给abc

字符串扩展

新的API

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

字符串模版：

使用`来定义多行字符串

// 1、多行字符串
let ss = `
            <div>
            <span>hello world<span>
            </div>
            `
console.log(ss)

字符串插入变量和表达式。变量名写在 ${} 中，$ {} 中可以放入 JavaScript 表达式。

        let info =`我是${name},今年${age}岁了`
        
        
        
        function sum(a,b){
            return a+b
        }
        let info2= ` 1+2=${sum(1,2)}`

函数优化

参数默认值

        //以前
        function add(a,b){
            b=b||1 //如果b没有传值，就默认为1
            return a+b
        }
        console.log(add(1))

        //现在
        function add2(a,b=1){
            return a+b
        }
        console.log(add2(1))

不定参数：

        //不定参数
        function fun(...values){
            console.log(values)
        }

        console.log(fun(1,2,3,4,5,6,7,8,9,0))
        console.log(fun(1,2,3,4,5,6,7,8,9,0,11,12,13,14,15,16,17,18,19,20))

箭头函数：

        //以前声明函数
        var print = function () {
            console.log('hello')
        }

        //现在
        var print = () => {
            console.log('hello')
        }

        var print = obj => console.log(obj)

对象优化

ES6 给Object扩展新的方法：

keys(obj) 获取对象的所有 key 形成的数组
values(obj)：获取对象的所有 value 形成的数组
entries(obj)：获取对象的所有 key 和 value 形成的二维数组。格式：[[k1,v1],[k2,v2],...]
assign(dest, ...src) ：将多个 src 对象的值拷贝到 dest 中。（第一层为深拷贝，第二层为浅拷贝)

const person ={
    name: 'John',
    age: 20,
    address: {
        country: 'USA',
        city: 'San Francisco'
    },
    language: ['English', 'French']
}

console.log(Object.keys(person)) // ['name', 'age', 'address', 'language']
console.log(Object.values(person)) // ['John', 20, {country: 'USA', city: 'San Francisco'}, ['English', 'French']]
console.log(Object.entries(person)) // [['name', 'John'], ['age', 20], ['address', {country: 'USA', city: 'San Francisco'}], ['language', ['English', 'French']]]
const target ={a:1}
const source1 ={b:2}
const source2 ={c:3}
Object.assign(target, source1, source2)// {a:1, b:2, c:3}
console.log(target)// {a:1, b:2, c:3}

对象简写：

const age=23
const name ='John'

const person1={name: name, age: age}
console.log(person1)// {name: 'John', age: 23}

// ES6 属性名和变量名相同，可以省略属性名
const person2={name, age}
console.log(person2)// {name: 'John', age: 23}

对象属性简写：


let person={
    name:"John",
    eat:function(food) {
        console.log("Eating"+food);
    },
    eat2: food => console.log("Eating "+food),
    eat3(food){
        console.log("Eating "+food);
    }
}
person.eat("Pizza");

对象扩展运算符：

//1. 深拷贝
let person1={name:'tom',age:18};
let someone={...person1};
console.log(someone);

//2. 合并对象
let age={age:18};
let name={name:'tom'};
let person2={...age,...name};
console.log(person2);

map,reduce

map函数

//map reduce
let arr=[1,2,3,4,5,6,7,8,9,10];
// arr= arr.map((item)=>{
//     return item*2;
// })
arr=arr.map(item=>item*2)

reduce函数arr.reduce(callback,[initalValue])

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

const arr = [1,20,-5,3];
//没有初始值：
console.log(arr.reduce((a,b)=>a+b));//19
console.log(arr.reduce((a,b)=>a*b));//-300
//指定初始值：
console.log(arr.reduce((a,b)=>a+b,1));//20
console.log(arr.reduce((a,b)=>a*b,0));//-0

Promise

const promise = new Promise(function (resolve, reject) {
    if (/*异步操作成功*/) {
        resolve(value);
    } else {
        reject(error);
    }
})

//箭头函数
const promise1=new Promise((resolve,reject)=>{
    if(/*异步操作成功*/){
        resolve(value);
    }else{
        reject(error);
    }
})

处理异步结果：

promise.then(function (value) {
    // success
}).catch(function (error) {
});

模块化

类似于Java中的包

导出,下面这个导入使用必须准确写出变量名

const util = {
    sum(a, b) {
        return a + b;
    }
}

var name = "hello"
var age = 18

export { name, age, util }

使用default关键字,导入可以随便起名字

const util = {
    sum(a, b) {
        return a + b;
    }
}

var name = "hello"
var age = 18
export default {
    name,
    age,
    util
}

导入

import { util } from "./hello";
import { name, age } from "./hello";

util.sum(1, 2);
console.log(name, age);

前端基础

# 前端基础

# ES6

# let,var,const

# 解构表达式

# 字符串扩展

# 函数优化

# 对象优化

# map,reduce

# Promise

# 模块化

前端基础

ES6

let,var,const

解构表达式

字符串扩展

函数优化

对象优化

map,reduce

Promise

模块化