<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES6</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
//let 块级作用域 {}
//var 函数作用域 function f() { }
//JS解析过程二个阶段：预处理/执行期
//var function
//1、let不存在变量提升 先声明 后使用
//console.log(a);
//let a = '123';
//2、不允许重复声明 不允许在相同作用域中重复同一个变量
for(let i=0;i<5;i++){
console.log(i);
};
console.log(i); //error
var arr = [];
for(let i=0;i<5;i++){
arr[i] = function(){
console.log(i);
}
};
arr[2]();
//暂时性死区
var n = '123';
if(true){
n='345';
let n ;
};
let x=y,y=2;
function a() {
console.log(x,y)
};
a()
//块级作用域
function f() {
var a = 10;
if(true) {
var a= 20;
};
console.log(a)
};
function f() {
let a = 10;
if(true) {
let a= 20;
};
console.log(a)
};
f()
//const 声明一个只读的常量 一旦声明，常量的值不能改变
//一旦声明，必须初始化，不能以后赋值操作！！！
const a;//error
const a = '123';
a='456' //error
const obj = {};
obj.name='lily';
obj.age=20;
obj.action=function(){};
obj={};//error
const arr=[];
arr.push('0');
arr = ['0']//error
//了解块级作用域
var str='123';
function f(){
console.log(str);
if(false){
var str='456';
}
//var str='456';
};
f();
//解构赋值
//从数组 和对象中提取值，对变量进行赋值，这就是解构
let x=1,y=2,z=3;
let [x,y,z] =[3,2,1]
//1、数组解构
let [x,,z] =[3,2,1]
//默认值
//如果值为undefined 才会获取默认值
let [a1,y='2'] = [3,4,5]
let [x,y,z]=[1,[2,3],4]; //数组
let [x,y,z]=[1,{'name':'abc'},4]; //对象
let [a1='1',b1='2'] = [3,,5] //a1=3 b1=2
let [a=f()] =[1]; //函数 惰性求值 如果变量有值不运行f(),除非为空 /undefined
function f(){
return '2'
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES6</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
//箭头函数 函数名=参数=>函数体
let f = v => v; //===> var f=function(v){return v};
let f = () => '123'; //===> var f=function(){return '123'};
let f = (n1,n2) => n1+n2; //===> var f=function(n1,n2){return n1+n2};
let f = (n1,n2) => {return n1+n2};
let f = (n1,n2) => ({name:n1,age:n2})
//1、箭头函数不能作为构造函数 ，不能使用new
var Fun=()=>{}
var f1=new Fun() //error
//2、箭头函数没有它自己的this，this值断函外围作用域
var obj={
name:'a',
f:function(){
console.log(this.name)
}
}
//3、箭头函数没有原型属性
function a(){}
a.prototype
var b=()=>{return 1}
b.prototype //error
//arguments 参数 箭头函数不绑定arguments 取代rest参数
function a(a){
console.log(arguments)
};
a(1)
var b =(b) =>{
console.log(arguments) //arguments is not defined
};
b(1)
var c =(...c) =>{ //扩展
console.log(c)
};
c(1,2,3,4,5,6)
//数组解构 对象解构
var obj ={
name:'a',
age:20,
msg:'12345'
};
var {name,age,msg} =obj; //对象解构
var {x,y} ={y:'aaa',x:'bbb'};
var [x,y]=[2,5]; //var x =2;var y=5;
var {x:a,y:b} ={y:'aaa',x:'bbb'}; //x/y匹配模式 a/b变量名称
var {x:x,y:y} ={y:'aaa',x:'bbb'};
var {x=1} ={y:'aaa',x:'bbb'};
var {x:y=1} ={y:'aaa',x:'bbb'};
let x; //已经声明的变量用于解构赋值，加()
({x}={x:1})
function obj(){
let obj2={
name:'abc',
age:20
};
return obj2;
}
let {name:a,age:b}=obj();
var obj3={
name:'aaa',
age:20,
friends:['a','b','c'],
members:{x:1,y:2}
};
var {name,age,friends:f,members:m} = obj3;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES6</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
//字符串的解构
let [a,b,c,d] ='string';
a//s
//函数的解构
function fun([x,y]){
return x + y;
};
fun([2,3]); //5
function fun([x=0,y=0]){
return x + y;
};
fun([undefined,3]); //3
function fun([x=0,y=0]){
return x + y;
};
fun([]); //0
//对象
function num({x,y}) {
console.log(x,y)
};
num({x:2,y:5});
//var arr =['a','b','c','d'];
// arr.map((item,index)=> {
// return item
// });
//[[1,2],[3,4]].map(([a,b])=>{return a}); //1,3
//[[1,2],[3,4]].map(([a,b])=>{return b}); //2,4
//[[1,2],[3,4]].map(([a,b])=>{return a+b}); //3,7
//扩展
//字符串扩展
var str = 'hello world';
str.substring(3,5) //开始 -结束
str.substr(3,5) //开始-长度
str.indexOf('o')
if(str.indexOf('o')!=-1){}
str.includes('k') //是否存在字符串
str.startsWith('hello',3) //是否头部 第二个参数表示搜索的位置
str.endsWith('hello') //是否尾部
repeat('3') //重复N次
//补全
var s = 's';
var a = s.padStart(4,'xy'); //xyxs 前面补全
var a = s.padEnd(4,'xy'); //sxyx 后面补全
//模板字符串 ${}
$(".lists").html('<li>'+item.name+'</li>');
$(".lists").html(`<li>${item.name+'abc'}</li>`);
//函数扩展 箭头函数
//es5
function fun(x,y){
y = y || '10';
};
//es6
function fun(x,y='10'){
};
//es6 rest参数
function fun(...x){
console.log(x)
};
fun(1,23,43,53,34,34,3,53,53,53,)
let f1=(...n)=>n;
var arr=[1,2,3,4,5,6];
fun(...arr);
function fun(...x){
console.log(x)
};
//数组合并
//es5
var arr1=[1,3,4];
var arr2 =[2,3,4,5];
arr1.concat(arr2);
//es6
[...arr1,...arr2]
//Set 构造函数 类似数组 成员信息唯一
const arr = new Set();
const arr2 = new Set([1,2,3,4,2,2,3,4,5]);
arr.add(1).add(2).add(3);
//add() //添加数据
//size //长度 去重
//delete() //删除
has() //判断是否为set成员
clear() //清除所有
//转为数组 Array.from()
const arr2 = new Set([1,2,3,4,2,2,4,4,5]);
let arr3 = Array.from(arr2);
//循环 for of
const arr7 = new Set([1,2,3,4,2,2,4,4,5]);
for(let list of arr7.keys()){ //arr7.keys() 键名 arr7.values()值 arr7.entries 键值对遍历
console.log(list)
};
//filter()方法 取二种数据的交集
[10,2,4,23,44,23,45].filter(function(item,index,array){return item>10});
var q1 = new Set([1,2,3,4,2,2,4,4,5]);
var q2 = new Set([4,4,5,7,8,9]);
var q3 = new Set([...q1].filter(item=>q2.has(item)))
console.log(q3); //45
var q1 = new Set([1,2,3,4,2,2,4,4,5]);
var q2 = new Set([4,4,5,7,8,9]);
var q3 = new Set([...q1].filter(item=>!q2.has(item)))
console.log(q3); //123
var q1 = new Set([1,2,3,4,2,2,4,4,5]);
var q2 = new Set([4,4,5,7,8,9]);
var q3 = new Set([...q2].filter(item=>!q1.has(item)))
console.log(q3); //789
</script>
</body>
</html>