JS高级
一、var 声明变量出现的问题（弊端，特点）
1.会发送预解析，可以先使用再声明
console.log(a) //undefied
var a=10
2.可以重复声明同一个变量
var b=10; //100 行
var b=20; //1000 行
var b
b=10;
b=20;
3.for循环中使用var 外部也可以访问
ES5作用域 【全局】 【函数作用域】
在for里var i 相当于全局 var i
for (var i = 0; i < 5; i++) {
// console.log(i);
}
console.log(i);
二、let声明变量的特点
1.不允许先使用再声明
// let a **let没有预解析
console.log(a) //报错
let a=10
2.不能重复声明同一个变量
let b=10
let b=200
//报错
3.在for中使用let
【let 】拥有块级作用域 （ {} 包裹的代码段）
for(let i=0;i<5;i++){// i类比为函数参数
console.log(i)
}
console.log(i) //报错
三、使用const声明常量
常量区别于变量 一般习惯于首字母大写（全部大写）
也有块级作用域
1.一旦声明就必须赋值
const Data
console.log(Data) // 报错
2.赋值后不能修改
const Data =10
Data =20 ； //报错
3.不能先使用再声明（因为没有预解析）
console.log(Data);
const Data =10;
4.引用类型，引用地址不可修改，引用类型的值可以修改
const Arr =[10,20,30] //引用地址 假设 【0x0002】
Arr =[1,2,3]; //不能修改引用地址 【0x0002】
Arr[1]=100;
console.log(Arr);
四、对象的解构赋值语法
let obj = {
name: "lh",
age: "20",
sex: "男"
}
// 等号左边的是全局变量 等号右边是对象
// 通过对象的key值和变量名同名，就可以使用解构赋值的语法
// 讲对象的value值解构出来，赋值给变量
1.全部解构
let {name,age,sex}=obj
2.部分解构
let {name}=obj
3.解构之后重命名
使用 ： 号
let {name:myName}=obj
4.封装好的对象的 方法或者属性 只想用其中一个
let {random}=Math;
console.log(random());
五、数组解构的语法
1.完全解构
let [a,b,c]=arr;
d 全局变量 未赋值
console.log(a,b,c,d);
2.部分解构
(目的：简化代码 ，代码越写越复杂，没必要)
// 数组是有序的数据集合
// 单个变量都是第0个
// let [n]=arr;
// console.log(n);
//只想解构第1个数据
// let [,b]=arr;
// console.log(b);
3.复合结构
let arr2=[1,2,3,[10,20,30]];
let [a,b,c,[d,e,f]]=arr2
console.log(a,b,c,d,e,f);
4.使用场景
// 需求：交换两个变量的值
let a = 10, b = 20;
[a, b] = [b, a]
console.log(a, b);
六、字符串的解构语法
和数组解构法一样 ，字符串本质【伪数组】
var str = '今天天气真好'
console.log(str.length);
console.log(str[2]);
//字符串拥有数组的索引和length 特征 ，所以是一个伪数组
// 可以看作一个数组，使用数组的解构语法
let [a,b,c,d]=str;
console.log(a,b,c,d);
str[1]='日'
console.log(str); //字符串通过索引， 不能修改只能获取
var arr = '今天天气真好啊！'
console.log(arr[3]);
let [a, b, c, d, e, f] = arr
list(a, b, c, d, e, f)
function list() {
console.log(arguments);
}
七、对象的简化写法
let name = 'lh';
let age = 20;
let gender = '男';
// 需求： 将全局变量 放在对象里面
// let obj={
// name:naem,
// age:age,
// gender:gender
// }
// ES6新语法
// 如果变量名和key值一致，再对象内部，可以只写key 不写value
// value值自动填充
let obj = { name, age, gender,fu }
obj.fu()
console.log(obj);
function fu(){
console.log(1111);
}
八、设置函数形参默认值
//function 函数名（形参=默认值，...）{}
function fn(a=0,b=0,c=0,d=0){
return a+b+c+d;
}
九、函数参数解构赋值
1.数组形式的参数作为实参
function add([a,b,c]){
return a+b+c
}
var arr=[1,2,3]
console.log(add(arr));
2.函数参数是无序的 ---对象（比如$.ajax方法 内部 url type 可以互换
function getVal({x,y,z}){
// 相当于 let {x,y,z}=obj
console.log('x:'+x,'y:'+y,'z:'+z);
}
var obj={
z:30,
x:10,
y:20
}
getVal(obj)
var arr=[10,20,50]
function add([a,b,c]){
console.log(a+b+c);
}
add(arr)
十、rest参数-剩余参数
使用rest参数
rest参数于arguments的区别
rest参数返回的是数组，arguments返回的是伪数组
rest参数可以使用foreach遍历，arguments不能使用foreach遍历
【语法】....参数
function add(...rest){
var sum=0
rest.forEach(function(itme){
sum+=itme
})
return sum
}
console.log(add(1,2,3,4,5,6));
function app(...list){
console.log(list);
}
app(1,2,3)
app(1)
补充 拓展
剩余参数 获取前面参数剩余的参数，格式是一个数组
// 不确定有没有第某个或以上的参赛
// rest参数只是一个叫法
// rest参数不能放在中间，必须最后
function fn(a,b,c,...d){
console.log(a,b,c,d);
}
fn(1,2,3,4,5,6,7,8,9,10,11)
十一、拓展运算符的使用
1.在数组中使用
let arr=[1,2,3,4]
相当于arr[0],arr[1]
console.log(...arr)
2.在字符串中使用
let str='今晚吃钏钏'
console.log(...str);
3.在对象中使用
let obj={
name:"啊三",
age:10
}
// console.log(...obj);
// 将obj内部键值对放在了另一个对象的内部
console.log({sex:'男',...obj});
十二、拓展运算符的运用
1.数组中的值做为函数参数使用
function fn(a,b,c,d){
console.log(a,b,c,d)
}
var arr=[1,2,3,4]
fn(...arr)
2.合并数组
// 如果key相同的情况下，后面的会覆盖前面的
var arr1=[1,2,3]
var arr2=[10,20,30]
var newArr=[...arr1,...arr2]
console.log(newArr);
let obj={
name:'lh',
age:20
}
let obj2={
email:'135',
gender:'男'
}
// let newObj=[{...obj,...obj2}]
// console.log(newObj);
3.拓展
// 拓展 object.assign 这个方法 可以 做对象的合并
// 用法 ：将第2个参数开始的对象 合并带 第一个对象中
let newObj=Object.assign({},obj,obj2);
console.log(newObj);
下一篇 : 快速成为js高手-ES6语法二
