let和const
let和const与var一样都是定义变量的
但是let是定义了一个块级作用域变量!!!
const是定义了一个常量!!!
例1:
<script>
for(var i = 0; i < 10; i++) {
console.log(i)
}
console.log(i) // 10 这是全局变量
// 在ES6就出现了块级作用域
// 一个花括号就是一个块!!!
for(let i = 0; i < 10; i++) {
console.log(i)
}
console.log(i) // 这里会报错
</script>
例2:
<script>
// const 常量
const a = 10;
a = 20; // 会提示 Assignment to constant variable 意思是常量不能被修改!!!
console.log(a)
const b = {
// 注意: b是常量,但b下面的属性可以被修改!!!
name: "kx"
}
b.name = "zhangsan"
b = {} //报错!!!
console.log(b)
</script>
解构赋值
正常情况下,var只能赋值一个
如:
// var a,b,c,d=4; // var a var b var c var d = 4
// var a=b=c=d=4; d=4; c=d; b = c; var a =b;
解构赋值可以同时赋值多个并且以 数组 的形式赋值!!!
<script>
正常情况赋值
let [a,b,c] = [1,2,3]
console.log(a)//1
console.log(b)//2
console.log(c)//3
嵌套方式赋值
let [a,[b,c]] = [1,[2,3]]
console.log(a)//1
console.log(b)//2
console.log(c)//3
可以忽略赋值
let [a, ,c] = [1,2,3]
console.log(a) // 1
console.log(c) // 3
// 如果有默认值,但是后面解构没有值,使用的默认值!!!
let [a=1,b=2] = []
console.log(a) // 1
console.log(b) // 2
let [a, b, c, d] = "hello"
console.log(a) // h
console.log(b) // e
</script>
剩余运算符
<script>
var a = [1, 2, 3]
var b = [4, 5, 6]
var c = a.concat(b) // concat就是合并的意思!!!
console.log(c) //a与b的合并
// 展开运算符!!!
var c = [...a, ...b]
console.log(c) //与concat效果一样
// 使用三个点,让剩余所有的变量都放入c中
function add(a, b, ...c) {
console.log(c) //3, 4, 5, 6
}
add(1, 2, 3, 4, 5, 6)
</script>
对象解构
<script>
// 可以解构对象
let [obj1] = [{foo:"123"}]
console.log(obj1)
//也可以解构对象里的值,名称要对应
let {foo} = {foo:"456"}
console.log(foo)
</script>
map和set集合
利用Set去重
var mySet = new Set([1, 2, 3, 4, 4, 5555, 100, 2, 100]);
console.log([...mySet]); // [1, 2, 3, 4]
模板字符串
<script>
var str1 = "ddd"
var str2 = "ccc"
var str3 = "你输入的是" + str1 + "请不要写" + str2;
var str4 = `你输入的是${str1}请不要写${str2}`// ES6 中新增加的字符串拼接方法
</script>
对象
<script>
对象简写
const name = "张三"
const age1 = 20;
var obj = {age1, name}
// // var obj = {age: age, name:name}
console.log(obj.age1)
对象函数简写
var obj = {
name:'',
age: 20,
run: function() {
}
}
var obj = {
name:'',
age: 20,
// 函数也可以简写
run() {
}
}
</script>
对象合并
1.可以利用 ...合并对象
<script>
var obj1 = {name:"zhangsan"}
var obj2 = {age:20}
var obj3 = {...obj1, ...obj2}
console.log(obj3)
</script>
2.可以利用 assign合并对象
<script>
var obj1 = {name:"lisi"}
var obj2 = {age:30}
var obj3 = Object.assign({}, obj1, obj2)
console.log(obj3)
</script>
<script>
var obj1 = {name:"lisi", newval: {age:20}}
var obj3 = Object.assign({}, obj1)
console.log(obj3)
// assign对第一层是深拷贝,第二层或者之后都是浅拷贝!!!
// 深拷贝对象!!!
obj3.newval.age = 40
console.log(obj1.newval.age) // 40
</script>
数组方法
<script>
//将参数中所有值作为元素形成数组。
var arr = Array.of(1, 2, 3, 4)
console.log(arr)
//将伪数组成数组。
function demo() {
// Array.prototype.slice.call(arguments)
var arr = Array.from(arguments)
console.log(arr.push)
}
demo(1, 2, 3, 4)
</script>
<script>
1. //find()查找数组中符合条件的元素,若有多个符合条件的元素,则返回第一个元素。
var arr = [1, 10, 9, 30, 20] // 求出大于10数
var a = arr.find(function(item) {
return item > 10;
})
2. //findIndex()查找数组中符合条件的元素索引,若有多个符合条件的元素,则返回第一个元素索引。
var index = arr.findIndex(function(item) {
return item > 10;
})
console.log(a)
console.log(index)
3. //fill()将一定范围索引的数组元素内容填充为单个指定的值。
let arr = Array.of(1, 2, 3, 4);
// 参数1:用来填充的值
// 参数2:被填充的起始索引
// 参数3(可选):被填充的结束索引,默认为数组末尾 (左闭右开)!!!
console.log(arr.fill(0,1,3)); // [1, 0, 0, 4]
4. //copyWithin() 将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。
console.log([1, 2, 3, 4].copyWithin(0,1,3)); // [3, 4, 3, 4]
5. //entries() 遍历键值对。
var arr = ["a", "b", "c", "d"]
var a = arr.entries() // interator接口
console.log(a)
for(var [key, value] of a) {
console.log(value)
// console.log(value)
}
console.log(a.next()['value'][1]) // a
console.log(a.next()['value'][1]) // b
console.log(a.next()['value'][1]) // c
console.log(a.next()['value'][1]) // d
console.log(a.next())
6.//keys()遍历键名。//values()遍历键值。
var arr1 = ["a", "b", "c"]
var b = arr1.values()
console.log(b) //Iterator
console.log(b.next())
console.log(b.next())
console.log(b.next())
console.log(b.next())
7. //includes()数组是否包含指定值。
var arr2 = [1, 2, 3, 4]
console.log(arr2.includes(1))
8. // 面试题 数组扁平化!!!
// flat() 可以将两层嵌套数组转化为一层
var a = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10]]]]
console.log(JSON.stringify(a))//可以转化多层嵌套
// var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(a.flat().flat().flat())
console.log(a.flat(Infinity))//可以转化多层嵌套
</script>
异步代码
<script>
// 在js中异步代码有两种,setTimeout setInterVal
// 异步代码在所有同步代码执行之后才会执行!!!
setTimeout(function() {
console.log("定时器")
}, 0)
console.log("代码end") // 这个先执行!!!
</script>
// 谁调用了函数,函数里面this就是谁!!!(是在ES5中生效)
// 箭头函数this。 (向上查找非箭头函数,这个非箭头函数的this就是你要找的this)