《JavaScript学习笔记》-ES6新特性(1)

2 ES6 新特性

2.1 let

变量不能重复声明
块儿级作用域，只在代码块里有效全局、函数、eval
不存在变量提升
不影响作用域链

{
	let a = '爱学习';
	function show(){
		console.log(a);
	}
	show();
}

实践练习

<!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>let</title>
    <style>
        .item{
            width: 120px;
            height: 90px;
            border: 1px blue solid;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div>
        <h1>点击修改背景颜色</h1>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        let items = document.getElementsByClassName('item');

        // 方式一
        for(var i=0;i<items.length;i++){
            items[i].onclick = function(){
                this.style.background = 'pink';
            }
        }

        // 方式二
        for(let i = 0; i<items.length; i++){
            items[i].onclick = function(){
                items[i].style.background = 'orange';
            }
        }
    </script>
    
</body>
</html>

2.2 const

一定要赋初始值
一般常量使用大写（潜规则）
常量的值不能修改
块儿级作用域
对于数组和对象的元素的修改，不算做对常量的修改，不会报错

2.3 变量解构赋值

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

数组的解构

const demo = ['aaa','bbb','ccc','ddd'];
let [a,b,c,d] = demo;
console.log(a);
console.log(b);
console.log(c);
console.log(d);

对象的解构

const person = {
    name: '赵本山',
    age: 66,
    show(){
        console.log('哈哈哈哈');
    }
}
let {name, age, show} = person;
console.log(name);
console.log(age);
console.log(show);
show();
// 为了方便调用方法
let {show} = person;
show();

2.4 模板字符串

ES6 引入新的声明字符串的方式【 ``】反引号

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

// 内容中可以出现换行符
        let str = ` <ul>
                        <li>aaa</li>
                        <li>bbb</li>
                        <li>ccc</li>
                    </ul>`

变量拼接

let boy = '王嘉尔';
let man = `${boy}是个大帅哥`;
console.log(man);

2.5 简化对象写法

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

let name = '小明';
let study = function(){
    console.log('爱学习');
};

const student ={
    name,
    study,
    play(){
        console.log('爱玩');
    }
};

2.6 箭头函数*

ES6 允许使用【箭头】（=>）定义函数

let add = (a,b)=>{
    return a+b;
}
let res = add(1,2);
console.log(res);

注意事项

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

 function getName(){
     console.log(this.name);
 }
getName2 = ()=>{
    console.log(this.name);
}

window.name = '爱学习';
const student = {
    name: '就是玩儿',
}
// 直接调用
getName();         // 爱学习
getName2();        // 爱学习

// call方法调用，可以改变this指向
getName.call(student);          // 就是玩儿
getName2.call(student);         // 爱学习

不能作为构造函数实例化对象
不能使用arguments变量
箭头函数的简写
- 省略小括号，当形参有且仅有一个的时候
- 省略花括号，当代码体只有一条语句的时候，此时 return 必须省略，而且语句的执行结果就是返回值
```
let add = n => n+n;
```

箭头函数实践

点击div 2s后背景颜色变为粉色

<!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>箭头函数实践</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="ad"></div>
    <script>
        let ad = document.getElementById('ad');

        // 方法一
        ad.addEventListener("click", function(){
            let _this = this;
            setTimeout(function(){
                _this.style.background = 'pink';
            },2000)
        })
        
        // 方法二
        ad.addEventListener("click",function(){
            setTimeout(()=>{
                this.style.background = 'orange';
            },2000)
        })
    </script>
    
</body>
</html>

从数组arr 中返回偶数项

let arr = [1,2,5,16,23,52];
// 方式一
let res = arr.filter(function(item){
    if(item % 2 === 0){
        return true;
    }else{
        return false;
    }
})
// 方式二
let res = arr.filter(item =>{
    if(item % 2 === 0){
        return true;
    }else{
        return false;
    }
})
// 方式三
let res = arr.filter(item => item % 2 === 0)
console.log(res);

总结：箭头函数适合与 this 无关的回调，例如定时器，数组的方法回调；

不适合与 this 有关的回调，例如事件回调，对象的方法。

2.7 函数参数默认值

形参初始值具有默认值的参数，一般位置要靠后

function add(a,b,c=5){
    return a+b+c;
};
console.log(add(1,2,3));      // 6
console.log(add(1,2));        // 8

可以与解构赋值结合

function connect({host,username,password,port}){
    console.log(host);
    console.log(username);
    console.log(password);
    console.log(port);
}
connect({
    host: 'localhost',
    username: 'admin',
    password: 123456,
    port: 3306
})

2.8 rest参数

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

// es5 获取数组(返回对象形式)
function arr(){
    console.log(arguments);
}
arr('aaa','bbb','ccc');

// es6 rest参数(返回数组形式)
function str(...args){
    console.log(args);
}
str('bbb','aaa','ddd');

注：rest 参数必须放在参数的最后！！

function show(a,b,...data){
    console.log(a);
    console.log(b);
    console.log(data);
}
show(1,2,3,4,5,6,7,8)

2.9 扩展运算符

介绍

【...】扩展运算符能将数组转化为逗号分隔的参数序列

// 声明一个数组
let boys = ['jackson','mark','bambam'];
function show(){
    console.log(arguments);
}
show(boys);
show(...boys);

应用

// 1.数组的合并
let boy = ['小王','小明'];
let girl = ['小红','小芳'];
// let student = boy.concat(girl);
let student = [...girl,...boy];
console.log(student);

// 2.数组的克隆
let arr = ['aaa','bbb','ccc'];
let str = [...arr];
console.log(str);

// 3.将伪数组转化为真正的数组
let divs = document.getElementsByTagName('div');
let divArr = [...divs];
console.log(divArr);

2.10 Symbol

ES6 引入了一种新的数据类型【Symbol】，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。

Symbol 特点：

Symbol 的值是唯一的，用来解决命名冲突的问题
Symbol 值不能与其他数据进行运算
Symbol 顶柜的对象属性不能使用【for...in】循环遍历，但是可以使用【Reflect.ownKeys】来获取对象的所有键名

let s = Symbol();
console.log(s, typeof s);
// 方式一
let s1 = Symbol('爱学习');
let s2 = Symbol('爱学习');
console.log(s1 === s2);     // false
// 方式二
let s3 = Symbol.for('就是玩儿');
let s4 = Symbol.for('就是玩儿');
console.log(s3 === s4);     // true

JavaScript七种数据类型：【USONB】

U：undefined

S：string Symbol

O：object

N：null number

B：boolean

Symbol 作用：给对象添加【独一无二的】属性和方法

let game = {
    name: '俄罗斯方块',
    up(){
        console.log('改变形状');
    },
    down(){
        console.log('快速下降');
    }
}

// 声明一个变量
let methods = {
    up: Symbol(),
    down: Symbol()
}

game[methods.up] = function(){
    console.log('我可以改变形状');
}
game[methods.down] = function(){
    console.log('我可以快速下降');
}

console.log(game);

let game2 = {
    name: '狼人杀',
    [Symbol('say')]: function(){
        console.log('我可以发言');
    }
};
console.log(game2);

Symbol 内置值

除了定义自己使用的 Symbol 值以外， ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。

Symbol.hasInstance

当其他对象使用 instanceof 运算符，判断是否为该对象的实例时，会调用这个方法

class Person{
    static [Symbol.hasInstance](){
        console.log('我被用来检测类型了！')
    }
}

let oo ={};
console.log(oo instanceof Person);    // false

Symbol.isConcatSpreadable

对象的 Symbol.isConcatSpreadable 属性等于的是一个布尔值，表示该对象用于 Array.prototype.concat() 时，是否可以展开

let arr = [1,2,3];
let arr1 = [3,2,1];
let arr2 = [4,5,6];
console.log(arr.concat(arr1));
arr2[Symbol.isConcatSpreadable] = false;
console.log(arr.concat(arr2));

Symbol.unscopables

该对象指定了使用 with 关键字时，哪些属性会被 with 环境排除

Symbol.match

当执行 str.match(myObject) 时，如果该属性存在，会调用他，返回该方法的返回值

Symbol.replace

当该对象被 str.replace(myObject) 方法调用时，会返回该方法的返回值

Symbol.search

当该对象被 str.search(myObject) 方法调用时，会返回该方法的返回值

Symbol.split

当该对象被 str.split(myObject) 方法调用时，会返回该方法的返回值

Symbol.iterator

对象进行【for...of】循环时，会调用 Symbol.iterator 方法，返回该对象的默认遍历器

Symbol.toPrimitive

该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值

Symbol.toStringTag

在该对象上面调用 toString 方法时，返回该方法的返回值

Symbol.species

创建衍生对象时，会使用该属性

posted @ 2021-04-25 10:42 仙贝wang 阅读(81) 评论(0) 收藏举报

刷新页面返回顶部

仙贝wang