ES6(1)

原创已于 2022-06-08 20:23:55 修改 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #typescript

于 2022-06-08 20:20:12 首次发布

1. let 关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

不允许重复声明
块儿级作用域
不存在变量提升
不影响作用域链

  // let 声明变量
    // console.log(a); //error: Cannot access 'a' before initialization
    let a = 10;
    // let a = false; // error: Identifier 'a' has already been declared

    if (true) {
      let b = 10;
    }
    // console.log(b); // error:b is not defined

    for (let index = 0; index < 10; index++) {}
    // console.log(index); // error: index is not defined

应用场景：以后声明变量使用 let 就对了

2. const 关键字

const 关键字用来声明常量，const 声明有以下特点

声明必须赋初始值
标识符一般为大写
不允许重复声明
值不允许修改

块儿级作用域

// const 定义常量

// 1.不会变量提升
// console.log(a); // error Cannot access 'a' before initialization
// 2.必须有初始值
const a = 10;
// 3.基本类型的值不能修改
// a = false;   // error: 基本类型的值不能修改
// 4.块级作用域
// 5.不能重复声明
if (true) {
	const x = 'hello world';
}
// console.log(x); // error:  x is not defined

for (const index = 0; index < 10; index++) {
	// const w = 10; // 重复定义
}

// 引用类型
const obj = {
    name: 'admin',
    age: 18,
};
obj.name = '张三';
obj.height = 1.83;

const arr = [1, 2, 3, 4, 5, 6];

arr[0] = 10;

console.log(obj, arr);

注意: 对象属性修改和数组元素变化不会触发 const 错误

应用场景：声明对象、数组类型、以及常量时使用 const，非对象类型声明选择 let

3. 变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

//数组的解构赋值：将数组中的元素安装顺序取出来,通过=赋默认值
const arr = ['张学友', '刘德华', '黎明', '郭富城'];

const [one, two, three, four, five = '没有这个人'] = arr;
console.log(one, two, three, four, five);

 // 对象的解构赋值:通过属性名进行解构赋值,=默认值
const lin = {
    name: '林志颖',
    tags: ['车手', '歌手', '小旋风', '演员'],
};

const { tags, name, age = 18 } = lin;
console.log(tags, name, age);

//复杂解构
const wangfei = {
  name: '王菲',
  age: 18,
  songs: ['红豆', '流年', '暧昧', '传奇'],
  history: [{ name: '窦唯' }, { name: '李亚鹏' }, { name: '谢霆锋' }],
};

let {
  songs: [one, two, three],
  history: [first, second, third],
} = wangfei;

注意：频繁使用对象方法、数组元素，就可以使用解构赋值形式

4. 模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：

字符串中可以出现换行符
可以使用 ${xxx} 形式输出变量

// 定义字符串
let str = `<ul>
            <li>沈腾</li>
            <li>玛丽</li>
            <li>魏翔</li>
            <li>艾伦</li>
        </ul>`; // 变量拼接
let star = '王宁';
let result = `${star}在前几年离开了开心麻花`;

注意：当遇到字符串与变量拼接的情况使用模板字符串

5. 简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁

  let name = '网星软件';
  let slogon = '永远追求行业更高标准’; 
  let improve = function () {
    console.log('可以提高你的技能');
  }
  //属性和方法简写
  let atguigu = {
    name, slogon, improve, change() {
      console.log('可以改变你')
    }
  };

注意：对象简写形式简化了代码，所以以后用简写就对了

6. 箭头函数

ES6 允许使用「箭头」（=>）定义函数
箭头函数的注意点:

如果形参只有一个，则小括号可以省略
函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
箭头函数 this 指向声明时所在作用域下 this 的值
箭头函数不能作为构造函数实例化
不能使用 arguments

// 1. 通用写法
let fn = (arg1, arg2, arg3) => {
  return arg1 + arg2 + arg3;
}; // 2. 省略小括号的情况
let fn2 = (num) => {
  return num * 10;
}; // 3. 省略花括号的情况
let fn3 = (score) => score * 20; // 4. this 指向声明时所在作用域中 this 的值
let fn4 = () => {
  console.log(this);
};
let school = {
  name: '网星软件',
  getName() {
    let fn5 = () => {
      console.log(this);
    };
    fn5();
  },
};

注意：箭头函数不会更改 this 指向，用来指定回调函数会非常合适

7. rest 参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments

/**
 * 作用与 arguments 类似
 */
function add(...args) {
  console.log(args);
}
add(1, 2, 3, 4, 5);
/**
 * rest 参数必须是最后一个形参
 */
function minus(a, b, ...args) {
  console.log(a, b, args);
}
minus(100, 1, 2, 3, 4, 5, 19);

注意：rest 参数非常适合不定个数参数函数的场景

8. spread 扩展运算符

扩展运算符（spread）也是三个点（…）

spread 运算符|扩展运算符|三点运算符

// 展开数组
let tfboys = ['德玛西亚之力', '德玛西亚之翼', '德玛西亚皇子'];
function fn() {
  console.log(arguments);
}
fn(...tfboys); // 展开对象
let skillOne = {
  q: '致命打击',
};
let skillTwo = {
  w: '勇气',
};
let skillThree = {
  e: '审判',
};
let skillFour = {
  r: '德玛西亚正义',
};
let gailun = { ...skillOne, ...skillTwo, ...skillThree, ...skillFour };