2021-04-08

ES5和ES6
数组新增的方法

• indexOf
• forEach
• map
• reduce
• filter
• some
• every

some方法：判断 数组中是否至少有一个元素是满足条件
例子：
var arr = [10,20,30,50,6,7,8];
//arr.some(function(v,i,a){return 条件}) - 返回布尔值
var bool = arr.some(function(v){
return v>=40
})
console.log(bool);

简写：
var arr = [10,20,30,50,6,7,8];
var bool = arr.some(v=>v>=40)
console.log(bool);

注意点
function(v){} 可以省略为v=>
return v>=40 …v>=40

every方法：判断 数组中是否所有元素都满足条件
arr.every(function(v,i,a){return 条件}) - 返回值

例子：var arr = [1,3,7,9]
var y = arr.every(function(v){
return v>0
})
console.log(y)

例子：
var arr = [60,80,88,90,9];
var bool = arr.every(function(v){
return v>=90
})
console.log(bool);
需要都满足

find方法：找 数组中第一个满足条件的元素 - 返回元素
arr.find(function(v,i,a){return 条件})

例子：var arr = [1,false,true,{},null,‘hello’,‘world’];
找数组中第一个字符串
var ele = arr.find(function(v){
return typeof v === ‘string’
})
console.log(ele);

var arr = [
{
goodsname:‘手机’,
price:50,
introduce:‘很好’
},
{
goodsname:‘电脑’,
price:500,
introduce:‘很好用’
},
{
goodsname:‘平板’,
price:20,
introduce:‘不好’
},
{
goodsname:‘电视’,
price:300,
introduce:‘好看’
},
];
找价格低于50的商品
var obj = arr.find(function(v){
return v.price<50
})
console.log(obj);

findIndex：找 数组中的第一个满足条件的元素的下标
arr.findIndex：找(function(v,i,a){return 条件}) - 找到返回下标，找不到返回-1

将数组中价格低于50的商品进行删除
var arr = [
{
goodsname:‘手机’,
price:50,
introduce:‘很好’
},
{
goodsname:‘电脑’,
price:500,
introduce:‘很好用’
},
{
goodsname:‘平板’,
price:20,
introduce:‘不好’
},
{
goodsname:‘电视’,
price:300,
introduce:‘好看’
},
];
找价格低于50的商品
var obj = arr.find(function(v){
return v.price<50
})
console.log(obj);
var index = arr.findIndex(function(v){
return v.price<50
})
console.log(index);
arr.splice(index,1)
console.log(arr);

var r = arr.findIndex(function(v){
return v.price>30
})
console.log®

forEach - 不返回就是遍历 == 整体没有返回
map - 函数中返回一个新元素 == 整体返回一个新数组
filter - 返回条件 == 整体返回一个所有满足条件的元素组成的数组
some - 返回条件 == 整体返回布尔值
every - 返回条件 == 整体返回布尔值
find - 返回条件 == 整体返回元素
findIndex - 返回条件 == 整体返回下标

var body = document.querySelectorAll(‘body’)
for(var attr in body){
console.log(attr,body[attr]);
}
for(var i=0;i<body.length;i++){
console.log(body[i]);

}

var obj = {
name:“zs”,
age:12
}
console.log(obj);
console.log(obj.length);//对象没有长度

伪数组 — 对象
但是有下标，能遍历，就是不能使用数组方法

ES6
es6新增了两个定义变量的关键字：let const

特点1：没有预解析，不能提升


特点2：let定义的变量不在window中
let a = 100;
console.log(window);

特点3：不能重复定义变量

let a = 10;
let a = 20;
console.log(a);

特点4：let定义变量会自己创建一个作用域 - 块级作用域

if(true){
let a = 10
}
console.log(a);

if(true){
let a = 10
console.log(a);
}

区别

for(let i=1;i<=3;i++){
setTimeout(function(){
console.log(i);
})
}
console.log(i);

作用域
for(var i=1;i<=3;i++){
setTimeout(function(){
console.log(i);
})
}
console.log(i);

总结：
let
const
跟var有区别：
1.没有预解析
2.全局定义的不在window上
3.不能重复定义
4.自己会创建块级作用域 - 只能在大括号中用
const定义常量，值不能修改

tab切换案例.

• 1
• 2
• 3

1. 
2. 
3. 

// for(let i=0;i<ulis.length;i++){
// ulis[i].onclick = function(){
// for(var j=0;j<ulis.length;j++){
// ulis[j].className = ‘’;
// }
// this.className = ‘active’;
// for(var j=0;j<olis.length;j++){
// olis[j].className = ‘’;
// }
// // 找到自己下标
// olis[i].className = ‘on’;
// }
// }
for(var i=0;i<ulis.length;i++){
// ulis[i].index = i
ulis[i].onclick = function(){
for(var j=0;j<ulis.length;j++){
ulis[j].className = ‘’
}
this.className = ‘active’
for(var k =0;k<olis.length;k++){
olis[k].className = ‘’
}
var s = this.getAttribute(‘index’)
olis[s].className =‘on’
}
}

es6函数

函数形参默认值
function fn(a,b=2){
return a+b
}
var res = fn(1,5)
console.log(res);

箭头函数：匿名函数的简写
var fn = function(){
console.log(123);
}
简写
let fn = ()=>{
console.log(123);
}
fn()
箭头函数中，如果只有一个形参，那么放形参的小括号就可以省略
let fn = a=>{
console.log(++a);
}
fn(3)

箭头函数中，如果大括号中只有一行代码，大括号可以省略 - 如果这行代码中有return，return也省略了
let fn = a=> ++a;
var res = fn(6)
console.log(res);
//7
例子：var arr = [1,5,9,3,6,7,4,8,2];
var e = arr.sort(function(x,y){
return y-x
})
console.log(e)
简写
// arr.sort((a,b)=>b-a)
// console.log(arr);

es6中对象
对象简写形式如果对象中的键和值对应的变量名同名，就可以简写成一个
var name = ‘张三’
var age = 12
var obj = {name,age}
console.log(obj);

es6中字符串
模板字符串
//es6中可以使用反引号去定义字符串 // var img = '<img src="'+path+'">' var str =aabbccd`
console.log(str);

可以多行定义了

var str = a b
console.log(str);

es6提供了三个字符串方法
startsWith - 判断 字符串是否以某个字符开头
var str = ‘aabbcdef’;
//字符串.startsWith(字符) - 布尔值
var bool = str.startsWith(‘baab’)
console.log(bool);

var bool = str.startsWith(‘a’)

endsWith() - 判断 字符串是否以某个字符结尾
var str = ‘aabbcdef’;
var res = str.endsWith(‘f’)
console.log(res);

var res = str.endsWith(‘ff’)

includes() - 判断 字符串中是否包含某个字符
var str = ‘aabbcdef’;
var res = str.includes(‘aa’)
console.log(res);

var res = str.includes(‘aaa’)

三点运算符

… 将多个值合并成一个数组 也可以将一个数组分解成多个值
function fn(a,b,c,d){
return a+b+c+d
}
var arr = [1,2,3,4];
// var res = fn(arr[0],arr[1],arr[2],arr[3])与下面写法一样的
var res = fn(…arr) // 将数组分解成4个值
console.log(res);

function fn(…arr){ // 将多个实参收集成一个数组
console.log(arr.reduce((a,b)=>a+b))
}

fn(1,2,3)
fn(1,2,3,4,5)
fn(1,2)

this关键字
1.全局的this代表window
2.普通函数中的this就代表window
3.事件函数中的this代表事件源
4.对象方法中的this代表当前对象 ******
5.自调用函数中的this代表window
6.定时器中的this代表window
7.箭头函数中的this代表箭头函数所处作用域中的this - 箭头函数中的this代表箭头函数上一行代码的this

检查数据类型
var obj = {}
var arr = []
var date = new Date()

Object.prototype.toSting.call(数据)
console.log(Object.prototype.toString.call(obj))
console.log(Object.prototype.toString.call(arr))
console.log(Object.prototype.toString.call(date))
console.log(Object.prototype.toString.call(/aa/))
console.log(Object.prototype.toString.call(5))
console.log(Object.prototype.toString.call(’’))
console.log(Object.prototype.toString.call(true))

伪数组

伪数组：本质是一个对象,只是他的键跟下标一样，且他有一个属性叫length
伪数组不是数组，不能调用数组的方法

借用函数：
call
apply
调用函数，第一个参数希望的this指向，
call从第二个参数开始对应函数原来的参数
apply，把函数需要的所有实参作为一个数组，将数组作为apply的第二个参数
bind
复制函数，返回一个新函数，可以将新函数中的this改变成bind的参数