ES6笔记

2023-12-05 20:03:52

1.什么是ES6？就是ECMAScript第6版标准。

2.什么是ECMAScript？

ECMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言，如JavaScript则是规范的具体实现。

3.创建html空页面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script>

</script>
<body>
    
</body>
</html>

4.学习let和const和var区别

之前我们前端页面数据的类型都是var类，例如var num=1，var name='mayun'。

但是var有一个缺点就是有插值闪烁的问题

例如，我们在script中写上这样一段代码，正常来说的话，循环外的i应该是不会有值的，但是他偏偏是5，也就是for循环内的i到5后结束循环，而且这个i也被传送到了循环外，那么这个问题怎么解决呢？答案是用let

for(var i = 0; i < 5; i++){
    console.log(i);
}
console.log("循环外：" + i)

`let`所声明的变量，只在`let`命令所在的代码块内有效。所以我们把var改成let 即可

for(let i = 0; i < 5; i++){
    console.log(i);
}
console.log("循环外：" + i)

`const`声明的变量是常量，不能被修改，所以以后当我们声明变量或者常量的时候，用let和const。

5.结构表达式的学习

数组解构

我们可以把arr中具体的值传入到const的参数中，这样打印出来的xyz就带有值了

let arr = [1,2,3]
const [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值
console.log(x,y,z);

对象解构

对象也可以这么解构

如过想要用其它变量接收，需要额外指定别名：

`{name:n}`：name是person中的属性名，冒号后面的n是解构后要赋值给的变量。

const person = {
    name:"jack",
    age:21,
    language: ['java','js','css']
}
const {name,age,language} = person1;
    // 打印
console.log(name);
console.log(age);
console.log(language);
//对象别名解构
const {name:n,age:a,language:l} = person1;
    // 打印
console.log(n);
console.log(a);
console.log(l);

6.ES6方法构造

在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：

 function fun(a,b) {
        // 判断b是否为空，为空就给默认值1
        b = b || 1;
        console.log(a/b);
    }

ES6出现后，可以在参数上直接给默认值

function add(a , b = 1) {
    return a + b;
}
// 传一个参数
console.log(add(10));

7.ES6的箭头函数（类似于lambda表达式，只是不需要接口）

let fun2=function(obj){
    console.log(obj);
}
使用箭头函数后

let fun2=i=>{console.log(i)}
//调用方法
fun2(100);

代码不止一行，可以用`{}`括起来

// 两个参数的情况：
var sum = function (a , b) {
    return a + b;
}
// 简写为：
var sum2 = (a,b) => a+b;

8.在对象中3中函数的写法、

注意：箭头函数版，是不能拿到this的，因为他的作用域是全局。

let person = {
    name: "jack",
    // 以前：
    eat: function (food) {
        console.log(this.name + "在吃" + food);
    },
    // 箭头函数版：
    eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this
    // 简写版：
    eat3(food){
        console.log(this.name + "在吃" + food);
    }
}

9.箭头函数结合解构表达式

比如有一个函数：

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

function hello(person) {
    console.log("hello," + person.name)
}
```

如果用箭头函数和解构表达式

```js
var hi = ({pp}) =>  console.log("hello," + pp.name);
//调用函数hi
hi（person）

//也可以直接传对象中的参数
 const  fun5=({name,age})=>{console.log(name,age)};
 fun5(person)

10.map和reduce方法

1）map：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

举例：有一个字符串数组，我们希望转为int数组

let arr = ['1','20','-5','3'];
console.log(arr)

arr = arr.map(s => parseInt(s));
console.log(arr)

map是将每个数组中的数字单独处理

也就是结果是100，200，300

let arr=[10,20,30];
 arr.map((a)=>{console.log(a*10)});

如果用reduce，类似于递归

接收一个函数（必须）和一个初始值（可选）。

第一个参数（函数）接收两个参数：

- 第一个参数是上一次reduce处理的结果
- 第二个参数是数组中要处理的下一个元素

这个结果就是将10+20+30，a就代表上一个a+b的值

arr.reduce((a,b)=>{console.log(a+b)});

10.扩展

ES6给Object拓展了许多新的方法，如：

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

码农公寓

相关文章