js常见基础对象属性方法(一)

js基础对象属性方法

Object.keys()

Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历改对象时返回的顺序一致(两者的主要区别是一个for-in 循环还会枚举器原型链上的属性)

//examples
// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']
// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

require.context

你可以用require.context()来创建自己的上下文。这个函数接受三个参数：

directory：说明需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式
该函数返回一个require函数，包含了3个参数： resolve, keys, id.
resolve 一个返回模块请求的id的函数
keys 一个以数组的形式返回所有模块请求的函数，可以结合 map, foreach, 函数进行批量require();

如果你想引入文件目录下所有符合匹配模式的文件，那么这个方法是很有用的.

// examples: 
function importAll (r) {
  r.keys().forEach(r);
}

importAll(require.context('../components/', true, /\.js$/));

for...of

es6新加的特效，可以循环遍历数组元素;
与 for...in 和Array.forEach()的区别：
1、for...in 是对普通对象的遍历，不仅会遍历数组元素，甚至还会遍历其自定义属性或者原型链上面的属性。
2、forEach() 方法，不能使用 break, 中断循环，也不能用return 语句返回到外层函数。
for...in 可以完美解决上面两个方法的问题。

Object.entries()

该方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用for...in 循环遍历该对象时返回的顺序一致(区别在于for-in 循环也枚举原型链中的属性)

//examples:  
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

// getFoo is property which isn't enumerable
const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
myObj.foo = 'bar';
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]

// non-object argument will be coerced to an object
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}

将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 }

Polyfill

你可以使用下面列出的简易 polyfill。

if (!Object.entries)
  Object.entries = function( obj ){
    var ownProps = Object.keys( obj ),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];
    
    return resArray;
  };

转载：https://segmentfault.com/a/11...

unshift() 方法

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

location.replace()

replace() 方法可用一个新文档取代当前文档。可用于页面跳转。和location.href的区别在于，replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。而后者会在浏览器的历史浏览记录添加一条记录。

location.pathname

pathname 属性是一个可读可写的字符串，可设置或返回当前 URL 的路径部分

//examples
//假设当前的 URL 是: http://example.com:1234/test/test.htm#part2：
document.write(location.pathname);  ///test/test.htm

location.hash

hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。

//examples
//假设当前的 URL 是: http://example.com:1234/test.htm#part2：
document.write(location.hash);//#part2

window.top

该属性返回对一个顶级窗口的只读引用。如果窗口本身就是一个顶级窗口，top 属性存放对窗口自身的引用。如果窗口是一个框架，那么 top 属性引用包含框架的顶层窗口。跳出当前框架

in 运算符

如果指定的属性在指定的对象或其原型链中，则in 运算符返回true。

//examples
// 数组
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
0 in trees        // 返回true
3 in trees        // 返回true
6 in trees        // 返回false
"bay" in trees    // 返回false (必须使用索引号,而不是数组元素的值)

charAt() 方法

charAt() 方法可返回指定位置的字符。字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。

slice(start,end) 方法

slice()方法可从已有的数组中返回选定的元素
参数：start 规定从何处开始选，如果是负数，则从数组尾部开始算位置
end 规定从何处结束所取。该参数是数组片段结束处的数组下标。如果没有指定该参数，则包含从start开始到数组结束的所有元素。
返回值:返回一个新的数组，包含从 start 到 end (部包括该元素)的原数组中的元素。
注意：该方法不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用Array.splice()

Array.splice()方法

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
语法：

arrayObject.splice(index,howmany,item1,.....,itemX)

参数：
index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。

Document.documentElement

会返回文档对象（document）的根元素的只读属性(如Html文档的<html>元素)
与document.body的区别
document.body 会返回 Html 文档中的body节点。即body
注意：在获取浏览器滚动器距离时、窗口大小时，两者在不同浏览器下会有区别。
兼容解决方案。

Js 中双感叹号的作用

!!一般用于将后面的表达式强制转化为布尔类型。js是弱类型语言，所以可以通过双感叹号，将其转化为boolean类型。
布尔类型的转化，js约定的规则为：
1、false、undefined、null、0、""均为false
2、true、1、"string"、[Object] 为true

js substring(start, end)的用法

substring() 方法用于提取字符串中介于两个指定下标之间的字符。substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。
重要事项：与 slice() 和 substr() 方法不同的是，substring() 不接受负的参数。

js substr()的用法

substr(start, length)方法可在字符串中抽取从start下标开始的指定数目的字符。
其中length必须是数值，如果省略该参数，那么返回从字符串的开始位置到结尾的字串。

js random() 方法

Math.random() 方法可返回介于 0 ~ 1 之间的一个随机数。

js round()

Math.round() 方法可把一个数字舍入为最接近的整数
对于 0.5，该方法将进行上舍入。
例如，3.5 将舍入为 4，而 -3.5 将舍入为 -3。

js floor

Math.floor()返回小于或等于一个给定数字的最大整数
Math.floor() === 向下取整

Math.floor( 45.95); 
// 45 
Math.floor( 45.05); 
// 45 
Math.floor( 4 ); 
// 4 
Math.floor(-45.05); 
// -46 
Math.floor(-45.95); 
// -46

js ceil()方法

Math.ceil() 函数返回大于或等于一个给定数字的最小整数。
Math.ceil() === 向上取整

Math.ceil(.95);    // 1
Math.ceil(4);      // 4
Math.ceil(7.004);  // 8
Math.ceil(-0.95);  // -0
Math.ceil(-4);     // -4
Math.ceil(-7.004); // -7

document.createElement(nodename)

参数：元素节点的名称
返回：新建的元素节点

document.innerHTML = Node

向元素节点中插入节点。注意HTML要大写。
与document.innerText的区别：
1、innerHTML指的是从对象的起始位置到终止位置的全部内容，包括Html标签
2、innerText 指的是从起始位置到终止位置的内容，但它去除html标签。
同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome浏览器支持的，Firefox浏览器不支持。所以尽量多用innerHTML。少用innerText

transform 不同浏览器厂商前缀，js驼峰写法

chrome:webkitTransform => css: -webkit-transform
o:OTransform => css:-o-transform
ms:msTransform => css:-ms-transform
Moz:MozTransform => css:-Moz-transform

常见获取dom对象的方法总结和区别(document.getElementById...)

document.getElementById、document.getElementsByTagName、document.getElementsByClassName、querySelector()、querySelectorAll()等选择器的使用和区别

ES6-对象的扩展-Object.keys()，Object.values()，Object.entries()

https://blog.csdn.net/ww43043...

JavaScript indexOf() 方法

stringObject.indexOf(searchvalue,fromindex)方法可返回某个指定的字符串值在字符串中首次出现的位置。
searchvalue:检索的字符串;必需
fromindex：可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。
注意：如果要检索的字符串值没有出现，则该方法返回 -1。

Object.create()(来自MDN)

Object.create()创建一个新对象，使用现有的对象来提供新创建对象的__proto__.

const person = {
    ishuman:false,
    printIntroduction:function(){
        console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
    }
};
const me = Object.create(person);
me.name = "Mattew"; // "name" 是一个建立在me上的属性，而不是在person上，说明通过Object.create创建的对象是一个新的对象。
me.isHuman = true; // 继承来的属性可以被重写
me.printIntroduction(); // 继承的函数也可以调用
// expected output: "My name is Matthew. Am I human? true"

在这里，我们可以通过在浏览器控制台打印出me对象。可以得到如下结果
Alt text .
由此可以理解描述中写的使用现对象来提供新创建对象的__proto__这一句话的意思。
1、通过Object.create()实现类式继承(继承对象已经原型对象属性)

// Shape - 父类(superclass)
function Shape() {
  console.log(this.x, this.y)
}

// 父类的方法
Shape.prototype.move = function(x, y) {
  console.log(this)
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};
// Rectangle - 子类(subclass)
function Rectangle() {
  Shape.call(this); // 调用父类的构造函数。继承分类的对象属性
}
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
var rect = new Rectangle();
console.log(rect)

2、使用 Object.create 的 propertyObject参数

var o;

//创建 一个原型为null的空对象
o = Object.create(null);

o = {};

//以字面量方式的创建的空对象就相当于:
o = Object.create(Object.prototype);

o = Object.create(Object.prototype, {
  // foo会成为所创建对象的数据属性
  foo: {
    writable:true,  // 当且仅当该属性的 writable 为 true 时，该属性才能被赋值运算符改变。默认为 false。
    configure:true, // 当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，也能够被删除。默认为 false。
    value:"hello"   // 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
  },
  // bar会成为所创建对象的访问器属性
  bar: {
    configurable:false,
    get:function() { return 10 },
    set:function(value) {
      console.log("Setting `o.bar` to", value)
    }
  }
})
function Constructor(){}
o = new Constructor();
//上面一句话就相当于
o = Object.create(Constructor.prototype);
// 当然，如果在Contructor函数中有一些初始化代码，Object.create 不能执行那些代码

// 创建一个以另一个空对象为原型，且拥有一个属性p的对象
o = Object.create({}, { p:{ value: 42 }})

// 省略了的属性特性默认为false, 所以属性p是不可写，不可枚举，不可配置的
o.p = 24
o.p //42

o.q = 12

for(var prop in o){
  console.log(prop)
}
// "q"，只有q 可以枚举
delete o.p
// false

//创建一个可写的，可枚举的，可配置的属性p
o2 = Object.create({}, {
  p:{
    value:42,
    writable:true,
    enumerable:true,      //可枚举属性
    configurable:true
  }
})

call 转换上下文。

看一个实例

//example
function Animal(name) {
    console.log(this)
    this.name = name;
    this.showName = function() {
    }
}

function Cat(name) {
    Animal.call(this, name);
}
var cat = new Cat("Black Cat");
var amal = new Animal();

控制台结果：
Alt text
由控制台结果可以看到，通过call。Animal 方法中的 this(未new 之前，就是 window) 被转换成Cat了。同时Cat还能继承 Animal的方法和属性

prototype、[[prototype]]、prototype的区别与联系

1.每个函数都有一个prototype属性,其所指向的对象带有constructor属性，这一属性指向函数自身。注意，prototype是函数本身就带有的属性，跟是不是构造函数，有没有实例化没有任何关系。那么在构造函数实例化(new)之后到底发生了什么？

function Test(){}     //定义一个构造函数
var obj = {};
obj.__proto__ = Test.prototype;     //obj的原型指向构造函数的原型
Test.call(obj);                     // 通过call，让obj继承构造函数的属性

这样就实现了一个实例化的过程。可以在控制台打印出obj。上述代码等价于var obj = new Test()
2.[[prototype]]是隐藏属性一般来说就是 __proto__，但由于是隐藏的原型对象，一般浏览器会给每一个对象提供.__proto__这一属性，实际上就是[[prototype]]属性。
3.__proto__ 指向对象的原型对象。
4.构造函数的_proto_指向构造函数的prototype属性。
5.一般来说，object.__proto__ == constructor.prototype;但是对于Object.create()构造的对象来说这个不适用，因为object.create()构造出来的对象是作为新对象的__proto__。

var person1 = {
    name: 'cyl',
    sex: 'male'
};
var person2 = Object.create(person1);
console.log(person2)
console.log(person1)

alt text
由控制台结果可以看出通过字面量构建对象和通过Object.create()构建的对象的区别。