前端Es6新增语法使用

const关键字
作用:声明变量,常量就是值(内存地址)不能变化的量。
具有块级作用域
if(true){
const a=10;
}
console.log(a); //a is not defined
声明常量时必须赋值
const PI; //使用const关键字必须赋初始值
常量赋值后,值不能修改
const PI=3.14;
PI=100;//赋值后不能修改,修改将修改地址
ary[0] = 123;//可以进行修改
let关键字
let关键字就是用来声明变量的使用lef关键字声明的变量具有块级作用域
在一个大括号中 使用let关键字声明变量才具有块级作用域var关键字是不具备这个特点
防止循环变量变成全局变量
先声明在使用// 使用let关键字声明的变量没用变量提升
例子:
// let关键字就是用来声明变量的
let a = 10;
console.log(a); 只能局部访问

let、const、var区别
1、使用var声明变量,其作用域为该语句所在的函数内,且存在变量提升现象
2、使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升
3、使用const声明变量,在后面出现的代码中不能再修改常量的值。如果使用的值不需要修改或变化使用const关键字

变量提升:就是可以先使用在声明
Var	Let	Const
函数级作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可更改	值可更改	值不可更改

解构赋值
Es6允许从数组中提取,按照对应的位置,对变量赋值。对象也可以实现解构

数组解构
  let [a, b, c] = [1, 2, 3];
        console.log(a);
        console.log(b);
        console.log(c);


 let ary = [1, 2, 3];
        let [a, b, c] = ary;

        console.log(a);
        console.log(b);
        console.log(c);

如果解构不成功,变量的值为undefined
	let [foo] = [];
	        let [bar, fool] = [1];
	        console.log(bar);//1
	        console.log(fool);// undefined
对象解构
	按照一定模式,从数组或对象中提取,将提取出来的值赋给另外的变量
	对象解构允许使用变量的名字匹配对象的属性   匹配成功将对象属性的值赋值给变量
	  let person = {
	            name: 'zhangsan',
	            age: 20
	        }
	        let {
	            name,
	            age
	        } = person;
	        console.log(name);//zhangsan
	        console.log(age);//20
	
	第二种
		 let {
		            name: myName
		        } = person;
		        console.log(myName);//zhangsan

箭头函数
(形参)=>{}
const fn=()=>{}
函数体中只有一句代码,且代码执行结果就是返回值,可以省略大括号。

 const sum = (n1, n2) => n1 + n2;
        const result = sum(10, 20);
        console.log(result);

在箭头函数中形参只有一个   形参外侧的小括号也可以省略
        const fn = v => {
            alert(v);
        }
        fn(20);

	const  fn=v=>v;
  箭头函数不绑定this关键字, 箭头函数没有自己的this关键字, 如果在箭头函数中使用this, this关键字指向的是函数定义位置的上下文this
function fn() {
            console.log(this);
            return () => {
                console.log(this);
            }
        }
        const obj = {
            name: 'zhangsan'
        };
        // 将函数this指向obj
        const resFn = fn.call(obj);
        resFn();

剩余参数语法允许将一个不定数量的参数表示为一个数组

const sum = (...args) => {
	let total = 0;
	args.forEach(item => total += item);
	return total;
};
console.log(sum(10, 20));
console.log(sum(10, 20, 30));

const sum  (first,...args) => {
console.log(firsr);  //10
console.log(args);  //[20,30]
};
sum(10,20,30);

剩余参数和解构配合使用
let students = ['wangwu', 'zhangsan', 'lisi'];
        let [s1, ...s2] = students;
        console.log(s1); //'wangwu'
        console.log(s2); //['zhangsan','lisi']

扩展运算符
扩展运算符可以将数组或对象转为逗号分隔的参数序列
let ary = [“a”, “b”, “c”];
console.log(…ary)
console.log(“a”, “b”, “c”)

 扩展运算符应用于数组合并
      let ary1 = [1, 2, 3];
      let ary2 = [4, 5, 6];
      let ary3 = [...ary1, ...ary2];
      console.log(ary3)
扩展运算符转换为数组
	将类数组或可遍历对象转换为真正的数组
	 var oDivs =document.getElementsByTagName('div');
	console.log(oDivs)
	var ary = [...oDivs];
构造函数方法Array.from()
	将类数组或可遍历对象转换为真正的数组
	 var arrayLike = {
	            "0": "张三",
	            "1": "李四",
	            "2": "王五",
	            "length": 3
	        }
	
	        var ary = Array.from(arrayLike);
	        console.log(ary) //["张三", "李四", "王五"]
	
	乘2
	 var arrayLike = {
	            "0": "1",
	            "1": "2",
	            "length": 2
	        }
	
	        var ary = Array.from(arrayLike, item => item * 2)
	        console.log(ary) //[2, 4]

findlndex();
用于找出第一个符合条件的数组成员位置,如果没有找到返回-1

  let ary = [10, 20, 50];
        let index = ary.findIndex(item => item > 15);
        console.log(index)
includes()

判断数组中是否包含某一个值,返回布尔值
[1,2,3].includes(2)//true
[1,2,3].includes(4)//false

 let ary = ['a', 'b', 'c'];
        let result = ary.includes('a');
        console.log(result);

find()
用于找出第一个符合条件的数组成员,如果没有找到就返回undefined 查找数组中符合的条件

 var ary = [{
            id: 1,
            name: '张三'
        }, {
            id: 2,
            name: '李四'
        }];
        let target = ary.find(item => item.id == 3);
        console.log(target)

String的扩展方法
Es6创建字符串的方式,使用反引号定义(位置在tab键上面)
模板字符串
模板字符串可以解析变量,使用 使 < s c r i p t t y p e = t e x t / j a v a s c r i p t > l e t n a m e = ; l e t s a y H e l l o = H e l l o , {}拼接字符串 必须使用反引号 <script type='text/javascript'> let name = '张三'; let sayHello = `Hello,我的名字叫 {name}; console.log(sayHello); </script> 模板字符串可以换行 let html =
div>
r e s u l t . n a m e < / s p a n > < s p a n > {result.name}</span> <span> {result.name}

; console.log(html); 在摸板板字符串中可以调用函数。 const sayHello = function() { return '哈哈哈追不到我吧就是这么强大'; }; let greet =${sayHello()}哈哈哈哈`;
console.log(greet); //哈哈哈追不到我吧就是这么强大哈哈哈哈
starsWith和endsWith()
starsWith();表示字符串是否在原字符串的头部,返回布尔值
endsWith();表示参数字符串是否在原字符串的尾部,返回布尔值

猜你喜欢

转载自blog.csdn.net/weixin_46002223/article/details/108394859
今日推荐