1、let const
let 定义与const 定义暂时性死区:只要当前作用域声明过某个变量,那么声明前使用该变量就会报错。
let 定义的变量可以改变,const 定义的为常量,不可改变,但const定义的对象可以添加属性
const a = 10
a=20
console.log(a) //报错
const a = {
name : "csdn"
}
a.age = 18
console.log(a) //打印对象a{name:"csdn",age:18}
//ES5中的var在全局作用域下定义的变量等价于window对象的属性,let定义的不等价于window,属于global,但不可访问
var a = 10
function fn(){
var a=b=20
console.log(a) //20
}
fn()
console.log(a) //10
console.log(b) //20
2、数组的解构赋值
let [a,b] = [1,2]
console.log(a) // 1
console.log(b) // 2
let [a,b,c] = [1,2]
console.log(a) // 1
console.log(b) // 2
console.log(c) //undefined
let [a,b] = [1,[2,3]]
console.log(a) // 1
console.log(b) // [2,3]
let [a,b] = [1,[2,3]][1] //此处[1]为下标取值,取出[2,3],赋值给[a,b]
console.log(a) // 2
console.log(b) // 3
let [a,b,c,d] = "baby"
console.log(a,b,c,d) // b a b y
3、对象的解构赋值
let {n:xxx,m:yyy} = {n:"sky",m:"blue"} //等价于 let {n,m} = {n:"sky",m:"blue"}
console.log(xxx,yyy) // sky blue
//对象只要属性对应,属性值改变顺序或者属性改变顺序都没有影响
let obj = {m:yyy,n:xxx} = {n:"sky",m:"blue"}
console.log(xxx,yyy) // sky blue
// 定义时,属性名和变量名相同,可简写,不一定都要简写
let {n,m} = {n:"sky",m:"blue"} // 等价于{n:n,m:m} = {n:"sky",m:"blue"}
console.log(n,m) // sky blue
// 意为 将对象Math里面的random 函数、floor 函数赋值给变量random、floor
let {random,floor} = Math
random = Math.random
floor = Math.floor
console.log(random()) //任意一个随机数
console.log(floor()) //NaN
// 新手注意,此处的`不是单引号,是Esc下面的那个键
function show(obj){
console.log(`${obj.name}都${obj.age}岁了,还那么慢并且卡`)
}
show({name:"csdn",age:21})
// 也可写成
let {name,age} = obj
console.log(`${name}都${age}岁了,还那么慢并且卡`)
4、函数参数的解构赋值
function fn([a,b]){
console.log(a+b)
}
fn([2,3]) //5
fn([4,7]) //11
function fn({name,age}){
console.log(`${name}${age}岁了`)
}
fn({name:"csdn",age:21}) //csdn21岁了
4、解构的默认值
function fn(arr){
let [a,b=8,c = 6] = arr
console.log(a,b,c)
}
fn([1]) //[1,8,6]
fn([1,2]) //[1,2,6]
fn([1,2,3]) //[1,2,3]
let {n:name,a:age=16,s:sex="女"} = {n:"小花"}
console.log(name,age,sex) //小花 16 女
//任何一个属性无赋值,都是undefinedi
function fn({a=88,b=99}){
console.log(a,b)
}
fn({a:10}) //10 99
fn({}) //88 99
fn() //报错
//有实参用实参,无实参用默认
function fn({a,b} = {a:20,b:30}){
console.log(a,b)
}
fn({a:10}) //10 undefined
fn({}) // undefined undefined
fn() //20 30
function fn({a=88,b=99} = {a:20,b:30}){
console.log(a,b)
}
fn({a:10}) //10 99
fn({}) // 88 99
fn() //20 30
let [a=10,b=20,c=30] = [70,undefined,90]
console.log(a,b,c) //70 20 90
let [a=10,b=20,c=30] = [70,null,90]
console.log(a,b,c) //70 null 90
5、扩展运算符
…可拆解拥有iterator接口的数组、对象
console.log(Math.max([4,5,6])) // NaN
console.log(Math.max(...[4,5,6])) // 6 其等价于 Math.max(4,5,6)
console.log(..."fortune") // 等价于 f o r t u n e
let arr1 = [1,2,3]
let arr2 = [4,5,6]
console.log(arr1.concat(arr2)) // [1,2,3,4,5,6] 等价于 [...arr1,...arr2]
6、函数rest参数-参数不确定
function sum(){
let result = 0
for(let i=0; i<arguments.length;i++){
result += arguments[i]
}
console.log(result)
}
sum(1,2) //3
sum(4,6,5) //15
sum(3,7,9,2) //21
// 上面代码可写为如下,...c代表一个数组,存储着不确定的参数
function sum(...c){
console.log(c.reduce((a,b) => a+b)) // reduce,与迭代函数map/filter差不多,都可遍历数组中的每一项。a为previewData,b为current。
}
sum(1,2) //3
sum(4,6,5) //15
sum(3,7,9,2) //21
这里的rest函数要比用arguments好,arguments是一个类数组,有些方法是没有的。打印arguments,是一个对象,arguments.forEach是undefined,c.forEach是一个函数。
7、forin循环–Es5
let arr = [3,5,8,1,9]
for(let key in arr){
console.log(key, arr[key]) //key为数组下标
} //0 3 / 1 5 / 2 8 / 3 1 / 4 9
// 实际是提供一个接口让我们去遍历对象,数组直接用for就可以。forin可以遍历出原型上面的属性,比如:对象是由构造函数构造出来的,它的原型就是构造函数。
let obj = {
name : "csdn",
age : 18,
sex : "男"
}
for(let key in obj){
console.log(key,obj[key]) // name csdn / age 18 / sex 男
}
8、forof遍历–Es
let arr = [55,66,77,88]
for(let number of arr){
console.log(number) // 55 66 77 88
}
let obj = {
name:"csdn",
age:21
}
for(let objElement of obj){
console.log(objElement) //此时会报错
}
let obj = {
name : "csdn",
age : 18,
sex : "男"
}
for(let objElement of Object.keys(obj)){ // obj.keys 属性 固定写法
console.log(objElement) // name age sex
}
for(let objElement of Object.values(obj)){ // obj.values 属性值 固定写法
console.log(objElement) // csdn 18 男
}
for(let objElement of Object.entries(obj)){ // obj.entries 属性、属性值组成的数组 固定写法
console.log(objElement) // ["name","csdn"] ["age",18] ["sex","男"]
}
for(let [key, values] of Object.entries(obj)){ // 解构赋值5
console.log(key,values) // name csdn / age 18 / sex 男
}
9、symbol
数据类型:number、string、boolean、undefined、null、object(引用/复杂数据类型)
ES6新增:symbol(基础数据类型),当对象中属性太多并且我们想要添加新属性,又怕万一有重复,造成数据错误,就可以用symbol,且具有”独一无二“的属性,每个都是唯一的
不知Es几新增了bigInt,有兴趣可以了解下。
let a = Symbol()
let b = Symbol()
console.log(a,b) // Symbol() Symbol()
console.log(a===b) // false
// 对象的属性不止可以用字符串来做,也可以用symbol
let obj = {
name : "csdn"
}
obj[Symbol()] = "1234"
console.log(obj) // {name : "csdn", Symbol():"1234"} 只能用forof来读取symbol,或者提前将它赋给一个变量
10、set 数据结构–Es6新增
// set类似数组,里面要传的也是数组。
let x = new Set([1,2,3,4,5,6])
console.log(x) // Set(6){1,2,3,4,5,6}
//最大作用就是去重
let arr = [1,2,3,2,1]
let s = new Set(arr)
console.log(s); // Set(3){1,2,3}
console.log([...s]) // [1,2,3] Set是具有迭代器的
// 可简写为
let arr = [1,2,3,2,1]
let newarr = [... new Set(arr)]
console.log(newarr) // [1,2,3]
//Set也具有add、delete、clear,Set也有keys、values、entries
console.log(Set) // 可查看方法
s.add(4) // [1,2,3,4]
s.delete(3) // [1,2,4]
s.clear() // [],清空
11、map数据结构–Es6新增
//对象用对象做属性,一个还好,会显示[object Object]:"属性值",多个对象时,后者覆盖前者,数据丢失。所以键值只能用字符串或者symbol、数字,不能用对象,所以Es6推出map,map可以用任意类型做键值
let a = "name"
let b = "age"
let c = {x:10}
let d = {y:20}
let m = new Map()
m.set(a,"csdn")
m.set(b, 21)
m.set(c, "cccc")
m.set(d, "dddd")
console.log(m); // Map(4){"name"=>"csdn","age"=>21,{...}=>"cccc",{...}=>"dddd"}
console.log(m.get(c)) // cccc
12、数学方法
-
乘性运算
console.log(2**3) //2的3次方,8 let b = 3 b **=3 console.log(b) // 27 3的3次方
-
位运算
//js中是以二进制的32位存储 let a = 2 let b = 3 console.log(a|b) // 3 console.log(2.34 | 0) // 2
13、parseInt 和 parseFloat
// ParseInt从第一位非空格开始读数字
let a = "100px"
console.log(parseInt(a)) //100
console.log(parseInt(a) + 200 + "px") //300px
console.log(parseInt("a 300px")) //NaN
console.log(parseInt("+200px")) //200
console.log(parseInt("-200px")) //-200
console.log(parseInt("-300.2")) //-300
console.log(parseFloat("-300.2")) //-300.2
console.log(isNaN(NaN)) //true
ES6建议调用parseInt、parseFloat、isNaN时通过Number来调用
console.log(Number.parseInt("300px")) //300
console.log(Number.parseFloat("300.2px")) //300.2
console.log(Number.isNaN("300px")) //false
console.log(Number.parseInt("110",2)) // 6 将110当做二进制来看
// parseInt(数值,进制)
console.log(Number.parseInt(110,2)) // 6 将110当做二进制来看
console.log(Number.parseInt(1,0)) //无0进制,当做10进制来看 1
console.log(Number.parseInt(2,1)) //数字不可能比进制大,所以为NaN
#### 13、ES6对象简写
```javascript
let age = 16
let obj = {
name : "csdn",
age : age,
say : function(){
console.log("我是"+this.name+",年龄是"+this.age)
}
}
obj.say()
//简写为:
let age = 16
let obj = {
name : "csdn",
age,
say(){
console.log("我是"+this.name+",年龄是"+this.age)
}
}
obj.say()