2 ES6 新特性

2.1 let

  • 变量不能重复声明
  • 块儿级作用域，只在代码块里有效      全局、函数、eval
  • 不存在变量提升
  • 不影响作用域链
{
	let a = '爱学习';
	function show(){
		console.log(a);
	}
	show();
}

实践练习

let点击修改背景颜色

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 = `aaabbbccc`
  • 变量拼接
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变量

  • 箭头函数的简写

    let add = n => n+n;

    • 省略小括号，当形参有且仅有一个的时候

    • 省略花括号，当代码体只有一条语句的时候，此时 return 必须省略，而且语句的执行结果就是返回值

箭头函数实践

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

箭头函数实践{
                this.style.background = 'orange';
            },2000)
        })" _ue_custom_node_="true">

从数组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);

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

应用

// 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));

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

  • 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

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