es6小结

es6小结

es6小结

解构表达式

数组解构
```
let arr = [1,2,3];
const [x,y,z] = arr;
```
x,y,z将与arr中的每个值对应取值

对象解构

const person = {
	name: jack,
	age: 21
	language: ['java','js','css']
}

const {name,age,language} = person;
const {name: lalala,age,language} = person;//将name值赋给新变量lalala

将person的每一个属性和左边对应赋值

字符串

新方法

includes();//表示是否找到了参数字符串，返回布尔值
startsWith();//表示参数字符串是否在原字符串头部，返回布尔值
endsWith();//表示参数字符串是否在原字符串尾部，返回布尔值

模板字符串

用反引号，可以作为普通字符串，可以用来定义多行字符串，还可以在字符串中加入变量和表达式
- ```
let e = `
	<div>
		lalala
	</div>
`;
```
- 变量名和js表达式写在${}中
```
let name = "sansan";
function fun(){
	return "这是一个函数"
}
let info = `我是${name},啦啦啦${fun()}`;
```

函数

不定参数

function fun(...values){
	console.log(values.length);
}
fun(1,2,3,4);//4

箭头函数(lambda表达式表示这个我熟)

var print = lalala => console.log(lalala);
print(100);

var sum = (a,b) => a+b;
console.log(sum(1+1));

var sum2 = (a,b) => {c = a+b;return c;}
console.log(sum(1+1));

ps:箭头函数在对象里面不能使用this指针，要调用本对象的属性，得这样:对象名.属性。

常用

箭头+解构

var hi = ({name}) => console.log("hi,"+name);
hi(person);//hi,yyh

对象(Object)优化

新增方法

keys(lalala);//获取对象所有key形成的数组
values(lalala);//获取对象所有value形成的数组
entries(lalala);//获取对象所有key和value形成的数组，格式:`[[k1,v1],[k2,v2],...]`
assign(dest,...src);//将多个src对象的值拷贝到dest中

实例：

console.log(Object.keys(person));//name,age等
console.log(Object.values(person));//jack,21等
console.log(Object.entries(person));//`[[name,jack],[age,21],[language,各种语言]]`

const dest = {a: 1};
const src = {b: 2};
const src2 = {c: 3};
Object.assign(dest,src,src2);
console.log(dest);//{a: 1，b: 2,c: 3}

为什么这里const的变量也可以被改变？

对象简写

const age = 11;
const name = "sansan";
const person = {age,name};//等价于const person = {age: age,name: name};

拓展运算符(拷贝)

"..."用于取出对象所有属性然后拷贝到当前对象中

let some = { ...person};//拷贝person对象

let age = {age: 15};
let name = {name: "pangpang"};
let person2 = { ...age, ...name};//合并age和name对象，如果两个对象的属性名重复，后面覆盖前面

数组新增方法

map()

接收一个函数，将原数组中的所有元素用接收的函数处理后放入新数组返回。
reduce(回调函数，初始值)

对数组的每一个元素执行回调函数。

啥意思呢，结合该回调函数接收的四个参数就懂了：

1）处理上一个元素返回的值(或者是提供的初始值)

2）当前被处理的元素

3）当前元素的索引

4）当前数组

数组元素求和：
```
let arr = [1,2,3,4];
let result = arr.reduce((a,b) => {
	return a+b;//a指处理上一个元素返回的值，b指当前被处理的元素
})
```

promise异步

可以封装异步操作，将请求封装成promise对象

<script>
    //查询用户信息
    //根据用户id查询课程
    //根据课程id查询分数
    //第一种写法
    // $.ajax({
    //     url: "user.json",
    //     success(data){
    //         console.log("查询用户：",data);
    //         $.ajax({
    //             url: `user_course_${data.id}.json`,
    //             success(data){
    //                 console.log("查询到课程："+data);
    //                 $.ajax({
    //                     url: `course_score_${data.id}.json`,
    //                     success(data){
    //                         console.log("查询到分数"+data)
    //                     },error(error){
    //                         console.log("出现异常了："+error)
    //                     }
    //                 })
    //             },error(error){
    //                 console.log("出现异常了："+error)
    //             }
    //         })
    //     },error(error){
    //         console.log("地址错误:"+error)
    //     }
    // });

    // //第二种写法，对比以上的代码
    // let p = new Promise((resolve,reject) => {
    //     //开始异步操作
    //     $.ajax({
    //         url: "user.json",
    //         success:function(data){
    //             console.log("查询用户成功："+data);
    //             resolve(data);
    //         },
    //         error:function(error){
    //             reject(error);
    //         }
    //     });
    // });
    // //成功请求后调用回调函数，then代表成功(lalala是上方resolve传过来的对象),
    // //catch代表失败(lalala_err是上方reject传来一个对象)，此处就没有写catch了
    // p.then((lalala) => {
    //     return new Promise((resolve,reject) => {
    //         $.ajax({
    //             url: `user_course_${lalala.id}.json`,
    //             success:function(hh){
    //                 console.log("查询课程成功："+hh);
    //                 resolve(hh);
    //             },
    //             error:function(error){
    //                 reject(error);
    //             }
    //         });
    //     });
    // }).then((hh) => {
    //     console.log("上一步结果："+hh);
    //     $.ajax({
    //             url: `course_score_${hh.id}.json`,
    //             success:function(hh){
    //                 console.log("查询分数成功："+hh);
    //             },
    //             error:function(error){
    //             }
    //         });
    // })

    //第二种基础上封装
    function get(url){
        return new Promise((resolve,reject) => {
            $.ajax({
                url: url,
                success:function(hoho){
                    resolve(hoho);
                },
                error:function(hoho_err){
                    reject(hoho_err);
                }
            });
        });
    }
    get("user.json")
    .then((hoho_data) => {
        console.log("查询用户成功---："+hoho_data);
        return get(`user_course_${hoho_data.id}.json`);
    })
    .then((hoho_data2) => {
        console.log("查询课程成功---："+hoho_data2);
        return get(`course_score_${hoho_data2.id}.json`);
    })
    .then((hoho_data3) => {
        console.log("查询分数成功---："+hoho_data3);
    })
    .catch((hoho_err2) => {
        console.log("出现异常："+hoho_err2);
    })
</script>

模块化

类似于Java中的导包

两个命令：

import

用于导入其他模块提供的功能
export

用于规定模块的对外接口

export不仅可以导出对象，一切js变量都可以，如：基本类型，函数，数组。

实例：

hello.js中：

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

user.js中：

var name = "jack";
var age = 11;
function add(a,b){
  return a + b;
}
export {name,age,add}

hi.js中：

export default {
	sum(a,b){
		return a + b;
	}
}

main.js中：

import util from "./hello.js"
import {name,age,add} from "./user.js"
import abc from "./hi.js"

util.sum(1,3);
console.log(name);
add(1,3);
abc.sum(1,3);

posted @ 2022-05-26 23:05 xiaoxiaoguai98 阅读(17) 评论(0) 编辑收藏举报

刷新页面返回顶部

xiaoxiaoguai98

es6小结

es6小结

公告