ES复习笔记

SE6---Balel-----ES5

转

Live server 自动刷新插件
--------------------------------------

数组方法

forEach

map

filter

find

every

some

reduce

--------------------------------------

forEach

//ES5 遍历数组方法
for(var i=0;i<colors.length;i++){
console.log(colors[i]);
}

//ES6 forEach （迭代器函数）
colors.forEach(function(item,index){
console.log(item);
})

--------------------------------------

Map

map 43s

/*场景1
*假定有一个数值数组（A）,将A数组中的值以双倍的形式放到B数组中
*
*批量修改
*/

var doubled =numbers.map(function(sun){
return sun*2;
})

console.log(doubled);

/*场景2
*假定有一个数值数组（A）,将A数组中对象某个属性的值存储到放到B数组中
*取某个属性
*
*/

var cars = [
{model:"Buick0",Price:"Cheap0"},
{model:"Buick1",Price:"Cheap1"},
{model:"Buick2",Price:"Cheap2"},
{model:"Buick3",Price:"Cheap3"},
]

var prices = cars.map(function(car){
return car.Price;
})

console.log(prices);

//迭代器函数

--------------------------------------

数组方法 filter

/*************数组方法 filter****************/

/**
* 场景1
* 假定有一个对象数组A，获取数组中指定类型的对象放到B数组中
* 过滤想要的
*/

var porducts = [
{name:"cucuber",type:"vegetable"},
{name:"banana",type:"fruit"},
{name:"celery",type:"vegetable"},
{name:"orange",type:"fruit"}
]

//es5
/*
var porducts1 =[];
for(var i=0;i<porducts.length;i++){
if(porducts[i].type==="fruit"){
porducts1.push(porducts[i]);
}
}
console.log(porducts1);
*/

//es6 filter

var filtered2 = porducts.filter(function(product2){
return product2.type === "vegetable";
})

console.log(filtered2);

/**
* 场景2
* 假定有一对象数组A，过滤掉不满足一下条件的对象，
* 条件：蔬菜 数量大于0，价格小于10
*/

var products = [
{name:"cucumber",type:"vegetable",quantity:0,price:1},
{name:"banana",type:"fruit",quantity:10,price:16},
{name:"celery",type:"vegetable",quantity:30,price:8},
{name:"orange",type:"fruit",quantity:3,price:6}
];

products = products.filter(function(product){
return product.type === "vegetable"
&& product.quantity > 0
&& product.price < 10
})

console.log(products);

/**
* 场景3
* 假定有两个数组A,B，根据A中ID值，过滤掉B数组不符合的数据。
*
*/

var post = {id:4,title:"javascript"};
var comments = [
{postId:4,content:"angular4"},
{postId:2,content:"vue.js"},
{postId:3,content:"node.js"},
{postId:4,content:"React.js"},
];

function commentsForPost (post,comments){
return comments.filter(function(comment){
return comment.postId ===post.id;
})
}

console.log(commentsForPost(post,comments));

-----------------------------------------

数组方法 find

/**
* fund
*
* 场景1
* 假定有一个对象数组a.找到符合条件对象
*
*/

var users = [
{name:"JIll"},
{name:"Alex"},
{name:"shaozhu2"}
];
var user;

//ES5

for(var i=0;i<users.length;i++){
if(users[i].name==="Alex"){
user = users[i];
break;
}
}
console.log(user);

//ES6 方法
//找到了一个就不会继续找了，会自动返回

user = users.find(function(user){
return user.name === "Alex";
})
console.log(user);

/**
*场景2
*假定有一个对象数组a,根据指定对象的条件，找到数组中符合添加的对象
*
*/

var posts = [
{id:1,title:"node.js"},
{id:2,title:"React.js"},
]

var comment ={postId:1,content:"hello world"};

function postForComment(posts,comment){
return posts.find(function(post){
return post.id === comment.postId;
})
}

console.log(postForComment(posts,comment));

-----------------------------------------

数组方法(every和some)

every和some

/**
* Every && Some
*
* 场景1
* 计算对象数组中每个电脑的操作系统是否可用
* 大于16位操作系统表示可用，否则不可用
*
*/

var computers = [
{name:"Apple",ram:16},
{name:"IBM",ram:4},
{name:"Acer",ram:32},
];

var everycomputersCanRuProgram = true;//都支持
var somecomputersCanRunProgram = false;//部分支持

//ES5方法
for(var i=0;i<computers.length;i++){
var computer = computers[i];
if(computer.ram<16){
everycomputersCanRuProgram=false;
}else{
somecomputersCanRunProgram = true;
}
}
console.log(everycomputersCanRuProgram);
console.log(somecomputersCanRunProgram);

/**
* Every 一假即假
* Some 一真即真
* 返回的都是布尔值
*/

var every =computers.every(function(computer){
return computer.ram>16;
})
console.log("=================");
console.log(every);

var Some =computers.some(function(computer){
return computer.ram>16;
})
console.log("=================");
console.log(Some);

-----------------------------------------
--------------------------------------

/**
* Every && Some
*
* 场景2
*假定有一个数组页面，判断所有input内容的长度是否大于0
*
*
*/

function Filed(value){
this.value = value;
}
Filed.prototype.validate = function(){
return this.value.length >0;
}
var username = new Filed("henrywu");
var telephone = new Filed("15000000000");
var pwd = new Filed("shaozhu");
//console.log(username.validate());
//console.log(telephone.validate());
//console.log(pwd.validate());

//优化 这里才是重点，验证用户输入的信息都不为空
var fields = [username,telephone,pwd];

var filg = fields.every(function(field){
return field.validate();
})

console.log(filg);

-----------------------------------------

数组方法 reduce

/**
* 数组方法 reduce
*/

//场景1
//计算数组中所有值的总和

//es5
var number = [10,20,30];
var sum =0;

/*for(var i=0;i<number.length;i++){
sum+=number[i];
}
console.log(sum);*/

//forEach
/*
number.forEach(function(iten,index){
return sum+=number[index];
})
console.log(sum);
*/

//reduce es6

var sumValue = number.reduce(function(sum1,numbers1){
return sum1+numbers1;
},0)
//0是 sum 的初始值
console.log(sumValue);

/**
*
* 场景2
* 将数组中的对象的某个属性抽离到另一个数组中
* **/
var primaryColors = [
{color:"red"},
{color:"yellow"},
{color:"blue"}
];

var arr= primaryColors.reduce(function(previous,primaryColor){
previous.push(primaryColor.color);
return previous;
},[]);

console.log(arr);

// reduce 2
// reduce 2
//判断字符串中括号是否对称
/***
* （（））
* （）（）（）
*
*
*/

function balancedParens(string){
return !string.split("").reduce(function(previous,char){
if(previous<0){return previous;}
if(char=="("){return ++previous;}
if(char==")"){return --previous;}
return previous;
},0)
}

console.log(balancedParens(")(()()"));

-----------------------------------------

var 函授作用域

let {}作用域

conts 不能改变的 数组对象除外，

//var a = "Test1";
//var b = "Test2";

/*
function testVar(){
var a=30;
if(true){
var a=50;
console.log(a);
}
console.log(a);

}

testVar();
*/
//50 50

/*
function testlet(){
let a=30;
if(true){
let a=50;
console.log(a);
}
console.log(a);

}

testlet();//50 50
*/

/*
for(var i=0;i<10;i++){
console.log(i);
}
console.log(i);//可以访问
*/

/*
for(let i=0;i<10;i++){
console.log(i);
}
console.log(i);//访问不到
*/

//const
//不能改变值，数组对象可以改变，不能改变类型。

-----------------------------------------

模板字符串

/**
* 模板 字符串
* {里面也可以写js语句}
*/
let name = 'shaozhu';
let element = `<h2>少主QQ1241058165</h2>
<p>111111111</p>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>${name}</li>
</ul>
`
document.getElementById("template").innerHTML = element;

-----------------------------------------

箭头函数
const double1 = function(number){
return number * 2;
}

const double2 = (number) => {
return number * 2;
}

const double3 = (number) => number * 2;

const double4 = number => number * 2;

const double5 = (number => number * 2);
const double6 = (number,number2) => number + number2;

const double = (number,number2) => {
sum = number + number2
return sum;
}
// console.log(double(20,20));

// map一个数组,让数组中的值以double形式展现
const numbers = [1,2,3];
var newNumbers = numbers.map(number => number * 2);

// console.log(newNumbers);

// 改变this指向
const team1 = {
members:["Henry","Elyse"],
teamName:"es6",
teamSummary:function(){
let self = this;
return this.members.map(function(member){
// this不知道该指向谁了
return `${member}隶属于${self.teamName}小组`;
})
}
}

const team2 = {
members:["Henry","Elyse"],
teamName:"es6",
teamSummary:function(){
return this.members.map(function(member){
// this不知道该指向谁了
return `${member}隶属于${this.teamName}小组`;
}.bind(this))
}
}

const team = {
members:["Henry","Elyse"],
teamName:"es6",
teamSummary:function(){
return this.members.map((member) => {
// this指向的就是team对象
return `${member}隶属于${this.teamName}小组`;
})
}
}

console.log(team.teamSummary());

-----------------------------------------

增强对象字面量
解决的问题：缩减代码

-----------------------------------------