ECMAScript

JS简介

核心ECMAScript

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 操作符
  • 对象

文档对象模型DOM


Document Object Model 是针对XML和HTML的应用程序编程接口(Aplication Programming Iterface).

DOM把整个页面映射成一个多层节点。开发人员可以根据API文档接口删除,添加,修改,替换任意节点。

浏览器对象模型BOM

BOM的核心对象是window,它表示浏览器的一个实例,它也是ECMAScript规定的Globle对象,也就是说网页中任何一个对象都是在window这个对象里面的。如果有用到框架(frameset),那么每个框架都有自己的window对象.所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员全局变量是 window 对象的属性,局函数是 window 对象的方法甚至 HTML DOM 的 document 也是 window 对象的属性之一.

window对象中的属性方法可以不使用window.XXX的形式,而直接使用方法名即可

location对象

提供了与当前窗口中加载的文档有关的信息,还有一些导航功能,值得注意的是location既是window对象的属性,又是document对象的属性,既window.location和document.location 引用的是同一个对象

window.location = "http://www.666.com";    //页面跳转到该网址
location.href = "http://www.666.com";      //页面跳转到该网址
location.assign("http://www.666.com");     //页面跳转到该网址

前两种方法其实底层也是调用了location.assign(),即三者结果是一样的。注:这三种方法跳转之后可以通过后退按钮返回到跳转之前的页面。

location.replace("http://www.666.com");   //页面跳转到该网址,跳转之后不可返回前一页面

该对象里面保存着浏览器的各种信息,判断浏览器的各种信息就是从该对象里的属性来读取

image-20210227100138503

history对象

该对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。出于安全考虑,开发人员不能知道用户浏览过的网址的具体url,但是我们可以通过下面方法在不知道具体历史url的情况下控制用户页面前进或后退。

history.go(-1);   //页面后退一页
history.go(1);    //页面前进一页

history.go("666");   //跳转到距当前页面最近的包含666字符串的页面,可能前进可能后退。

//下面这两个方法对应history.go()的前进和后退。
history.back(1);  //后退一页
history.forward(1)  //前进一页

JS弹窗

警告框

aler("kkkkkkk")
//或者
windw.alert("kkkkk");

确认框

确认框通常用于验证是否接受用户操作
当确认卡弹出时,用户可以点击 “确认” 或者 “取消” 来确定用户操作
当你点击 “确认”, 确认框返回 true, 如果点击 “取消”, 确认框返回 false。

window.confirm("sometext");//window.confirm() 方法可以不带上window对象,直接使用confirm()方法。
var r=confirm("按下按钮");
if (r==true){
    x="你按下了\"确定\"按钮!";
}else{
    x="你按下了\"取消\"按钮!";
}

提示框

提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

window.prompt("sometext","defaultvalue");//window.prompt() 方法可以不带上window对象,直接使用prompt()方法。
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){
    x="你好 " + person + "! 今天感觉如何?";
    console.log(x);
}

Browse Object Model

  • 弹出新浏览器框口的功能

  • 移动,缩放,关闭浏览器窗口的功能

  • 提供浏览器详细信息的navigator对象

    bom_navigat

  • 提供浏览器所加载页面的详细信息的location对象

    bom_loactin

  • 提供用户显示部分分辨率详细信息的screen对象

    bom_screen

  • 对cookies的支持

数据类型

每一种数据类型,即是构造函数,又同时有自身的静态方法。

用typeof操作符判断后,返回的都是对应类型的小写的字符串

1. undefined

2. null

3. Boolean

4. Number

5. String

6. Object

引用类型

1. Object类型

静态方法和属性

assign()
/*
将sourse对象的 值 赋值给目标对象,两者都有的会覆盖,target独有会保留,sourse独有会添加.
Object.assign({}, obj);
Object.assign(obj1,obj2,obj3);
注意:目标对象自身也会被改变
针对深拷贝,需要使用其他方法,因为 Object.assign()拷贝的是属性值,假如源对象的属性值是一个指向对象的引用,它也只拷贝那个引用值
*/
create()
/*
这个方法用于创建一个新对象。被创建的对象继承另一个对象的原型,在创建新对象时可以指定一些属性
 Object.create(proto[,propertiesObject]) 
     proto: 对象,要继承的原型 
     propertiesObject: 对象,可选参数,为新创建的对象指定属性对象
     其值为:
     	configurable 表示新创建的对象是否是可配置的,即对象的属性是否可以被删除或修改,默认false
		enumerable	对象属性是否可枚举的,即是否可以枚举,默认false
		writable	对象是否可写,是否可以为对象添加新属性,默认false
		get	对象getter函数,默认undefined
		set	对象setter函数,默认undefined
*/
defineProperty()
/*
方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。如果不指定configurable, writable, enumerable ,则这些属性默认值为false,如果不指定value, get, set,则这些属性默认值为undefined
Object.defineProperty(obj, prop, descriptor)
    obj: 需要被操作的目标对象
    prop: 目标对象需要定义或修改的属性的名称
    descriptor: 将被定义或修改的属性的描述符
*/
defineProperties()
/*
方法直接在一个对象上定义一个或多个新的属性或修改现有属性,并返回该对象。
Object.defineProperties(obj, props)
    obj: 将要被添加属性或修改属性的对象
    props: 该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置
var obj = new Object();
Object.defineProperties(obj, {
    name: {
        value: '张三',
        configurable: false,
        writable: true,
        enumerable: true
    },
    age: {
        value: 18,
        configurable: true
    }
})
*/
getOwnPropertyNames()
/*

*/
getOwnPropertyDescriptor()
/*
该方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)
Object.getOwnPropertyDescriptor(obj, prop)
    obj: 需要查找的目标对象
    prop: 目标对象内属性名称
*/
getOwnPropertyDescriptors()
/*
所指定对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。
Object.getOwnPropertyDescriptors(obj)
*/
getOwnPropertySymbols()
/*
返回对象中自有Symbol属性,原型链上属性不会被获取
Object.getOwnPropertySymbols(object)
*/
entries()
/*
Object.entries() 方法返回一个给定对象"自身"可枚举属性的键值对数组,其排列与使用 for…in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。
返回值类型: [ ['foo', 'bar'], ['baz', 42] ]

将Object转换为Map
new Map() 构造函数接受一个可迭代的entries。借助Object.entries方法你可以很容易的将Object转换为Map:
    var obj = { foo: "bar", baz: 42 }; 
    var map = new Map(Object.entries(obj));
    console.log(map); // Map { foo: "bar", baz: 42 }
*/
fromEntries()
/*
ES10的语法
object.entries() 转换一个object为array。但是,如果你想做相反的事情怎么办?不用再想了! 使用 Object.fromEntries() 来把array转换为object。

const keyValuePair = [
  ['cow', 'val1'],
  ['pig', 'val2'],
];
Object.fromEntries(keyValuePair);
// { cow: 'val1', pig: 'val2' }
*/
freeze()
/*
冻结一个对象,表示该对象的属性不可再被修改
Object.freeze(obj)
*/
getPrototypeOf()
is()
/*
判断两个对象的值是否相等,类似于  == 
Object.is(obj1, obj2)
*/
isExtensible()
/*
用于检测是否可以向对象中添加属性
Object.isExtensible(object)
*/
isFrozen()
seal()
/*
密封一个对象:
    阻止添加新属性;
    现有属性变得non-configurable.
  当configurable设为false时,
      1、不可以通过delete去删除该属性从而重新定义属性;
      2、不可以转化为访问器属性;
      3、configurable和enumerable不可被修改;
      4、writable可单向修改为false,但不可以由false改为true;
      5、value是否可修改根据writable而定。
      
因此,被封的对象仍可能可以修改对象的属性值
*/
isSealed()
/*
用于检测指定对象是否为一个密封的状态
密封的对象特点:
    1.对象被密封后,不能添加新的属性和方法
    2.对象被密封后,已有属性不可删除
    3.对象被密封后,对象中的属性不可以重新配置,例;原属性可修改,我们就可继续对其修改,如果原属性配置为只读,则现在不可以对其修改

Object.isSealed(object)
*/
keys
length
name
preventExtensions
prototype
seal
setPrototypeOf
values
apply
arguments
bind
call
caller
constructor
toString
hasOwnProperty
isPrototypeOf
propertyIsEnumerable
toLocalString
valueOf

2. Array类型

创建数组

new Array();
new Array(size);
new Array(element0, element1, ..., elementn);

静态方法

image-20210227135401937

from()
/*
将一个类数组对象或者可遍历对象转换成一个真正的数组
要将一个类数组对象转换为一个真正的数组,必须具备以下条件:
	1、该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。
  2、该类数组对象的属性名必须为数值型或字符串型的数字
  ps: 该类数组对象的属性名可以加引号,也可以不加引号
*/
isArray()

对象方法

concat()

连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本

var a = [1,2,3];
var b = a.concat(4,5);
var c = a.concat(4,5,[6,7],8,"123");

console.log(a);  //[1, 2, 3]
console.log(b);  //[1, 2, 3, 4, 5]
console.log(c);  //[1, 2, 3, 4, 5, 6, 7, 8, "123"]

join()

把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的

arrayObject.join(separator)

参数代表分隔符,是可选的,默认为半角逗号。注意返回值是字符串,不是数组。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

console.log(arr);  //["George", "John", "Thomas"]
console.log(arr.join());  //"George,John,Thomas"
console.log(arr.join(" & "));  //"George & John & Thomas"

pop()

删除并返回数组的最后一个元素(删除数组的最后一个元素,把数组长度减 1)

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

console.log(arr);        //["George", "John", "Thomas"]
console.log(arr.pop());  //"Thomas"
console.log(arr);        //["George", "John"]
console.log(arr.pop());  //"John"
console.log(arr);        //["George"]
console.log(arr.pop());  //"George"
console.log(arr);        //[]
console.log(arr.pop());  //undefined
console.log(arr);        //[]

push()

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度,也就是添加元素后的数组长度。

arrayObject.push(newelement1, newelement2, …., newelementX)

push()方法最少要有一个参数。push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

注意:push()方法中的参数不管是什么类型(数组、对象等),一个参数将会被作为一个整体元素插入 arrayObject 的尾部,不做拆分.

var a = ["a","b"];
var b = {
  name: "Tom"
};
var c = [1,2,3];
console.log(a);
console.log(a.push(b));
console.log(a);
console.log(a.push(c));
console.log(a);
/********* Output *********/
["a", "b"]
3
["a", "b", [object Object] {
  name: "Tom"
}]
4
["a", "b", [object Object] {
  name: "Tom"
}, [1, 2, 3]]

shift()

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值

如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。请注意,该方法不创建新数组,而是直接修改原有的数组

shift() 方法通常比 pop() 方法要慢很多,因为从入口弹出去,后面的位置需要向前移动

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

console.log(arr);          //["George", "John", "Thomas"]
console.log(arr.shift());  //"George"
console.log(arr);          //["John", "Thomas"]
console.log(arr.shift());  //"John"
console.log(arr);          //["Thomas"]
console.log(arr.shift());  //"Thomas"
console.log(arr);          //[]
console.log(arr.shift());  //undefined

unshift()

向数组中入数据

reverse()

reverse() 方法用于颠倒数组中元素的顺序。

注意:该方法会改变原来的数组,而不会创建新的数组。

reverse()是sort()的逆序版

var a = ["a","b","c"];
var b = ["你","我","他"];
var c = [1,2,3];
var d = ["a","b","c",1,2,3,"你","我","他"];

console.log(a.reverse());  //["c", "b", "a"]
console.log(b.reverse());  //["他", "我", "你"]
console.log(c.reverse());  //[3, 2, 1]
console.log(d.reverse());  //["他", "我", "你", 3, 2, 1, "c", "b", "a"]

sort()

sort() 方法用于对数组的元素进行排序(从小到大)。

arrayObject.sort(sortby)

请注意,数组在原数组上进行排序,不生成副本。参数sortby是可选的,是自定义的函数,规定排序方法。

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

  • 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
  • 若 a 等于 b,则返回 0。
  • 若 a 大于 b,则返回一个大于 0 的值。
var arr = new Array(6);
arr[0] = "10";
arr[1] = "5";
arr[2] = "40";
arr[3] = "25";
arr[4] = "1000";
arr[5] = "1";
function sortNumber(a,b){
  return a - b;
}
console.log(arr);  //["10", "5", "40", "25", "1000", "1"]
console.log(arr.sort());  //["1", "10", "1000", "25", "40", "5"]
console.log(arr.sort(sortNumber));  //["1", "5", "10", "25", "40", "1000"]

slice()

slice() 方法可从已有的数组中返回选定的元素。

arrayObject.slice(start, end)

参数start是必需的,规定从何处开始选取,如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

参数end是可选的,规定从何处结束选取,该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

注意,该方法并不会修改数组,方法会返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

请注意slice()和splice()的区别:slice意思是切片,即把数组切出来一段;splice意思是绞接,就像我们平时接两根绳子一样,需要把原来的绳子切下来一段,然后再和新绳子接在一起。如果想删除数组中的一段元素,并向数组添加新元素,应该使用方法 Array.splice()。

在使用slice()时,如果参数start超过了数组的起点,则会从数组头部开始;如果参数end超过了数组的结尾,则会从数组的尾部结束;如果start和end中的范围不在数组中,或者end小于start,则会返回空数组;如果start和end不为数字,则会进行转换,转换失败的话,start默认为0,end默认为0。

var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";

console.log(arr); //["George", "John", "Thomas", "James", "Adrew", "Martin"]
console.log(arr.slice(2,4));      //["Thomas", "James"]
console.log(arr.slice(-3,4));     //["James"]
console.log(arr.slice(-10,4));    //["George", "John", "Thomas", "James"]
console.log(arr.slice(-10,-4));   //["George", "John"]
console.log(arr.slice(4,3));      //[]
console.log(arr.slice(-20,-10));  //[]
console.log(arr.slice("2","4"));  //["Thomas", "James"]
console.log(arr.slice("a","4"));  //["George", "John", "Thomas", "James"]
console.log(arr.slice("a","b"));  //[]
console.log(arr.slice("2a","4a"));//[]
console.log(arr.slice("",""));    //[]

splice()

splice() 方法用于插入、删除或替换数组的元素。

arrayObject.splice(index, howmany, element1, ….., elementX)

参数index是必需的。规定从何处添加/删除元素,该参数是开始(包含)插入和(或)删除的数组元素的下标,必须是数字。

参数howmany是必需的。规定应该删除多少元素。必须是数字,但可以是 “0″。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。

参数element1…elementX是可选的。规定要添加到数组的新元素,从 index 所指的下标处开始插入。

splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。splice()会直接对原数组进行修改。

注意如果参数index不为数字,则会自动转换

var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";

console.log(arr);  //["George", "John", "Thomas", "James", "Adrew", "Martin"]
console.log(arr.splice(2,1));  //["Thomas"]
console.log(arr);  //["George", "John", "James", "Adrew", "Martin"]
console.log(arr.splice(2,2,"William"));  //["James", "Adrew"]
console.log(arr);  //["George", "John", "William", "Martin"]
console.log(arr.splice(2,1,"Tom","Jerry"));  //["William"]
console.log(arr);  //["George", "John", "Tom", "Jerry", "Martin"]
console.log(arr.splice(2));  //["Tom", "Jerry", "Martin"]
console.log(arr);  //["George", "John"]
console.log(arr.splice("2"));  //[]
console.log(arr);  //["George", "John"]
console.log(arr.splice("a"));  //["George", "John"]
console.log(arr);  //[]

toString()

toString() 方法可把数组转换为字符串,并返回结果。

Array.toString() 相当于 Array.join() ,返回值与没有参数的 join() 方法返回的字符串相同。

注意:

改变原数组的方法:pop()、push()、reverse()、shift()、sort()、splice()、unshift()

不改变原数组的方法:concat()、join()、slice()、toString()

forEach()

方法为每个数组元素调用一次函数(回调函数)

该函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

map()

map() 方法通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值的数组元素执行函数。

map() 方法不会更改原始数组。

该函数有 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

filter()

filter() 方法创建一个包含通过测试的数组元素的新数组。

此函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

reduce()

reduce() 方法在每个数组元素上运行函数,以生成(减少它)单个值。

reduce() 方法在数组中从左到右工作。另请参见 reduceRight()。

reduce() 方法不会减少原始数组。

此函数接受 4 个参数:

  • 总数(初始值/先前返回的值)
  • 项目值
  • 项目索引
  • 数组本身
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}
//例如
var aa = [1,2,3,4,5];
aa.reduce((total, value, index, array)=>{
    console.log({"total":total, "value":value, "index":index});
    console.log(array);
    return total + value;
});
//结果
/*
{total: 1, value: 2, index: 1}
{total: 3, value: 3, index: 2}
{total: 6, value: 4, index: 3}
{total: 10, value: 5, index: 4}
可以发现一共只打印了四次,并且打印的脚标是从1开始的
说明默认的total就是数组脚标0的值。
*/

every()

every() 方法检查所有数组值是否通过测试,返回true/false

此函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身
//检查所有数组值是否大于 18
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

some()

some() 方法检查某些数组值是否通过了测试,返回true/false

此函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

find()

find() 方法返回通过测试函数的第一个数组元素的值.

此函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

findIndex()

返回通过测试函数的第一个数组元素的索引

此函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

indexOf()

array.indexOf(item, start)
/*
item	必需。要检索的项目。
start	可选。从哪里开始搜索。负值将从结尾开始的给定位置开始,并搜索到结尾。
如果未找到项目,Array.indexOf() 返回 -1。

如果项目多次出现,则返回第一次出现的位置。
*/

lastIndexOf()

Date类型

创建对象

var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

对象属性

constructor	返回对创建此对象的 Date 函数的引用。
prototype	使您有能力向对象添加属性和方法。

进阶内容

constructor

对创建对象的函数的引用(指针)。对于Object对象,该指针指向原始的Object()函数。

prototype

对该对象的对象原型的引用。对于所有的对象,它默认返回Object对象的一个实例。

构造函数有prototype属性及每个类型特有的属性
对象有_proto_属性,返回当前对象的原型对象(即用new关键字创建的对象)。
原型对象上的属性,所有已创建及未创建的对象都可以访问。

obj._proto_ === Object.prototype   // true

关注点

sessionStorage、localStorage和cookie的区别

共同点:都是保存在浏览器端、且同源的
区别:
1、cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下
2、存储大小限制也不同,cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
3、数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭
4、作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的
5、web Storage支持事件通知机制,可以将数据更新的通知发送给监听者
6、web Storage的api接口使用更方便

事件防抖

  1. 定时任务方式

  2. 元素添加class标志方式

ES6

Set

let set= new Set();
set.add(1);
set.add('1');
console.log(set.size);//2 

Set内部使用Object.is()方法来判断两个数据项是否相等,唯一不同的是+0和-0在Set中被判断为是相等的。

同时可以使用数组来构造Set,或者说具有迭代器的对象都可以用来构造Set,并且Set构造器会确保不会存在重复的数据项:

let set = new Set([1,2,3,3,3,3]);
console.log(set.size);//3

可以使用has()方法来判断某个值是否存在于Set中:

let set = new Set([1,2,3,3,3,3]);
console.log(set.has(5)); //false

使用delete()方法从Set中删除某个值,或者使用clear()方法从Set中删除所有值:

let set = new Set([1,2,3,3,3,3]);
console.log(set.size);//3
console.log(set.has(5)); //false

set.delete(1);

console.log(set.has(1)); //false
console.log(set.size); //2

可以使用forEach方法来遍历Set中的数据项,该方法传入一个回调函数callback,还可以传入一个this,用于回调函数之中:

回调函数callback中有三个参数:

  1. 元素值;
  2. 元素索引;
  3. 将要遍历的对象;
let set = new Set([1,2,3,3,3,3]);
 set.forEach(function (value,key,ownerSet) {
     console.log(value);
     console.log(key);           
 })

Set中的value和key是相同的,这是为了让Set的forEach方法和数组以及Map的forEach方法保持一致,都具有三个参数。

Map

ES6中提供了Map数据结构,能够存放键值对,其中,键的去重是通过Object.is()方法进行比较,键的数据类型可以是基本类型数据也可以是对象,而值也可以是任意类型数据。

 let map = new Map();
//给map添加值
 map.set('title','hello world');
 map.set('year','2018');
 
 console.log(map.size); //2
//取map中的数据
 console.log(map.get('title')); // hello world

/*
has(),delete()以及clear()方法
*/

Map的forEach方法

与Set一样,Map也拥有forEach方法,该方法也接收一个回调函数,该回调函数有三个参数:

  1. 键值对的键;
  2. 键值对的值;
  3. 当前Map对象引用;
 let map = new Map([['title','hello world'],['year','2018']]);
 map.forEach((value,key,ownerMap)=>{
     console.log(value);
     console.log(key);
 });
 //
 hello world
 title
 2018
 year
posted @ 2021-04-07 14:34  依梦维马  阅读(348)  评论(0)    收藏  举报