ES6第一天

最新推荐文章于 2024-09-17 13:42:29 发布

狗都不干机械

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量88

点赞数

文章标签： javascript es6

本文链接：https://blog.csdn.net/I_love_bc/article/details/116883134

版权

这篇博客介绍了ES6的新特性，重点讲解了let关键字的块级作用域、不可重复声明及变量提升特性，const关键字的声明规则与不可修改值的特点，以及变量的解构赋值在数组和对象中的应用。此外，还提到了模板字符串的使用和简化对象写法。最后，通过案例分析展示了let和箭头函数的实际应用。

摘要由CSDN通过智能技术生成

ES6第一天—— ECMASript 6 新特性（上）

一.let 关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

1.1 不允许重复声明

let animal ='小狗'
let animal ='小猪';
//会报错 因为重复声明了变量animal
//改用var不会报错

1.2块儿级作用域 (包括全局，函数，eval）

//if else while for 等循环语句里会形成块级作用域
        {
            let boy = '小明';
        }
       console.log(girl);//报错

1.3不存在变量提升

不允许在变量声明之前使用变量

console.log(song);
let song = '啦啦啦';//报错

1.4不影响作用域链

{
      let school = '重大';
      function fn(){
              console.log(school);
      }
      fn();//正常调用函数
}

二.const 关键字

2.1声明必须赋初始值

2.2标识符一般为大写

2.3不允许重复声明

2.4值不允许修改

2.5块儿级作用域

注意: 对象属性修改和数组元素变化不会出发 const 错误
应用场景：声明对象类型使用 const，非对象类型声明选择 let

 const team=['rockets','lakers'];
        team.push('suns');//不会报错

三.变量的解构赋值

3.1数组解构赋值

const arr = ['承太郎', '阿布德尔', '波鲁纳雷夫', '花京院'];
let [cheng, a, bo, hua] = arr

3.2对象解构赋值

const cheng = {
 name: '承太郎',
 tags: ['无敌', '白金之星', '欧拉']
};
let {name, tags} = cheng

3.3复杂解构


let cheng = {
 name: '承太郎',
 age: 16,
 stands: ['白金之星', '隐者之紫', '银色战车', '魔术师之红'],
 history: [
 {name: '乔纳森'},
 {name: '乔瑟夫'},
 {name: '仗助'}
 ]
};
let {songs: [one, two, three，four], history: [first, second, third]} = 
cheng;

四.模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，
特点：

字符串中可以出现换行符
可以使用 ${xxx} 形式输出变量

//定义字符串——可换行
let str = `<ul>
 <li>小明</li>
 <li>小米</li>
 <li>小马</li>
 <li>小美</li>
 </ul>`;

// 变量拼接
let star = '小明';
let birthday = `${star}在前天过了生日`

五.简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

let name = '重庆大学';
let slogon = '勤学业 爱国家';
let improve = function () {
 console.log('耐劳苦 尚简朴');
}
//属性和方法简写
let cqu = {
 name,
 slogon,
 improve,
 change() {
 console.log('重庆大学学生')
 }
};

六.箭头函数

6.1通用写法

let fn = (arg1, arg2, arg3) => {
 return arg1 + arg2 + arg3;
}

6.2 注意事项

（1) 如果形参只有一个，则小括号可以省略

let fn2 = num => {
 return num * 10;
};

（2) 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的
执行结果

let fn3 = score => score * 20;

（3) 箭头函数 this 指向声明时所在作用域下 this 的值

let fn=()=>{
console.log(this.name)
}
window.name='窗口'
school.name='重庆大学'
fn.call(school)
//结果仍然是窗口

（4) 箭头函数不能作为构造函数实例化
（5) 不能使用 arguments

6.3 箭头函数与this

箭头函数适合与this 无关的回调。定时器，数组的方法回调
箭头函数不适合与this 有关的回调。事件回调，对象的方法

七.案例

7.1——let应用案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 100px;
            height: 50px;
            float: left;
            margin-top: 20px;
            margin-right: 10px;
            border: 1px solid rgb(42, 156, 156);
        }

        .container {

            border-bottom: 1px solid gray;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2 class="header">点击切换颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

    <script>
        let items = document.querySelectorAll('.item');
        for (let i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                //this.style.background = 'pink';
                items[i].style.background = 'pink';//循环里i的声明必须用let
            }
        }
    </script>
</body>
</html>

7.2——箭头函数应用案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ad {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>
<body>
    <div class="ad"></div>
    <script>
        //点击div2s后变色
        let ad = document.querySelector('.ad');
        ad.addEventListener("click", function () {
            setTimeout(() => {
                this.style.background = 'pink'
            }, 2000)
        })
        //返回偶数
        const arr = [1, 2, 3, 4, 5, 6];
        const result = arr.filter(item => item % 2 === 0)
        console.log(result)
    </script>
</body>
</html>