es6
let
var a = 10
let b = 20
console.log(a, b);
看不出区别
前面输出不报错， 输出undefined
console.log(b);
var b = 20
前面输出报错
console.log(a);
let a = 10
1.let定义的变量没有预解析
2.let定义的变量不在window中
var a = 10
console.log(a);
let a = 10
console.log(a);
3.let会创建一个作用域， 如果碰到了大括号， 会将自己的作用域跟大括号重合 - 块级
for (var i = 1; i <= 3; i++) {}
console.log(i); //4
for (let i = 1; i <= 3; i++) {}
console.log(i); //is not defined 报错
if (true) {
var a = 10
}
console.log(a); //10
if (true) {
let a = 10
}
console.log(a); //is not defined 报错
{
var a = 10
}
console.log(a); //10
{
let a = 10
}
console.log(a); //is not defined 报错
4.同名变量不允许重复定义
var a = 10
var a = 20
console.log(a); //20
let a = 10
let a = 20
console.log(a); //报错
/Identifier 'a' has already been declared
let a = 10
function fn() {
console.log(a);
}
fn() //10
const
const也是es6新增的定义变量的语法， 使用方式和var是一样的
let 和
const 的区别
修改值
let a = 10
a = 20
console.log(a); //20
const a = 10
a = 20
console.log(a); //报错
Uncaught TypeError: Assignment to constant variable.
console.log(a);
const a = 20
console.log(window);
const定义的变量， 值是不能修改的， 一旦定义就是永恒
const a
a = 10
报错， 不能这样
丢失了初始化赋值
总结：
let和const是es6新增的定义变量的两个关键字， 使用语法跟var是一样的， 跟var的区别：
1. 没有预解析
2. 全局变量不在window中
3. 不能重复定义
4. 会创建一个块级作用域， 碰到大括号会重合作用域
const的值不能改变 - 常量
var date = new Date()
var month = date.getMonth()
var day = date.getDate()
箭头函数
es6中提供了一种新的函数定义语法 - 只能等同于赋值式函数
这种语法对于匿名函数的一种简写 - 箭头函数
语法：() => {} //左边形参，右边大括号
var fn = function () {
console.log(11);
}
let fn = () => {
console.log(11);
}
当大括号中只有一行代码的时候, 大括号是可以省略的, 如果大括号中这一行代码中有return, 连return关键字一起省略(必须省略)
例：
var fn = function (a) {
return parseInt(a)
}
let fn = a => parseInt(a)
let res = fn('7')
console.log(res);
var arr = [10, 20, 30]
var brr = arr.map(function (v) {
return v + v * 0.3
})
console.log(brr);
var arr = [10, 20, 30]
var brr = arr.map(v => v + v * 0.3)
console.log(brr);
当只有一个新参的时候， 小括号可以省略
var fn = function (a) {
console.log(parseInt(a));
}
fn('5')
let fn = a => {
console.log(parseInt(a));
}
fn('5')
给函数的形参赋值
function en(a, b) {
if (b === undefined) {
b = 0
}
return Math.floor(Math.random() * Math.abs(a - b) + Math.min(a, b))
}
var na = en(0, 256)
console.log(na);
fn(0, 256)
fn(0, 1500)
fn(256)
fn(1500)
注意： 带有默认值得参数， 必须在所有形参的末尾
function fn(a, b = 0) {
return Math.floor(Math.random() * Math.abs(a - b) + Math.min(a, b))
}
var color = fn(30)
console.log(color);
var colo = fn(30, 0)
console.log(colo);
反引号 `
es6中提供了一种新的语法用来定义字符串 - 反引号 `
var str = ''
var str = ""
var str = `abc`
console.log(str);
document.write(` < img src = "'+imgPath'" / > `)
document.write(` < img src = "${+imgPath}" / > `)
字符串方法
1. 字符串.startsWith(字符/小字符串)
var str = 'asdjfdgjgf'
var bool = str.startsWith('a')
console.log(bool);
var bool = str.startsWith('asdj')
console.log(bool);
2.字符串.endWith(字符/小字符串)
判断字符串是否以某个字符或者小字符串结尾的 - 字符串.endWith(字符/小字符串)
var bool = str.endsWish('f')
var bool = str.endsWish('asdj')
console.log(bool);
3.字符串.includes(字符/小字符串)
判断字符串中是否包含某个字符串或者小字符串 - 字符串.includes(字符/小字符串)
var bool = str.includes('jf')
console.log(bool);
var bool = str.includes('j')
console.log(bool);
数组方法
数组.some
数组.some - 判断数组中是否至少有一个元素是满足指定条件的，返回布尔值
语法：
var 返回值 = 数组.some(function(v,i,a){
return 条件
})
var arr = [100, 50, 90, 80, 76, 88]
var k = 0
var bool = arr.some(function (v) {
k++
return v < 60
})
console.log(bool);
console.log(k);
数组.every
数组.every - 判断数组中是否所有元素都满足指定条件 - 返回布尔值
语法：
var 返回值 = 数组.every(function (v, i, a) {
return 条件
})
var arr = [100, 50, 90, 80, 76, 88]
var bool = arr.every(v => v > 60)
console.log(bool); //false
数组.find 找第一个满足条件的元素 - 返回找到的元素 找不到 - undefined
语法：
var 返回值 = 数组.find(function (v, i, a) {
return 条件
})
数组.findIndex
数组.findIndex - 在数组中找第一个满足条件的元素的下标 - 找到返回下标 找不到返回 - 1
语法：
var 返回值 = 数组.findIndex(function (v, i, a) {
return 条件
})
var arr = [100, 50, 90, 80, 76, 88]
var index = arr.findIndex(v => v < 60)
console.log(index);//1
解构
解构赋值
解构赋值：快速的将对象或数组中的值批量赋值给变量
var arr = [100, 50, 90, 80, 76, 88]
var a = arr[0]
var b = arr[1]
// 赋值给a,b
console.log(a); //100
数组解构
数组解构 - 快速的将数组中的批量赋值给变量
var/let/const[变量1，变量2，...]=数组
var arr = [1, 2, 3, 4, 5]
var [c] = arr //用这个输出1
var [a, b, c] = arr //这个输出3
var [_,_,c] = arr //位置不占也是3
console.log(c);
多重解构
var/let/const[[变量]]=数组
var arr = [
1,
[
4,
5
],
2,
3
]
var[_,brr]= arr
console.log(brr);//(2)[4,5]
var [_,a] = brr
console.log(a);//5
简写：
var[_,[_,a]] = arr
console.log(a);//5
快速交换两个变量的值
var a = 1
var b = 2
var[b,a] = [a,b]
console.log(a,b);
对象解构
对象解构
var/let/const{跟对象中的键同名的变量}=对象
var tang = {
username: '唐伯虎',
age: '12',
sex: '男',
wife: {
usname: '翠花',
age: 13,
sex: '女'
}
}
正常写：
赋值给age
var age = tang.age
var username = tang.username
console.log(age);
解构时变量名必须跟对象的键的名字保持一致
var {
age,
username
} = tang
console.log(age, username);
不保持一致，输出undefined
例：
var {a,b} = tang
console.log(a,b);
解构对象并取别名 - 一旦取别名原来的键就不能用了
var/let/const{跟对象中的键同名的变量：自定义的变量名}=对象
var {
age: a,
username: b
} = tang
console.log(a, b);//12 唐伯虎
console.log(age, username);//报错，取别名原来的键就不能用了
多重解构
var/let/const{跟对象中的键同名的变量：{继续解构}}=对象
var {wife} = tang
console.log(wife);//{usname: '翠花', age: 13, sex: '女'}
var {wife:{usname}} = tang
console.log(usname);//翠花
...运算符
...运算符 - (对象或者数组) 可以将一个对象或数或组或展开多个值或者多个键值对， 也可以将多个值合并为一个对象或者数组
var pbj = {
unname: '陈冠希',
sex: '男'
}
console.log(pbj);
var obj = {
...pbj,
wife: {
age: '12',
name: '如花',
sex: '女'
}
}
console.log(obj); //{unname: '陈冠希', sex: '男', wife: {…}}
var obj2 = {
...pbj,
age: '12',
name: '如花',
sex: '女'
}
console.log(obj2); //{unname: '陈冠希', sex: '女', age: '12', name: '如花'}
展开数组
function fn(a,b,c){
return a+b+c
}
利用数组展开
var arr = [4,5,6]
var num =fn(...arr)//把一个数组展开成多个值
console.log(num);
var arr = [1,9,3,7,6,4,2,8,5]
var max = Math.max(arr)
console.log(max);//NaN
var max1 = Math.max(...arr)
console.log(max1);//9
合并数组
function fn(...arr) { //任意多个数组的和
console.log(arr);
}
fn(1, 2, 3)
fn(1, 2, 3, 4, 5, 6)
浙公网安备 33010602011771号