ES6-11

🍔ES6-11新特性#

本编笔记整理自尚硅谷WEB前端ES6教程

🍟let变量声明以及声明特性#

变量不能重复声明
块级作用域
不存在变量提前
不影响作用域链

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div class="item" style="width: 50px;height: 50px; background-color: skyblue;margin: 10px;"></div>
        <div class="item" style="width: 50px;height: 50px; background-color: skyblue;margin: 10px;"></div>
        <div class="item" style="width: 50px;height: 50px; background-color: skyblue;margin: 10px;"></div>
    </div>
    <script>
        let items = document.getElementsByClassName("item")
        for (let i = 0; i < items.length; i++) {
            items[i].onclick=function () {
                items[i].style.backgroundColor='pink'
            }
        }
        //若使用var i = 0，调用点击事件时，i的值已自增为3
        //使用let i = 0，则由于let具有块级作用域，调用点击事件时的i仍是绑定事件时候的i
    </script>
</body>
</html>

🍟const声明常量以及特点#

一定要赋初始值
一般常量使用大写
常量的值不能修改
块级作用域
对于数组和对象的元素修改，不算做对常量的修改

const string = ['简简','单单','才是'];
team.push('真');//不会报错，常量地址没有发生变化

🍟解构赋值#

ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

数组解构（少用）

const songs = ['青春快门','爱没有假如','安歌','记得']
let [s1,s2,s3,s4] = songs;
console.log('s1')

对象的解构

const master = {
    name:'masahiko',
    age:'16',
    work: function(){
        console.log('Coding......')
    }
}
let {name,age,work} = master
console.log(name)
work()

🍟模板字符串#

ES6引入新的声明字符串的方式——反引号：``

内容中可以直接出现换行符

let str = `<div>
              <h2>记得记得记得非常时期</h2>
          </div>`

变量拼接

let str = '爱是'
let wholeStr = `${str}没权利假如`
console.log(wholeStr)

🍟对象的简化写法#

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

let name = masahiko
let work = function(){
    console.log('Coding......')
}
const master = {
    //新写法
    name,
    work,
    relax(){
        console.log('Drinking coffee......')
    }
}
const greenHand = {
    //旧写法
    name: name,
    work: work,
    relax: function(){
        console.log('Drinking coffee......')
    }
}

🍟箭头函数以及声明特点#

ES6允许使用箭头=>定义函数

let fn = function(a,b){
    return a + b
}

let fn = (a,b) => {
    return a + b
}

this.是静态的，this始终指向函数声明时所在作用域下的this的值

function A(){
    console.log(this.name)
}
let B = () => {
    console.log(this.name)
}
window.name = 'Masahiko'
const net = {
    name: 'koko'
}
A()   //Masahiko
B()   //Masahiko
A.call(net)   //koko
B.call(net)   //Masahiko

不能作为构造实例化对象

//错误写法
let A(name,age) => {
    this.name = name
    this.age = age
}
let me = new A('xiao',123)

不能使用arguments变量

//报错
let fn = () => {
    console.log(arguments)
}
fn(1,2,3)

箭头函数简写

//当形参只有一个的时候，可省略小括号
let add = n => {
    return n + 1
}
//当代码体只有一行代码的时候，可省略花括号以及return
let add = n => n + 1

🌰 setTimeout若写成普通函数，函数内的this指向的是windows对象，若写成箭头函数，函数内的this则指向对象ad

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="ad"></div>
    <script>
        let ad = document.getElementById('ad');
        ad.addEventListener('click',function () {
            //等同效果
            // let _this = this
            // setTimeout(function () {
            //     _this.style.backgroundColor = 'yellowgreen'
            // }, 2000)
            setTimeout(() => {
                this.style.backgroundColor = 'yellowgreen'
            }, 2000);
        })
    </script>
</body>
</html>

🍟函数参数默认值#

可以给形参赋初始值，一般位置要靠后（潜规则）

function add(a,b,c=0){
    return a + b + c
}
let result = add(1,2)

与解构赋值结合

//function connect(options){
//    let host = options.host
//}
function connect({host,username,passwork,port}){
    console.log(host)
}
connect({
    host:'cnblogs.com/masahiko',
    username:'root',
    password:'root',
    port:'3306'
})

🍟rest参数#

ES6引入rest参数，用于获取函数的实参，用来代替arguments

//function date(){
//     console.log(arguments);
// }
// date('我要','将我','拯救')
function date(...args){
    console.log(args)
}
date('逃离','人类','荒谬')
//rest参数必须放到参数最后
function fn(a,b,...args){
    console.log(a)      //1
    console.log(b)      //2
    console.log(args)   //[3,4,5,6]
}
fn(1,2,3,4,5,6)

arguments并不是数组，而是一个类数组对象，它包含length属性
rest是一个真实数组
arguments是参数的类数组化表现，它包含所有可用参数
rest是非定义的多余变量数组

🍟 扩展运算符#

扩展运算符用于取出参数对象中的所有可遍历属性，拷贝到当前对象中

数组的合并

const arr1 = ['还记得','你说家是','唯一的城堡']
const arr2 = [...arr1,'随着稻香','河流','继续奔跑']
console.log(arr2)   //['还记得','你说家是','唯一的城堡','随着稻香','河流','继续奔跑']

数组的克隆

const arr1 = ['回家吧','回到最初的','美好']
const arr2 = [...arr1]  //浅拷贝
console.log(arr2)       //['回家吧','回到最初的','美好']

将伪数组转换成真正的数组

const divs = document.querySelectorAll('.box')
const divArr = [...divs]
console.log(Object.prototype.toString.call(divs))   //[object NodeList]
console.log(Object.prototype.toString.call(divArr)) //[object Array]

🍟Symbol#

posted @ 2023-02-04 23:44 Masahiko 阅读(30) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaScript基础学习笔记（21.08）

· JavaScript 知识点总结

· ES6新特性

· ES6听课笔记

· ES6-11语法笔记

Loading

Masahiko's blog