ES6 新特性学习(一)

138 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

ECMAScript 介绍

ECMA

  • ECMA(European Computer Manufacturers Association)中文名称为欧洲计算机执照商协会,这个组织的目标是评估、开发和认可电信和计算机标准。1994年后该组织改名为Ecma国际
  • ECMAScript是由Ecma国际通过ECMA-262标准化的脚本程序设计语言

特性

变量的结构赋值

// 1. 数组的解构
const F4 = ['小沈阳', '刘能', '赵四', '宋小宝']
let [xiao, liu, zhao, song] = F4

// 2. 对象的解构
const zhao = {
    name: '赵本山',
    age: '不详',
    xiaopin: ()=>{
        console.log("小品")
    }
}

let {name, age, xiaopin} = zhao;

模板字符串

// 1. 声明
let str = `模板字符串`

// 2. 特性
// 内容中可以出现换行符
let str = `<ul>
		   	<li>1</li>
            <li>2</li>
            <li>3</li>
			</ul>`

// 变量拼接
let str1 = 'name:tom'
let str2 = 'age:12'

let str = `${str1}===${str2}`

简化对象写法

//允许在大括号中,直接写入变量和函数,作为对象的属性和方法

let name = '尚硅谷'
let change = ()=>{
    console.log('test')
}

const object = {
    name,
    change,
    fc(){
        console.log('直接写入方法')
    }
}

箭头函数


let fn = () =>{
    ...
}
    
// this 是静态的 this 始终指向函数声明时所在作用域下的this的值

rest参数

function date(...args){
    console.log(args)
}

// rest参数必须放在参数最后

spread扩展运算符


const tfboys = ['易烊千玺', '王源', '王俊凯']

function chunwan(){
    console.log(arguments)
}

chunwan(...tfboys)

// 运用
// 合并
const kuaizi = ['王大力', '小样']
const fenghuang = ['增益', '零花']

const group = [...kuaizi, ...fenghuang]

// 克隆
const sanzhihua = ['E', 'G', 'M']
const sanyecao = [...sanzhihua]

// 将伪数组转为真数组
const divs = document.querySelectorAll('div')

const divArr = [...divs]

Symbol

/*
	1. 新的原始数据类型
	2. 表示独一无二的值
	
	1) Symbol的值是唯一的,用来解决命名冲突的问题
	2) Symbol值不能与其他数据进行运算
	3) Symbol定义的对象属性不能使用for...in... 循环遍历,但是可以使用Reflect.ownKeys来获取对象的所有键名
*/

let s = Symbol();
console.log(s, typeof s);

let s2 = Symbol('上海滩');
let s3 = Symbol('上海滩');

// s2 !== s3

/*
	1. undefined
	2. string symbol
	3. object
	4. null number
	5. boolean
	
*/

// Symbol 使用

// 像对象中添加方法 up down
let game = {
    
}

// 声明一个对象
let methods = {
    up: Symbol(),
    down: Symbol()
};

game[methods.up] = function(){
    console.log("upup")
}

game[methods.down] = function(){
    console.log("downdown")
}


let youxi = {
    name: '狼人杀',
    [Symbol('say')]: function(){
        console.log("发言")
    },
    [Symbol('zibao')]: function(){
        console.log("自爆")
    }
}