ES6-数组、对象、函数扩展、Symbol

最新推荐文章于 2024-07-19 14:40:55 发布
最新推荐文章于 2024-07-19 14:40:55 发布
阅读量347 收藏 8
点赞数 5
文章标签： es6 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80480494/article/details/137173185
版权
本文详细介绍了JavaScript中的let和const声明、块级作用域、变量解构赋值、字符串模板、数组和对象的扩展、函数参数与箭头函数，以及新增的Symbol数据类型。
摘要由CSDN通过智能技术生成

01- let声明变量

  1. 块级作用域
    var是全局变量，let只作用于块级作用域内
    每一次都是让一个新的i的值没有被释放掉
  2. 不允许重复声明
  3. 变量不提升（声明没有提前）
  4. 暂存性死区
  5. 不与顶层对象挂钩

02-const常量

  1. 常量
  2. 必须初始化，初始化以后就不能修改
  3. 块级
  4. 声明不提升
    暂存性死区
 		const myname="oejid";
        function test(){
            console.log(myname);
            const myname="wpodk";
        }
        test();
        // 地址不能改变
        const myobj ={
            name:"oijoe",
            age:19,
        }
        // myobj="koo";报错
        myobj.name="oiqkdk";//对象的地址不变，对象里面的属性可以改变（栈引用不可变，堆内容可改）

fresze冻结的意思，用于禁止改变myobj里面的内容
        const myobj =Object.freeze({
                    name:"oijoe",
                    age:19,
                });
  1. 不与顶层对象挂钩

03-变量解构赋值

 1.交换数据
        let x=1;
        let y=2;
        [y,x]=[x,y];
 2.获取数据
        let arr1=[1,2,3]
        let [a,b,c]=arr;//a=1,b=2,c=3
        let [,,d]=arr;//z=3
        let arr2=[1,[2,3,4],5,6]
        let [,[e],]=arr;//e=2
        /* let[x=1]=[100];
        console.log(x);//x=100 */
        let obj={
            name:"kerwin",
            age:100,
        }
        //let {name,age}=obj;//这里解构复制左侧的变量名需和要解构的对象属性名一致
        let {age}=obj;
        console.log(age);//age=100
3.外面里面重名情况
        /* let code="AAA";
        let res={
            code:200,
            data:"111"
        }
        let {data,code:co,err="不写返回undefined,否则返回写的内容"}=res;// :重新命名
        console.log(data,co);//111  200 */
        let res={
            code:200,
            data:{
                list:["a","b","c"]
            }
        }
        let {data:{list:[x1,y1,z1]},code:co,err="不写返回undefined,否则返回写的内容"}=res;// :重新命名
        console.log(data,co,err);//111  200
4.常用传参方式
        function getData(){
            let res={
                code:200,
                data:{
                    list:["a","b","c"]
                }   
            }
            test(res);
        }
        function test( {code,data:{list}} ){
            console.log(code,list);
        }
        getData(); 
    </script>

04-字符串模板

 1. 解决换行后内容不连接问题：在换行后面加一个\
        let name="tiechui";
        //1.1在换行后面加一个\(基本不用)
        // let oli="<li>\
        //     <b>"+name+"</b>\
        //     </li>"
  2.原本的""换成``
        let oli=`<li>
             <b>${name}</b>
            </li>`;
  3. 数组中自带映射方法map();
	 ${}的妙用
        function test(){
            return "函数返回结果"
        }
        let arr=["wwpo","owie","oeo"];
        let newlist=arr.map(function(item,index){
            return `<li class="${index===0?'active':''}">
             <b>${item}</b>
             ${test()}
            </li>`
        });
        let oul=document.querySelector("ul");
        // 数组上到页面中会自动转换成字符串，用逗号隔开,用join("")空字符串隔开就没有了
        oul.innerHTML=newlist.join("")

05-字符串扩展

 		let myname="kerwin";
！1.includes函数：判断字符串中是否有指定字符
        console.log(myname.includes("k"));//true
        console.log(myname.includes("en"));//false
        //从指定索引位置开始找，包含该索引
        console.log(myname.includes("e",2));//false
2.startsWith、endsWith函数：判断一个字符串是否以xx开头、结尾
    console.log(myname.startsWith("ker"));//true
    console.log(myname.endsWith("win"));//true
    // 从指定索引位置往前查找，不包括该索引位置
    console.log(myname.endsWith("r",3));//true
3.repeat函数：返回一个新的字符串，表示将原字符重复n次
        console.log(myname.repeat(2.8));//重复两次
        console.log(myname.repeat("4"));//重复4次，自动转换类型

06-数值扩展

0x十六进制、0b二进制、0o八进制
isFinite判断是不是一个有效值
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

07-数组扩展

1…展开

arr1.concat(arr2);连接两个数组

		 1.破掉中括号，复制数组
        let arr=[1,2,3];
        // //1. let arr2=arr.concat();
        // let arr2=[...arr];//只能得到表层数据，如果里面嵌套更复杂的数据是拿不到的
        //2. arr2.pop();
        // console.log(arr,arr2);
         2.快速合并方案
        let arr2=[4,5,6];
        console.log([...arr,...arr2]);//连接arr，arr2两个数组
         3.获取
        let myarr=[1,2,3,4,5,6,7,8];
        let [a,b,...c]=myarr;//这里...只能用到最后一个身上
        console.log(c);//3,4,5,6,7,8

2.Array.form强行转化成一个数组

arguements不是一个真正的数组，不能使用map();过滤filter();等数组方法

function test(){
            console.log(Array.from(arguments));
        }
        test(1,2,3,4);
        let olis=document.querySelectorAll("li")//nodelist没有map，filter，pop等方法
        Array.from(olis).map(function(){
        })

3.Array.of了解）

 // let arr1=Array(3)；let arr1= new Array(3)//创建一个有三个值的空数组
        let arr1=Array(1,2,3)
        // let arr2=Array.of(3)//创建一个数组[3]
        let arr2=Array.of(1,2,3)

4.find findIndex()

let arr=[11,12,23,41,52,36,37]
// let res =arr.find(function(item){
//     return item>13
// })
// console.log(res);//得到大于13的数的值
let res =arr.findIndex(function(item){
    return item>13
})
console.log(res);//得到大于13的数的索引

findLast findIndexLast()与find findIndex()不同的是这两个方法在数组中是从后往前找

5.fill();（了解）

let arr1=new Array(3).fill("lweoe");快速填充数组
let arr1=new Array(3).fill("lweoe",1,2);快速填充数组第一个值

6. flat() 扁平化处理，二维变一维 flatMap()

  let arr=[1,2,3[4,5,6]]; 
  let arr1=arr.flat();//[1,2,3,4,5,6]

在这里插入图片描述

08-对象扩展

1.对象简写

   let name="modulA";
    let obj={
        name,//name:name
        test1(){},//方法简写
        test2(){},
    }

2、对象属性 表达式

		let name="a";
		let obj={
   	 		name:"kerwin",
		}
		console.log(obj);//{name:"kerwin"}
 把外面的变量当做内部属性，用[]
    	let name="a";
   		 	let obj={
        		[name]:"kerwin", //[name+"bc"]:"kerwin",
    		}
    	console.log(obj);//{a:"kerwin"}//{abc:"kerwin"}
     	let name="modulA";
    	let obj={
       	 	name,//name:name
        	[name+"test1"](){},//方法简写
        	[name+"test2"](){},
    	}

3. 扩展运算符

	let obj={
    	name:"kerwin"
	}
	 let obj1={
    ...obj
	}
	obj1.name="tio";//obj1里的改变了obj里面的也会改变 */
	// 合并对象，如果属性同名，后面的会覆盖前面的
	let obj2={
    	age:100
	}
	console.log({...obj,...obj2});

4.object.assign后面的对象往第一个对象填充，属性同名的后面覆盖前面

           obj={}
            let obj1={
                name:"kerwin"
            }
            let obj2={
                age:100
            }
            let obj3={
                name:"tiechui"
            }
            console.log(Object.assign(obj,obj1,obj2,obj3));
            //{obj={name:"tiechui",age:100}}
            //(了解)Object.is判断是否相等===
//console.log(Object.is(5,5));//true
//console.log(Object.is(5,"5"));//false
//console.log(Object.is({},{}));//都不会判断两个对象是否相等
//Object.is(NaN,NaN)//可以判断nan是否相等，===不能

09-函数的扩展

1.参数默认值

        function ajax(url,method="get",async=true){
            console.log(url,method,async);
        }
        ajax("/aaa");//{"/aaa","get",true}传的数据不够，设置默认值的会返回默认值
        // 只有当与之匹配的实参严格等于undefined时成立

2.rest参数 剩余参数

       function test(...data){
           console.log(date);//[1,2,3]
       }
       test(1,2,3)

3.箭头函数：写法简介

        /* let test=()=>{
            return "111"
        } */
 1.如果里面没有别的执行代码，只有return可以更简化：
        let test=()=> "111"
 2.如果返回的是一个对象需要用括号包起来（防止浏览器解析成作用域）
        let test=()=>({
            name:"kerwin",
            age:100
        })
 3.如果只有一个参数 可以省略（）
        let arr=["aa","bb","cc"];
        let newarr=arr.map(item=>`<li>${item}</li>`);
        let newarr1=arr.map((item,index)=>`<li>${item}</li>`);
 4.无法访问arguements，无法new
        let test=()=>{
            // console.log(arguments);
        }
        new test();
        
 5.箭头没有this，this指向父作用域
        let osearch=document.querySelector("#search");
        //setTimeout指向的是window
        osearch.onput=function(){
            // console.log(this);
            let _this=this;//否则指向的是window，输出结果是：发送undefined到后端获取数据
            setTimeout(function(){
                console.log(_this.value);
                console.log(`发送${this.value}到后端获取数据`);
            },1000);
        }
        osearch.onput=function(){
            console.log(this);
            setTimeout(()=>{//箭头函数模糊获取，指向父元素osearch
                console.log(this.value);
                console.log(`发送${this.value}到后端获取数据`);
            },1000);
        }

10-新增数据类型：Symbol

0.独一无二的值
        let s1=Symbol();
        let s2=Symbol();
        console.log(s1==s2);//false
        console.log(s1===s2);//false
1.不能进行运算
2.显示调用toString()
        console.log(s1.toString()+"aaa");
        // 3. 隐式转换boolean
        if(s1){
            console.log("true执行");
        }
4.obj.name=""是修改对象里面属性值的意思，也可以拿到里面的值
        //而obj[name]是增加属性名和值的意思
        let age=Symbol();
        let obj={
            name:"kerwin",
            [age]:100
        }
        console.log(obj.name);//"kerwin"
        let name=Symbol();
        // obj.name="";//错误name是symbol值不能用来修改字符串
        obj[name]="ooo"
        console.log(obj);//结果：obj={ name:"kerwin",[age]:100,[Symbol()]:"ooo"}
 5.可以进行传参，区分对象属性 let age=Symbol("age");
 6. for in遍历,只能遍历字符串等普通属性，Symbol()遍历不出
        for(let i in obj){
            console.log(i);
        }
        // 遍历Symbol();
        console.log(Object.getOwnPropertySymbols(obj));
        // 两者都可遍历：
        Reflect.ownKeys(obj).forEach(item=>{
            console.log(item,obj[item]);
        })
 7.作为常量
        // 用Symbol时，传参只能用VIDEO,AUDIO,IMAGE三个属性，传数字不行
        // const VIDEO=Symbol();
        // const AUDIO=Symbol();
        // const IMAGE=Symbol();
        const VIDEO=1;
        const AUDIO=2;
        const IMAGE=3;
        function play(type){
            switch(type){
                case VIDEO:
                    console.log("视频播放");
                    break;
                case AUDIO:
                    console.log("音频播放");
                    break;
                case IMAGE:
                    console.log("图片播放");
                    break;
            }
        }
        play(1);
2301_80480494
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6数组的扩展详解
12-03
本文主要讲解ES6数组的扩展，包括`Array.from()`方法。 `Array.from()`方法是ES6中新增的一个非常实用的功能，它能够将类数组对象（array-like）或可遍历对象转化为真正的数组。类数组对象通常具有索引和`length`...
learn-es6:学习es6-javascript
03-30
- 可以对数组或对象进行模式匹配并赋值，如 `let [a, b] = [1, 2];` 或 `let { prop1, prop2 } = obj;`，这大大简化了数据提取的代码。 6. **默认参数** - 函数参数可以设置默认值，如 `function func(arg = ...
ES6-practice：实践JavaScript ES6特性
02-18
ES6允许我们从数组或对象中提取值，直接赋值给变量。例如： ```javascript const [a, b] = [1, 2]; // a = 1, b = 2 const {name, age} = {name: 'Alice', age: 25}; // name = 'Alice', age = 25 ``` 6. **...
前端项目-es6-shim.zip
09-02
1. **并非全功能实现**：`es6-shim`只实现了部分ES6特性，并且主要关注全局对象的扩展，对于无法通过全局对象模拟的特性，如`async/await`、`generators`等，它无能为力。 2. **性能影响**：引入垫片库会增加代码...
ES6学习教程之对象的扩展详解
08-30
在ES6中，对象的扩展引入了许多新的特性，极大地增强了JavaScript中对象的处理能力。本文将详细介绍其中的一些关键知识点。 1. **属性的简洁表示法** 在ES6中，对象字面量允许直接使用变量或函数作为属性名和方法...
ES6_字符串的扩展
m0_51181022的博客
07-19 434
本文介绍ES6对字符串的改造和增强。
ES6 对象的扩展（十五）
qq_35876316的博客
07-16 322
特性：在对象字面量中，可以直接使用方法定义，而不需要使用 function 关键字。用法：简化对象中方法的书写。');// 输出：Hello!
ES6 正则的扩展（十九）
qq_35876316的博客
07-19 206
特性：String.prototype.match(), String.prototype.replace(), String.prototype.search(), 和 String.prototype.split() 现在可以接受正则表达式字面量。特性：当设置了 s 修饰符（dotAll）时，点字符（.）可以匹配包括换行符在内的任何字符。特性：正则表达式对象现在有一个 flags 属性，返回正则表达式的修饰符。特性：y 修饰符使正则表达式在搜索时“粘”在每个匹配的开始位置。用法：简化正则表达式的书写。
ES6 字符串的新增方法（二十）
qq_35876316的博客
07-19 294
特性：用另一个字符串填充当前字符串（如果需要的话），以便产生所需长度的新字符串。特性：用另一个字符串填充当前字符串（如果需要的话），以便产生所需长度的新字符串。特性：返回一个码点值的字符串，该码点值位于给定位置的 Unicode 字符。特性：返回一个新字符串，它是原字符串重复指定次数的结果。特性：判断字符串是否以指定的子字符串开始。特性：判断字符串是否以指定的子字符串结束。特性：提供一个模板字符串的原始字符串形式。特性：判断字符串是否包含指定的子字符串。用法：检查字符串的开始部分。用法：左填充字符串。
ES6（四）（箭头函数）
m0_64791593的博客
07-16 387
主要学习了ES6中一种重要的函数的写法：箭头函数
ES6 数组的扩展（十六）
qq_35876316的博客
07-16 304
返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。：创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。：返回数组中满足提供的测试函数的第一个元素的索引，否则返回 -1。：用一个固定值填充数组中从起始索引到终止索引（不包括）的所有元素。：从类数组对象或可迭代对象中创建一个新的数组实例。：找出数组中满足条件的第一个元素的索引。：将数组的一部分复制到数组的另一个位置。：将数组中一段区域的元素替换为特定值。：找出数组中满足条件的第一个元素。：创建一个包含多个参数的数组。
ES6 Symbol （十三）
qq_35876316的博客
07-15 475
内置Symbol：使用 ES6 内置的 Symbol，如 Symbol.iterator 来实现自定义迭代器。创建Symbol：使用 Symbol() 创建一个新的 Symbol 值。作为属性键：使用 Symbol 作为对象属性的键，确保属性的唯一性。
ES6常用功能/新特性
闻人放歌的三寸青草园圃
07-15 284
es6模块化，在浏览器中需要通过webpack/rollup打包。这里我们也可以比较下两者打包结果的区别。查看打包后的代码，webpack有很多自己缝状的辅助函数，而rollup除了定义的amd/umd标准函数外，其他都是自己的逻辑代码。以下例子可以看出es6中class的本质就是js构造函数的语法糖。但是使用class写法，语意更加清晰、简洁。箭头函数可以改变js函数烦人的this指向window问题，将this指向最近一层。promise用来解决js中的callback hell。
ES6 数值的扩展（十八）
qq_35876316的博客
07-18 1200
但是由于这两个二进制数的最低位都是 1，所以这个结果肯定是不正确的，因为根据二进制乘法，计算结果的二进制最低位应该也是 1。这个错误就是因为它们的乘积超过了 2 的 53 次方，JavaScript 无法保存额外的精度，就把低位的值都变成了 0。将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效， Number.isFinite() 对于非数值一律返回 false ,Number.isNaN() 只有对于NaN才返回true ，非 NaN 一律返回 false。我们知道浮点数计算是不精确的。
Web 性能入门指南 - 2.2 理解和改进最大内容绘制 (LCP)
weixin_43303603的博客
07-15 404
最大内容绘制 (LCP) 衡量的是页面上最大视觉元素的渲染时间。为了让 Google 满意，请将 LCP 时间控制在 2 秒以内。
＜Rust＞＜GUI＞rust语言GUI库tauri体验：前、后端结合创建一个窗口并修改其样式
用沸腾的热血，支付我们的人生吧！
07-16 1159
前言 本文是rust语言下的GUI库：tauri来创建一个窗口的简单演示，主要说明一下，使用tauri这个库如何创建GUI以及如何添加部件、如何编写逻辑、如何修改风格等，所以，这也是一个专栏，将包括tauri库的多个方面。 环境配置 系统：windows 平台：visual studio code 语言：rust、javascript、html、css 库：tauri概述 本文是tauri库系列博文的第一篇，主要是简单实现一个窗口程序并成功运行，当然，这是基于官方的示例，事实上官方给出的上手例程非常详细，不
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 57
【代码】博客前端项目学习day03——框架页。
基于 Gunicorn、Flask 和 Docker 的 Web 应用开发
最新发布
2401_85639015的博客
07-19 780
Docker 是一个开源的应用容器引擎，它允许开发者打包他们的应用以及应用的运行环境到一个可移植的容器中。容器可以运行在任何支持 Docker 的机器上，确保了环境的一致性。通过本教程，你将学会如何使用 Docker、Gunicorn 和 Flask 构建一个高效、可扩展的 Web 应用。每个步骤都提供了详细的指导和示例代码，确保你能够理解和实践每个环节。希望本教程能够作为你进入微服务架构领域的起点。
前端性能优化--懒加载
weixin_43799793的博客
07-19 75
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
《ES6标准入门》详解
书中内容包括let和const命令、变量解构赋值、字符串和正则扩展、数值和函数的改进、数组和对象的新特性、Symbol、Set和Map数据结构、Proxy和Reflect、Promise对象、Iterator、Generator、async函数、Class的定义与...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值