葵花宝典

字符串

字符串方法

一、replace() 字符替换**

str.replace(要替换的字符，替换成的字符)

1、第一个参数可以是字符或正则，不全局匹配则只替换第一个符合条件的字符

2、第二个参数可以是字符或函数，每个匹配的字符都会调用该函数，函数返回值作为替换文本。

​ 该函数的第一个参数是匹配模式的字符串。接下来的参数是与模式中的子表达式匹配的字符串，可以有 0 个或多个这样的参数。接下来的参数是一个整数，声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。

字符	替换文本
$1、$2、…、$99	与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。
$&	与 regexp 相匹配的子串。
$`	位于匹配子串左侧的文本。
$’	位于匹配子串右侧的文本。
$$	直接量符号。

//将把字符串中所有单词的首字母都转换为大写
name = 'aaa bbb ccc';
uw=name.replace(/\b\w+\b/g, function(word){
  return word.substring(0,1).toUpperCase()+word.substring(1);}
  );
  
  //本例提供的代码来确保匹配字符串大写字符的正确
  text = "javascript Tutorial";
text.replace(/javascript/i, "JavaScript");

//我们将把 "Doe, John" 转换为 "John Doe" 的形式
name = "Doe, John";
name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");

二、substr( )与substring( ) 截取字符串

​ 1、substr(start, length): 可以传负数，负数从字符串的尾部开始算起的位置

2、substring(start, end): 结束索引的值不会被选中

相同点：索引从0开始，二者传一个参数的时候，功能都一样

三、charAt( ) 返回指定索引处的字符。

​ 索引范围为从 0 到 length() - 1。

数组

数组方法

一、includes() 数组是否包含一个值

arr.includes(value[, 索引])

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

1、第一个参数必填，要查找的值。区分大小写

2、第二个参数为开始查找的索引。如果为负值，则从arr.length + 索引处开始查找。大于等于数组的长度，则会返回 false，且该数组不会被搜索

URI

1、 encodeURIComponent() 函数 对URI编码

​ 2、decodeURIComponent() 函数 对URI解码

<script type="text/javascript">

var test1="http://www.w3school.com.cn/My first/"

document.write(encodeURIComponent(test1)+ "
")
document.write(decodeURIComponent(test1))

</script>

输出：

http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F
http://www.w3school.com.cn/My first/

对象

对象方法

一、判断对象中是否有某属性（三种 ）

1、点( . )或者方括号( [ ] )

通过点或者方括号可以获取对象的属性值，如果对象上不存在该属性，则会返回undefined。当然，这里的“不存在”指的是对象自身和原型链上都不存在，如果原型链有该属性，则会返回原型链上的属性值。

// 创建对象
let test = {name : 'lei'}
// 获取对象的自身的属性
test.name            //"lei"
test["name"]         //"lei"

// 获取不存在的属性
test.age             //undefined

// 获取原型上的属性
test["toString"]     //toString() { [native code] }

// 新增一个值为undefined的属性
test.un = undefined

test.un              //undefined    不能用在属性值存在，但可能为 undefined的场景

所以，我们可以根据 Obj.x !== undefined 的返回值 来判断Obj是否有x属性。

这种方式很简单方便，局限性就是：不能用在x的属性值存在，但可能为 undefined的场景。 in运算符可以解决这个问题

2、 in 运算符

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

'name' in test        //true
'un' in test             //true
'toString' in test    //true
'age' in test           //false

示例中可以看出，值为undefined的属性也可正常判断。

这种方式的局限性就是无法区分自身和原型链上的属性，在只需要判断自身属性是否存在时，这种方式就不适用了。这时需要hasOwnProperty()

3、hasOwnProperty()

test.hasOwnProperty('name')        //true   自身属性
test.hasOwnProperty('age')           //false  不存在
test.hasOwnProperty('toString')    //false  原型链上属性

可以看到，只有自身存在该属性时，才会返回true。适用于只判断自身属性的场景。

总结

三种方式各有优缺点，不同的场景使用不同的方式，有时还需要结合使用，比如遍历自身属性的时候，就会把 for ··· in ···和 hasOwnProperty()结合使用。

二、遍历对象(7种)

1. for…in…

for…in…循环会遍历对象自身的和继承的可枚举属性（不含Symbol属性）。

// demo2
function SuperType() {
    this.superVal = 'super';
};
SuperType.prototype.saySuperVal = function () {
    console.log(this.superVal);
};

function SubType() {
    this.subValOne = 'subOne';
    this.subValTwo = 'subTwo';
};
SubType.prototype = new SuperType();

SubType.prototype.saySubValOne = function () {
    console.log(this.subValOne);
};
var obj = new SubType();
Object.defineProperty(obj, 'notEnum', {
    value: 'notEnum',
    enumerable: false
});
for (let key in obj) {
    console.log(`${key}:${obj[key]}`);
}

// subValOne:subOne
// subValTwo:subTwo
// superVal:super
/* saySubValOne:function () {
     console.log(this.subValOne);
}*/
/* saySuperVal:function () {
    console.log(this.superVal);
}*/

2.Object.entries()

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

// 接demo2
console.log(Object.entries(obj));  // [["subValOne", "subOne"], ["subValTwo", "subTwo"]]

3. Object.keys()

Object.keys()方法接收一个对象为参数，返回一个数组，包含该对象自身的（不含继承的）可枚举属性的key值（不含Symbol属性）。

// 接demo2
console.log(Object.keys(obj));  // ["subValOne", "subValTwo"]

4. Object.values()

Object.values()方法接收一个对象为参数，返回一个数组，包含该对象自身的（不含继承的）可枚举属性得value值（不含Symbol属性）。

// 接demo2
console.log(Object.values(obj));  // ["subOne", "subTwo"]

5. Object.getOwnPropertyNames()

Object.getOwnPropertyNames()方法接收一个对象为参数，返回一个数组，包含该对象自身的所有属性（不含Symbol属性，但是包含不可枚举属性）

// 接demo2
Object.getOwnPropertyNames(obj);  // ["subVal", "notEnum"]

6. Object.getOwnPropertySymbols( )

Object.getOwnPropertySymbols()方法接收一个对象为参数，返回一个数组，包含该对象自身的所有Symbol属性。

7. Reflect.ownKeys()

Reflect.ownKeys()方法接收一个对象为参数，返回一个数组，包含该对象自身的所有属性（包含Symbol和不可枚举属性）。

注：7，8涉及到ES6新增类型Symbol，我会在ES6知识中详细讲解。