ES6知识点

最新推荐文章于 2024-11-01 10:18:14 发布

庄弯弯

最新推荐文章于 2024-11-01 10:18:14 发布

阅读量58

点赞数

文章标签： es6 前端

本文链接：https://blog.csdn.net/m0_46450674/article/details/132913445

版权

newES6

一、关键词

1.ES6新增了两个关键词用来声明变量和常量

2.声明变量使用let关键词

3.声明常量常用const关键词

二、let

1.定义

用于声明变量，代替var关键词

2.特点

有块级作用域;不存在变量提升;暂时性死区

3.块级作用域

①块级作用域在es6中才有，一对大括号就是一个块级作用域(咱们在哪里能够见到大括号呢？)

②在大括号中使用let声明的变量、const声明的变量会生成块作用域，出了大括号就无效了。

③在循环、分支结构中使用let声明的变量也就会无效

④块作用域与函数作用域，称局部作用域

<script>
  {
    // name 只能在该代码块中被访问
    let name = '燕子';
    console.log(name); // 正常
  }
  
  // 超出了 name 的作用域
  console.log(name) // 报错
  
  let flag = true;
  if(flag) {
    // str 只能在该代码块中被访问
    let str = '没有你我怎么活！'
    console.log(str); // 正常
  }
  
  // 超出了 str 的作用域
  console.log(str); // 报错
  
  for(let t = 1; t <= 6; t++) {
    // t 只能在该代码块中被访问
    console.log(t); // 正常
  }
  
  // 超出了 t 的作用域
  console.log(t); // 报错
</script>

总结：1、局部作用域分为哪几种？

2、局部作用域声明的变量外部能访问吗？

4.变量提升

首先变量提升并不是一个好东西，而是js的一个缺陷，它允许在变量声明之前即被访问。当代码在执行之前，首先内部会把在当前作用域下var声明的变量，提升到当前作用域的最前面。

<script>
  // 访问变量 str
  console.log(str + '没有你我怎么活!');

  // 声明变量 str
  var str = '燕子 ';
</script>

只提升声明不提升赋值！！！！

5.暂时性死区

在代码块内，使用let和const命令声明变量之前，该变量都是不可用的，语法上被称为暂时性死区。

<script>
    console.log(num);//Cannot access 'num' before initialization
    let num=10;
</script>

三、const

1.定义

const用于声明常量

2.特点

有块级作用域；声明常量时必须赋值，且赋值后不能修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>const</title>
</head>
<body>
    <script>
        // 1.const也有作用域
        // {
        //     const PI = 3.1415;
        // }
        // console.log(PI);//PI is not defined

        // 2.声明常量的时候必须赋值
        // const PI;// 错，Missing initializer in const declaration
        // const PI=3.1415;// 错，Missing initializer in const declaration

        // 3.赋值后不能修改
        // const PI=3.1415;
        // PI=3.1415926;//Assignment to constant variable.
    </script>
</body>
</html>

四、解构赋值

1.定义

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型。

2.分类

①对象解构

<script>
  // 普通对象
  const user = {
    name: '燕子',
    age: 18
  };
  // 批量声明变量 name age
  // 同时将数组单元值 燕子  18 依次赋值给变量 name  age
  const {name, age} = user

  console.log(name) // 燕子
  console.log(age) // 18
</script>

②数组解构

<script>
  // 普通的数组
  let arr = [1, 2, 3]
  // 批量声明变量 a b c 
  // 同时将数组单元值 1 2 3 依次赋值给变量 a b c
  let [a, b, c] = arr
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
</script>

3.注意事项

①变量（常量）名必须和对象的属性名一致

②使用了别名之后，原名就不可以在使用

③变量名可以任意设置

五、模板字符串

1.定义

使用反引号声明的字符串是模板字符串

2. 优点

①字符串可以换行（方便声明标签结构）

②${}:方便解析变量或者函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板字符串</title>
</head>
<body>
    <div id="app"></div>
    <script>
        const{name,age} = {name:'小白',age:18};
        function sayHi(){
            return '大家好';
        }

        let str = `
            <ul>
                <li>姓名:${name}</li>
                <li>年龄:${age}</li>
                <li>${sayHi()}</li>
            </ul>
        `
        document.querySelector('#app').innerHTML = str;
    </script>
</body>
</html>

六、形参默认值

1.定义

声明函数时给形参设置默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>形参默认值</title>
</head>
<body>
    <script>
        // a=10,b=20是默认的
        function add(a = 10，b){
            return a + b;
        }

        console.log(add(5));//15
        console.log(add(5,8));//13
    </script>
</body>
</html>

2.应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-形参默认值应用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 450px;
            height: 226px;
            border: 1px solid #ccc;
            background-image: url(../images/line.jpg);
            margin-top: 30px;
            margin-left: 300px;
            padding: 0 10px;
        }
        h3 {
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            border-bottom: 1px solid #ccc;
            padding-left: 15px;
        }
        a {
            color: #000;
            text-decoration: none;
        }

        li {
            padding: 5px 15px;
            list-style: url(../images/c11.jpg);
            list-style-position: inside;
            border-bottom: 1px dashed #ccc;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>沙雕新闻</h3>
        <ul>
            
        </ul>
    </div>

    <script>
        let titles = [
            '一大仙在公安局“跳大神”对周围人发功说：“你今晚必死无疑”',
            '小偷给关二爷下跪，给民警送锦旗',
            'nginx反向代理配置中你不知道的二三事',
            '女子怀疑家中进小偷，报警后发现是自己老公',
            '美国男子抢劫中餐厅，因语言不通空手而归'
        ];
        
        let str = '';
        for (let i = 0; i < titles.length; i++) {
            str += `
                <li>
                    <a href="#">
                        ${titleHandle(titles[i], 15, '~~')}
                    </a>
                </li>`;
        }
        document.querySelector('ul').innerHTML = str;

        // 思路： 封装一个函数对标题进行处理
        // 判断标题长度是否超过20个字符，如果没有超过，则不进行处理
        // 如果超过20个字符，则截取20个字符，之后再拼接 ...  即可
        // 参数1：要处理的标题
        function titleHandle (title, length = 20, mark = ' ...') {
            if (title.length < length) {
                return title;
            } else {
                return title.substr(0, length) + mark;
            }
        }

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

3.rest参数

在ES6之前，调用函数时可以传入不定数量的参数（可变参数），函数体内使用arguments获取多个参数。在ES6开始，取消了arguments，使用拓展运算符(“…”)来接收参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rest参数</title>
</head>
<body>
    <script>
        // ES5 -- arguments
        // arguments以"伪数组"形式保存了函数中所有的参数
        function show1(){
            console.log(arguments)
            for(let i=0;i<arguments.length;i++){
                console.log(arguments[i]);
            }
        }
        show1(1,'小庄',18,'男')

        // ES6 -- rest参数
        // args以数组的形式保存了函数中所有的参数
        function show2(...args){
            for(let i=0;i<args.length;i++){
                console.log(args[i]);
            }
        }
        show2(2,'美牙',20,'女');
    </script>
</body>
</html>

七、箭头函数

1.定义

箭头函数的用法和普通函数的用法几乎一致，去掉function关键字，()和{}之间增加=>

function 函数名(){} //普通函数

let 变量名 = (参数) =>{} //箭头函数

function(){} //声明匿名函数

()=>{} //匿名箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-箭头函数声明</title>
</head>
<body>
    <script>
        // 箭头函数
        let sayHi=(name,age)=>{
            console.log(`大家好,我叫${name},今年${age}岁`)
        }
        sayHi('小庄',8);
        
        // 匿名箭头函数
        let arr=[11,22,33]
        arr.forEach((item,index)=>{
            console.log(item,index);
        }) 
    </script>
</body>
</html>

2.特点

①箭头函数不能作为构造函数

②箭头函数没有arguments，要使用x可变参数可以使用rest方式

③箭头函数没有this对象，在箭头函数中的this指的是函数外层的对象

④若函数体只有一句并且设置了返回值，则不需要使用大括号，不需要return

⑤如果函数只有一个参数，则不需要写小括号

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>02-箭头函数特点</title>
    </head>

    <body>
        <button>点我</button>
        <script>
            /**
             * 1.箭头函数不能作为构造函数
             * 2.箭头函数没有arguments，要使用可变参数可以使用rest方式
             * 3.箭头函数没有this对象，在箭头函数中的this指的是函数外层的对象
             * 4.若函数体只有一句并且设置了返回值，则不需要使用大括号，不需要return
             * 5.如果函数只有一个参数，则不需要写小括号
            */
            // 构造函数
            // function Person(name,age){
            //     this.name = name;
            //     this.age = age;
            //     this.sayHi = function(){
            //         console.log(`大家好,我叫${name},今年${age}岁`)
            //     }
            // }

            // // 实例化构造函数
            // let p = new Person('小庄',18);
            // console.log(p.name);
            // console.log(p.age);
            // p.sayHi();

            // 1.箭头函数不能作为构造函数
            // 提示：Person1 is not a constructor
            // let Person1 = (name,age)=>{
            //     this.name = name;
            //     this.age = age;
            // }
            // let p1 = new Person1('小王',10);

            // 2.箭头函数没有arguments，要使用可变参数可以使用rest方式
            // 使用arguments,提示：arguments is not defined
            // let show = ()=>{
            //     console.log(arguments);
            // }
            // show(1,22,33);

            // 使用rest,提示：arguments is not defined
            // let show1 = (...abc)=>{
            //     console.log(abc);
            // }
            // show1(1,22,33);

            // 3.箭头函数没有this对象，在箭头函数中的this指的是函数外层的对象

            // 普通函数
            // document.querySelector('button').οnclick=function(){
            //     //this指的是事件的调用者 -->button
            //     console.log(this);//button
            // }

            // console.log(this);//window
            // 箭头函数
            // document.querySelector('button').οnclick=()=>{
            //     //this指的是函数外层的对象
            //     console.log(this);//window
            // }
            // console.log(this);//window

            // 箭头函数
            // document.querySelector('button').onclick = function(){
            //     //this指的是事件的调用者 -->button
            //     console.log(this);//button
            //     let e = () => {
            //         console.log(this);//button
            //     }
            //     e();
            // }


            // 4.若函数体只有一句并且设置了返回值，则不需要使用大括号，不需要return
            // 箭头函数
            // let add = (a,b) =>{
            //     return a+b;
            // }
            // console.log(add(10,20));

            // //等价于
            // let add1 = (a,b) => a+b;
            // console.log(add1(1,2));

            // 5.如果函数只有一个参数，则不需要写小括号
            // 箭头函数
            // let add = (a) => {
            //     return a+10;
            // }
            // console.log(add(5))

            // // 等价于
            // let add1 = a => a+5;
            // console.log(add1(1))
        </script>
    </body>
    </html>

八、定义对象的简洁方式

1.定义

声明对象时，值的变量名和属性名相同时，可以只写属性而不写值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-定义对象的简洁方式</title>
</head>
<body>
    <script>
        const goodsId=10001;
        const goodsName='机械键盘';
        const goodsPrice=369;

        //声明对象时，值的变量名和属性名相同时，可以只写属性而不写值
        const obj = {
            goodsId : goodsId
            ,goodsName : goodsName
            ,goodsPrice : goodsPrice
            // 普通函数
            ,ad(){
                console.log("太爽啦！")
            }
        }
        console.log(obj.goodsId);
        console.log(obj.goodsName);
        console.log(obj.goodsPrice);
        obj.ad();
        // 等价于
        const obj1 = {
            goodsId
            ,goodsName
            ,goodsPrice
            // 使用箭头函数
            ,ad:() => {
                console.log("起飞啦");
            }
        }
        console.log(obj1.goodsId);
        console.log(obj1.goodsName);
        console.log(obj1.goodsPrice);
        obj1.ad();
    </script>
</body>
</html>

九、模块化

1.export 导出
export default 对象;
2.import 导入
import 对象 from 路径;

十、数组的使用

数组的方法参数都是一个回调函数,会自动的执行多次,直到数组循环完毕

1.forEach()方法

遍历循环数组，可以代替for循环,可以对每个元素进行特定的操作,但不改变原来的数组,也不会创建新的数组

array.forEach(function(element, index, array){})

element: 数组当前元素

index：数组当前项的索引

array；数组对象本身

应用场景: 如打印每个人的存款,并计算总存款

<script>
    var userArr = [{
        name: '张三',
        age: 13,
        balance: 3000
    },
    {
        name: '李四',
        age: 14,
        balance: 4000
    },
    {
        name: '王五',
        age: 15,
        balance: 5000
    },
]
// forEach 方法
	var total = 0;
	userArr.forEach(function(element, index, users) {
    total += element.balance;
    console.log(element.name, "存款是", element.balance) // 张三 存款是 3000, ..
})
	console.log("总存款是", total) //总存款是 12000
</script>

2.map()方法

array.map(function(value,index){})

遍历数组的每个元素,对元素进行特定的操作,不改变原数组,但是会返回一个新数组.

应用场景:10年后,每个人的存款都翻倍了

<script>
    var newArr = userArr.map(function(element, index) {
    element.age += 10;
    element.balance *= 2;
    return {
        name: element.name,
        age: element.age,
        balance: element.balance 
    };
})
console.log("十年后", newArr); // {name: '张三', age: 23, balance: 6000}, ..
</script>

3.filter()方法
array.filter(function(currentValue, index, arr){})

Filter()方法与map方法类似,会创建一个新的数组，但是将过滤条件放在return内,如果符合条件就放到数组中,不符合就排除

应用场景:如打印存款低于3500的对象

 <script>
        // filter 筛选数组
    var newArray = userArr.filter(function(element, index) {
    return element.balance < 3500;
})
	console.log("存款低于3500的有", newArray)	// {name: '张三', age: 13, balance: 3000}
</script>

4.some()方法
array.some(function(currentValue, index, arr){ })

some()方法用于检测数组中的元素是否满足指定条件，查找数组中是否有满足条件的元素。

注意它返回的是布尔值，如果查找到这个元素，就返回true，如果查不到就返回false。

如果找到第一个满足条件的元素则终止循环，不继续查找。

应用场景:判断是否有存款大于5000的对象

<script>
    // some 查找数组中是否有满足条件的元素
    var flag = userArr.some(function(element, index) {
    return element.balance > 5000
})
console.log("是否有人的存款大于5000", flag); // false
</script>

5.every()方法
every()是用于检测数组中的元素每一项元素是否都满足指定条件，返回的类型是布尔类型，如果该函数每一项元素都满足条件则返回true。有一项不满足则返回flase。

应用场景:判断是否所有人的存款都小于5000

<script>
     // evey 查找数组中每一项元素是否都满足条件
     var flag = userArr.every(function(element, index) {
    return element.balance < 5000
})
console.log("是否所有人的存款都小于5000", flag); // false
 </script>

6.includes()方法

includes方法用来判断数组是否包含一个指定的值，返回类型是布尔类型，如果包含则返回 true，否则返回false。

应用场景:返回对象中包含13的对象 .

<script>
  userArr.forEach(function(element, index) {
    if (Object.values(element).includes(13)) {
        console.log(element) // {name: '张三', age: 13, balance: 3000}
    }
})
</script>

filter与some的区别：

filter也是查找满足条件的元素，返回的是一个数组，而且是把所有满足条件的元素返回回来。some也是查找满足条件的元素是否存在，返回的是一个布尔值，如果查找到第一个满足条件的元素就终止循环。

filter与forEach的区别：

如果查询数组中唯一的元素，用some方法更合适，因为找到这个元素后，就不再进行循环，效率更高。在forEach和filter里面return true不会终止迭代，在some里面return true可以终止迭代效率更高。

<script>
    var arr = ['red', 'green', 'blue', 'pink'];
    arr.forEach(function (value) {
        if (value === 'green') {
            console.log('找到了该元素')
            return true; // 在forEach里面return不会终止迭代
        }
        console.log(11); // 11
    })

    arr.filter(function (value) {
        if (value === 'green') {
            console.log('找到了该元素')
            return true; // 在filter里面return不会终止迭代
        }
        console.log(11); //11
    })

    arr.some(function (value) {
        if (value === 'green') {
            console.log('找到了该元素')
            return true; // 在some里面return可以终止迭代 效率更高
        }
        console.log(11); // 不打印
    })
</script>