ES6基础知识点1

1 let and Const

1.1 局部变量声明let

  1. 只能在一对{}里面产生作用,此时console.log(b)会报错,因为外部无法访问到局部变量b。
if(true){
    var a = 15; 
	let b = 15; 
}
console.log(a);
console.log(b);
  1. 不能重复声明一个局部变量。
  2. 不会变量提升,此时如果在变量声明前访问会报错,如下所示就会出现报错。
console.log(a);
 let a = 15;

1.2 常量声明 const

  1. 声明必须赋值。
  2. 赋值后是否可以修改问题?
    • 对于值类型不能修改, 值类型有 数字Number,字符串String,布尔 Boolean,未定义undefined。
    • 对于引用类型可以修改,引用类型有数组Arry,对象object,空null。
        const TOKEN = "ABC";
       console.log(TOKEN)
       const MY_HOST = ["www.baidu.com","www.qq.com"];//引用类型
       MY_HOST.push("www.jd.com");
      MY_HOST[0] = "www.tmall.com";
      console.log(MY_HOST);
    
  3. 变量名建议大写。

2 解构

2.1 对象

  1. 基础
var obj = {name:"jack",age:19,weight:128};
let {weight,name} = obj;
 console.log(name,weight)
  1. 剩余值
var obj = {name:"jack",age:19,weight:128};
let {weight,...rest} = obj;
console.log(weight,rest)
  1. 默认值,当obj中没有eye 的键名时,会直接调用默认值,反之会调用eye的值,不会调用默认值。
var obj = {name:"jack",age:19,weight:128};
let {name,eye=2} = obj;
console.log(name,eye)
  1. 没有顺序区分,变量名必须与对象的键名一样。

2.2 数组

  1. 基础
let  arr = [1, 3, 5, 7, 9];
let [a, b, c] = arr;
console.log("a:",a);
console.log("b:",b); 
console.log("c:",c);
  1. 剩余值
let arr=[1,2,3,4];
let [a,...b]=arr;
console.log(a,b)
  1. 默认值
let arr=[1,2,3,4];
let [a,b,c=100]=arr;
console.log(a,b,c)
  1. 交换变量
   let a=15;
   	let b=23;
   	[a,b]=[b,a];
   	console.log(a,b)
  1. 跳过(忽略)
  let arr=[1,2,3,4];
  	let [,a,,b]=arr;
  	console.log(a,b)
  1. 浅拷贝(复制)
var arr=[1,3,5];
  		var arr1=[...arr];
  		arr1[1]=100;
  		console.log(arr,arr1)

3 字符串

  • 去除空白
    1. 去除两边空白 trim();
    2. 去除左边空白 trimLeft()
    3. 去除右边空白 trimRight()
  • 检测包含
    1. includes(s) 字符串是否包含s
    2. starsWith(s) 字符串是否已s开头
    3. endsWith(s) 字符串是否已s结尾
  • 重复 repeat(number)
  • 填充
    1. padStart(len,s ) 以字符串s补齐len长度,s在前
    2. padEnd(len,s ) 以字符串s补齐len长度,s在后
      -模板
```
var name = "圣京都";
var age  = 18;
var str = `大家好我的名字是"${name}",今年${age}岁了`;
console.log(str);
```

4 箭头函数

4.1 原来的函数

function times(n){
	console.log(n*2)
			}
	times(6);

4.2 箭头函数

  • 参数=>函数体
  • 如果参数不仅仅一个,用()包裹
  • 如果函数体只有一句,执行的结果就是返回值
  • 函数体多条语句:1.用{}包裹;2.return 返回
var times=n=>console.log(n*2);
times(4)
var arr=["jack","tom","anbi"];
arr.forEach(item=>console.log(item))
var arr =[1,2,3,4];
var ret=arr.reduce((a,b)=>a+b);
console.log(ret)
  • 把arr映射为[{num:1},{num:2}]

var arr=[{num:1},{num:2}]
			var arr2=arr.map(item=>({num:item}))
			console.log(arr2)
  • 1.默认setinterval this指向window
    2.箭头函数的this指向为上一层作用域中的this obj;
var obj={
				age:18,
				say:function(){
					console.log("今年我"+this.age);
				},
				grow:function(){
					setInterval(()=>{
						this.age++;
						this.say();
					},3000)
				}
			}
			obj.say();
			obj.grow();

5 函数新特性

5.1 默认参数

 function add(a,b=10){
				console.log(a+b)
			}
			add(3)

5.2 不定参数

  • args 是一个有参数组成的数组
function add(...args){
				var ret =args.reduce((a,b)=>a+b);
				console.log(ret)
			}
			add(1,2,3,4,5,6)

5.3 拓展实参

  • 调用函数的时候把arr数组展开

function metting(a,b,c,d){
				console.log("今天开会的有:",a,b,c,d);
			}
			var arr=["jack","tom","小米","安比","夏娜"];
			metting(...arr)

6 数组新增加方法

6.1 填充

  • fill(“填充内容”,start,end) 其中不包括end下标的元素
 var arr=[1,2,3];
			 arr.fill("jack",0,1);
			 console.log(arr)

6.2 copywithin

  • 从数组拷贝替换元素copywithin(替换开始位置,拷贝开始位置,拷贝结束位置)
var arr=[1,2,3,4,5];
			arr.copyWithin(0,1,2);
			console.log(arr);

6.3 查找

  • includes(obj)返回一个值,arr 是否包含obj
var arr=[1,2,3];
console.log(arr.includes(1))
  • find() 查找元素
var arr=[11,33,2,33,50,100];
			var set=arr.find(item=>item>24)
			console.log(set)
  • findIndex() 查找符合条件的下标
var arr=[11,33,2,33,50,100];
				var set=arr.findIndex(item=>item>50)
				console.log(set)	

7 对象

7.1 简写方式

var name="jack";
			var age=18;
			var user={
				name,
				age,
				say(){
					console.log(`名字${this.name} 年龄${this.age}`)
				}
			}
			console.log(user.say())

7.2 对象的动态属性

var Key=prompt("输入对象名称","like");
			var value=prompt("输入对象值","好好学习");
			var obj={[key+"web"]:value}
			console.log(obj)

7.3 对象的继承

var man={
				leg:2,
				walk(){
					console.log("两条腿走路");
				}
			}
			var teacher={
				name:"Jack",
				__proto__:man
			}
			
			console.log(teacher.walk())

猜你喜欢

转载自blog.csdn.net/qq_40994735/article/details/107919739