ES6 学习总结1

琳琳在哪

已于 2022-04-23 14:59:50 修改

阅读量234

点赞数 1

分类专栏：前端文章标签：前端 javascript es6

于 2022-04-01 19:52:37 首次发布

本文链接：https://blog.csdn.net/qq_63479468/article/details/123895053

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

4.不影响作用域链，局部找不到变量会向上一级寻找

5.对于数组和对象的元素修改，不算做对常量的修改，不会报错

一、声明变量 let

1.变量不能重复声明

let star = "宋亚轩";
let star = "芽芽";
//这样是会报错的

2.块级作用域全局，函数，eval

什么是块级作用域？

块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。

{
    let boy = '宋亚轩';
}
//这就是一个块级作用域
console.log(girl);

3.不存在变量提升，必须先声明再使用

console.log(song);
let song = '小小孩';
//这样会报错

let song = '小小孩';
console.log(song);

4.不影响作用域链，局部找不到变量会向上一级寻找

什么是作用域链：很简单，就是代码块内有代码块，跟常规编程语言一样，上级代码块中的局部变量下级可用

5.var、let的区别

var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let案例：点击div更改颜色</title>
    <style>
    .item {
    width: 100px;
    height: 50px;
    border: solid 1px rgb(42, 156, 156);
    float: left;
    margin-right: 10px;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <h2 class="page-header">let案例：点击div更改颜色</h2>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    </div>
    <script>
    // 获取div元素对象
    let items = document.getElementsByClassName('item');
    // 遍历并绑定事件
    for (let i = 0; i < items.length; i++) {
    items[i].onclick = function() {
    // 修改当前元素的背景颜色
    this.style.background = 'pink'; // 写法一：常规写法一般无异常
    //items[i].style.background = 'pink'; // 写法二
    // 写法二：需要注意的是for循环内的i必须使用let声明
    // 如果使用var就会报错，因为var是全局变量，
    // 经过循环之后i的值会变成3，items[i]就会下标越界
    // let是局部变量
    // 我们要明白的是当我们点击的时候，这个i是哪个值
    // 使用var相当于是：
    // { var i = 0; }
    // { var i = 1; }
    // { var i = 2; }
    // { var i = 3; }
    // 下面的声明会将上面的覆盖掉，所以点击事件每次找到的都是3
    // 而使用let相当于是：
    // { let i = 0; }
    // { let i = 1; }
    // { let i = 2; }
    // { let i = 3; }
    // 由于let声明的是局部变量，每一个保持着原来的值
    // 点击事件调用的时候拿到的是对应的i
    }
    }
    </script>
    </body>
    </html>

二、声明常量

关键字 const

1.一定要赋初始值

const A;
//不初始化会报错

2.一般常量用大写

3.常量的值在其他地方不能修改

4.块级作用域

5.对于数组和对象的元素修改，不算做对常量的修改，不会报错

三、数组

ES6允许按照一定的模式从数组和对象中提取值，对变量进行赋值。

这被称为解构赋值

1.数组的结构

const TNT = ['马嘉祺','丁程鑫','宋亚轩','刘耀文','张真源','严浩翔','贺峻霖'];
let [ma,ding,song,liu,zhang,yan,he] = TNT;
console.log(song);

2.对象的解构

const song = {
    name:'宋亚轩',
    age:'18',
    sing:function(){
        console.log("我会唱歌");
    }
};
//第一种
let {name,age,sing} = song;
console.log(name);
console.log(age);
console.log(sing);
//第二种
let {sing} = song;
sing();

四、字符串

ES6引入新的声明字符串的方式『` `』、' '、" "

1.声明

let str = `我是一个字符串哦！`;
console.log(str, type of str);

2.内容中可直接出现换行符

let str = `<ul>
                <li>宋亚轩</li>
                <li>刘耀文</li>
           </ul>`;
console.log(str);

3.变量拼接

let idol = '宋亚轩';
let out = `${idol}是最帅的！！！`;
console.log(out);

五、函数、变量简化写法

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

这样的书写更加简洁

let name = '宋亚轩';
let change = function(){
    console.log('我有鼠标！！！');
}

const star = {
    name,//当属性名与属性值相同时(name:name)，可简化
    change,
    improve(){//函数声明   函数名:function(){};  或者  ->函数名(){};
        console.log('我要长更高！！！！');
    }
}

change();
star.improve();

琳琳在哪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 学习总结1

一、声明变量 let1.变量不能重复声明let star = "宋亚轩";let star = "芽芽";//这样是会报错的2.块级作用域全局，函数，eval什么是块级作用域？块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。{ let boy = '宋亚轩';}//这就是一个块级作用域console.log(girl);3.不存在变量提升，必须先声明再使用console.log(song);let song..
复制链接

扫一扫