es6 记录

小咪咪 2023-02-23 12:02 2阅读 0赞

<template>
    	<div class="es6">
    		<div class="es6">es6</div>
    		<div id="result"></div>
    		<div id="result2"></div>
    		<div id="list"></div>
    	</div>
    </template>
    
    <script>
    export default {
    	data() {
    		return {
    			map: {"a": "1", "b": "2"}
    		};
    	},
    	mounted() {
    		this.es6()
    		this.foo(2, 4, 6, 8)
    	},
    	methods: {
    		es6() {
    			// 3.变量解构
    			// 遍历 Map 结构如果只想获取键名，或者只想获取键值，可以写成下面这样。
    			// const map = new Map();
    			// map.set('first', 'hello');
    			// map.set('second', 'world');
    			
    			// for (let [, value] of map) {
    			//   console.log(value);
    			// }
    			
    			// 4.字符串扩展
    			let name = "Bob", time = "today";
    			$('#result').append(
    			  'There "Yo" are <b>' + name + '</b> ' +
    			  'items in your basket, ' +
    			  '<em>' + time +
    			  '</em> are on sale!'
    			);
    			$('#result2').append(`
    			  There \"Yo\" are <b>${name}</b> items
    			   in your basket, <em>${time}</em>
    			  are on sale!
    			`);
    			
    			// 5.字符串新增方法trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格
    			// const s = '  abc  ';
    			
    			// s.trim() // "abc"
    			// s.trimStart() // "abc  "
    			// s.trimEnd() // "  abc"
    			
    			// 6.数值的扩展 ES6 将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。
    			console.log(Number.parseInt('12.34')) // 12
    			console.log(Number.parseFloat('123.45#')) // 123.45
    			console.log(Number.isInteger(25))	// true
    			console.log(Number.isInteger(25.1))	// false
    			
    			// ms
    			// console.log(1<2<3)
    			// console.log(3>2>1)
    			// ture == 1
    			
    			
    			// ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数这样就不需要使用arguments对象了
    			// rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
    			// function add(...values) {
    			//   let sum = 0;
    			// 	console.log(values)
    			//   for (var val of values) {
    			//     sum += val;
    			//   }
    			
    			//   return sum;
    			// }
    			// add(2, 5, 3) // 10
    			
    			// 箭头函数
    			// var f = v => v;
    			// // 等同于
    			// var f = function (v) {
    			//   return v;
    			// };
    			// // 箭头函数
    			// var f = () => 5;
    			// // 等同于
    			// var f = function () { return 5 };
    			// // 箭头函数
    			// var sum = (num1, num2) => num1 + num2;
    			// // 等同于
    			// var sum = function(num1, num2) {
    			//   return num1 + num2;
    			// };
    			
    			// setTimeout(() => this.a(), 3000);
    			
    		},
    		foo(...val) {
    		  setTimeout(() => {
    		    console.log('args:', arguments);
    		  }, 5000);
    		  setTimeout(() => {
    		    console.log('args:', val);
    		  }, 5000);
    		},
    		a(){
    			console.log(123)
    		}
    	}
    };
    </script>
    
    <style>
    .test {
    	margin: 0.3rem;
    	font-weight: 500;
    }
    .van-row{
    	margin-bottom: .2rem;
    }
    </style>
    
    
    
    
    
    
    
    
    
    // 变量解构赋值
    let [a, b, c] = [1, 2, 3];
    
    let [ , , third] = ["foo", "bar", "baz"];
    console.log(third) // "baz"
    
    let [head, ...tail] = ["1", 2, 3, 4];
    console.log(tail) // [2, 3, 4]
    
    let [bar, foo] = [1];
    console.log(foo) // undefined
    // 右侧必须是数组,严格来说必须是可循环遍历的结构 否则报错
    
    let [x, y, z] = new Set(['a', 'b', 'c']);
    console.log(x);
    
    let [xx = 1] = [2]
    console.log(xx) //2
    // 因为x能取到值2 所以不会变为默认值
    
    
    
    
    
    // 字符串扩展
    let str = 'foo'
    let arr = ['f', 'o', 'o']
    for (let codePoint of str) {
       console.log(codePoint)
    }
    for (let i in str) {
        console.log(str[i])
     }
    arr.forEach((el, index) => {
        console.log(el);
    });
    let mapfor = arr.map((val, index)=>{ //map返回新数组
        console.log(val)
    })
    
    let json = {
        "a": 1,
        "b": 2
    }
    let jsonstr = JSON.stringify(json);
    let jsonjson = JSON.parse(jsonstr) 
    console.log(jsonstr);
    console.log(jsonjson);
    
    // 模板字符串
    let name = "Bob", time = "today";// let [name, time] = ["Bob", "today"]
    console.log(`Hello ${name}, how are you ${time}?`)
    let strxx = 1, strxy = 2
    console.log(`${strxx + strxy}`)
    let funcstr = (n) => `${n + 1}`;
    console.log(funcstr(10));
    
    let strval0 = ['1', '2', '3']
    let strval1 = 4
    let strval2 = '5'
    function strval(arr, ...value){
        console.log(arr);
        console.log(value);
    }
    strval(strval0, strval1, strval2)
    
    // 字符串新增方法
    // includes()：返回布尔值，表示是否找到了参数字符串。
    // startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
    // endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部
    let html1 = '尊敬的乡村父老，大家好'
    let arr1 = ['1', '22', '333']
    console.log(html1.includes('大家好'));console.log(arr1.includes('1'));
    console.log(html1.startsWith('尊'));//console.log(arr1.startsWith(['1'])); 数组报错
    console.log(html1.endsWith('大家好'));//console.log(arr1.includes('333')); 数组报错
        // 去掉空格
    let strim = '  123   '
    console.log(strim.trim());
    console.log(strim.trimStart())
    console.log(strim.trimEnd())