ES6基本语法

最新推荐文章于 2024-10-16 16:26:58 发布
最新推荐文章于 2024-10-16 16:26:58 发布
阅读量72 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000012755430
版权

ES6基本语法

1、let

（1）、let作用域只限于当前代码块

{
    let a = 12;
}
console.log(a);   //报错，a不存在

(2)、let声明的变量作用域不会被提升

{
    console.log(a);  //报错
    let a = 12;
}

（3）、在相同的作用域下不能声明相同的变量

 {
   let a = 10;
   let a = 11;  //报错    
 }

（4）、for循环体现let的父子作用域

    //使用var声明，需要用到“闭包”
    var btns = document.querySelectorAll("button");
      for(var i=0;i<btns.length;i++){
      （function(i){
           btns[i].onclick= function (){
            alert("点击了"+i+"个按钮")
          }
      })(i);
    }
    
    //let声明
     let btns = document.querySelectorAll("button");
      for(let i=0;i<btns.length;i++){
          btns[i].onclick= function (){
            alert("点击了"+i+"个按钮")
          }
      }

2、const
(1)、const作用域只限于当前代码块
(2)、const声明的变量作用域不会被提升
(3)、在相同的作用域下不能重复声明
(4)、声明的同时必须赋值，声明后值无法改变

{   
    const b; //报错
    
    const a = 123;
    a = 222; //报错
    
}
注意：针对"对象"就不一样了，如下： 
{
    const obj = {
        name:"lisi"
     }
    console.log(obj.name); //lisi
    
    obj.name = "zhaoliu";
    console.log(obj.name);//zhaoliu
}
//在上面中定义的是一个常量对象，对象是储存在内存的“堆区”，通过一个地址描述出来，在“栈区”关联此地址。所以，obj存储的是地址，而不是值，是可以做修改的。

3、解构赋值

ES6允许按照一定的模式从数组和对象中提取值，对变量进行赋值，这被称为解构。

（1）、基本用法

//新的定义方法
let  [name,age,sex] = ["李四",20,"女"];

//以前的定义方法
let name = "李四";
let age = 20;
let sex = "女"

(2)、对象的解构赋值

  //前面的key值和后面的key值相对应的
  let {name,age,friends} = {name:"zhangsan",age:12,friends:["lulu","女"]};
  console.log(name); //zhangsan

(3)、嵌套数组的解构赋值

//只要一一对应就可以
let [a1,[a2,a3,[a4,a5]]] = [1,[2,3,[4,5]]];
console.log(a1,a2,a3,a4,a5);  //1，2，3，4，5

（4）、字符串的解构赋值

let [a,b,c,d,e] = "我是中国人";
console.log(a);   //我
console.log(b);   //是
console.log(c);   //中
console.log(d);   //国
console.log(e);   //人

（5）、空缺变量

let [a,b,,e]=['a','b',[1,2],4]

(6)、多余变量

let [a,b,,e,f]=['a','b',[3,4],5]
注意：因为字符串有构造器，所以可以解析出来。

4、数据集合: set

（1）、特点

① 类似于数组，但没有重复的元素（唯一的）;
② 开发中用于去除重复数据;
③ key和value都是相等的;

let set = new Set(['zhangsan','zhangsan','lisi','wangwu']);
    console.log(set);  // zhangsan ,lisi ,wangwu

（2）、一个属性

let set = new Set(['zhangsan','zhangsan','lisi','wangwu']);
console.log(set.size);   // 3

（3）、四个方法

① add方法：

vlet set = new Set(["zhangsan","lisi"]);
console.log(set); // {"zhangsan", "lisi"}
set.add("wangwu");
console.log(set); // {"zhangsan", "lisi", "wangwu"}

②delete方法：

let set = new Set(["zhangsan","lisi"]);
//直接将删除的值传进去即可
set.delete("lisi");
console.log(set); //{"zhangsan"}

③has方法：

let set = new Set(["zhangsan","lisi"]);
console.log(set.has("lisi"));  //true

④clear方法：

let set = new Set(["zhangsan","lisi"]);
set.clear(); // 此时set为空了

5、数据集合：map

(1)、特点

① 类似于对象，本质上是键值对的集合;
② "键"不局限于字符串，各种类型的值（包括对象）都可以当做键;
③ 对象"字符串——值",Map"值——值",是一种更完善的hash结构实现;

  //创建map
  let obj1 = {a:1}, obj2 ={b:2};
  const map = new Map([
    ['name','张雪'],
    ["age",21],
    ["sex",'男'],
    [obj1,"haha"],
    [obj2,'wowo']
  ]);
  console.log(map);   //{"name" => "张雪", "age" => 21, "sex" => "男", Object => "haha",Object => "wowo"}

结果如图所示：
图片描述

(2)、一个属性

const map = new Map([
    ['name','张雪'],
    ["age",21],
    ["age",21],
    ["sex",'男']
]);
console.log(map.size); //3

(3)、五个方法

① get/set方法：

    const map = new Map([
        ['name','张雪'],
        ["age",21],
        ["age",21],
        ["sex",'男']
    ]);
    console.log(map.get("name")); // "张雪"
    map.set("A","aa");
    console.log(map.get("A")); // aa

② delete方法：

    map.delete("age");
    console.log(map); // {"name" => "张雪", "sex" => "男", "A" => "aa"}

③ has方法：

    console.log(map.has("sex"));  //true

④clear方法：

    map.clear();
    console.log(map); //map为空

⑤keys、values、entries

    map.keys();  //  {"name", "age", "sex"}
    map.values();  //  {"张雪", 21, "男"}
    map.entries();  // {"name" => "张雪", "age" => 21, "sex" => "男"}

⑥遍历

    map.forEach(function(value,key){
      console.log(key +":"+value);
    });//name:张雪   age:21   sex:男
注意： 
const map = new Map([
    ['name','张雪'],
    ["age",21],
    ["age",21],
    ["sex",'男']
]);
//因为对象存储在堆区，存在的地址是不同的，所以一下两个都会被set进map中。
map.set({},"hehe");
map.set({},"qq");
console.log(map); // {"name" => "张雪", "age" => 21, "sex" => "男", Object => "hehe", Object => "qq"}

6、Symbol

(1)、应用场景：

  ES5的对象属性名都是字符串，容易造成属性名冲突；ES6 引入新的原始数据类型Symbol，表示独一无二的值。

（2）、对象的属性名两种形式

①字符串

②symbol类型（独一无二，不会与其他属性冲突）

    //定义一个symbol
    let str1 = Symbol();
    let str2 = Symbol();
    console.log(str1 === str2); //false
    console.log(typeof(str1)); //Symbol
    
    
    //symbol主要用于对象属性的定义，且定义的属性是唯一的
    const obj = {};
    obj[Symbol("name")]="zhangsan";
    obj[Symbol("name")]="lisi"
    console.log(obj);//{Symbol(name): "zhangsan", Symbol(name): "lisi"}

7、class
（1）、ES6中新增的语法糖，作用在于让对象原型的写法更加清晰，更像面向对象的编程方式。也是构造函数的另一种写法。

  //构造函数写法
  function Person(name,age){
    this.name = name;
    this.age = age;

  }
  Person.prototype = {
    constructor:Person,
    print(){
      console.log("我叫"+this.name+",今年"+this.age+"岁")
    }
  }
  let person = new Person("张三",12);
  person.print(); //我叫张三，今年12岁
  
  
  
  // class面向对象
  class Person{
    constructor(name,age){
      this.name = name;
      this.age = age;
    }
    print(){
      console.log("我叫"+this.name+",今年"+this.age+"岁")
    }
  }
  let person = new Person("张三",12);
  person.print();//我叫张三，今年12岁

8、模板字符串

模板字符串在Vue.js中使用的比较多的。使用 `` 符号，这样可实现代买的格式化。 
let str = "你好！";
let className = "red";
let html = `<html>
              <head>今天天气很好！</head>
              <p class="${className}"> ${str} </p>   //这里使用${}的形式调用变量
           </html>`
console.log(html);

9、数组的扩展
（1）、Array.from

let list = document.querySelectorAll("li")
   console.log(Array.isArray(list));  //false
   Array.from(list);  //将非数组list转为数组
   console.log(Array.isArray(Array.from(list))); //true

（2）、Array.of

 Array.of(1,2,3,4); //将零散元素转为数组
 console.log(Array.isArray(Array.of(1, 2, 3, 4)));  //true

10、对象的扩展
(1)、

  let obj = {
    "name":"lisi",
    "age":12
  }
  console.log(obj);  //{name: "lisi", age: 12}

(2)、ES6中key和value一样时，直接写一个即可。

  //这种写法等同于下面的方法，常用下面的方法
  let name = "zhangsan"
  let age = 12
  let obj = {
    "name":name,
    "age":age
  }
  console.log(obj);

  //方法同上 
  let name = "zhangsan"
  let age = 12
  let obj = {
    name,
    age
  }
  console.log(obj);

(3)、assign用法：

    let obj1 = {name:"lisi"};
    let obj2 ={age:21};
    let obj = {};
    Object.assign(obj,obj1,obj2);//将obj1,obj2合并到obj上。
    console.log(obj);//{name: "lisi", age: 21}

(4)、延展操作符

  let str = "张三";
  let strArr =[...str];
  console.log(Array.isArray(strArr));  //true
主要用于数据传递和数组去重。 
  let myArr = [1,2,10,"zhangsan",20,2,1];
  console.log(new Set(myArr));//根据set唯一性去重
  let newArr = [...new Set(myArr); //将set转为array
  console.log(Array.isArray([...new Set(myArr)])); //true

10、函数扩展

（1）、形参设置默认值

    //ES6中，直接将的形参设置默值
   function sum(num1 = 10,num2 = 10){
     console.log(num1 + num2);
   }
   sum();   //20
   sum(1,3);  //4

（2）、参数形式

 //在不清楚元个数时，使用延展操作符代替
 function sum(name,...nums){
   console.log(name)
   let result = 0;
   for(let value of nums){
     result += value
   }
   return result;
 }

console.log(sum("李四",1,45,3,2)); // 李四  51
weixin_34228662
关注
ES6，扩展运算符的用途
weixin_34392843的博客
08-18 448
ES6的扩展运算符可以说是非常使用的，在给多参数函数传参，替代Apply，合并数组，和解构配合进行赋值方面提供了很好的便利性。 扩展运算符就是三个点“...”，就是将实现了Iterator 接口的对象中的每个元素都一个个的迭代并取出来变成单独的被使用。 看这个例子： console.log(...[3, 4, 5]) 结果： 3 4 5 调用其实就是： conso...
for...in遍历对象
世界和我们都不该止步于此
04-12 4070
for..in语句用于对数组或者对象的属性进行循环操作 还有一种相似的循环迭代操作for...of，是ES6新增的，我们在ES6模块做过介绍 我们直接看for..in例子： const obj = { name:'小蜗', age:22, fn:function(){ console.log('你好 for..in') } } for..in遍历： for(let k in obj){ console.log(obj) } 其中里面
JavaScript的解构赋值应用
Mephisto180502的博客
12-18 148
JavaScript对象、数组的赋值
ES6基本全部语法
热门推荐
qq_40322724的博客
02-21 4万+
一,变量声明： let声明变量： 1.变量不可重复声明， let star = '罗志祥' let star = '小猪' 结果报错 2.块级作用域， { let girl = '周扬青' } 在大括号内的都属于作用域内 3.不存在变量提升 4.不影响作用域链 const声明常量： const SCHOOL = ‘学校’;一般习惯把常量全用大写字母 1.一定要赋初始值 2.一般常量使用大写（潜规则） 3.常量值不能修改 4.块级作用域 5.对数组和对象的元素修改，不算对常量的修改，不会报错 变量的结构.
es6基本语法
qq_43180019的博客
12-08 610
1.es6的常用方法 1.合并两个数组的方法 例如： let a=[1,2,3]; let b=[4,5,6] 第一种方法 let c = a.concat(b); 第二种方法 for(let i in b){ 　　a.push(b[i]) } 第三种办法 a.push.apply(a,b); 第四种办法 var newA = [...a,...b];console.log(newA) 2.从JSON里面取值的方法 //例子 let a=[{name:"li",pws:"p1"},{na
ES6基本语法及常用方法
sinat_34896766的博客
03-11 781
reduce是一种数组的归并方法，会对数组进行遍历，reduce函数的第一个参数得到的是迭代计算后的结果。检测数组所有元素是否都满足指定条件，如果是返回true，反之，返回false。检测数组中是否有元素满足指定条件，如果是返回true，反之，返回false。a、求和--如果没有起始值，则上一次值，为数组的第一个元素的值。可以将数组中的值或对象的属性取出，赋值给其他变量。变量少，值多，多出来的值会被忽略掉。创建一个新数组，存放筛选出的满足条件的所有元素，b、求和--如果有起始值，则上一次值，为初始值。
es6基础语法
qq_73270720的博客
06-11 1262
es6基础必备语法
es6常用语法
hkduan的博客
02-06 2540
es6常用语法 1.let const 块级作用域，不能重复声明，没有提升 const常量，引用类型 暂时性死区 2.字符串拼接 两个单引号（反的单引号）拼接字符串 3.解构赋值 对称赋值，更容易理解，一个数组= 另外一个数组，一个对象=另外一个对象 4.展开运算符 … 复制数组方便 var arr1 = [1,2,3,[4,5],[6,7,[8,9]]]; var arr2 = […arr1]; arr2.push(1000); arr1===arr2 // false 5.数据类型 new map
ES6基础语法
qq_53261858的博客
08-20 762
编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：[语言语法] – 语法解析规则、关键字、语句、声明、运算符等。[类型]– 布尔型、数字、字符串、对象等。[原型和继承]内建对象和函数的[标准库] – [JSON]、[Math]、[数组方法]、[对象自省方法]等。ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的[Web API]，这些都
ES6基本语法及新增语法
08-20
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
es6-modules:学习 ES6 JS 语法
06-13
**ES6 模块：JS 语法新纪元** 在 JavaScript 的发展历程中，ES6（ECMAScript 2015）是一个重要的里程碑，引入了许多新的特性，其中模块（Modules）是面向大型复杂项目的一项重要改进。传统的 JavaScript 文件通常...
一文搞懂ES6基本全部语法
m0_53619602的博客
07-28 2632
name'张三'}functionfn(){//this指向是obj对象return()=>{//this指向的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象}}constresFn=fn.call(obj);resFn();...
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
m0_66584716的博客
10-11 1350
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 671
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 570
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
最新发布
源码好优多
10-16 731
请联系我获取更详细的演示视频。
如何使用Python爬虫处理JavaScript动态加载的内容？
Z_suger7的博客
10-11 845
JavaScript动态加载的内容为爬虫带来了挑战，但也提供了新的机遇。通过使用Selenium、分析API请求或Pyppeteer，我们可以有效地爬取这些动态内容。这些方法各有优势，Selenium适合模拟复杂的用户交互，API请求适合直接获取数据，而Pyppeteer则提供了更强大的JavaScript控制能力。在实际应用中，开发者应根据目标网站的特点和需求选择合适的方法。随着技术的不断发展，我们也需要不断学习和适应新的工具和方法，以保持在数据获取领域的竞争力。复制再试一次分享。
JavaScript ES5 & ES6：基本语法与数据类型解析
在JavaScript的数据类型方面，共有六种基本类型：数值（Number）、字符串（String）、布尔值（Boolean）、null、undefined和对象（Object）。其中，数值类型包括整数和浮点数，字符串是由单引号`' '`或双引号`"`包围...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值