1.Symbol
ES6新增的 数据类型 -基本类型值是由Symbol 函数 调用产生的相同的Symbol 函数 的 返回值 是唯一的 彼此是不同的即使每次 Symbol 函数 传参的值是一样的 函数的返回值是不同的 或者说是每次存储的值是不同的Symbol 函数的作用是 < 属性私有化 数据保护 >
var s1 = Symbol();
console.log( typeof s1) ;
var s2 = Symbol();
console.log(s1);
console.log(s2);
console.log(s1 === s2)
var s3 = Symbol('sss');
var s4 = Symbol('sss');
console.log(s3);
console.log(s4);
console.log(s3 === s4);
2.Symbol实例
function Person (name,gender) {
this.name = name ;
this.gender = gender ;
}
var p1 = new Person('momo','女');
console.log(p1.gender);
我希望一个 Person 出生之后,性别永远无法改变 一直到死里面的函数自执行 闭包 var Person = P_gender = gender 直接赋值 给内部的私有变量 作为一种受保护的 私有变量 这是原来的处理方式 有很多坑 <Map 函数????>
var Person = (function(){
var _gender = '' ;
function P (name,gender) {
this.name = name ;
//this._genderr = gender ;
_gender = gender ;
}
P.prototype.getGender = function () {
return _gender ;
}
return P ;
})() ;
var p1 = new Person('momo','女') ;
console.log(p1);
console.log(p1.getGender());
两个Symbol 函数的返回值是不同的 保护私有属性和上面一种方法的比较 : 上面一种方法 对象上根本就不存在 一个 _gender 的属性 因为我们根本就没有 给对象加这个属性这个属性你可以看到他(在控制台) 但是你无法访问Symbol函数 只要在两个时间点 调用 那么他们的返回值 一定是不同的随机数是无法实现这个 属性私有化 数据保护 的功能的 不能阻止外部的访问的 你会发现不是undefined~~
3.块作用域
{
var a = 1 ;
let b = 1 ;
const c = 3 ;
}
console.log(a); // 还是可以访问的
console.log(b);//b是未定义的
console.log(c);
作用域 : 变量的 作用范围原生 全局 函数 ES6 新增 块作用域 一对{} 包含的范围var不支持块作用域{}和 java 是一样的不支持 变量提升 预解析 代码的先后顺序 不允许写反不允许在同一个作用域内重复声明 数据的安全性大大的提高
3.块作用域.html:34 Uncaught ReferenceError: b is not defined
at 3.块作用域.html:34
4.选项卡
<style>
button.active {
background : yellow;
}
p.active {
display :block;
}
p{
display: none ;
}
</style>
</head>
<body>
<button class = 'active'>选项一</button>
<button>选项二</button>
<button>选项三</button>
<p class = 'active'>内容一</p>
<p>内容二</p>
<p>内容三</p>
<script>
var buttons = document.querySelectorAll('button');
var ps = document.querySelectorAll('p');
for (var i = 0; i < buttons.length; i++) {
buttons[i].index = i ;
buttons[i].onclick = function () {
for (var i = 0; i < buttons.length; i++) {
buttons[i].className = '' ;
ps[i].className = '' ;
};
this.className = 'active' ;
ps[this.index].className = 'active' ;
}
};
let版本
var buttons = document.querySelectorAll('button');
var ps = document.querySelectorAll('p');
for (let i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
for (let i = 0; i < buttons.length; i++) {
buttons[i].className = '' ;
ps[i].className = '' ;
};
this.className = 'active' ;
ps[i].className = 'active' ;
}
};
5.解构赋值
允许按照一定的模式 从数组的对象中取值,并对变量进行赋值,这被称为解构赋值需要去庞大对象数据中的某一个对象,就用到了解构赋值给编程带来 简便 模块化 就是基于 解构赋值 可读性增强
<script>
/*
允许按照一定的模式 从数组和对象中 提取值 并对变量进行赋值 这被称为解构赋值
*/
let [a,b,c] = [1,2,3] ;
console.log(a,b,c);
//---------------------------------
let arr = [1,2,3] ;
let [a,b,c] = arr;
console.log(a,c);
//--------------------------------------------------------------
let { foo , bar} = { foo : 'aaa' , bar : 'bbbb' } ; //左侧对象中变量的名称 必须是 右侧对象中存在的 key 不需要解构的顺序对应 它是key值对应
console.log(bar,foo);
//----------------------------------------------------
let { left : L,top : T } = { left:123,top:124};// 防止变量名已经存在 的报错问题 给变量起个别名
console.log(L,T);
//---------------------------------------------------------
let { foo : [a,b]} = { foo : [10,20] , bar : 'bbb'} ; //多重解构
console.log(a,b) ;
//-------------------------------------------------------------
let { left:L ,top : T ,width :W ,height :H} = getComputedStyle(document.body) ;//给编程带来 简便 模块化 就是基于 解构赋值 可读性增强
console.log(L,T,H,W);
</script>
6.扩展运算符
... 数据(数组,对象)的脱衣服,穿衣服数组或者对象转化成参数序列
var arr = [14,3,5,2,6,8] ;
console.log(Math.max( ...arr ));
var arr1 = [14,3,5,2,6,8] ;
var arr2 = [09,14,3,5,2,6,8];
console.log([ ...arr1, ...arr2]);
7.字符串扩展
<script>
/*
模版字符串 : 保持格式
*/
var str = 'a b' ;
console.log(str);
</script>
-没有 换行 ,不会报错,换行就会报错.
var str = 'a
b' ;
console.log(str);
Uncaught SyntaxError: Invalid or unexpected token
未知语法错误 : 无效 意料之外的象征
8.模版字符串 保持格式 Keep Format 标签的换行 是很方便的
变量表达式解析: '${1+1}'
var str = `
<ul>
<li>
</li>
</ul>
<h1>${1+2}</h1>
`;
console.log(str);
浏览器解析
<ul>
<li>
</li>
</ul>
<h1>3</h1>
它不支持语句,只支持表达式
函数调用时函数表达式调用,是被支持的,例如Math.random()
var str = `
<ul>
<li>
</li>
</ul>
<h1>${Math.random()}</h1>
`;
console.log(str);
它是不支持语句的,例如for var 这种类型的
var greeting = `
\`Hello\` World `
console.log(greeting);
`Hello` World
在模版字符串中,如果使用反引号,需要用反斜杠 转义
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
var r = (`
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
`.trim() ) ;
console.log(r);
模版字符串课一互相嵌套
const tmpl = addrs => `
<table>
${addrs.map(addr => `
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join('')}
</table>
`;
9. 数值的扩展
-浏览器 原先只支持8.10进制 现在支持 很多 (2.8.10.18)二进制 是2进1
10.数组扩展
11.对象扩展
-简洁表示法
-JS中对象的属性名只能是 字符串
12.迭代
-迭代协议
-迭代器
-迭代对象
-迭代语句
-for in ~ for of
-iterable 可迭代的
