ES6笔记

ES6语法

一、声明方式

1. var：变量。
2. let：变量(有作用域)。
3. const：声明常量。

二、变量的解构赋值

2.1 数组的解构赋值：

• 简单的数组解构：(注：左右两边的结构必须严格一致，否则解构失败)

  let a=0;
  let b=1;
  let c=2;
  
  // 演化成
  => let [a,b,c]=[1,2,3];

• 解构的默认值：

  let [a, b = 'bbb'] =['aaa'];
  console.log(a + b); 
  => aaabbb  //浏览器输出
  
  let [a, b = 'bbb'] =['aaa', undefined];
  console.log(a + b); 
  => aaabbb  //浏览器输出
  
  let [a, b = 'bbb'] =['aaa', null];
  console.log(a + b); 
  => aaanull  //浏览器输出

  小结：注意 undefined 和 null 的区别。

• 数组的函数解构

  let arr = ['aaa', 'bbb', 'ccc'];
  function fun(a, b, c){
      console.log(a, b, c);
  }
  
  fun(...arr);

2.2 对象的解构赋值

• 对象的结构按照属性(key)来的，就是键值对要匹配。

  let {a, b} = {a: 'aaa', b: 'bbb'};
  console.log(a + b); //控制台打印出了“aaabbb”

• 对象的函数结构

  let json = {
      a: 'aaa',
      b: 'bbb'
  }
  function fun({a, b='hahaha'}){
      console.log(a,b);
  }
  fun(json);

2.3 字符串解构

• 字符串的解构，可以看作是一个类似数组的对象。

  const [a,b,c]= "ABC";
  console.log(a);
  console.log(b);
  console.log(c);

三、扩展运算符和rest运算符

3.1 扩展运算符 => 对象扩展运算符（…)

• 应用1：可变参数

  function print(...arg){
  console.log(arg[0]);
  console.log(arg[1]);
  console.log(arg[2]);
  }
  print(1,2);
  
  => 1, 2, undefined //控制台输出

• 应用2：复制扩展

  let arr1 = ['aaa','bbb','ccc'];
  let arr2 = [...arr1]; //通过扩展运算符
  arr2.push('ddd');
  console.log(arr1);
  console.log(arr2);
  
  
  =>['aaa','bbb','ccc']
  =>['aaa','bbb','ccc', 'ddd']

3.2 rest运算符

// 类似可变参数
function print(...arg){
    // for…of的循环可以避免开拓内存空间，增加代码运行效率;
    for(let val of arg){
        console.log(val);
    }
}

print(0,1,2,3,4,5,6,7);

=> 0,1,2,3,4,5,6,7

四、字符串模版

4.1 字符串拼接(注意：这里的字符串使用“包裹，不是单引号，也不是双引号)

let temp = '我是字符串';
let str = `你好，${jspang}，哈哈`;
document.write(str);

4.2 操作字符串的方法

indexOf() //查找指定的字符串是否存在
includes() //true:说明包含指定的字符串
startsWith() // 判断该字符串是不是已指定的字符串开始
endsWith() // 判断该字符串是不是已指定的字符串结尾
repeat() //将指定的字符串复制n次

五、数字操作

5.1 数字的判断与转换 Number.isFinite(xx)

可以使用来进行数字验证，只要是数字，不论是浮点型还是整形都会返回true，其他时候会返回false。

Number.isFinite(xx) //判断是不是数字
Number.isNaN(NaN) //判断是不是NaN，NaN是特殊的非数字
Number.isInteger(xx) //判断是不是整数
Number.parseInt(xx) //整形转换
Number.parseFloat(xx) //浮点型转换
Math.pow(2,53)-1 // 整形的取值范围
Number.MAX_SAFE_INTEGER //最大安全整数
Number.MIN_SAFE_INTEGER //最小安全整数
Number.isSafeInteger(xx) //安全整数判断

六、数组

6.1 JSON数组格式转换

JSON的数组格式是一种快速把JSON转换成数组的格式，

// 传统写法
let  json = {
    '0': 'aaa',
    '1': 'bbb',
    '2': 'ccc'
}

// ES6写法
let  json = {
    '0': 'aaa',
    '1': 'bbb',
    '2': 'ccc',
    length: 3 //多了一个length熟悉
}

let arr=Array.from(json);
console.log(arr)

6.2 Array的方法：

Array.of(...args); //将可变参数args转成数组
find() //Array的实例方法，用于查找数组中的数据
fill()  //Array实例方法：对数组进行填充，它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置。
for...of //数组的遍历

6.3 数组的遍历

• 不带索引 （for…of循环）

  for (let item of arr){
      console.log(item);
  }

• 带索引

  let arr=['aaa','bbb','ccc']
  for (let index of arr.keys()){
      console.log(index);
  }

• 带索引和值

  let arr=['aaa','bbb','ccc']
  for (let [index,val] of arr.entries()){
      console.log(index+':'+val);
  }

• entries()实例方法：

  entries()实例方式生成的是Iterator形式的数组用next()手动跳转到下一个值。

  let arr = ['aaa','bbb','ccc']
  let list = arr.entries();
  console.log(list.next().value);
  console.log(list.next().value);
  console.log(list.next().value);

• forEach遍历

  let arr = ['aaa','bbb','ccc']
  arr.forEach((val,index)=>console.log(index,val));

• filter

  let arr = ['aaa','bbb','ccc']
  arr.filter(x=>console.log(x));

• some

  let arr = ['aaa','bbb','ccc']
  arr.some(x=>console.log(x));

• map

  let arr = ['aaa','bbb','ccc']
  console.log(arr.map(x=>'web'));

七、箭头函数和扩展

略…

八、补充

8.1 in的用法

用来判断对象或者数组中是否存在某个值的

• 对象判断

  let obj={
      a:'aaa',
      b:'bbb'
  }
  console.log('a' in obj);  //true

• 数组判断

  let arr1=['aaa', 'bbb'];
  console.log(0 in arr1);  // true 0代表角标

8.2 数组转换字符串

• join()方法

  let arr = ['aaa','bbb','ccc']
  console.log(arr.join('|'));

• toString()方法

  let arr = ['aaa','bbb','ccc']
  console.log(arr.toString());