1.解构对象

• 解构：一种 方便快速获取对象 和 数组中的值 方式
• 【对象解构】使用 对象解构 自动 将 同名属性 赋值 给同名变量
  • 语法 ： let { 变量名1,变量名2,变量名n } = 对象;
  • 解释 ： 相当于 创建 n 个变量，并且 从 对象中 取出 与变量同名的属性的 值 设置给变量

//需求：想把 hero对象 中的 属性 依次取出 放入  同名变量
let hero = {
  name: '妲己',
  skill: '哭',
  voice: '嘤嘤嘤',
  hair:'一头乌黑秀发'
}

let {name,skill,voice} = hero;
console.log(name,skill,voice); // 妲己   哭   嘤嘤嘤

// 注意：如果 解构变量 中 存在 对象中没有的变量，是没法从对象中获取对应数据的，默认值为undefined
let{name,skill,habit} = hero;
console.log(name,skill,habit); // 妲己  哭  undefined

1.1对象解构案例

const obj = {
  name: '皮卡丘',
  skill: '十万伏特',
  age: '未知'
}

function say({name,skill,age}) {
  console.log(name)
  console.log(skill)
  console.log(age)
}

say(obj); // 将 obj 传给 形参时，就自动进行了 对象解构

2.解构数组

• 【数组解构】使用 数组解构 自动 将 数组中的元素 按顺序 设置给 变量

let cityList = ['P城', 'Y城', '军事基地', '学校'];
let [c01,c02,c03,c04] = cityList;
console.log(c01,c02,c03,c04);  // P城  Y城  军事基地  学校

• 剩余项
  数组解构有个与函数的剩余参数类似的、名为剩余项（ rest items ）的概
  念，它使用" ..." 语法来将剩余的项目赋值给一个指定的变量,单独解构一个数组可实现深拷贝

  let colors = [ "red", "green", "blue" ];
  let [ firstColor, ...restColors ] = colors;
  console.log(firstColor); // "red"
  console.log(restColors.length); // 2
  console.log(restColors[0]); // "green"
  console.log(restColors[1]); // "blue"
  //深拷贝 colors 
  let [...relColors ] = colors 
  console.log(relColors ); // [ "red", "green", "blue" ]
  //数组拆分 (常用于传参)
  console.log(...relColors ); // "red", "green", "blue" 

3.箭头函数

• 箭头函数（Arrow Function） ： 相当于匿名函数，并且简化了函数定义。
• function 变为 =>
  • 参数只有1个 省略小括号
  • 参数0个或多个，无法省略小括号
  • 函数体一行 省略{}
  • 函数体一行 有返回值 省略{}的 同时必须省略return
  • 函数体多行 无法省略{ }

// a.无参数 无返回值的函数 函数体一行的-----------------------------------------
const func1 = function() {
  console.log('P城小王子')
}
// 箭头函数：函数体一行 省略 {}
const func1 = () => console.log('P城小王子');
func1();

// b.有1个参数 有返回值 函数体一行的-----------------------------------
const func2 = function(name) {
  return '团战可以输，' + name + '必须死'
}
// b1.function 转 箭头
// const func2 = (name) => { return '团战可以输，' + name + '必须死';}
// b2.省略小括号
// const func2 = name => { return '团战可以输，' + name + '必须死';}
// b3.省略 大括号 、 return
const func2 = name => '团战可以输，' + name + '必须死';

// c.多个参数 函数体 多行----------------------------------------------
// const func3 = function(name, skill) {
//   console.log(name)
//   console.log(skill)
//   console.log('牛逼')
// }

const func3 = (name, skill) => {
  console.log(name);
  console.log(skill);
  console.log('牛逼');
}
func3('小白','哭脸~~~');

4.对象属性赋值简写

• 将变量 设置给 对象的属性时，可以自动 将 同名的变量 值 赋给 对象的 同名属性
• 补充：对象中的 方法 可以省略 funciton

//思考：将 以下变量值 封装到 一个 拥有同名属性的 对象中
let name = '妲己';
let male = '女';
let skill = '傻笑';


var obj ={
  name, // 自动 将 变量 name 的值 赋给此属性
  male, // 自动 将 变量 male 的值 赋给此属性
  skill, // 自动 将 变量 skill 的值 赋给此属性
  sayHi(){
    console.log('我是 对象中 最可爱的 方法体代码~~~~');
  }
};

console.log(obj);
obj.sayHi();

5.对象,数组展开运算符

• 展开运算符 ... ：可以用于 对象 与 数组 的 自动展开

• 对象 展开：将对象 中的 成员 自动 添加到 另个对象中

// 思考：将 以下两个对象属性都 添加 到 新的对象中
let chinaPerson = {
  skin: 'yellow',
  hair: 'black',
  sayHi: '吃了没'
}

let zhubo = {
  skill: '唱，跳，rap',
  habbit: '打篮球'
}
let newObj ={
  ...chinaPerson, // 将 chinaPerson 的成员 都添加到此
  ...zhubo // 将 zhubo 的成员 都添加到此
};

console.log(newObj);

// 相当于：
// let newObj = {
//   skin: chinaPerson.skin,
//   hari: chinaPerson.hair,
//   sayHi: chinaPerson.sayHi,
//   skill: zhubo.skill,
//   habbit: zhubo.habbit
// }

• 数组 展开：将数组 中的 元素 自动 添加到 另个数组中

// 思考：将 以下两个数组 添加 到 新的数组中
let cityList = ['P城', 'Y城', '军事基地', '学校'];
let foodList = ['猪肉', '牛肉', '羊肉', '兔肉'];

let newArr = [
  '老婆做的菜不好吃',
  ...cityList, // 将 cityList 的元素 都添加到此
  '赶紧买菜谱学习啊！！',
  ... foodList // 将 cityList 的元素 都添加到此
];

console.log(newArr);

//复制数组
let arr = [1,2,3];
let arr2 = [...arr,4];
console.log(arr2)  // [1,2,3,4]

6.模板字符串

• 语法：`` 这个不是单引号！ 而是反引号，是 数字1键 左边的 符号
• 本质：就是一个字符串
• 特点：
  • 可以换行
  • 可以挖坑 ${表达式}

var loverName = '大乔';
var loverAge = 1500;
var loverGender = true;

// var str = '我好喜欢你啊' + loverName + '\n虽然你已经' + loverAge + '岁了' ;
// console.log(str);

var str = `我好喜欢你啊${loverName}
虽然你已经${loverAge}岁了
性别${loverGender?'男':'女'}`; 
console.log(str);

7.数组方法

7.0.1 跳出数组循环注意事项

• 注: forEach, map, filter 中不能用 break,continue 跳出循环，不然会报错。 return 它会退出当前本次循环，后面的循环还是会执行
• 注: every、some 中不能用 break,continue 跳出循环，不然会报错。
  • 注: 如果想退出every，就只能通过return, 它会退出当前循环，后面的循环不会再执行
  • 注: 如果想退出some ，就只能通过return true, 它会退出当前循环，后面的循环不会再执行,相反 return false, 它会退出当前循环，后面的循环还是会再执行
• 注:在单独 for 中不能用 return, 不然会报错。(return 用于终止函数体)
• filter、map会返回一个新的数组，而every、some会返回一个Boolean类型的。

7.0.1.1 some 和 every 需要注意的地方

• some() 方法测试是否至少有一个元素可以通过被提供的函数方法。该方法返回一个 Boolean 类型的值。polyfill实现如下：

Array.prototype.some = function(callbackfn, thisArg) {
  let len = Number(this.length);
  let k = 0;
  while (k < len) {
    let Pk = String(k);
    if (Pk in this) {
      let kValue = this[Pk];
      if (callbackfn.call(thisArg, kValue, k, this)) {
        return true;
      }
    }
    k++;
  }
  return false;
};

• 可以看出，遇到回调返回值是 true 的话，函数就直接返回、结束了。这是种短路算法，并不是所有回调都执行一遍，然后再最后求所有与值。every 也类似，不过与之相反，遇到回调返回值是 false 时，整体就直接返回 false 了。
  从实现上表达出的语义来讲，some 是在说：有一个成功，我就成功，而 every 是在说：有一个失败，我就失败
  另外要强调一点，对于稀疏数组，不存在的索引值时，回调函数是不执行的。

7.1 map()

map(item,index,arr)

第一个参数必须

提取数组中每个元素的某个信息，返回什么(可以是结构)，就提取到什么

    var arr = [
             { name: "jack",  age: 16 },
             { name: "jack2", age: 26 },
             { name: "jack3", age: 36 },
             { name: "jack4", age: 18 },
             { name: "jack5", age: 19 },
            { name: "jack6", age: 13 },
         ]

        // 把所有人的age取出来，再做成一个新数组
        let res = arr.map( item => item.age )

       //  上面那句话等于下面这句话
        let res = arr.map( item => {
          return item.age;
        } )
         console.log(res);
        //[16,26,36,18,19,13]

7.2 filter()

  var arr = [
             { name: "jack",  age: 16 },
             { name: "jack2", age: 26 },
             { name: "jack3", age: 36 },
             { name: "jack4", age: 18 },
             { name: "jack5", age: 19 },
            { name: "jack6", age: 13 },
         ]
// filter里面返回true就代表要让这个元素加到新数组
       // 返回false代表不加到新数组
       let res = arr.filter( item => {

            return item.age < 18;
            
        } )
        let res = arr.filter( item => item.age < 18)
       console.log(res);
        //[ { name: "jack",  age: 16 }, 
        // { name: "jack6", age: 13 }]

      
        // 我需要找到所有的未成年，并组成一个新数组
        var newArr = [];

         for (var i = 0; i < arr.length; i++) {

             if (arr[i].age < 18) {

               newArr.push(arr[i])
             }
       }

7.3 includes()

        //includes方法
        var nums = [20,30,40,50,60];
        
        // // 判断是否包含某个元素，如果包含得到true
        // // 不包含得到false
         console.log(nums.includes(20)); //true
       console.log(nums.includes(10)); //false
        console.log(nums.includes(100));  //false

7.4 find()

 //find 方法 找到数组中找到的第一个值并且返回 ,没找到则返回undefined
        let aList = [1,2,3,4,5,6,7];

        let res = aList.find(function (item) {
            return item>5;
          })

          console.log(res); //6

7.5 findIndex()

 //findIndex方法 找到数组中找到的第一个值并且返回该值的下标 ,没找到则返回undefined
        let aList = [1,2,3,4,5,6,7];

        let index= aList.find(function (item) {
            return item>5;
          })

          console.log(index); //5

8.属性名表达式

对象的属性名可以通过中括号写成值或者变量的形式：

let propKey = 'foo';
let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};
alert(obj.foo); // true
alert(obj.abc); // 123