ES6中提供了两个声明变量的关键字:const和let
ES6 新增了let
命令,用来声明变量。它的用法类似于var
。
let声明的变量只有在当前作用域有效
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
不存在变量提升
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
不允许重复声明
let a = 10;
let a = 1;//报错 Identifier 'a' has already been declared
const
声明一个只读的常量。常量:值不可以改变的量
const声明的量不可以改变
const PI = 3.1415;
PI = 3; //报错
const声明的变量必须赋值
const num; // 报错
如果const声明了一个对象,仅仅保证地址不变
const obj = {name:'zs'};
obj.age = 18;//正确
obj = {};//报错
其他用法和let一样
1. 只能在当前代码块中使用
2. 不会提升
3. 不能重复
1. 如果声明的变量不需要改变,那么使用const
2. 如果声明的变量需要改变,那么用let
3. 学了const和let之后,尽量别用var
以前,为变量赋值,只能直接指定值。
let a = 1;
let b = 2;
let c = 3;
ES6 允许写成下面这样。
let [a, b, c] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
解构默认值
let [a = 5, b, c] = [1, 2, 3]; // 如果a没有被赋值,那么a的值为默认值5
解构不仅可以用于数组,还可以用于对象。
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
console.log(foo) // "aaa"
console.log(bar) // "bbb"
如果变量名与属性名不一致(取别名),必须写成下面这样。
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
console.log(baz) // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
console.log(f) // 'hello'
console.log(l) // 'world'
函数的参数也可以使用解构赋值。
function add([x, y]){ // 相当于 let [x, y] = [1, 2]
return x + y;
}
let arr = [1, 2]
add(arr); // 3
function sayHi({ name, age, hobby }) { // 相当于 let { name, age, hobby } = person
console.log(
'大家好,我是' + name + ',我今年' + age + '我的爱好是' + hobby
)
}
let person = {
name: 'hcc',
age: 18,
hobby: '敲代码'
}
sayHi(person)
函数参数的默认值
function fn(a = 1, b = 1){ // 如果函数调用的时候没有给实参,那么就会使用它的默认值
console.log(a) // 1
}
fn()
传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法)。
$('#result').append(
'There are ' + basket.count + ' ' +
'items in your basket, ' +
'' + basket.onSale +
' are on sale!'
);
上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题。
$('#result').append(`
There are ${basket.count} items
in your basket, ${basket.onSale}
are on sale!
`);
字符串模版的优点
允许换行
可以使用插值 ${}
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
find是ES6新增的语法
find()
方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
。
// 获取第一个大于10的数
var array1 = [5, 12, 8, 130, 44];
var found = array1.find(function(element) {
return element > 10;
});
console.log(found);
findIndex是ES6新增的语法
findIndex()
方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
// 获取第一个大于10的下标
var array1 = [5, 12, 8, 130, 44];
function findFirstLargeNumber(element) {
return element > 13;
}
console.log(array1.findIndex(findFirstLargeNumber));
es6中新增了一个 rest参数, 剩余参数
剩余参数必须是最后一个参数
rest参数 剩余参数
arguments: 没有定义参数, 别人用的时候不知道传什么参数
const add = function(num, ...colors) {
// colors会接收除第一个参数外剩余的所有的参数
console.log(arguments) // 1 2 3 4
console.log(num) // 1
console.log(colors) // 2 3 4
}
add(1, 2, 3, 4)
展开一个数组
const arr = [1, 2, 3]
console.log(...arr) // 1 2 3
const arr = [1, 2]
const arr2 = [4, 5]
const newArr = [...arr, ...arr2, 6, 7, ...arr]
console.log(newArr) // 1 2 4 5 6 7 1 2
const arr = [1, 2, 3, 5, 4, 7, 6]
// 求最大值
const result = Math.max(...arr)
console.log(result) / 7
展开一个对象
const obj = {
name: 'zs',
age: 18,
gender: '男'
}
const obj1 = {
money: 100,
house: '房子'
}
// vuex vue
const obj2 = {
...obj,
...obj1,
sayHi() {
console.log('哈哈')
}
}
console.log(obj2)
// {
// name: 'zs',
// age: 18,
// gender: '男',
// money: 100,
// house: '房子',
// sayHi() {
// console.log('哈哈')
// }
// }
ES6中新增了一种数据类型 Set
Set类型和数组非常的像, set中的数据不允许重复
let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
let newSet = new Set(arr)
arr = [...newSet]
console.log(arr) // 1 2 3 4 5