1、var和let、const的使用
这三个是用来声明变量的(var let const)。
说到变量，就要说变量的作用域了，在js中作用域可以分为三种：全局作用域、局部作用域、块级作用域。
var来声明变量
我们用var的时候var是可以省略的，
var a = 10; a = 10;
这样写都是可以的，说一下加var和不加var的区别：
1.加var的可以做局部变量，也可以做全局变量，不加var的只能做全局变量。
2.加var的不可以被删除，不加var的可以被删除。
3.加var的可以被提升，不加var的不能够提升。
全局作用域和局部作用域怎么区分呢？
var a = 10;
function f(){
var b = 1;
}
复制代码那么变量a就是全局的，b就是局部的，其分界点说白了就是函数。
let来声明变量
let a = 10;
用let来声明和var是一样的，只是let形成了块级作用域，通常会用{}包起来，如下：
{
let a = 10;
}
复制代码注意：使用let来声明变量是不能提升的
经典应用在for循环：
for(let i=0;i<10;i++){
//...
}
复制代码const来声明变量
const声明一个只读的常量。一旦声明，常量的值就不能改变
const PI = 10;
如上，常量的值10就不能改变了。
const的作用域与let命令相同，只在声明所在的块级作用域内有效，同样也不可以提升。
2、数组的解构赋值
从数组和对象中提取值，对变量进行赋值，这被称为解构。
var arr = [1,2,3];
let a = arr[0];
let b = arr[1];
let c = arr[2];
复制代码把数组arr中的值赋给a、b、c。
使用解构赋值就可以这样写了
let [a,b,c] = [1,2,3]
有这样几个细节需要注意一下
1.左右结构不一样
let [a,b,b] = [1,2,3,4];
只有三个变量a b c ，那么就取值到第三位，就是 [1,2,3]
let [a,b,c,d] = [1,2,3];
有四个变量，却只有三个值，最后一个变量赋值不到，就输出undefined了
2.跳过部分
let [a,,c] = [1,2,3];
中间无变量，但有位置。那么变量空着，我们赋值也给它空着。
3.默认值
let [a,b,c,d=10] = [1,2,3];
只有三个值，则赋给了前面的三个变量，最后的变量d已经赋值10了.
那么输出结果就是a 1,b 2,c 3,d 10.
4.嵌套
let [a,b,c] = [1,2,[3]];
结果就是a 为 1,b 为 2, c 为 [3]。
3、箭头函数
开始写函数我们都是这样写的
let arr = function(x,y){
return x+y
}
console.log(arr(1,2)
function f(x,y){
return x+y
}
console.log(f(1,2)
复制代码箭头函数形式如下：
var arr = (x,y) =>{
return x+y
}
console.log(arr(1,2)
复制代码箭头函数使得表达更加简洁，从而简化了我们的代码。
还可以简化为
var arr = (x,y) => x+y
console.log(arr(1,2)
复制代码如果只有一个参数，还可以继续简化
var arr = x => 3
console.log(arr())
复制代码没有参数呢
var arr = ()=> 3
console.log(arr())
复制代码补充一点：如果返回的是一个对象，对象的外面就必须要加上括号(一个对象也要加)。
var arr = () => ({a:"css",b:"html"});
console.log(arr())
复制代码4、this
只要能写js代码的地方，都可以访问this。
1.如果是一个普通的函数，this就指向了window.
function f(){
console.log(this)
}
复制代码2.如果this出现在一个方法中，那么this就表示这个方法所在的对象
var arr = {
show:function(){
console.log(this)
}
}
arr.show();
复制代码此时this就指向了show。
- 如果在调用函数之前加上一个new, 它会创建并返回一个对象，而这个函数内部的this就指向个对象
function f(){
console.log(this)
}
console.log(new f())
复制代码- 可以通过Function对象的apply和call就去来指定函数内部中的this指向
call的使用如下。
var arr = {name:"jiang"}
function f(x){
console.log(x)
console.log(this)
}
f.call(arr,10)
复制代码apply的使用如下。
var arr = {name:"jiang"}
function f(x){
console.log(x)
console.log(this)
}
f.apply(arr,[10])
复制代码tips:call和apply的区别？
-
如果后面没有参数，则两个的用法完全一样。
-
call的使用
函数名.call(变量，参数)
-
apply的使用
函数名。apply(变量,[参数])
5、数组
数组有很多的，不仅仅是ES6，这里我们就一起说了吧。
1.基本数组
1.join
作用：把数组变成一串字符串，同时这些字符串中的字符由方法接受的参数决定；
var arr = [1,2,3];
var a = arr.join("");
console.log(a)
复制代码这样输出的结果就是 123 了。
2.reverse
作用：把数组中的元素颠倒排列
var arr = [3,5,7];
var rs = arr.reverse();
console.log(rs)
复制代码3.concat
作用：把两个数组合成一个数组
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var rs = arr1.concat(arr2);
console.log(rs)
复制代码4.sort
作用：排序 根据ASCII码进行排序
var arr = [3,6,1,9,7];
var rs = arr.sort(rs);
console.log(rs)
复制代码5.slice
作用：索引
var arr = [3,6,8,2,5,0];
var rs = arr.slice(2,4);
console.log(rs)
复制代码tips：不包括最后面的索引
6.push
作用：在数组最后面推一个元素
var arr = [2,3,4,5];
var rs = arr.push(10);
var rs1 = arr.join("");
console.log(rs)
复制代码tips:返回的是元素的个数
7.unshift
作用：在数组最前面面推一个元素
var arr = [2,3,4,5];
var rs = arr.unshift(9);
console.log(rs)
复制代码tips:返回的是元素的个数
8.pop
作用：在数组的最后面删除一个元素
var arr = [2,3,4];
var rs = arr.pop();
console.log(rs);
复制代码tips:返回的是被删除的元素
9.shift
作用：在数组的最前面删除一个元素
var arr = [2,3,4];
var rs = arr.shift();
console.log(rs);
复制代码tips:返回的是被删除的元素
2.ES5中扩展的数组
1.Array.isArray()
作用：判断一个数组是不是真数组
let arr = [1,2,3];
console.log(Array.isArray(arr))
复制代码2.forEach()
作用：遍历数组
let arr = [1,2,3];
arr.forEach(function(item,index,arr){
console.log(index)
})
复制代码tips：有三个参数
item：当前数组中的元素
index：元素的索引
arr：当前数组
3.map()
作用：逐一处理原数组元素 返回一个新数组
let arr = [1,2,3];
let rs = arr.map((item,index,arr)=>{
return item += 10
})
console.log(rs)
复制代码4.filter()
作用：过滤 逐一过滤，留下符合条件的新数组
let arr = [1,2,3,4,5,6,7,8];
let rs = arr.filter((item,index,arr)=>{
return item<5;
})
console.log(rs)
复制代码5.reduce()
作用：不断地将前一项和后一项的值进行运算
let arr = [1,2,3,4,5,6];
let rs = arr.reduce((prev,next)=>{
return prev + next
})
console.log(rs)
复制代码6.some()
作用：只要数组中的某一个元素符合指定的条件，就会返回真，否则返回假。
7.every()
作用：如果数组中的所有元素都符合指定的条件，才返回真，否则返回假。
3.ES6扩展的数组
1.Array.form()
作用：将假数组转化为真数组
2.Array.of()
作用：将一组值转化为数组
3.find
作用：用于找出第一个符合条件的数组元素
4.findindex
作用：用于找出第一个符合条件的数组元素索引
5.includes()
作用：判断元素是否在数组中存在。返回值是 true|false
6.fill()
作用：给数组填充指定值。
数组的扩展运算符(...)
var arr = [1,2,3];
var res = [...arr];
console.log(res)
复制代码6、Set、map数据结构
Set
类似于数组，只是里面的值都是唯一的，没有重复的。
创建Set
var arr = new Set();
经典案例：数组去重，如下。
添加或删除某值如下：
var arr = new Set();
arr.add(1)
arr.add(2)
arr.delete(1)
console.log(arr)
复制代码Map
map类似于对象，里面也是存放键值对，区别在于：对象中的键名只能是字符串，如果使用map，它里面的键可以是任意值。
创建Map
var arr = new Map();
添加数据
var arr = new Map([
["a","html"],
["b","css"]
])
arr.delete("a") //删除数据
console.log(arr)
复制代码7、字符串扩展
1.模板字符串
两个反单引号 ``包裹的字符窜就是字符串模板。在字符串模板中可以使用${}符号来引用变量。
var name = "jiang";
var age = 18;
console.log(`我是${name},我${age}岁了`)
复制代码2.trim()
作用：除去字符串空格
var arr = " a b c d e ";
console.log(arr.trim())
复制代码3.repeat()
作用：复制字符串
var arr = "12345";
console.log(arr.repeat(10))
复制代码这样就复制了10次arr了
4.includes()
作用：检测字符串中的元素
var arr = "a bc de";
console.log(arr.includes("a"))
复制代码其返回值是布尔型。
5.startsWith
不能隔着空格输出
6.endswith
全部才为真，否则为假
7.padStart
在字符串前面加入，共10个字符
8.padEnd
在字符串后面加入，共10个字符
8、class
其实是一种语法堂，还是基于原型继承实现的
1.class创建对象
class AA{
constructor(name){
this.name = "jiang"
}
}
复制代码2.使用extends实现继承
class Father{
constructor(name,age){
this.name = name;
this.age = age;
}
say(){
console.log(`我是${this.name},我${this.age}岁了`)
}
}
class Son extends Father{
constructor(name,age,lesson){
super(name,age)
this.lesson = lesson
}
show(){
console.log(`我是${this.name},我是${this.lesson}的学生`)
}
}
var arr = new Son("jiang","18","华杉")
arr.say();
arr.show();
复制代码这样就继承了父类的name、age.
constructor(name,age,lesson){
}
复制代码3.类的静态方法 static
直接通过类名来访问的方法就是静态方法 , 静态方法只能用类名调用
class Father{
constructor(name,age){
this.name = name;
this.age = age;
}
static say(){
console.log("hello world")
}
}
Father.say();
复制代码9、补充-严格模式
使用严格模式的目的：规范代码，提高编译效率。
启动严格模式： "use strict"
在严格模式下不能使用没有var的变量
在严格模式下不能8进制的数字
在严格模式下不能把函数定义在if语句中
在严格模式下函数不能有重名的形参
在严格模式下不能arguments就不能使用了
在严格模式下不能function中的this就再在是window
扫一扫
1540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
