入门前端-《JavaScript 语言入门教程-字符串和对象》

梦里梦外; 2022-11-03 15:25 180阅读 0赞

# 字符串 #

## length 属性 ##

> length属性返回字符串的长度，该属性也是无法改变的

var s = 'hello';
    s.length // 5
    
    s.length = 3;
    s.length // 5
    
    s.length = 7;
    s.length // 5

## 字符集 ##

> JavaScript 使用 Unicode 字符集。JavaScript 引擎内部，所有字符都用 Unicode 表示。

JavaScript 不仅以 Unicode 储存字符，还允许直接在程序中使用 Unicode 码点表示字符，即将字符写成\\uxxxx的形式，其中xxxx代表该字符的 Unicode 码点。比如，\\u00A9代表版权符号。

var s = '\u00A9';
    s // "©"

## Base64 转码 ##

> 有时，文本里面包含一些不可打印的符号，比如 ASCII 码0到31的符号都无法打印出来，这时可以使用 Base64 编码，将它们转成可以打印的字符。另一个场景是，有时需要以文本格式传递二进制数据，那么也可以使用 Base64 编码。

所谓 Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符。使用它的主要目的，不是为了加密，而是为了不出现特殊字符，简化程序的处理。

JavaScript 原生提供两个 Base64 相关的方法。

*  btoa()：任意值转为 Base64 编码
 *  atob()：Base64 编码转为原来的值

var string = 'Hello World!';
    btoa(string) // "SGVsbG8gV29ybGQh"
    atob('SGVsbG8gV29ybGQh') // "Hello World!"

注意，这两个方法不适合非 ASCII 码的字符，会报错。

btoa('你好') // 报错

要将非 ASCII 码字符转为 Base64 编码，必须中间插入一个转码环节，再使用这两个方法。

function b64Encode(str) { 
      return btoa(encodeURIComponent(str));
    }
    
    function b64Decode(str) { 
      return decodeURIComponent(atob(str));
    }
    
    b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
    b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

# 对象 #

> 什么是对象？简单说，对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。

var obj = { 
      foo: 'Hello',
      bar: 'World'
    };

## 表达式还是语句？ ##

> 对象采用大括号表示，这导致了一个问题：如果行首是一个大括号，它到底是表达式还是语句？

{  foo: 123 }

JavaScript 引擎读到上面这行代码，会发现可能有两种含义。第一种可能是，这是一个表达式，表示一个包含foo属性的对象；第二种可能是，这是一个语句，表示一个代码区块，里面有一个标签foo，指向表达式123。

为了避免这种歧义，JavaScript 引擎的做法是，如果遇到这种情况，无法确定是对象还是代码块，一律解释为代码块。

{  console.log(123) } // 123

如果要解释为对象，最好在大括号前加上圆括号。因为圆括号的里面，只能是表达式，所以确保大括号只能解释为对象。

({  foo: 123 }) // 正确
    ({  console.log(123) }) // 报错

这种差异在eval语句（作用是对字符串求值）中反映得最明显。

eval('{foo: 123}') // 123
    eval('({foo: 123})') // {foo: 123}

## 属性的查看 ##

查看一个对象本身的所有属性，可以使用Object.keys方法。

var obj = { 
      key1: 1,
      key2: 2
    };
    
    Object.keys(obj);
    // ['key1', 'key2']

## 属性的删除：delete 命令 ##

delete命令用于删除对象的属性，删除成功后返回true。

var obj = {  p: 1 };
    Object.keys(obj) // ["p"]
    
    delete obj.p // true
    obj.p // undefined
    Object.keys(obj) // []

删除一个不存在的属性，delete不报错，而且返回true。

var obj = { };
    delete obj.p // true

只有一种情况，delete命令会返回false，那就是该属性存在，且不得删除。

var obj = Object.defineProperty({ }, 'p', { 
      value: 123,
      configurable: false
    });
    
    obj.p // 123
    delete obj.p // false

## 属性是否存在：in 运算符 ##

> in运算符用于检查对象是否包含某个属性（注意，检查的是键名，不是键值），如果包含就返回true，否则返回false。它的左边是一个字符串，表示属性名，右边是一个对象。

var obj = {  p: 1 };
    'p' in obj // true
    'toString' in obj // true

in运算符的一个问题是，它不能识别哪些属性是对象自身的，哪些属性是继承的。就像上面代码中，对象obj本身并没有toString属性，但是in运算符会返回true，因为这个属性是继承的。

这时，可以使用对象的hasOwnProperty方法判断一下，是否为对象自身的属性。

var obj = { };
    if ('toString' in obj) { 
      console.log(obj.hasOwnProperty('toString')) // false
    }

## with 语句 ##

with语句的格式如下：

with (对象) { 
      语句;
    }

它的作用是操作同一个对象的多个属性时，提供一些书写的方便。

// 例一
    var obj = { 
      p1: 1,
      p2: 2,
    };
    with (obj) { 
      p1 = 4;
      p2 = 5;
    }
    // 等同于
    obj.p1 = 4;
    obj.p2 = 5;
    
    // 例二
    with (document.links[0]){ 
      console.log(href);
      console.log(title);
      console.log(style);
    }
    // 等同于
    console.log(document.links[0].href);
    console.log(document.links[0].title);
    console.log(document.links[0].style);

end