<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//1.argument形参,在实参数目比形参数目多的时候,实参也会保存在argument中,能够被读取
// function params(){
// console.log(arguments)
// if(arguments.length==0){
// alert("请输入参数")
// }else if(arguments.length==1){
// alert(Math.pow(arguments[0],2))
// }else{
// var sum = 0;
// for(var i = 0;i<arguments.length;i++){
// sum += arguments[i]
// }
// alert(sum)
// }
// }
// params(9)
//2.通过数组观察闭包
//for循环10次完成之后才调用了函数,所以每次输出都为10
// var arr = []
// for(var i=0;i<10;i++){
// arr[i] = function(){
// console.log(i)
// }
// }
// arr[0]()
//通过IIFE解决闭包问题
// var arr = [];
// for(var i = 0;i < 10; i++){
// (function(m){
// arr[m] = function(){
// console.log(m)
// }
// })(i) //i每次穿进去都是当前循环的数字,所以不会造成闭包
// }
// console.log(arr)
// arr[4]()
//3.多重判断的时候使用Array.includes,代码会更简洁
// function test(fruit){
// if (fruit == "apple" || fruit == "strawberry"){
// console.log("red")
// }
// }
//
// function test(fruit){
// const redFruits ['apple','strawberry','cherry','cranberries'];
//
// if(redFruits.includes(fruit)){
// console.log('red')
// }
// }
//4.更少的嵌套,尽早return
// function test(fruit,quantity){
// const redFruits = ['apple','strawberry','cherry','cranbrries'];
//
// //条件1,fruit必须有值
// if(fruit){
// //条件2,必须是红色
// if(redFruits.includes(fruit)){
// console.log('red')
// //条件3,quantity大于10
// if(quantity > 10){
// console.log('big quantity')
// }
// }
// }else{
// throw new Error('No Fruit!')
// }
// }
// test(null)
// test("apple")
// test("apple",30)
//正确写法
// function test(fruit,quantity){
// const redFruits = ['apple','strawberry','cherry','cranberries'];
//
// //条件1,尽早抛出错误
// if(!fruit) throw new Error('No Fruit');
//
// //条件2
// if(redFruits.includes(fruit)){
// console.log("red")
//
// //条件3,必须大质量
// if(quantity > 10){
// console.log('big quantity')
// }
// }
// }
//更少的嵌套
// function test(fruit,quantity){
// const redFruit = ['apple','strawberry','cherry','cranberries']
//
// //条件1,尽早抛出错误
// if(!fruit) throw new Error('No FRUIT')
//
// //条件2,当水果不是红色时停止继续执行
// if(!redFruits.includes(fruit)) return;
// console.log("red")
//
// if()
// }
//使用参数和结构
// function test(fruit,quantity){
// if(!fruit) return
//
// //如果quantity值没有传入,设置默认值为1
//
// const q = quantity || 1
//
// console.log(`we have ${q} ${fruit}`)
// }
//
// test('banana')
// test('apple',2)
//通过声明默认函数参数来消除变量q
// function test(fruit,quantity=1){
// //如果quantity没有传入参数,设置默认参数为1,同时也可以给fruit分配默认值fruit='unknown'
// console.log(`we have ${quantity} ${fruit}!`)
// }
//如果fruit是个对象
// function test(fruit,quantity){
// //当值存在时打印fruit的值
// if(fruit && fruit.name){
// console.log(fruit.name)
// }else{
// console.log('unknown')
// }
// }
// test(undefined)
// test({})
// test({name:'apple',color:'red'})
//解构,仅仅获取name属性
//为其赋默认值为空对象
/*由于只需要name属性,所以用{name}解构出参数,然后就能使用变量name代替fruit.name,同时也需要声明空对象{}
作为默认值,否则将得到一个undefined和null解构的错误,因为在undefined中没有name的属性
*/
// function test({name} = {}){
// console.log(name || 'unknown')
// }
// test(undefined)
// test({})
// test({name:'apple',color:'red'})
//使用第三方库,减少对null的检查
//1)使用Lodash get函数
//使用facebook开源的东西库(with babeljs)
// function test(fruit){
// //获取属性名,如果属性名不可用,赋默认值为unknown
// console.log(__.get(fruit,'name','unknown'))
// }
// test(undefined)
// test({})
// test({ name:'apple',color:'red' })
//5.倾向于对象遍历而不是switch语句
// function test(color) {
// // 使用条件语句来寻找对应颜色的水果
// switch (color) {
// case 'red':
// return ['apple', 'strawberry'];
// case 'yellow':
// return ['banana', 'pineapple'];
// case 'purple':
// return ['grape', 'plum'];
// default:
// return [];
// }
// }
//
// // test results
// test(null); // []
// test('yellow'); // ['banana', 'pineapple']
//更简洁的代码
// const fruitColor = {
// red:['apple',strawberry],
// yellow:['banana','pineapple'],
// purple:['grape','plum']
// }
//
// function test (color){
// return fruitColor[color]
// }
// //或者是使用Map实现相同的效果
// //map是es5规范之后实现的对象类型,允许你存储key和value的值
// const fruitColor = new Map()
// .set('red',['apple','strawberry'])
// .set('yellow',['banana','pineapple'])
// .set('purple',['grape','plum'])
//
// function test (color){
// fruitColor.get(color) || []
// }
//TL;DR 的重构语法
//用Array.filter重构我们的代码,实现相同的效果
var fruits = [
{ name:'apple',color:'red' },
{ name:'banana',color:'yellow' },
{ name:'grape',color:'purple' }
]
function test (color){
return fruits.filter(f => f.color == color)
}
test(red)
//对所有/部分判断使用Array.every/Array.some
//检查所有的饿水果是否都是红色
// const fruits = [
// { name:'apple',color:'red' },
// { name:'banana',color:'yellow' },
// { name:'grape',color:'purple' },
// ];
// function test (){
// let isAllRed = true;
//
// //条件,所有水果都是红色
// for (let f of fruits){
// if(!isAllRed) break;
// isAllRed = (f.color == 'red')
// }
//
// console.log(isAllRed)
// }
//代码优化
// const fruits = [
// { name:'apple',color:'red' },
// { name:'banana',color:'yellow' },
// { name:'grape',color:'purple' },
// ];
// function test (){
// const isAllRed = fruits.every(f => f.color == 'red');
// console.log(isAllRed)
// }
//检测是否存在红色的水果
const fruits = [
{ name:'apple',color:'red' },
{ name:'banana',color:'yellow' },
{ name:'grape',color:'purple' },
];
const isAnyRed = fruits.some(f = f.color == 'red');
console.log(isAnyRed)
</script>
</body>
</html>