变量和常量
1.变量
在JavaScript可以用var进行变量声明的,这种声明方式没有任何的问题,但是有时候会出现不经意的覆盖,在ES6中,增加了一种新的声明方式——let声明方式。
let num = 0;
在ES6还提出了块作用域的概念,即用一对大括号框住代码,变量的作用域只在大括号内,在括号外无效(这种概念有点类似于局部变量),有效避免一个变量名在多个地方使用出现冲突的情况。
2.常量
常量是一种不能修改的容器,在声明的时候命名通常采用大写结构,多个部分之间用下划线做分隔 。
const base = 1;//一经声明后期不能再做修改
模板字符串
在JavaScript中,可以通过单引号或双引号来表示字符串。在ES6中,新增了一种反引号的方式(反引号即键盘上的波浪号,单击即可得),在新方式中,当有想要连接的字符串时,无需用加号,而且在新符号中,直接换行也可以实现换行效果。
const str = 'efg' const str1 = `abc${'hij'}//直接加字符串 新的一行 ` const str2 = `abc${str}//直接加指定常量 新的一行 //换行效果可以实现 `
解构赋值操作
解构赋值使用于数组和对象这两种类型
1.数组
通过解构的方式对数组进行操作,从而达到快速地从数组中进行数据保存、存储的目的。
const [a,b,c] = [1,2,3];//a对应1,b对应2,c对应3
这里不再对数组常规命名,而是写一个中括号,按照位置的顺序进行名称的分配。
2.对象
对象是无序的,在对对象进行解构赋值时,无需按照位置进行分配,而是要按照键名进行存储。
const { username, age: myage } = { username: 'lxx', age: 21 }; console.log(username, myage)
直接在大括号中声明,表示声明了一个常量叫username,对应的就是对象中username的值。如果想要自命名的话,先写对应属性的名称,再在后面加上冒号,写上自定义名称。注意,当自定义名称时,后续使用到该属性,应使用自定义常量名进行操作。
除了以上两种按照位置或属性进行存储的操作外,还可以用‘...’+命名来存储剩下的属性
const [a, ...otherInfo1] = [1, 2, 3];//a对应1,b对应2,c对应3 console.log(otherInfo1); const { username, ...otherInfo2 } = { username: 'lxx', age: 21, sex:'nv' }; console.log(otherInfo2);
数组和对象的扩展
1.扩展运算符
当想要把两个数组添加到一个新的数组里面的时候,可以用扩展运算符'...',它是把对象的所有键给展开,并填充到相应位置。
console.log(otherInfo2) const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [100, ...arr1, ...arr2];//在扩展的时候也可以添加自己的元素
对象也是一样,同样是将 扩展运算符'...'加到指定对象的属性,实现扩展的目的
const obj1 = { a: 1 }; const obj2 = { b: 2 }; const obj3 = { ...obj1, ...obj2 };
2.数组方法
在ES6中新增了很多数组的方法 ,在Javascript的使用中,会经常遇到数组与伪数组交替使用的情况,ES6中的新增的form方法,可以将伪数组转换为真实的数组
// 伪数组 const pseudoArray = { 0: 'a', 1: 'b', 2: 'c', length: 3 }; console.log(pseudoArray) // 使用 Array.from() 将伪数组转换为真实数组 const realArray = Array.from(pseudoArray); // 打印转换后的真实数组 console.log(realArray); // 输出: ['a', 'b', 'c']
3.对象方法
在对象中使用赋值的话,只能得到一个相同的引用,不能得到一个副本。这里的Object.assgin方法实现了一个浅拷贝的功能,操作之后得到一个全新的对象,不是相同的引用
// 原始对象 const originalObj = { a: 1, b: 2 }; // 使用 Object.assign 进行浅拷贝 const copiedObj = Object.assign({}, originalObj); // 修改复制后的对象,不会影响原始对象 copiedObj.a = 10; console.log(originalObj); // 输出: { a: 1, b: 2 } console.log(copiedObj); // 输出: { a: 10, b: 2 }
Object.assign也可以实现对象的合并
// 目标对象 const targetObj = { a: 1, b: 2 }; // 源对象 const sourceObj = { b: 3, c: 4 }; // 使用 Object.assign() 合并两个对象 const mergedObj = Object.assign({}, targetObj, sourceObj); console.log(mergedObj); // 输出: { a: 1, b: 3, c: 4 }
在上面的例子中,
targetObj
是目标对象,sourceObj
是源对象。通过Object.assign({}, targetObj, sourceObj)
将sourceObj
的属性合并到targetObj
中,形成了一个新的对象mergedObj
。在新对象中,如果有相同的属性,后面的对象(在这里是sourceObj
)的属性值会覆盖前面的对象(targetObj
)的属性值。
类
ES6中引入了类的概念,使得更接近与面向对象语言,以下是一些 ES6 中类的主要内容和特性。
- 类声明:使用
class
关键字可以声明一个类。- 构造函数:使用
constructor
方法来定义类的构造函数,用于初始化对象的实例。- 类方法:在类中定义的方法会成为类的原型方法,可以通过实例访问。
- 静态方法:使用
static
关键字定义的方法属于类本身,而不是类的实例。- 继承:通过
extends
关键字可以实现类的继承,子类可以继承父类的属性和方法// 定义一个类 class Animal { // 构造函数 constructor(name) { this.name = name; } // 类方法 speak() { console.log(`${this.name} makes a sound.`); } // 静态方法 static info() { console.log('This is an animal class.'); } } // 继承 Animal 类 class Dog extends Animal { constructor(name, breed) { super(name); // 调用父类的构造函数 this.breed = breed; } // 重写父类的方法 speak() { console.log(`${this.name} barks.`); } } // 创建 Animal 实例 const animal = new Animal('Cat'); animal.speak(); // 输出: Cat makes a sound. // 调用静态方法 Animal.info(); // 输出: This is an animal class. // 创建 Dog 实例 const dog = new Dog('Buddy', 'Golden Retriever'); dog.speak(); // 输出: Buddy barks.
箭头函数
匿名函数的简写方式
const getSum1 = n => n + 3; const getSum2 = (n1, n2) => n1 + n2;//两数相加 const getSum3 = (n1, n2, ...other) => console.log(n1, n2, other)//当有多个参数时,可以用...other表示剩下的实例 const getSum4 = arr => { let sum = 0; arr.forEach(t = item => { sum += item; }); return sum; } console.log(getSum1(2));//输出5 console.log(getSum2(2, 4));//输出6 getSum3(2, 3, 4, 5, 6);//输出2 3 Array(3)[4, 5, 6] console.log(getSum4([1, 2, 3, 4, 5, 6]));//输出21