001、JavaScript—ES6

一、新增数据类型Symbol

概念：

Symbol代表独一无二的Symbol类型的值通过Symbol函数来生成,同时Symbol函数返回的值是唯一的Symbol函数可以接收字符串作为参数，但是即使相同参数返回的值也是唯一的

作用：

属性私有化数据保护

没有参数的情况
var s1 = Symbol();
var s2 = Symbol();
s1 === s2 // false

有参数的情况
var s1 = Symbol(“foo”);
var s2 = Symbol(“foo”);

s1 === s2 // false

var mySymbol = Symbol();

// 第一种写法var a = {};
amySymbol = ‘Hello!’;

// 第二种写法var a = {
};

// 第三种写法var a = {};
Object.defineProperty(a, mySymbol, { value: ‘Hello!’ });

Object.getOwnPropertySymbols(obj) 枚举symbol的key值
注意：Symbol作为对象的key值得时候不能被for in进行遍历

二、块级作用域

概念: 在ES6中凡是{}包裹的代码都是块级作用域，凡是在块级作用域中用let const声明的变量都在有一个暂时性死区

{
let a = 20;
}
console.log(a);//报错

三、var let const 变量声明

对比不同

var
支持变量声明与解析

不支持块级作用域允许重复声明

let
不支持变量声明与解析

支持块级作用域不允许重复声明用let声明的变量或者方法只会在代码块中有效{ let a = 10； var b = 20;}console.log(a);//报错

const

不支持变量声明与解析支持块级作用域不允许重复声明声明常量，一旦确定不允许被修改声明常量必须赋值 不能跟var 一样声明后再定义

四、解构赋值

概念： 允许按照一定模式，从对象和数组中提取值

// 数组解构
let [a,b,c] = [1,2,3];

// 对象解构
let {name,age} = {name:”张三”,age:19};
// 注意对象解构 key值必须一一对应

// 对象解构+别名
let {name : _name , top : _top } = {name:”张三”,top:20}
// 因为name和top属于关键字，因此我们可以通过别名的方式来更改名称

// 多重解构

let {obj : { name }, arr:[ a, b]} = {obj:{name:”张三”},arr:[10,20]}

// 案例：
let {letf:l , top: t} = document.getElementById(“box”);

五、扩展用算符

概念： 将数组或者对象转换成参数序列 使用逗号分隔的序列作用： 1、数组、对象的合并 2、函数剩余参数 3、替代arguments

// 数组合并
var arr = [10,20,30];
var arr1 = [40,50,60];
var newArr = […arr,…arr1];
// 展开数组
console.log(Math.max(…arr));

// 对象合并
var obj = {width:100,height:200};
var obj2 = {left:100,top:200};
var newObj = {…obj,…obj2};

六、字符串模板

1、字符串太长需要换行怎么办？

// 常规解决方案：
var a = ‘

‘+
”+num+”+
‘div>’;
// ES6神器：
var b = <div> <span></span> </div> ;
2、字符串拼接太麻烦怎么办？

// ES6神器（字符串模板）：
var phone = 18200000000;
var intro = my name is pine, my phone is ${phone};
console.log(intro); //${phone}被替换成18200000000
/*
说明：
1、使用 “ 反单因号 代替 ” 或者 “”
2、使用 ${变量} 实现变量拼接
*/
3、includes 字符串搜索

// 之前使用indexOf进行查找，利用的是indexOf方法的特性，找打了返回下标，
// 找不到返回-1，所以每次你需要这么写：
var str = ‘abcd’;
if( str.indexOf(‘c’) > -1 ){} //需要判断是否>-1

// ES6神器：includes方法
// str.includes(查找的内容); 找到返回true，找不到返回false
var str = ‘good method!’;
str.includes(‘method’); //true

4、判断首尾 startsWith endsWith

/*
startsWith用于判断是否位于头部，
endsWith判断是否位于尾部，
可以说这两个方法是includes方法的扩展
*/
let str = ‘how are you?’;
str.startsWith(‘how’);//true
str.endsWith(‘?’);//true
5、repeat 字符串重复（懒人福利）

//str.repeat(n); 将字符串重复n次（n是整数）

let str = ‘money’;
str.repeat(2); // ‘moneymoney’

七、对象新增的方法

1、对象的简写

var a = 10;
var obj = {a}
//等价
var obj = {a:10};

//当key值与value值一样的时候我们可以写一个
2、Object.is

//判断2个对象是否指向同一个内存地址
var obj = {a:1,b:2};
var obj1 = obj

Object.is(obj,obj1);// true
3、Object.assign

//Object.assign 合并对象
var obj = {name:”Alley”,age:18};
var obj2 = {sex:”男”}

var newObj = Object.assign(obj,obj2);
console.log(newObj); //{name:”Alley”,age:18,sex:”男”}