前端的es6新增相关api学习记录【第一部分】

ES6语法

1.ES6的let const

1. 作用域

function test() {
      for (let i = 0; i < 2; i++) {
        console.log(i);
      }
      console.log(i);
    }
 test()

for循环中使用let声明的变量i 只能在for{}中使用，否则会报错

Uncaught ReferenceError: i is not defined仅限{}内使用变量i，称为做作用域

2. let声明

  let a = 1
  let a = 2

let 无法重复声明，否则报错

index.html:20 Uncaught SyntaxError: Identifier 'a' has already been declared

3. const

  const Pi = 3.14
  Pi = 2
  console.log(pi);

const一般用于定义常量，且不可修改。否则报错。

Uncaught TypeError: Assignment to constant variable.

但是，以下却可以修改

  const num = {
      a: 1
   }
  num.a = 2
  console.log(num);

原因：const定义了一个对象，对象为引用类型，实则num只是保存了这个对象的“指针”，修改属性值时，并未修改这个保存的“指针”，所以可以修改

2.解构赋值

1. 常用数组与对象解构赋值

  let [a, b] = [1, 2]   //赋值的变量名可自定义
  console.log(a, b);

  let { a, b } = { a: 1, b: 2 }		//赋值的变量名为对象对应的属性名
  console.log(a, b);

将1赋值给a，2赋值给b，这种1&1对应配对的赋值的情景称为结构赋值

2. 解构赋值时变量不对应

let [a, b, c] = [1, 2]
console.log(a, b, c);  //c为undefined

let [a, b, c] = [1, 2, 3, 4]
console.log(a, b, c);  //不受影响，只需匹配到的

 let [a, b, ...c] = [1, 2, 3, 4, 5, 6]
 console.log(a, b, c);    //c为[3,4,5,6]的数组

2. 使用场景

• 数据交换

省略了中间变量进行转换赋值的操作，直接完成数据转换操作

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b);

• 接收数据

function test() {
    return [1, 2, 3, 4]
}
let [a, ...b] = test()
console.log(a, b);

3.字符串扩展

1. Unicode

• 输出两个字节字符 \u{20BB7}
• 输出码值 codePointAt()

2. 遍历字符

    let str = '\u{20bb7}abc'
    for (let code of str) {
       console.log(code)
    }

3. 模板字符串

键盘左上角的``包裹内容可以保留格式

    let name = 'yuanxiaoshen'
    console.log(`我是${name}`)

4. 新增的字符串方法

• includes() //查询某字符串是否包含某字符
• endsWith() //查看某字符串是否已某字符结尾
• startsWith() //查看某字符串是否已某字符开始
• repeat(n) //将某字符串拼接n遍
• padStart与padEnd

例如：‘ 1 ’ 长度不够2，则在 **前面/后面 **补上0

    console.log('1'.padStart(2, '0'))   打印：01
    console.log('1'.padEnd(2, '0'))     打印：10

• raw // \默认转义

4.数值扩展

1. 进制转换

0B开头 2进制转10进制

0o开头 8进制转10进制

  console.log(0B101);   //5
  console.log(0o26);	//5

2. 增加的api

• Number.isFinite() // 判断某数值是否有尽

• Number.isNaN() //判断是否是数

• Number.isInteger() //判断是否是整数

• Math.trunc() //向下取整

    console.log(Math.trunc(4.1));   //输出4
    console.log(Math.trunc(4.9));   //输出4

• Math.sign()

    console.log(Math.sign(0));   	//0
    console.log(Math.sign(4));		//1
    console.log(Math.sign(-9));		//-1
    console.log(Math.sign('a'));	//NAN

• Math.cbrt()

求某数的立方根

    console.log(Math.cbrt(8));  //2
    console.log(Math.cbrt(-1));  //-1

5.数组扩展

• Array.of()

    let arr = Array.of(1, 3, 4, 5, 6)
    console.log(arr);   //输出arr这个数组

• Array.from()

将某一个集合/伪数组转义为数组

遍历操作

console.log(Array.from([1, 2, 3], (item) => {
      return item * 2
 }));    //输出[2,4,6]

• fill() 替换操作

将arr的数组内容全部替换为9

   let arr = [1, 3, '3']
   console.log(arr.fill(9));

从下标1开始，下标2结束，范围内替换为9。

    let arr = [1, 3, '3']
    console.log(arr.fill(9, 1, 2));

• keys()、values()、entries()

for (const key of arr.keys()) {
      console.log(key);  //遍历下标
    }

 for (const value of arr.values()) {
      console.log(value);  //遍历值
    }

for (const [key, value] of arr.entries()) {
      console.log(key, value);   //同时遍历下标和值
    }

• copyWithin()

取下标 [3,7) 的数据也就是[4,5,6,7] 然后从下标0开始替换 将[1,2,3,4]替换为[4,5,6,7]

 console.log([1, 2, 3, 4, 5, 6, 7].copyWithin(0, 3, 7 ));   //输出[4,5,6,7,5,6,7]

• find()和findIndex()

find()查找元素，返回符合的第一个元素值

findIndex() 查找元素，返回符合元素的第一个下标值

  let arr = [1, 2, 3, 4, 5, 6]
  console.log(arr.find((item) => { return item > 3 }));
  console.log(arr.findIndex((item) => { return item > 3 }));

6.函数扩展

• rest参数

将分散的数据转为数组

    function test(...arg) {
      for (let v of arg) {
        console.log(v);  //依次输出1，2，3，4
      }
    }
    test(1, 2, 3, 4)

• 扩展运算符

将数组展开为单个字符

   console.log(...[1, 2, 3, 4]);   //输出  1，2，3，4

• 箭头函数

   //写法一   箭头函数
	let test = () => {
      console.log('箭头函数')
    }
   //写法二   普通写法
    let test = function () {
      console.log('非箭头函数')
    }

7.对象扩展

• 简洁写法

属性名与变量名一样时，直接写就可以。

    let name = 'yuanxiaoshen'
    let sex = 'boy'
    let info = {
      name: name,
      sex: sex,
      getInfo: function () {
        console.log(this.name, this.sex)
      }
    }
    let info2 = {
      name,
      sex,
      getInfo() {
        console.log(this.name, this.sex)
      }
    }
    console.log(info,info2)

• 属性表达式

属性名为变量

    let a = 'b'
    let obj1 = {
      a: 'a',
      b: 'b'
    }
    let obj2 = {
      [a]: 'b'
    }
    console.log(obj1, obj2);

• 增加的api

1. Object.is()

Object.is(a,b) 判断a和b是否相等，相当于===

    console.log(Object.is('aaa', 'aaa'), 'aaa' === 'aaa')   //true   true
    console.log(Object.is([1], [1]), [1] === [1]);    //false   false

2. Object.assign()

浅拷贝。

修改拷贝后的属性值，原数据对象也跟着变，实则引用地址没有变，所以为浅拷贝。

    console.log(Object.assign({a:'a',b:'b'}))

• 扩展运算符

    let { a, b, ...c } = { a: 'a', b: 'b', c: 'c', d: 'd' }
    console.log(a, b, c);              // 输出  a b  {c:'c',d:'d'}