ES6
箭头函数:
1 <!-- 2 以前js的一些知识 不知道的还是很多的 3 --> 4 <script> 5 const obj = { 6 aaa() { 7 setTimeout(function () { 8 setTimeout(function (){ 9 console.log(this) //window 10 }) 11 12 setTimeout( () => { 13 console.log(this) //window 14 }) 15 }) 16 17 setTimeout(() => { 18 setTimeout(function (){ 19 console.log(this) //window 20 }) 21 22 setTimeout(() => { 23 console.log(this) //obj 24 }) 25 }) 26 } 27 } 28 29 </script>
https://www.cnblogs.com/gaoya666/p/9070981.html#const
sync 同步 async异步
promise 异步处理
<script> /*关于 setTimeout的异步 https://blog.csdn.net/rememberyf/article/details/80064115 setTimeout(() => { console.log('hello world') }, 1000) 就是说 promise是个类 新建:new Promise(函数) 身为参数的函数(在此是回调函数)也有两个参数resolve reject这俩也是函数 new Promise((resolve, reject) => { //异步操作的代码写在这里就好 setTimeout(() => { resolve() //一旦你调用了resolve函数 就会来到下面的then函数 可以把要执行的代码放在then函数里 },1000) }).then( () => { })*/ new Promise((resolve, reject) => {
//异步操作之后会有三种状态 setTimeout(() => { //成功的时候调用resolve resolve('hello world') //失败的时候调用reject reject('error message') }, 1000) }).then((data) => { console.log(data) console.log(data) console.log(data) console.log(data) console.log(data) }).catch(err => { console.log(err) }) </script> <!-- resolve 直接转入函数then 在then里处理具体代码 可以在resolve函数里放参数 会直接转给then函数的 then的data就是resolve的helloworld reject 转入catch函数 不会去then函数的 同理也是 参数会转给catch函数 -->
另一种写法
<script> new Promise( (resolve,reject) => { setTimeout( () => { resolve('hello vue.js') reject('errso message') },1000) }).then( data => { console.log(data) }, err => { console.log(err) }) </script>
promise all属性 <script> Promise.all([ //参数是个数组 需要几个异步请求一起发就几个元素 new Promise((resolve, reject) => { /*$.ajax({ url: 'url1', success: function (data) { resolve(data) } })*/ setTimeout(() => { resolve({ name: 'why', age: 18 }) }, 2000) }), new Promise((resolve, reject) => { /*$.ajax({ url: 'url2', success: function (data) { resolve(data) } })*/ setTimeout(() => { resolve({ name: '溯', part:'你呼吸蓝丝绒包裹身体 和海洋的哼鸣' }) }, 1000) }) ]).then(results => { //在所有请求都回来之后执行 //reults也是个数组 存储发送异步请求 请求回来的信息 console.log(results[0]) console.log(results[1]) }) /* Object age: 18 name: "why" __proto__: Object Object name: "溯" part: "你呼吸蓝丝绒包裹身体 和海洋的哼鸣" __proto__: Object */ </script>
let：不能重复声明，变量-值可以更改，块级作用域,
const：不能重复声明，常量-值不可更改，块级作用域,一旦声明变量，就必须立即初始化，不能留到以后赋值
之前:function xx(参数){
}
or let sc = function(参数){
}
箭头函数:(参数) =>{
当参数就一个,省略() 函数体就一句return 省略{}
}
参数拓展：
-
收集剩余参数，必须是最后一个形参
-
展开数组
<script>
function show(a,b,args){ //由于js接参数接的都是个数组，所以传参传多少个都可以 ...args必须放最后，后面不能再有其他参数
alert(a);
alert(b);
alert(args); //5,6,7 剩余参数
}
show(2,3,5,6,7,12);
</script>
<script>
let arr = [1,2,3];
let pnly = (n1,n2,n3) =>{
alert(n1);
alert(n2);
alert(n3);
}
pnly(arr);//===等价于pnly(arr[0],arr[1],arr[2])
let brr = ['我','爱','我'];
let crr = [arr,brr];
alert(crr);//1,2,3,我,爱,我
</script>
jquery.animate()
方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<title>Document</title>
<style>
.box {
background-color: red;
height: 100px;
width: 100px;
margin: 6px;
}
</style>
<script>
$(document).ready(function () {
$('#btn1').click(function () {
$(".box").animate({
height: "300px",
width: "200px"
});
});
$('#btn2').click(function () {
$('.box').animate({
height: "100px"
})
})
})
</script>
</head>
<body>
<div class="box"></div>
<button id="btn1">Animate</button>
<button id="btn2">reset</button>
</body>
</html>
解构赋值
-
左右两边结构必须一样
-
右边必须是合法的结构
-
声明和赋值不能分开
<script>
let {a,c,d} = {a:12,c:5,d:6};//左边是个json 右边也得是
console.log(a,c,d);
//let {f,e} = {12,4}; //等号右边是不合法的类型
// console.log(f,e);
let [m,n];
[m,n] = [12,3]; //错误 声明和赋值必须在一行
</script>
数组
新方法：map() / reduce() / filter() / forEach()
<script>
let arr = [12,5,8];
let result = arr.map(item => item*2);
console.log(result);
</script>
<script>
let arr=[12,69,180,8763];
let result=arr.reduce(function (tmp,item,index){
if(index!=arr.length-1){
return tmp+item;
}else{
return (tmp+item)/arr.length;
}
});
alert(result);
</script>
<script>
let arr = [23,45,9,14,3];
let result = arr.filter(item => item%3==0)
console.log(result);//45 9 3
</script>
<script>
let arr=[12,5,8,9];
arr.forEach((item,index) =>{
alert(index+':'+item);
})
</script>
字符串
新方法：startswith() / endswith()
<script>
let str="http://www.baidu.com";
if(str.startsWith('http://')){
alert('普通网址');
}else if(str.startsWith("https://")){
alert('加密网址');
}else{
alert("其他");
}
endswith let str='1.txt';
</script>
字符串模板：`` js里单双引号没区别
<script>
let a = 12;
let str = `a${a}bc`;
alert(str); //a12bc ``可以直接把东西塞到字符串里面
let title='标题';
let content='内容';
let connection='<div>\
<h1>'+title+'</h1>\
<P>'+content+'</p>\
</div>';
alert(connection); //之前的字符串拼接 折行还得\
let str2 = `<div>
<h1>${title}</h1>
<p>${content}</p>
</div>`;
alert(str2); //用了`` 可以折行
</script>
ES6的面向对象
-
原来的面向对象
<script>
//老式的面向对象的写法
function User(name,pass){ //这个既是类又是构造函数
this.name=name;
this.pass=pass;
}
User.prototype.showName=function (){
alert(this.name);
}
User.prototype.showPass=function (){
alert(this.pass);
}
let u1 = new User('bu',123);
u1.showName();
u1.showPass();
//js里的继承
function VipUser(name,pass,level){
User.call(this,name,pass); //没有专门的继承语法，只得这样
this.level = level;
}
VipUser.prototype=new User();//
VipUser.prototype.constructor=VipUser;
VipUser.prototype.showLevel=function(){
alert(this.level);
}
let v1= new VipUser('山山',12,3);
v1.showName();
v1.showPass();
v1.showLevel();
</script>
<script>
//ES6
class User { //ES6: 类
constructor(name, pass) { //专门的构造器
this.name = name;
this.pass = pass;
}
showName() { //类里直接添方法
alert(this.name);
}
showPass() {
alert(this.pass);
}
}
let u1 = new User('bu', 123);
u1.showName();
u1.showPass();
//继承
class VipUser extends User {
constructor(name, pass, level) {
super(name, pass);
this.level = level;
}
showLevel() {
alert(this.level);
}
}
let v1 = new VipUser('山山', 12, 3);
v1.showName();
v1.showPass();
v1.showLevel();
</script>
