1. 变量/赋值
var 可以重复定义、不能限制修改、没有块级作用域
let 不能重复定义， 变量，块级作用域
const 不能重复定义， 常量，块级作用域
-
结构赋值
- 数组解构赋值
- 对象解构赋值
2. 函数
- 箭头函数
function(参数,参数){
// 函数体
}
(参数, 参数)=>{
// 函数体
}
let arr=[12,5,88,34,32,19];
/*arr.sort(function (n1, n2){
return n1-n2;
});*/
arr.sort((n1, n2)=>{
return n1-n2;
});
alert(arr);// 5,12,19,32,34,88
// 1.有且仅有1个参数，()可以省去
arr.sort((n1, n2)=>n1-n2);
// 2.如果函数体只有一句话，而且是return，{}可以省
/*let show=function (a){
return a*3;
};*/
let show=a=>a*3;
alert(show(13));
注意
箭头函数有几个使用注意点。
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。
- 函数参数的默认参数
/*function show(a, b, c){
b=b||5;
c=c||12;
console.log(a,b,c);
}*/
let show=(a, b=37, c=12)=>{
console.log(a,b,c);
}
show(12, 37);// 12 37 12
- 参数展开(剩余参数， 数组展开)
- '...'的第一个用途： 接收剩余参数
function show(a, b, ...名字)剩余参数必须在参数列表的最后 - '...'的第二个用途：展开一个数组
let show=(a, b, ...args) =>{
console.log(a, b, args);
}
show(1,2,3,4,5,6,7,8) // 1 2 [3, 4, 5, 6, 7, 8]
let arr = [1,2,3];
arr.push(4,5,6);
// alert(arr) // 1,2,3,4,5,6
let arr1 = [1,2,3];
let arr2 = [4,5,6];
arr1.push(...arr2)
alert(arr1) // 1,2,3,4,5,6
function show1(...args){
show2(...args);
}
function show2(a, b){
alert(a+','+b);
}
show1(12, 5);
- rest 参数
rest 参数（形式为...变量名）
获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
// arguments变量的写法
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
}
// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();
// arguments对象不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组。
// rest 参数就不存在这个问题，它就是一个真正的数组，数组特有的方法都可以使用。下面是一个利用 rest 参数改写数组push方法的例子。
function push(array, ...items) {
items.forEach(function(item) {
array.push(item);
console.log(item);
});
}
var a = [];
push(a, 1, 2, 3)
3.数组/json
数组--5种
- map 映射： 一个对一个
- filter 过滤
- forEach 遍历
- reduce 汇总
- Array.from([array-like])=>[x,x,x]
let aDiv=document.getElementsByTagName('div')获取到的一个是一个array-like,可以使用from()方法转为Array
map
let arr=[62, 55, 82, 37, 26];
/*let arr2=arr.map(function (item){
if(item>=60){
return true;
}else{
return false;
}
});*/
/*
let arr2=arr.map(item=>{
if(item>=60){
return true;
}else{
return false;
}
});*/
let arr2=arr.map(item=>item>=60);
alert(arr2); //true,false,true,false,false
filter
let arr=[12,5,88,37,21,91,17,24];
let arr2=arr.filter(item=>item%2);
alert(arr2);
let arr=[12,5,88,37,21,91,17,24];
let sum=0;
arr.forEach(item=>{
sum+=item;
});
alert(sum);
reduce
// 计算arr数组的和
let arr=[12,5,88,37,21,91,17,24];
let sum=arr.reduce((tmp,item,index)=>{
console.log(tmp, item, index);
return tmp+item;
});
console.log(sum);
// 计算arr数组的平均值
let ave=arr.reduce((tmp,item,index)=>{
if(index<arr.length-1){
return tmp+item;
}else{ //最后一次迭代
return (tmp+item)/arr.length;
}
});
console.log(ave);
Array.from([array-like])=>[x,x,x]
<!-- 用js改变div的北背景色 -->
<style>
div {width:200px; height:200px; background:#CCC; float:left; margin:10px;}
</style>
<script>
window.onload=function (){
let aDiv=document.getElementsByTagName('div');
console.log(aDiv)
Array.from(aDiv).forEach(div=>{
div.style.background='yellow';
});
};
</script>
<body>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
</body>
json的两个变化 -简写
- 简写： 名字和值一样的，可以省
- function可以不写
let a=12;
let b=5;
let json={a, b};
console.log(json);
/*let json={
a: 12,
b: 5,
show: function (){
alert(this.a+this.b);
}
};*/
let json={
a: 12,
b: 5,
show(){
alert(this.a+this.b);
}
};
json.show();
4.字符串
- 模板字符串 可以输入变量、可以随意折行
let json={name: 'blue', age: 18};
alert(`我叫：${json.name}，我今年${json.age}岁`);
- startsWith()
- endsWith()
if(sNum.startsWith('135')){
alert('移动');
}else{
alert('联通');
}
if(filename.endsWith('.txt')){
alert('文本文件');
}else{
alert('图片文件');
}
- 字符串的遍历
for ... of
for (let codePoint of 'foo') {
console.log(codePoint)
}
// "f"
// "o"
// "o"
- includes(), startsWith(), endsWith()
传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
- includes()：返回布尔值，表示是否找到了参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
- repeat()
repeat方法返回一个新字符串，表示将原字符串重复n次。
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
5.面向对象
class/constructor
extends/super
-
this
- 普通函数： 根据调用者确定 this会变
- 箭头函数： 根据所在的环境 this恒定
- bind 给函数定死一个this
// 传统的js对象
function Person(name, age){
this.name=name;
this.age=age;
}
Person.prototype.showName=function (){
alert('我叫'+this.name);
};
Person.prototype.showAge=function (){
alert('我'+this.age+'岁');
};
let p=new Person('blue', 18);
p.showName();
p.showAge();
//------------------------------------------------
function Worker(name, age, job){
Person.call(this, name, age);
this.job=job;
}
Worker.prototype=new Person();
Worker.prototype.constructor=Worker;
Worker.prototype.showJob=function (){
alert('我是做：'+this.job);
};
let w=new Worker('blue', 18, '打杂的');
w.showName();
w.showAge();
w.showJob();
- es6面向对象
class Person{
constructor(name, age){
this.name=name;
this.age=age;
}
showName(){
alert('我叫'+this.name);
}
showAge(){
alert('我'+this.age+'岁');
}
}
class Worker extends Person{
constructor(name, age, job){
//super-超类(父类)
super(name, age);
this.job=job;
}
showJob(){
alert('我是做：'+this.job);
}
}
let w=new Worker('blue', 18, '打杂的');
w.showName();
w.showAge();
w.showJob();
- bind 改变this指向
class Person{
constructor(name, age){
this.name=name;
this.age=age;
}
showName(){
alert(this);
alert('我叫'+this.name);
}
showAge(){
alert('我'+this.age+'岁');
}
}
let p=new Person('blue', 18);
document.onclick=p.showName.bind(p);
6.Promise
-
Promise 解决异步操作
- 同步-串行 简单、方便
- 异步并发 性能高、体验好
Promise用法
let p=new Promise((resolve, reject)=>{
resolve();
reject();
});
p.then(()=>{}, ()=>{});
- 单个
let p=new Promise((resolve, reject)=>{
//resolve 解决->成功
//reject 拒绝->失败
$.ajax({
url: '1.txt',
dataType: 'json',
success(json){
resolve(json);
},
error(err){
reject(err);
}
});
});
p.then(json=>{
alert('成功');
console.log(json);
}, err=>{
alert('失败');
});
- 多个 all([])
let p=new Promise((resolve, reject)=>{
//resolve 解决->成功
//reject 拒绝->失败
$.ajax({
url: '1.txt',
dataType: 'json',
success(json){
resolve(json);
},
error(err){
reject(err);
}
});
});
let p2=new Promise((resolve, reject)=>{
//resolve 解决->成功
//reject 拒绝->失败
$.ajax({
url: '2.txt',
dataType: 'json',
success(json){
resolve(json);
},
error(err){
reject(err);
}
});
});
let p3=new Promise((resolve, reject)=>{
//resolve 解决->成功
//reject 拒绝->失败
$.ajax({
url: '3.txt',
dataType: 'json',
success(json){
resolve(json);
},
error(err){
reject(err);
}
});
});
Promise.all([p, p2, p3]).then(arr=>{
let [j1, a, j2]=arr;
alert('成功');
console.log(j1, a, j2);
}, err=>{
alert('失败');
});
1.Proimse有用——解除异步操作
2.Promise有局限——带逻辑的异步操作麻烦
Promise.all(); 与：所有的都成功
Promise.race(); 或：只要有一个完成
-
generator-生成器
- 能暂停
-
yield：
- 参数 function (a, b, c)
- 返回 return
function *show(){
alert('aaa');
yield; // gne.next() 执行了yield的上部分，会停止下部分的执行。
// 定时器中的gen.next()会执行下半部分
alert('bbb');
}
let gen=show();
gen.next(); //aaa
setTimeout(function (){
gen.next(); //bbb
}, 5000);
function *show(){
alert('aaa');
yield 55;
alert('bbb');
return 89;
}
let gen=show();
let res1=gen.next();console.log(res1); //{value: 55, done: false}
let res2=gen.next();console.log(res2); //{value: 89, done: true}
try catch捕捉async await 的错误
