ES5常用API

ES5常用API

ES5 即 ECMAScript 5，也称为 ECMAScript 2009ES5

支持情况：ie9+, chrome 19+, safari 5+, firefox 4+, opera 12+

一、严格模式

“严格模式”（strict mode）顾名思义，这种模式使得Javascript在更严格的条件下运行。

1 、设立"严格模式"的目的

①消除JavaScript语法的一些不合理、不严谨之处，减少一些怪异行为;

②消除代码运行的一些不安全之处，保证代码运行的安全；

③ 提高编译器效率，增加运行速度；

④为未来新版本的JavaScript做好铺垫。
进入"严格模式"的标志：“use strict”; 将"use strict"放在函数体的第一行，则整个函数以"严格模式"运行。

2、严格模式规范限制：

1.变量声明必须使用var，否则报错

`//1.变量声明必须使用var，否则报错

'use strict';
a = 123;
console.log( a );

function fn(){
  'use strict';
  b = 456;
  console.log(b);
}
fn();`

2.对不合理的操作显示报错，不再做静默失败处理

//2.对不合理的操作显示报错，不再做静默失败处理
'use strict';
NaN = 123;
var abc = '456';
delete window.abc;
console.log( abc );
abc.length = 4;
console.log( abc.length );

3.禁止对象属性重名（IE）

3.禁止对象属性重名（IE）
'use strict';
var obj = {
    name: '张三',
    age: 24,
    name: '李四'
}
console.log( obj.name );

4.禁止函数参数重名

5.禁止使用以0开头的八进制数字

ES6新的语法标准，八进制以0o来表示，与16进制的0x形成统一的语法格式

'use strict';
var num1 = 017;
var num2 = 0o17;

6.禁止使用with语句(正常模式也不推荐使用with,执行效率低下)

7.强制为eval创建新作用域

eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。

如果参数是一个表达式，eval() 函数将执行表达式。

如果参数是Javascript语句，eval()将执行 Javascript 语句。

严格模式为JavaScript程序创建了第三种作用域：eval作用域

'use strict';
eval('var a = 123;console.log(a)');
console.log( a );//a is not defined

8.arguments不再追踪参数变化

'use strict';
var x = 1;
function fn(x){
  x = 2;
  arguments[0] = 3;
  console.log( x );
}
fn(x);

9.禁止使用arguments.callee

'use strict';
function fn(a,b){
  // console.log( arguments );
  arguments.callee();//callee指向函数自己
}
fn(2,3);
var res = [1,2,3,4].map(function (item){
  return item === 1 ? 1 : arguments.callee(item-1)*item;
});
console.log( res );

10.函数中禁止this指向全局对象window，this变成undefined

'use strict';
console.log( this );
function show(){
  console.log(this);
}
show();

11.函数必须声明在整个脚本或函数层面

'use strict';
if (123) {
  function fn1(){
    console.log(1111);
  }
} else {
  function fn1(){
    console.log(2222);
  }
}
fn1();

12.新增一些保留字，不能使用他们作为标识符命名

implements, interface, let, package, private, protected, public, static, yield…

二、ES5数组扩展

1、查找数组元素的方法

indexOf() 方法返回指定元素在数组中的第一个的索引，不存在则返回 -1
lastIndexOf() 方法返回指定元素在数组中的最后一个的索引，不存在则返回 -1

var arr = [123,456,789,123];
str.indexOf('add') 有返回索引，无返回-1
var result = arr.indexOf(123);
console.log( result );// 0
var result = arr.lastIndexOf(123);
console.log(result);//3

2、 遍历数组

forEach() 方法为每个元素执行对应的方法，无返回值

for (var i = 0, len = arr.length; i < len; i++){
    console.log(arr[i]);
}

forEach() 取出数组中每一个元素，分别执行对应的函数，没有返回值
var res = arr.forEach(function (item,index,array){
    console.log( index,item );
    // return item+1;// 无效
});
console.log(res);// undefined

3、map() 方法对数组的每个元素进行一定操作后，返回一个新的数组

map() 取出数组中每一个元素，分别执行对应的函数，返回一个新数组
var res = arr.map(function (item){
    // return item.toString();
    return item+'';
    // item+'';
});
console.log(res);

4、filter() 方法返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

filter() 过滤数组中的每一个元素，返回新数组
var json = [
    {name:'xm',age:20},
    {name:'xh',age:23},
    {name:'xf',age:17},
    {name:'xw',age:26},
    {name:'xd',age:25}
];
var res = json.filter(function (obj){
    return obj.age >= 18;
});
console.log( res );

5、some() 用于检测数组中的元素是否满足指定条件，有一项满足条件就返回true

6、every() 判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true

7、reduce() 方法都会实现迭代数组的所有项，然后构建一个最终返回的值方法接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。reduce()函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。

reduce() 归并，把数组中所有值合并成一个值
var arr = [1,2,3,4];
var res = arr.reduce(数组元素执行的函数,初始值(可选));

没有初始值的时候：
第一次执行，previous它是数组的第一个元素，current是数组的第二元素
第二次执行，previous它上次执行的返回值，current是数组的第三元素
var res = arr.reduce(function (previous,current,index,array){
    return previous + current;
});
console.log( res );//10

有初始值的时候：
第一次执行，previous是初始值，current是数组的第一个元素
第二次执行，previous上一次的返回值，current是数组的第二个元素
var res = arr.reduce(function (previous,current,index,array){
    return previous + current;
},0);
console.log( res );//20

// 数组去重
var arr1 = [1,2,3,4,3,2,1];
var arr2 = arr1.reduce(function (previous,current){
    previous.indexOf(current) === -1 && previous.push(current);
    return previous;
},[]);
console.log( arr2 );

8、Array.isArray() 方法检查对象是否为数组…

// 判断对象是否为数组
var arr = [1,2,3,4];
console.log( Array.isArray(arr) );//true

三、对象扩展

1、直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象

Object.defineProperty(object, property, descriptor)

object 要在其上定义属性的对象。

property 要定义或修改的属性的名称。

descriptor 将被定义或修改的属性描述符(对象)有以下可选键值：configurable, enumerable, writable, value

2、Object.getOwnPropertyNames(object)

返回指定对象的所有自身属性组成的数组（包括不可枚举属性）

var obj1 = {
    name: '张三',
    age: 25,
    sex: '男'
}
获取对象属性描述符（对象）
var attrs = Object.getOwnPropertyDescriptor(obj1,'age');
console.log( attrs );//{value: 25, writable: true, enumerable: true, configurable: true}
console.log( obj1.age );//25

Object.defineProperty(obj1,'age',{·
    configurable: true,// 是否配置(其他属性配置，删除)
    enumerable: false,// 是否可枚举
    writable: false,// 是否可修改
    value: 25
});

如果configurable已经设置为 false，不能再修改任何属性
Object.defineProperty(obj1,'age',{
    configurable: false,// 是否配置
    enumerable: true,// 是否可枚举
    writable: true,// 是否可修改
    value: 25
});

对象访问器 属性 Getter 和 Setter，ES5 允许使用类似于获取或设置属性的语法来定义对象方法。

get

一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，默认为 undefined。

set

一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。默认为 undefined。

属性描述对象中，不能同时存在writable、value 和 setter 、getter
Object.defineProperty(obj1,'age',{
    configurable: true,
    enumerable: true,
    get(){// 访问属性age的时候，自动执行这个方法 getter
        console.log( 'getter触发。。。' );
        return this._age;// this._age中间变量
    },
    set(val){// 当你修改age属性时触发  setter
        console.log( 'setter触发。。。' );
        this._age = val;// this->obj1
    }
});
obj1.age = 27;
console.log( obj1.age );

//简单的数据双向绑定
<body>
<input type="text" id="ipt">
<p id="txt"></p>

<script>
var data = {// 数据
    msg: '',
    num: 123
}
ipt.oninput = function (){
    data.msg = ipt.value;
}
Object.defineProperty(data,'msg',{
    configurable: true,
    enumerable: true,
    get(){
        return this._msg;
    },
    set(val){
        this._msg = val;
        txt.innerText = val;
        ipt.value = val;
    }
});

</script>
</body>

3、显示声明与隐式声明的区别

var a = 123;
b = 456;

delete window.a;
delete window.b;
console.log(a);
console.log(b);//b is not defined

var attrA = Object.getOwnPropertyDescriptor(window,'a');
var attrB = Object.getOwnPropertyDescriptor(window,'b');
console.log(attrA);//{value: 123, writable: true, enumerable: true, configurable: false}
console.log(attrB);//{value: 456, writable: true, enumerable: true, configurable: true}

区别：
1.如果都在全局，他们都是全局变量
2.如果在函数中，显示声明变量为局部变量，隐式声明为全局变量
3.显示声明变量的configurable默认 false，隐式声明变量的configurable默认true

4、返回指定对象的所有可枚举属性组成的数组Object.keys(object)

var obj1 = {a: 123, b: 456, c: 789};
var obj2 = {7: 123, 3: 456, 13: 789};
console.log( Object.keys(obj1) ); // ["a", "b", "c"]
console.log( Object.keys(obj2) ); // ["3", "7", "13"]

for (var key in obj2){
    console.log(key); // '3'  '7'  '13'
}

5、创建一个新对象，并指定其原型

var obj3 = Object.create(null);// 返回空对象，没有原型
var obj4 = Object.create(obj);// 返回空对象，没有原型
obj4.d = 999;

6、获取对象的原型

console.log( Object.getPrototypeOf(obj4) );// obj

7、添加或更改多个对象属性

Object.defineProperties(object, descriptors)

8、返回对象的属性的描述符

Object.getOwnPropertyDescriptor(object, property)

四、其他扩展

1、string扩展

String.trim() 删除字符串两端的空白字符。
var str = "       Hello World!        ";
console.log( str.trim() ); // 'Hello World!'

2、Date扩展

Date.now() 返回自时间起点到当前的毫秒数

Date.now() 的返回与在 Date 对象上执行 getTime() 的结果相同

console.log( Date.now() ); // 1566646195347
console.log( new Date().getTime() ); // 1566646195347

3、JSON方法

json数据  js对象
var json = [
    {name:'xm',age:23},
    {name:'xm',age:23},
    {name:'xm',age:23},
    {name:'xm',age:23}
];
var obj = {
    name:'xh',
    say: function (){
        console.log('123');
    }
}

json对象
var json1 = {name:'xiaoming',age:24,sex:'男'};
json字符串
var json2 = '{"name":"xiaoming","age":24,"sex":"男"}';
json字符串转对象
json2 = JSON.parse(json2);
json2 = eval('('+json2+')');
console.log( json2 );

json对象转字符串
json1 = JSON.stringify(json1);
console.log(json1);

4、classList对象

可以使用classList对象里面的方法新增、删除、修改及判断节点上的CSS类
classList对象一些很有用的属性方法：

length 类名个数

item(index) 获取类名

add(class1,class2, …) 添加类

remove(class1,class2, …) 删除类

contains(class) 判断类

toggle(class) 反转类

classList对象 
var box = document.querySelector('.box');
box.className += ' blue';
box.className = 'box red blue';

console.log( box.classList );
console.log( box.classList.length );//2
console.log( box.classList.item(1) );// 'red'

box.classList.add('blue','green');//添加类名
box.classList.remove('red','blue');//删除类名

判断类名
if (box.classList.contains('red')) {
    box.style.color = 'red';
} else {
    box.style.color = 'blue';
}

box.classList.toggle('red');